From d647d885029449e8cb218e7d356fd0da1e7c74c1 Mon Sep 17 00:00:00 2001
From: Abhinav Raut <abhinav.raut@zerodha.com>
Date: Sun, 25 Aug 2024 18:29:04 +0530
Subject: [PATCH] feat: get statuses / priorities from their respective tables
 - adds schema.sql - format entire codebase

---
 cmd/conversation.go                           |  25 +-
 cmd/handlers.go                               |   6 +
 config.sample.toml                            |  72 ++
 frontend/src/App.vue                          |  88 +-
 frontend/src/api/index.js                     | 273 ++++---
 frontend/src/components/NavBar.vue            |  80 +-
 .../src/components/account/AccountPage.vue    |   4 +-
 .../src/components/account/ProfileEdit.vue    | 202 ++---
 frontend/src/components/admin/AdminPage.vue   |  20 +-
 .../components/admin/automation/ActionBox.vue | 136 ++--
 .../admin/automation/AutomationPage.vue       |   2 +-
 .../admin/automation/AutomationTabs.vue       |  45 +-
 .../admin/automation/CreateOrEditRule.vue     | 319 ++++----
 .../components/admin/automation/RuleBox.vue   | 284 +++----
 .../components/admin/automation/RuleList.vue  | 102 +--
 .../automation/TabConversationCreation.vue    |  38 +-
 .../automation/TabConversationUpdate.vue      |  38 +-
 .../admin/automation/TabTimeTrigger.vue       |  39 +-
 .../src/components/admin/common/MenuCard.vue  |   6 +-
 .../components/admin/common/PageHeader.vue    |   4 +-
 .../admin/conversation/ConversationPage.vue   |  72 +-
 .../conversation/priority/PriorityPage.vue    |   7 +-
 .../admin/conversation/status/StatusPage.vue  |   7 +-
 .../admin/conversation/tags/TagsPage.vue      |  14 +-
 .../conversation/tags/dataTableColumns.js     |  60 +-
 .../conversation/tags/dataTableDropdown.vue   | 167 ++--
 .../admin/conversation/tags/formSchema.js     |  19 +-
 .../components/admin/general/GeneralPage.vue  |  23 +-
 .../admin/general/GeneralSettingForm.vue      | 239 +++---
 .../components/admin/general/formSchema.js    |  71 +-
 .../src/components/admin/inbox/EditInbox.vue  |   2 +-
 .../components/admin/inbox/EmailInboxForm.vue |  99 +--
 .../admin/inbox/InboxDataTableDropDown.vue    |   4 +-
 .../src/components/admin/inbox/InboxPage.vue  |   2 +-
 .../src/components/admin/inbox/NewInbox.vue   |  68 +-
 .../admin/inbox/emailChannelFormSchema.js     |  13 +-
 .../src/components/admin/oidc/AddEditOIDC.vue |  55 +-
 .../src/components/admin/oidc/OIDCForm.vue    | 252 +++---
 .../src/components/admin/oidc/OIDCPage.vue    |   8 +-
 .../components/admin/oidc/dataTableColumns.js | 106 +--
 .../admin/oidc/dataTableDropdown.vue          |  60 +-
 .../src/components/admin/oidc/formSchema.js   |  43 +-
 .../src/components/admin/team/TeamPage.vue    |  14 +-
 .../components/admin/team/roles/EditRole.vue  |  36 +-
 .../components/admin/team/roles/NewRole.vue   |  24 +-
 .../components/admin/team/roles/RoleForm.vue  | 228 +++---
 .../components/admin/team/roles/RolesPage.vue |  50 +-
 .../components/admin/team/roles/formSchema.js |  32 +-
 .../admin/team/teams/AddTeamForm.vue          |  36 +-
 .../components/admin/team/teams/TeamForm.vue  |   4 +-
 .../admin/team/teams/TeamsDataTableColumns.js |   6 +-
 .../components/admin/team/teams/TeamsPage.vue |   3 +-
 .../components/admin/team/users/UserForm.vue  |  37 +-
 .../admin/team/users/UsersDataTableColumns.js |   6 +-
 .../admin/team/users/userFormSchema.js        |   6 +-
 .../admin/templates/AddEditTemplate.vue       |  50 +-
 .../admin/templates/TemplateForm.vue          | 122 +--
 .../admin/templates/TemplatesPage.vue         |  29 +-
 .../admin/templates/dataTableDropdown.vue     |  48 +-
 .../components/admin/templates/formSchema.js  |  16 +-
 .../components/admin/uploads/LocalFsForm.vue  | 142 ++--
 .../src/components/admin/uploads/S3Form.vue   | 298 +++----
 .../components/admin/uploads/UploadsPage.vue  |  35 +-
 .../components/admin/uploads/formSchema.js    |  87 +-
 .../attachment/AttachmentsPreview.vue         |  76 +-
 .../attachment/FileAttachmentPreview.vue      |  47 +-
 .../attachment/ImageAttachmentPreview.vue     |  45 +-
 .../attachment/MessageAttachmentPreview.vue   |  32 +-
 frontend/src/components/common/PageHeader.vue |  36 +-
 frontend/src/components/common/SidebarNav.vue |  50 +-
 ...{Conversation.vue => ConversationPage.vue} |  31 +-
 .../conversation/ConversationSideBar.vue      | 438 ++++++----
 .../src/components/conversation/Editor.vue    | 168 ++--
 .../src/components/conversation/ReplyBox.vue  | 322 ++++----
 .../conversation/ReplyBoxBottomMenuBar.vue    | 101 ++-
 .../ConversationEmptyList.vue                 |  20 +-
 .../conversationlist/ConversationList.vue     | 222 +++--
 .../conversationlist/ConversationListItem.vue |  93 ++-
 .../dashboard/agent/DashboardBarChart.vue     |  23 +-
 .../dashboard/agent/DashboardCard.vue         |  50 +-
 .../dashboard/agent/DashboardLineChart.vue    |  37 +-
 .../message/ActivityMessageBubble.vue         |  38 +-
 .../components/message/AgentMessageBubble.vue | 165 ++--
 .../message/ContactMessageBubble.vue          |  89 +-
 .../src/components/message/MessageList.vue    | 103 +--
 .../src/components/ui/accordion/Accordion.vue |  10 +-
 .../ui/accordion/AccordionContent.vue         |  16 +-
 .../components/ui/accordion/AccordionItem.vue |  18 +-
 .../ui/accordion/AccordionTrigger.vue         |  18 +-
 frontend/src/components/ui/accordion/index.js |   8 +-
 .../ui/alert-dialog/AlertDialog.vue           |  10 +-
 .../ui/alert-dialog/AlertDialogAction.vue     |  23 +-
 .../ui/alert-dialog/AlertDialogCancel.vue     |  22 +-
 .../ui/alert-dialog/AlertDialogContent.vue    |  36 +-
 .../alert-dialog/AlertDialogDescription.vue   |  16 +-
 .../ui/alert-dialog/AlertDialogFooter.vue     |  15 +-
 .../ui/alert-dialog/AlertDialogHeader.vue     |  10 +-
 .../ui/alert-dialog/AlertDialogTitle.vue      |  21 +-
 .../ui/alert-dialog/AlertDialogTrigger.vue    |   6 +-
 .../src/components/ui/alert-dialog/index.js   |  18 +-
 frontend/src/components/ui/alert/Alert.vue    |   8 +-
 .../components/ui/alert/AlertDescription.vue  |   6 +-
 .../src/components/ui/alert/AlertTitle.vue    |   6 +-
 frontend/src/components/ui/alert/index.js     |  22 +-
 .../src/components/ui/auto-form/AutoForm.vue  |  87 +-
 .../components/ui/auto-form/AutoFormField.vue |  23 +-
 .../ui/auto-form/AutoFormFieldArray.vue       |  61 +-
 .../ui/auto-form/AutoFormFieldBoolean.vue     |  22 +-
 .../ui/auto-form/AutoFormFieldDate.vue        |  45 +-
 .../ui/auto-form/AutoFormFieldEnum.vue        |  36 +-
 .../ui/auto-form/AutoFormFieldFile.vue        |  48 +-
 .../ui/auto-form/AutoFormFieldInput.vue       |  22 +-
 .../ui/auto-form/AutoFormFieldNumber.vue      |  18 +-
 .../ui/auto-form/AutoFormFieldObject.vue      |  67 +-
 .../components/ui/auto-form/AutoFormLabel.vue |   6 +-
 .../src/components/ui/auto-form/constant.js   |  38 +-
 .../components/ui/auto-form/dependencies.js   | 105 ++-
 frontend/src/components/ui/auto-form/index.js |  24 +-
 .../src/components/ui/auto-form/interface.js  |  12 +-
 frontend/src/components/ui/auto-form/utils.js |  91 +--
 frontend/src/components/ui/avatar/Avatar.vue  |  12 +-
 .../components/ui/avatar/AvatarFallback.vue   |   6 +-
 .../src/components/ui/avatar/AvatarImage.vue  |   6 +-
 frontend/src/components/ui/avatar/index.js    |  26 +-
 frontend/src/components/ui/badge/Badge.vue    |   8 +-
 frontend/src/components/ui/badge/index.js     |  23 +-
 .../components/ui/breadcrumb/Breadcrumb.vue   |   4 +-
 .../ui/breadcrumb/BreadcrumbEllipsis.vue      |   8 +-
 .../ui/breadcrumb/BreadcrumbItem.vue          |   6 +-
 .../ui/breadcrumb/BreadcrumbLink.vue          |  10 +-
 .../ui/breadcrumb/BreadcrumbList.vue          |   8 +-
 .../ui/breadcrumb/BreadcrumbPage.vue          |   6 +-
 .../ui/breadcrumb/BreadcrumbSeparator.vue     |  14 +-
 .../src/components/ui/breadcrumb/Custom.vue   |  46 +-
 .../src/components/ui/breadcrumb/index.js     |  16 +-
 frontend/src/components/ui/button/Button.vue  |  25 +-
 frontend/src/components/ui/button/index.js    |  39 +-
 .../src/components/ui/calendar/Calendar.vue   |  36 +-
 .../components/ui/calendar/CalendarCell.vue   |  20 +-
 .../ui/calendar/CalendarCellTrigger.vue       |  22 +-
 .../components/ui/calendar/CalendarGrid.vue   |  18 +-
 .../ui/calendar/CalendarGridBody.vue          |   6 +-
 .../ui/calendar/CalendarGridHead.vue          |   6 +-
 .../ui/calendar/CalendarGridRow.vue           |  18 +-
 .../ui/calendar/CalendarHeadCell.vue          |  25 +-
 .../components/ui/calendar/CalendarHeader.vue |  22 +-
 .../ui/calendar/CalendarHeading.vue           |  18 +-
 .../ui/calendar/CalendarNextButton.vue        |  24 +-
 .../ui/calendar/CalendarPrevButton.vue        |  24 +-
 frontend/src/components/ui/calendar/index.js  |  24 +-
 frontend/src/components/ui/card/Card.vue      |  12 +-
 .../src/components/ui/card/CardContent.vue    |   6 +-
 .../components/ui/card/CardDescription.vue    |   6 +-
 .../src/components/ui/card/CardFooter.vue     |   6 +-
 .../src/components/ui/card/CardHeader.vue     |   6 +-
 frontend/src/components/ui/card/CardTitle.vue |   6 +-
 frontend/src/components/ui/card/index.js      |  12 +-
 .../src/components/ui/chart-bar/BarChart.vue  |  79 +-
 frontend/src/components/ui/chart-bar/index.js |   2 +-
 .../components/ui/chart-donut/DonutChart.vue  |  94 ++-
 .../src/components/ui/chart-donut/index.js    |   2 +-
 .../components/ui/chart-line/LineChart.vue    |  57 +-
 .../src/components/ui/chart-line/index.js     |   2 +-
 .../components/ui/chart/ChartCrosshair.vue    |  40 +-
 .../src/components/ui/chart/ChartLegend.vue   |  52 +-
 .../ui/chart/ChartSingleTooltip.vue           |  73 +-
 .../src/components/ui/chart/ChartTooltip.vue  |   6 +-
 frontend/src/components/ui/chart/index.js     |  27 +-
 frontend/src/components/ui/chart/interface.js |   2 +-
 .../src/components/ui/checkbox/Checkbox.vue   |  32 +-
 frontend/src/components/ui/checkbox/index.js  |   2 +-
 .../src/components/ui/command/Command.vue     |  26 +-
 .../components/ui/command/CommandDialog.vue   |  14 +-
 .../components/ui/command/CommandEmpty.vue    |  21 +-
 .../components/ui/command/CommandGroup.vue    |  21 +-
 .../components/ui/command/CommandInput.vue    |  24 +-
 .../src/components/ui/command/CommandItem.vue |  20 +-
 .../src/components/ui/command/CommandList.vue |  28 +-
 .../ui/command/CommandSeparator.vue           |  21 +-
 .../components/ui/command/CommandShortcut.vue |  12 +-
 frontend/src/components/ui/command/index.js   |  18 +-
 frontend/src/components/ui/dialog/Dialog.vue  |  10 +-
 .../src/components/ui/dialog/DialogClose.vue  |   6 +-
 .../components/ui/dialog/DialogContent.vue    |  38 +-
 .../ui/dialog/DialogDescription.vue           |  18 +-
 .../src/components/ui/dialog/DialogFooter.vue |  15 +-
 .../src/components/ui/dialog/DialogHeader.vue |  10 +-
 .../ui/dialog/DialogScrollContent.vue         |  49 +-
 .../src/components/ui/dialog/DialogTitle.vue  |  22 +-
 .../components/ui/dialog/DialogTrigger.vue    |   6 +-
 frontend/src/components/ui/dialog/index.js    |  18 +-
 .../ui/dropdown-menu/DropdownMenu.vue         |  10 +-
 .../DropdownMenuCheckboxItem.vue              |  26 +-
 .../ui/dropdown-menu/DropdownMenuContent.vue  |  36 +-
 .../ui/dropdown-menu/DropdownMenuGroup.vue    |   6 +-
 .../ui/dropdown-menu/DropdownMenuItem.vue     |  20 +-
 .../ui/dropdown-menu/DropdownMenuLabel.vue    |  22 +-
 .../dropdown-menu/DropdownMenuRadioGroup.vue  |  10 +-
 .../dropdown-menu/DropdownMenuRadioItem.vue   |  28 +-
 .../dropdown-menu/DropdownMenuSeparator.vue   |  16 +-
 .../ui/dropdown-menu/DropdownMenuShortcut.vue |   6 +-
 .../ui/dropdown-menu/DropdownMenuSub.vue      |  10 +-
 .../dropdown-menu/DropdownMenuSubContent.vue  |  36 +-
 .../dropdown-menu/DropdownMenuSubTrigger.vue  |  22 +-
 .../ui/dropdown-menu/DropdownMenuTrigger.vue  |   8 +-
 .../src/components/ui/dropdown-menu/index.js  |  30 +-
 frontend/src/components/ui/error/Error.vue    |  12 +-
 frontend/src/components/ui/error/index.js     |   2 +-
 .../src/components/ui/form/FormControl.vue    |  10 +-
 .../components/ui/form/FormDescription.vue    |  15 +-
 frontend/src/components/ui/form/FormItem.vue  |  16 +-
 frontend/src/components/ui/form/FormLabel.vue |  17 +-
 .../src/components/ui/form/FormMessage.vue    |   8 +-
 frontend/src/components/ui/form/index.js      |  18 +-
 .../src/components/ui/form/injectionKeys.js   |   2 +-
 .../src/components/ui/form/useFormField.js    |  27 +-
 frontend/src/components/ui/input/Input.vue    |  18 +-
 frontend/src/components/ui/input/index.js     |   2 +-
 frontend/src/components/ui/label/Label.vue    |  18 +-
 frontend/src/components/ui/label/index.js     |   2 +-
 frontend/src/components/ui/loader/Loader.vue  |   5 +-
 frontend/src/components/ui/loader/index.js    |   2 +-
 .../src/components/ui/popover/Popover.vue     |  10 +-
 .../components/ui/popover/PopoverContent.vue  |  40 +-
 .../components/ui/popover/PopoverTrigger.vue  |   6 +-
 frontend/src/components/ui/popover/index.js   |   8 +-
 .../components/ui/radio-group/RadioGroup.vue  |  20 +-
 .../ui/radio-group/RadioGroupItem.vue         |  33 +-
 .../src/components/ui/radio-group/index.js    |   4 +-
 .../ui/resizable/ResizableHandle.vue          |  26 +-
 .../ui/resizable/ResizablePanelGroup.vue      |  27 +-
 frontend/src/components/ui/resizable/index.js |   6 +-
 .../components/ui/scroll-area/ScrollArea.vue  |  27 +-
 .../components/ui/scroll-area/ScrollBar.vue   |  24 +-
 .../src/components/ui/scroll-area/index.js    |   4 +-
 frontend/src/components/ui/select/Select.vue  |  10 +-
 .../components/ui/select/SelectContent.vue    |  37 +-
 .../src/components/ui/select/SelectGroup.vue  |  16 +-
 .../components/ui/select/SelectItemText.vue   |   6 +-
 .../src/components/ui/select/SelectLabel.vue  |   8 +-
 .../ui/select/SelectScrollDownButton.vue      |  24 +-
 .../ui/select/SelectScrollUpButton.vue        |  24 +-
 .../components/ui/select/SelectSeparator.vue  |  21 +-
 .../src/components/ui/select/SelectTag.vue    | 163 ++--
 .../components/ui/select/SelectTrigger.vue    |  20 +-
 .../src/components/ui/select/SelectValue.vue  |   6 +-
 frontend/src/components/ui/select/index.js    |  24 +-
 .../src/components/ui/separator/Separator.vue |  16 +-
 frontend/src/components/ui/separator/index.js |   2 +-
 frontend/src/components/ui/sheet/Sheet.vue    |  10 +-
 .../src/components/ui/sheet/SheetClose.vue    |   6 +-
 .../src/components/ui/sheet/SheetContent.vue  |  42 +-
 .../components/ui/sheet/SheetDescription.vue  |  16 +-
 .../src/components/ui/sheet/SheetFooter.vue   |  15 +-
 .../src/components/ui/sheet/SheetHeader.vue   |  10 +-
 .../src/components/ui/sheet/SheetTitle.vue    |  16 +-
 .../src/components/ui/sheet/SheetTrigger.vue  |   6 +-
 frontend/src/components/ui/sheet/index.js     |  38 +-
 .../src/components/ui/skeleton/Skeleton.vue   |   6 +-
 frontend/src/components/ui/skeleton/index.js  |   2 +-
 .../src/components/ui/spinner/Spinner.vue     |  47 +-
 frontend/src/components/ui/spinner/index.js   |   2 +-
 .../src/components/ui/stepper/Stepper.vue     |  26 +-
 .../ui/stepper/StepperDescription.vue         |  18 +-
 .../ui/stepper/StepperIndicator.vue           |  20 +-
 .../src/components/ui/stepper/StepperItem.vue |  25 +-
 .../ui/stepper/StepperSeparator.vue           |  20 +-
 .../components/ui/stepper/StepperTitle.vue    |  18 +-
 .../components/ui/stepper/StepperTrigger.vue  |  25 +-
 frontend/src/components/ui/stepper/index.js   |  14 +-
 frontend/src/components/ui/switch/Switch.vue  |  24 +-
 frontend/src/components/ui/switch/index.js    |   2 +-
 frontend/src/components/ui/table/Table.vue    |   6 +-
 .../src/components/ui/table/TableBody.vue     |   6 +-
 .../src/components/ui/table/TableCaption.vue  |   6 +-
 .../src/components/ui/table/TableCell.vue     |   8 +-
 .../src/components/ui/table/TableEmpty.vue    |  26 +-
 .../src/components/ui/table/TableFooter.vue   |  12 +-
 .../src/components/ui/table/TableHead.vue     |   8 +-
 .../src/components/ui/table/TableHeader.vue   |   6 +-
 frontend/src/components/ui/table/TableRow.vue |  11 +-
 frontend/src/components/ui/table/index.js     |  18 +-
 frontend/src/components/ui/tabs/Tabs.vue      |  10 +-
 .../src/components/ui/tabs/TabsContent.vue    |  16 +-
 frontend/src/components/ui/tabs/TabsList.vue  |  16 +-
 .../src/components/ui/tabs/TabsTrigger.vue    |  18 +-
 frontend/src/components/ui/tabs/index.js      |   8 +-
 .../components/ui/tags-input/TagsInput.vue    |  20 +-
 .../ui/tags-input/TagsInputInput.vue          |  25 +-
 .../ui/tags-input/TagsInputItem.vue           |  18 +-
 .../ui/tags-input/TagsInputItemDelete.vue     |  20 +-
 .../ui/tags-input/TagsInputItemText.vue       |  18 +-
 .../src/components/ui/tags-input/index.js     |  10 +-
 .../src/components/ui/textarea/Textarea.vue   |  18 +-
 frontend/src/components/ui/textarea/index.js  |   2 +-
 .../src/components/ui/toast/ToastAction.vue   |  10 +-
 .../src/components/ui/toast/ToastClose.vue    |  18 +-
 .../src/components/ui/toast/ToastProvider.vue |   2 +-
 .../src/components/ui/toast/ToastTitle.vue    |   5 +-
 .../src/components/ui/toast/ToastViewport.vue |  10 +-
 frontend/src/components/ui/toast/index.ts     |  10 +-
 frontend/src/components/ui/toast/use-toast.ts |  70 +-
 .../ui/toggle-group/ToggleGroup.vue           |  26 +-
 .../ui/toggle-group/ToggleGroupItem.vue       |  26 +-
 .../src/components/ui/toggle-group/index.js   |   4 +-
 frontend/src/components/ui/toggle/Toggle.vue  |  29 +-
 frontend/src/components/ui/toggle/index.js    |  28 +-
 .../src/components/ui/tooltip/Tooltip.vue     |  10 +-
 .../components/ui/tooltip/TooltipContent.vue  |  24 +-
 .../components/ui/tooltip/TooltipProvider.vue |   6 +-
 .../components/ui/tooltip/TooltipTrigger.vue  |   6 +-
 frontend/src/components/ui/tooltip/index.js   |   8 +-
 frontend/src/composables/useEmitter.js        |   8 +-
 frontend/src/composables/useTemporaryClass.js |  42 +-
 frontend/src/constants/conversation.js        |  21 +-
 frontend/src/lib/utils.js                     |   6 +-
 frontend/src/main.js                          |  86 +-
 frontend/src/router/index.js                  |   2 +-
 frontend/src/stores/agents.js                 |  28 +-
 frontend/src/stores/canned_responses.js       |  28 +-
 frontend/src/stores/conversation.js           | 770 +++++++++---------
 frontend/src/stores/user.js                   | 129 ++-
 frontend/src/utils/datetime.js                |  40 +-
 frontend/src/utils/file.js                    |  18 +-
 frontend/src/utils/http.js                    |  46 +-
 frontend/src/utils/strings.js                 |  11 +-
 frontend/src/utils/validation.js              |   6 +-
 frontend/src/views/AccountView.vue            |   6 +-
 frontend/src/views/ConversationView.vue       |  37 +-
 frontend/src/views/DashboardView.vue          | 272 +++----
 frontend/src/views/UserLoginView.vue          | 189 ++---
 frontend/src/websocket.js                     | 249 +++---
 internal/conversation/conversation.go         |  12 +-
 internal/conversation/models/models.go        |  33 +-
 internal/conversation/priority.go             |  16 +
 internal/conversation/queries.sql             | 128 +--
 internal/conversation/status.go               |  16 +
 internal/media/media.go                       |   3 +-
 internal/media/queries.sql                    |   2 +-
 schema.sql                                    | 442 ++++++++++
 340 files changed, 7251 insertions(+), 6583 deletions(-)
 create mode 100644 config.sample.toml
 rename frontend/src/components/conversation/{Conversation.vue => ConversationPage.vue} (78%)
 create mode 100644 internal/conversation/priority.go
 create mode 100644 internal/conversation/status.go
 create mode 100644 schema.sql

diff --git a/cmd/conversation.go b/cmd/conversation.go
index ce75bdc..76439e7 100644
--- a/cmd/conversation.go
+++ b/cmd/conversation.go
@@ -223,4 +223,27 @@ func handleDashboardCharts(r *fastglue.Request) error {
 		return sendErrorEnvelope(r, err)
 	}
 	return r.SendEnvelope(stats)
-}
\ No newline at end of file
+}
+
+func handleGetAllStatuses(r *fastglue.Request) error {
+	var (
+		app = r.Context.(*App)
+	)
+
+	out, err := app.conversation.GetAllStatuses()
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(out)
+}
+
+func handleGetAllPriorities(r *fastglue.Request) error {
+	var (
+		app = r.Context.(*App)
+	)
+	out, err := app.conversation.GetAllPriorities()
+	if err != nil {
+		return sendErrorEnvelope(r, err)
+	}
+	return r.SendEnvelope(out)
+}
diff --git a/cmd/handlers.go b/cmd/handlers.go
index e00b0c6..6b8371f 100644
--- a/cmd/handlers.go
+++ b/cmd/handlers.go
@@ -55,6 +55,12 @@ func initHandlers(g *fastglue.Fastglue, hub *ws.Hub) {
 	g.GET("/api/message/{uuid}/retry", perm(handleRetryMessage))
 	g.GET("/api/message/{uuid}", perm(handleGetMessage))
 
+	// Conversation statuses.
+	g.GET("/api/conversation/statuses", perm(handleGetAllStatuses))
+
+	// Conversation priorities.
+	g.GET("/api/conversation/priorities", perm(handleGetAllPriorities))
+
 	// Media.
 	g.POST("/api/media", perm(handleMediaUpload))
 
diff --git a/config.sample.toml b/config.sample.toml
new file mode 100644
index 0000000..caa7e3e
--- /dev/null
+++ b/config.sample.toml
@@ -0,0 +1,72 @@
+[app]
+log_level = "debug"
+env = "dev"
+
+[app.server]
+name = "artemis"
+address = "0.0.0.0:9009"
+socket = ""
+read_timeout = "5s"
+write_timeout = "5s"
+max_body_size = 10000000
+keepalive_timeout = "10s"
+
+[s3]
+access_key = 'test'
+secret_key = 'test'
+region = 'ap-south-1'
+bucket = 'test'
+bucket_type = "private"
+expiry = "15m"
+
+
+[db]
+host = "127.0.0.1"
+port = 5432
+user = "postgres"
+password = "postgres"
+database = "artemis"
+ssl_mode = "disable"
+max_open = 10
+max_idle = 10
+max_lifetime = "10s"
+
+[redis]
+address = "127.0.0.1:6379"
+password = ""
+db = 0
+
+[message]
+dispatch_concurrency = 10
+dispatch_read_interval = "50ms"
+reader_concurrency = 1
+incoming_queue_size = 10000
+outgoing_queue_size = 10000
+
+
+[notification]
+[notification.provider]
+[notification.provider.email]
+username = "test@gmail.com"
+host = "smtp.gmail.com"
+name = "Gmail"
+port = 587
+password = "test"
+max_conns = 2
+idle_timeout = "15s"
+wait_timeout = "5s"
+auth_protocol = "plain"
+email_address = "test@gmail.com"
+max_msg_retries = 2
+
+[autoassigner]
+assign_interval = "15s"
+
+
+[frontend.static_server]
+enabled = true
+root_path = "dist/static/"
+index_path = "dist/index.html"
+
+# `{filepath:*}` is a catch-all wildcard for httprouter(the router mux)
+uri = "/static/{filepath:*}"
diff --git a/frontend/src/App.vue b/frontend/src/App.vue
index 7fe2be3..6fe0b3d 100644
--- a/frontend/src/App.vue
+++ b/frontend/src/App.vue
@@ -4,9 +4,17 @@
     <div class="bg-background text-foreground">
       <div v-if="$route.path !== '/'">
         <ResizablePanelGroup direction="horizontal" auto-save-id="app.vue.resizable.panel">
-          <ResizablePanel id="resize-panel-1" collapsible :default-size="10" :collapsed-size="1" :min-size="7"
-            :max-size="20" :class="cn(isCollapsed && 'min-w-[50px] transition-all duration-200 ease-in-out')"
-            @expand="toggleNav(false)" @collapse="toggleNav(true)">
+          <ResizablePanel
+            id="resize-panel-1"
+            collapsible
+            :default-size="10"
+            :collapsed-size="1"
+            :min-size="7"
+            :max-size="20"
+            :class="cn(isCollapsed && 'min-w-[50px] transition-all duration-200 ease-in-out')"
+            @expand="toggleNav(false)"
+            @collapse="toggleNav(true)"
+          >
             <NavBar :is-collapsed="isCollapsed" :links="navLinks" :bottom-links="bottomLinks" />
           </ResizablePanel>
           <ResizableHandle id="resize-handle-1" />
@@ -25,80 +33,74 @@
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
-import { RouterView, useRouter } from 'vue-router';
-import { cn } from '@/lib/utils';
-import { useI18n } from 'vue-i18n';
-import { useUserStore } from '@/stores/user';
-import { initWS } from '@/websocket.js';
+import { ref, onMounted, computed } from 'vue'
+import { RouterView, useRouter } from 'vue-router'
+import { cn } from '@/lib/utils'
+import { useI18n } from 'vue-i18n'
+import { useUserStore } from '@/stores/user'
+import { initWS } from '@/websocket.js'
 
-import { Toaster } from '@/components/ui/toast';
-import NavBar from '@/components/NavBar.vue';
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@/components/ui/resizable';
-import { TooltipProvider } from '@/components/ui/tooltip';
+import { Toaster } from '@/components/ui/toast'
+import NavBar from '@/components/NavBar.vue'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
+import { TooltipProvider } from '@/components/ui/tooltip'
 
-const { t } = useI18n();
-const isCollapsed = ref(false);
+const { t } = useI18n()
+const isCollapsed = ref(false)
 const allNavLinks = ref([
   {
     title: t('navbar.dashboard'),
     to: '/dashboard',
     label: '',
-    icon: 'lucide:layout-dashboard',
+    icon: 'lucide:layout-dashboard'
   },
   {
     title: t('navbar.conversations'),
     to: '/conversations',
     label: '',
-    icon: 'lucide:message-circle-more',
+    icon: 'lucide:message-circle-more'
   },
   {
     title: t('navbar.account'),
     to: '/account/profile',
     label: '',
-    icon: 'lucide:circle-user-round',
+    icon: 'lucide:circle-user-round'
   },
   {
     title: t('navbar.admin'),
     to: '/admin/general',
     label: '',
     icon: 'lucide:settings',
-    permission: 'admin:get',
-  },
-]);
+    permission: 'admin:get'
+  }
+])
 
-const bottomLinks = ref(
-  [
-    {
-      to: '/logout',
-      icon: 'lucide:log-out',
-      title: 'Logout'
-    }
-  ]
-)
-const userStore = useUserStore();
-const router = useRouter();
+const bottomLinks = ref([
+  {
+    to: '/logout',
+    icon: 'lucide:log-out',
+    title: 'Logout'
+  }
+])
+const userStore = useUserStore()
+const router = useRouter()
 
-function toggleNav (v) {
-  isCollapsed.value = v;
+function toggleNav(v) {
+  isCollapsed.value = v
 }
 
 onMounted(() => {
   userStore.getCurrentUser().catch((err) => {
     if (err.response && err.response.status === 401) {
-      router.push('/login');
+      router.push('/login')
     }
-  });
-  initWS();
-});
+  })
+  initWS()
+})
 
 const navLinks = computed(() =>
   allNavLinks.value.filter((link) =>
     link.permission ? userStore.hasPermission(link.permission) : true
   )
-);
+)
 </script>
diff --git a/frontend/src/api/index.js b/frontend/src/api/index.js
index 715f5a6..ea2c123 100644
--- a/frontend/src/api/index.js
+++ b/frontend/src/api/index.js
@@ -1,175 +1,178 @@
-import axios from 'axios';
-import qs from 'qs';
+import axios from 'axios'
+import qs from 'qs'
 
 const http = axios.create({
   timeout: 10000,
-  responseType: 'json',
-});
+  responseType: 'json'
+})
 
 // Request interceptor.
-http.interceptors.request.use(request => {
+http.interceptors.request.use((request) => {
   // Set content type for POST/PUT requests if the content type is not set.
-  if (
-    (request.method === 'post' || request.method === 'put') &&
-    !request.headers['Content-Type']
-  ) {
-    request.headers['Content-Type'] = 'application/x-www-form-urlencoded';
-    request.data = qs.stringify(request.data);
+  if ((request.method === 'post' || request.method === 'put') && !request.headers['Content-Type']) {
+    request.headers['Content-Type'] = 'application/x-www-form-urlencoded'
+    request.data = qs.stringify(request.data)
   }
-  return request;
-});
+  return request
+})
 
+const getAllStatuses = () => http.get('/api/conversation/statuses')
+const getAllPriorities = () => http.get('/api/conversation/priorities')
 const createTag = (data) => http.post('/api/tags', data)
 const updateTag = (id, data) => http.put(`/api/tags/${id}`, data)
 const deleteTag = (id) => http.delete(`/api/tags/${id}`)
 const getTemplate = (id) => http.get(`/api/templates/${id}`)
 const getTemplates = () => http.get('/api/templates')
-const createTemplate = (data) => http.post('/api/templates', data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-const updateTemplate = (id, data) => http.put(`/api/templates/${id}`, data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-const createOIDC = (data) => http.post("/api/oidc", data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
-const getAllOIDC = () => http.get("/api/oidc")
+const createTemplate = (data) =>
+  http.post('/api/templates', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateTemplate = (id, data) =>
+  http.put(`/api/templates/${id}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const createOIDC = (data) =>
+  http.post('/api/oidc', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const getAllOIDC = () => http.get('/api/oidc')
 const getOIDC = (id) => http.get(`/api/oidc/${id}`)
-const updateOIDC = (id, data) => http.put(`/api/oidc/${id}`, data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-})
+const updateOIDC = (id, data) =>
+  http.put(`/api/oidc/${id}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
 const deleteOIDC = (id) => http.delete(`/api/oidc/${id}`)
-const updateSettings = (key, data) => http.put(`/api/settings/${key}`, data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
+const updateSettings = (key, data) =>
+  http.put(`/api/settings/${key}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
 const getSettings = (key) => http.get(`/api/settings/${key}`)
-const login = data => http.post(`/api/login`, data);
-const getAutomationRules = type =>
+const login = (data) => http.post(`/api/login`, data)
+const getAutomationRules = (type) =>
   http.get(`/api/automation/rules`, {
-    params: { type: type },
-  });
-const toggleAutomationRule = id =>
-  http.put(`/api/automation/rules/${id}/toggle`);
-const getAutomationRule = id => http.get(`/api/automation/rules/${id}`);
+    params: { type: type }
+  })
+const toggleAutomationRule = (id) => http.put(`/api/automation/rules/${id}/toggle`)
+const getAutomationRule = (id) => http.get(`/api/automation/rules/${id}`)
 const updateAutomationRule = (id, data) =>
   http.put(`/api/automation/rules/${id}`, data, {
     headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-const createAutomationRule = data =>
+      'Content-Type': 'application/json'
+    }
+  })
+const createAutomationRule = (data) =>
   http.post(`/api/automation/rules`, data, {
     headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-const getRoles = () => http.get('/api/roles');
-const getRole = id => http.get(`/api/roles/${id}`);
-const createRole = data =>
+      'Content-Type': 'application/json'
+    }
+  })
+const getRoles = () => http.get('/api/roles')
+const getRole = (id) => http.get(`/api/roles/${id}`)
+const createRole = (data) =>
   http.post('/api/roles', data, {
     headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-const updateRole = (id, data) => http.put(`/api/roles/${id}`, data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-const deleteRole = id => http.delete(`/api/roles/${id}`);
-const deleteAutomationRule = id => http.delete(`/api/automation/rules/${id}`);
-const getUser = id => http.get(`/api/users/${id}`);
-const getTeam = id => http.get(`/api/teams/${id}`);
-const getTeams = () => http.get('/api/teams');
-const getUsers = () => http.get('/api/users');
-const updateCurrentUser = (data) => http.put('/api/users/me', data, {
-  headers: {
-    'Content-Type': 'multipart/form-data',
-  },
-});
+      'Content-Type': 'application/json'
+    }
+  })
+const updateRole = (id, data) =>
+  http.put(`/api/roles/${id}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const deleteRole = (id) => http.delete(`/api/roles/${id}`)
+const deleteAutomationRule = (id) => http.delete(`/api/automation/rules/${id}`)
+const getUser = (id) => http.get(`/api/users/${id}`)
+const getTeam = (id) => http.get(`/api/teams/${id}`)
+const getTeams = () => http.get('/api/teams')
+const getUsers = () => http.get('/api/users')
+const updateCurrentUser = (data) =>
+  http.put('/api/users/me', data, {
+    headers: {
+      'Content-Type': 'multipart/form-data'
+    }
+  })
 const deleteUserAvatar = () => http.delete('/api/users/me/avatar')
-const getCurrentUser = () => http.get('/api/users/me');
-const getTags = () => http.get('/api/tags');
-const upsertTags = (uuid, data) =>
-  http.post(`/api/conversations/${uuid}/tags`, data);
+const getCurrentUser = () => http.get('/api/users/me')
+const getTags = () => http.get('/api/tags')
+const upsertTags = (uuid, data) => http.post(`/api/conversations/${uuid}/tags`, data)
 const updateAssignee = (uuid, assignee_type, data) =>
-  http.put(`/api/conversations/${uuid}/assignee/${assignee_type}`, data);
-const updateStatus = (uuid, data) =>
-  http.put(`/api/conversations/${uuid}/status`, data);
-const updatePriority = (uuid, data) =>
-  http.put(`/api/conversations/${uuid}/priority`, data);
-const updateAssigneeLastSeen = uuid =>
-  http.put(`/api/conversations/${uuid}/last-seen`);
-const getMessage = uuid => http.get(`/api/message/${uuid}`);
-const retryMessage = uuid => http.get(`/api/message/${uuid}/retry`);
-const getMessages = (uuid, page) => http.get(`/api/conversations/${uuid}/messages`, {
-  params: { page: page },
-});
+  http.put(`/api/conversations/${uuid}/assignee/${assignee_type}`, data)
+const updateStatus = (uuid, data) => http.put(`/api/conversations/${uuid}/status`, data)
+const updatePriority = (uuid, data) => http.put(`/api/conversations/${uuid}/priority`, data)
+const updateAssigneeLastSeen = (uuid) => http.put(`/api/conversations/${uuid}/last-seen`)
+const getMessage = (uuid) => http.get(`/api/message/${uuid}`)
+const retryMessage = (uuid) => http.get(`/api/message/${uuid}/retry`)
+const getMessages = (uuid, page) =>
+  http.get(`/api/conversations/${uuid}/messages`, {
+    params: { page: page }
+  })
 const sendMessage = (uuid, data) =>
   http.post(`/api/conversations/${uuid}/messages`, data, {
     headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-const getConversation = uuid => http.get(`/api/conversations/${uuid}`);
-const getConversationParticipants = uuid =>
-  http.get(`/api/conversations/${uuid}/participants`);
-const getCannedResponses = () => http.get('/api/canned-responses');
+      'Content-Type': 'application/json'
+    }
+  })
+const getConversation = (uuid) => http.get(`/api/conversations/${uuid}`)
+const getConversationParticipants = (uuid) => http.get(`/api/conversations/${uuid}/participants`)
+const getCannedResponses = () => http.get('/api/canned-responses')
 const getAssignedConversations = (page, filter) =>
-  http.get(`/api/conversations/assigned?page=${page}&filter=${filter}`);
+  http.get(`/api/conversations/assigned?page=${page}&filter=${filter}`)
 const getTeamConversations = (page, filter) =>
-  http.get(`/api/conversations/team?page=${page}&filter=${filter}`);
+  http.get(`/api/conversations/team?page=${page}&filter=${filter}`)
 const getAllConversations = (page, filter) =>
-  http.get(`/api/conversations/all?page=${page}&filter=${filter}`);
-const uploadMedia = data =>
+  http.get(`/api/conversations/all?page=${page}&filter=${filter}`)
+const uploadMedia = (data) =>
   http.post('/api/media', data, {
     headers: {
-      'Content-Type': 'multipart/form-data',
-    },
-  });
-const getGlobalDashboardCounts = () => http.get('/api/dashboard/global/counts');
-const getGlobalDashboardCharts = () => http.get('/api/dashboard/global/charts');
-const getUserDashboardCounts = () => http.get(`/api/dashboard/me/counts`);
-const getUserDashboardCharts = () => http.get(`/api/dashboard/me/charts`);
-const getLanguage = lang => http.get(`/api/lang/${lang}`);
-const createUser = data => http.post('/api/users', data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-const updateUser = (id, data) => http.put(`/api/users/${id}`, data, {
-  headers: {
-    'Content-Type': 'application/json',
-  },
-});
-const updateTeam = (id, data) => http.put(`/api/teams/${id}`, data);
-const createTeam = data => http.post('/api/teams', data);
-const createInbox = data =>
+      'Content-Type': 'multipart/form-data'
+    }
+  })
+const getGlobalDashboardCounts = () => http.get('/api/dashboard/global/counts')
+const getGlobalDashboardCharts = () => http.get('/api/dashboard/global/charts')
+const getUserDashboardCounts = () => http.get(`/api/dashboard/me/counts`)
+const getUserDashboardCharts = () => http.get(`/api/dashboard/me/charts`)
+const getLanguage = (lang) => http.get(`/api/lang/${lang}`)
+const createUser = (data) =>
+  http.post('/api/users', data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateUser = (id, data) =>
+  http.put(`/api/users/${id}`, data, {
+    headers: {
+      'Content-Type': 'application/json'
+    }
+  })
+const updateTeam = (id, data) => http.put(`/api/teams/${id}`, data)
+const createTeam = (data) => http.post('/api/teams', data)
+const createInbox = (data) =>
   http.post('/api/inboxes', data, {
     headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-const getInboxes = () => http.get('/api/inboxes');
-const getInbox = id => http.get(`/api/inboxes/${id}`);
-const toggleInbox = id => http.put(`/api/inboxes/${id}/toggle`);
+      'Content-Type': 'application/json'
+    }
+  })
+const getInboxes = () => http.get('/api/inboxes')
+const getInbox = (id) => http.get(`/api/inboxes/${id}`)
+const toggleInbox = (id) => http.put(`/api/inboxes/${id}/toggle`)
 const updateInbox = (id, data) =>
   http.put(`/api/inboxes/${id}`, data, {
     headers: {
-      'Content-Type': 'application/json',
-    },
-  });
-const deleteInbox = id => http.delete(`/api/inboxes/${id}`);
+      'Content-Type': 'application/json'
+    }
+  })
+const deleteInbox = (id) => http.delete(`/api/inboxes/${id}`)
 
 export default {
   login,
@@ -237,4 +240,6 @@ export default {
   createTag,
   updateTag,
   deleteTag,
-};
+  getAllStatuses,
+  getAllPriorities
+}
diff --git a/frontend/src/components/NavBar.vue b/frontend/src/components/NavBar.vue
index 811ce56..59a10b5 100644
--- a/frontend/src/components/NavBar.vue
+++ b/frontend/src/components/NavBar.vue
@@ -26,21 +26,29 @@ const getButtonVariant = (to) => {
 </script>
 
 <template>
-  <div :data-collapsed="isCollapsed" class="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2 h-full">
-    <nav class="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2">
+  <div
+    :data-collapsed="isCollapsed"
+    class="group flex flex-col gap-4 py-2 data-[collapsed=true]:py-2 h-full"
+  >
+    <nav
+      class="grid gap-1 px-2 group-[[data-collapsed=true]]:justify-center group-[[data-collapsed=true]]:px-2"
+    >
       <template v-for="(link, index) of links">
         <!-- Collapsed -->
         <router-link :to="link.to" v-if="isCollapsed" :key="`1-${index}`">
           <TooltipProvider :delay-duration="10">
             <Tooltip>
               <TooltipTrigger as-child>
-                <span :class="cn(
-                  buttonVariants({ variant: getButtonVariant(link.to), size: 'icon' }),
-                  'h-9 w-9',
-                  link.variant === getButtonVariant(link.to) &&
-                  'dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white'
-                )
-                  ">
+                <span
+                  :class="
+                    cn(
+                      buttonVariants({ variant: getButtonVariant(link.to), size: 'icon' }),
+                      'h-9 w-9',
+                      link.variant === getButtonVariant(link.to) &&
+                        'dark:bg-muted dark:text-muted-foreground dark:hover:bg-muted dark:hover:text-white'
+                    )
+                  "
+                >
                   <Icon :icon="link.icon" class="size-5" />
                   <span class="sr-only">{{ link.title }}</span>
                 </span>
@@ -56,20 +64,30 @@ const getButtonVariant = (to) => {
         </router-link>
 
         <!-- Expanded -->
-        <router-link v-else :to="link.to" :key="`2-${index}`" :class="cn(
-          buttonVariants({ variant: getButtonVariant(link.to), size: 'sm' }),
-          link.variant === getButtonVariant(link.to) &&
-          'dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white',
-          'justify-start'
-        )
-          ">
+        <router-link
+          v-else
+          :to="link.to"
+          :key="`2-${index}`"
+          :class="
+            cn(
+              buttonVariants({ variant: getButtonVariant(link.to), size: 'sm' }),
+              link.variant === getButtonVariant(link.to) &&
+                'dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white',
+              'justify-start'
+            )
+          "
+        >
           <Icon :icon="link.icon" class="mr-2 size-5" />
           {{ link.title }}
-          <span v-if="link.label" :class="cn(
-            'ml-',
-            link.variant === getButtonVariant(link.to) && 'text-background dark:text-white'
-          )
-            ">
+          <span
+            v-if="link.label"
+            :class="
+              cn(
+                'ml-',
+                link.variant === getButtonVariant(link.to) && 'text-background dark:text-white'
+              )
+            "
+          >
             {{ link.label }}
           </span>
         </router-link>
@@ -82,12 +100,20 @@ const getButtonVariant = (to) => {
         <TooltipProvider :delay-duration="10">
           <Tooltip>
             <TooltipTrigger as-child>
-              <router-link :to="bottomLink.to" :class="cn(
-                buttonVariants({ variant: getButtonVariant(bottomLink.to), size: isCollapsed ? 'icon' : 'sm' }),
-                bottomLink.variant === getButtonVariant(bottomLink.to) &&
-                'dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white',
-                'justify-start'
-              )">
+              <router-link
+                :to="bottomLink.to"
+                :class="
+                  cn(
+                    buttonVariants({
+                      variant: getButtonVariant(bottomLink.to),
+                      size: isCollapsed ? 'icon' : 'sm'
+                    }),
+                    bottomLink.variant === getButtonVariant(bottomLink.to) &&
+                      'dark:bg-muted dark:text-white dark:hover:bg-muted dark:hover:text-white',
+                    'justify-start'
+                  )
+                "
+              >
                 <Icon :icon="bottomLink.icon" class="mr-2 size-5" v-if="!isCollapsed" />
                 <span v-if="!isCollapsed">{{ bottomLink.title }}</span>
                 <Icon :icon="bottomLink.icon" class="size-5 mx-auto" v-else />
diff --git a/frontend/src/components/account/AccountPage.vue b/frontend/src/components/account/AccountPage.vue
index 797ff92..8dd487a 100644
--- a/frontend/src/components/account/AccountPage.vue
+++ b/frontend/src/components/account/AccountPage.vue
@@ -1,5 +1,5 @@
 <script setup>
-import PageHeader from '@/components/common/PageHeader.vue';
+import PageHeader from '@/components/common/PageHeader.vue'
 import SidebarNav from '@/components/common/SidebarNav.vue'
 
 const sidebarNavItems = [
@@ -7,7 +7,7 @@ const sidebarNavItems = [
     title: 'Profile',
     href: '/account/profile',
     description: 'Update your profile'
-  },
+  }
 ]
 </script>
 
diff --git a/frontend/src/components/account/ProfileEdit.vue b/frontend/src/components/account/ProfileEdit.vue
index 4a8bb1b..b5901e1 100644
--- a/frontend/src/components/account/ProfileEdit.vue
+++ b/frontend/src/components/account/ProfileEdit.vue
@@ -1,118 +1,132 @@
 <template>
-    <div>
-        <div class="flex flex-col space-y-5">
-            <div class="space-y-1">
-                <span class="sub-title">Public avatar</span>
-                <p class="text-muted-foreground text-xs">Change your avatar here.</p>
-            </div>
-            <div class="flex space-x-5">
-                <Avatar class="size-28">
-                    <AvatarImage :src="userStore.userAvatar" alt="Cropped Image" />
-                    <AvatarFallback>{{ userStore.getInitials }}</AvatarFallback>
-                </Avatar>
+  <div>
+    <div class="flex flex-col space-y-5">
+      <div class="space-y-1">
+        <span class="sub-title">Public avatar</span>
+        <p class="text-muted-foreground text-xs">Change your avatar here.</p>
+      </div>
+      <div class="flex space-x-5">
+        <Avatar class="size-28">
+          <AvatarImage :src="userStore.userAvatar" alt="Cropped Image" />
+          <AvatarFallback>{{ userStore.getInitials }}</AvatarFallback>
+        </Avatar>
 
-                <div class="flex flex-col space-y-5 justify-center">
-                    <input ref="uploadInput" type="file" hidden accept="image/jpg, image/jpeg, image/png, image/gif"
-                        @change="selectFile" />
-                    <Button class="w-28" @click="selectAvatar" size="sm">
-                        Choose a file...
-                    </Button>
+        <div class="flex flex-col space-y-5 justify-center">
+          <input
+            ref="uploadInput"
+            type="file"
+            hidden
+            accept="image/jpg, image/jpeg, image/png, image/gif"
+            @change="selectFile"
+          />
+          <Button class="w-28" @click="selectAvatar" size="sm"> Choose a file... </Button>
 
-                    <Button class="w-28" @click="removeAvatar" variant="destructive" size="sm">
-                        Remove avatar
-                    </Button>
-                </div>
-            </div>
-
-            <Button class="w-28" @click="saveUser" size="sm">Save Changes</Button>
-
-            <Dialog :open="showCropper">
-                <DialogContent class="sm:max-w-md">
-                    <DialogHeader>
-                        <DialogTitle class="text-xl">Crop avatar</DialogTitle>
-                    </DialogHeader>
-
-                    <VuePictureCropper
-                        :boxStyle="{ width: '100%', height: '400px', backgroundColor: '#f8f8f8', margin: 'auto' }"
-                        :img="newUserAvatar" :options="{ viewMode: 1, dragMode: 'crop', aspectRatio: 1 }" />
-
-                    <DialogFooter class="sm:justify-end">
-                        <Button variant="secondary" @click="closeDialog">
-                            Close
-                        </Button>
-                        <Button @click="getResult">Save</Button>
-                    </DialogFooter>
-                </DialogContent>
-            </Dialog>
+          <Button class="w-28" @click="removeAvatar" variant="destructive" size="sm">
+            Remove avatar
+          </Button>
         </div>
+      </div>
+
+      <Button class="w-28" @click="saveUser" size="sm">Save Changes</Button>
+
+      <Dialog :open="showCropper">
+        <DialogContent class="sm:max-w-md">
+          <DialogHeader>
+            <DialogTitle class="text-xl">Crop avatar</DialogTitle>
+          </DialogHeader>
+
+          <VuePictureCropper
+            :boxStyle="{
+              width: '100%',
+              height: '400px',
+              backgroundColor: '#f8f8f8',
+              margin: 'auto'
+            }"
+            :img="newUserAvatar"
+            :options="{ viewMode: 1, dragMode: 'crop', aspectRatio: 1 }"
+          />
+
+          <DialogFooter class="sm:justify-end">
+            <Button variant="secondary" @click="closeDialog"> Close </Button>
+            <Button @click="getResult">Save</Button>
+          </DialogFooter>
+        </DialogContent>
+      </Dialog>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { useUserStore } from '@/stores/user';
-import { Button } from '@/components/ui/button';
-import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar';
-import { ref } from 'vue';
-import VuePictureCropper, { cropper } from 'vue-picture-cropper';
-import { Dialog, DialogContent, DialogFooter, DialogHeader, DialogTitle } from '@/components/ui/dialog';
+import { useUserStore } from '@/stores/user'
+import { Button } from '@/components/ui/button'
+import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
+import { ref } from 'vue'
+import VuePictureCropper, { cropper } from 'vue-picture-cropper'
+import {
+  Dialog,
+  DialogContent,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle
+} from '@/components/ui/dialog'
 import api from '@/api'
 
-const userStore = useUserStore();
-const uploadInput = ref(null);
-const newUserAvatar = ref('');
-const showCropper = ref(false);
-let croppedBlob = null;
-let avatarFile = null;
+const userStore = useUserStore()
+const uploadInput = ref(null)
+const newUserAvatar = ref('')
+const showCropper = ref(false)
+let croppedBlob = null
+let avatarFile = null
 
 const selectAvatar = () => {
-    uploadInput.value.click();
-};
+  uploadInput.value.click()
+}
 
 const selectFile = (event) => {
-    newUserAvatar.value = '';
-    const { files } = event.target;
-    if (!files || !files.length) return;
+  newUserAvatar.value = ''
+  const { files } = event.target
+  if (!files || !files.length) return
 
-    avatarFile = files[0];
-    const reader = new FileReader();
-    reader.readAsDataURL(avatarFile);
-    reader.onload = () => {
-        newUserAvatar.value = String(reader.result);
-        showCropper.value = true;
-        uploadInput.value.value = '';
-    };
-};
+  avatarFile = files[0]
+  const reader = new FileReader()
+  reader.readAsDataURL(avatarFile)
+  reader.onload = () => {
+    newUserAvatar.value = String(reader.result)
+    showCropper.value = true
+    uploadInput.value.value = ''
+  }
+}
 
 const closeDialog = () => {
-    showCropper.value = false;
-};
+  showCropper.value = false
+}
 
 const getResult = async () => {
-    if (!cropper) return;
-    croppedBlob = await cropper.getBlob();
-    if (!croppedBlob) return;
-    userStore.userAvatar = URL.createObjectURL(croppedBlob);
-    showCropper.value = false;
-};
+  if (!cropper) return
+  croppedBlob = await cropper.getBlob()
+  if (!croppedBlob) return
+  userStore.userAvatar = URL.createObjectURL(croppedBlob)
+  showCropper.value = false
+}
 
 const saveUser = async () => {
-    const formData = new FormData();
-    formData.append('files', croppedBlob, 'avatar.png');
-    try {
-        await api.updateCurrentUser(formData);
-        // Handle success
-    } catch (error) {
-        // Handle error
-    }
-};
+  const formData = new FormData()
+  formData.append('files', croppedBlob, 'avatar.png')
+  try {
+    await api.updateCurrentUser(formData)
+    // Handle success
+  } catch (error) {
+    // Handle error
+  }
+}
 
 const removeAvatar = async () => {
-    croppedBlob = null;
-    try {
-        await api.deleteUserAvatar();
-        // Handle success
-    } catch (error) {
-        // Handle error
-    }
-};
+  croppedBlob = null
+  try {
+    await api.deleteUserAvatar()
+    // Handle success
+  } catch (error) {
+    // Handle error
+  }
+}
 </script>
diff --git a/frontend/src/components/admin/AdminPage.vue b/frontend/src/components/admin/AdminPage.vue
index 78994ee..20d0a33 100644
--- a/frontend/src/components/admin/AdminPage.vue
+++ b/frontend/src/components/admin/AdminPage.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { computed } from 'vue'
-import PageHeader from '@/components/common/PageHeader.vue';
-import SidebarNav from '@/components/common/SidebarNav.vue';
-import { useUserStore } from '@/stores/user';
+import PageHeader from '@/components/common/PageHeader.vue'
+import SidebarNav from '@/components/common/SidebarNav.vue'
+import { useUserStore } from '@/stores/user'
 
-const userStore = useUserStore();
+const userStore = useUserStore()
 
 const allNavItems = [
   {
@@ -17,7 +17,7 @@ const allNavItems = [
     title: 'Conversations',
     href: '/admin/conversations',
     description: 'Manage conversation tags, statuses and priorities.',
-    permission: null,
+    permission: null
   },
   {
     title: 'Inboxes',
@@ -54,12 +54,12 @@ const allNavItems = [
     href: '/admin/oidc',
     description: 'Manage OpenID Connect configurations',
     permission: 'login:manage'
-  },
-];
+  }
+]
 
-const sidebarNavItems = computed(() => 
-  allNavItems.filter(item => userStore.hasPermission(item.permission))
-);
+const sidebarNavItems = computed(() =>
+  allNavItems.filter((item) => userStore.hasPermission(item.permission))
+)
 </script>
 
 <template>
diff --git a/frontend/src/components/admin/automation/ActionBox.vue b/frontend/src/components/admin/automation/ActionBox.vue
index 1e3a5a9..010ffdb 100644
--- a/frontend/src/components/admin/automation/ActionBox.vue
+++ b/frontend/src/components/admin/automation/ActionBox.vue
@@ -1,61 +1,71 @@
 <template>
-    <div class="box border p-5 space-y-5 rounded">
-        <div class="space-y-5">
-            <div v-for="(action, index) in actions" :key="index" class="space-y-5">
-                <div v-if="index > 0">
-                    <hr class="border-t-2 border-dotted border-gray-300">
-                </div>
-                <div class="flex space-x-5 justify-between">
-                    <Select v-model="action.type"
-                        @update:modelValue="(value) => handleFieldChange(value, index)">
-                        <SelectTrigger class="w-56">
-                            <SelectValue placeholder="Select action" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectLabel>Conversation</SelectLabel>
-                                <SelectItem v-for="(actionItem, key) in conversationActions" :key="key" :value="key">
-                                    {{ actionItem.label }}
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                    <div class="cursor-pointer" @click="removeAction(index)">
-                        <CircleX size="21" />
-                    </div>
-                </div>
-                <div>
-                    <Input type="text" placeholder="Set value" :modelValue="action.value"
-                        @update:modelValue="(value) => handleValueChange(value, index)" />
-                </div>
-            </div>
+  <div class="box border p-5 space-y-5 rounded">
+    <div class="space-y-5">
+      <div v-for="(action, index) in actions" :key="index" class="space-y-5">
+        <div v-if="index > 0">
+          <hr class="border-t-2 border-dotted border-gray-300" />
+        </div>
+        <div class="flex space-x-5 justify-between">
+          <Select
+            v-model="action.type"
+            @update:modelValue="(value) => handleFieldChange(value, index)"
+          >
+            <SelectTrigger class="w-56">
+              <SelectValue placeholder="Select action" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectLabel>Conversation</SelectLabel>
+                <SelectItem
+                  v-for="(actionItem, key) in conversationActions"
+                  :key="key"
+                  :value="key"
+                >
+                  {{ actionItem.label }}
+                </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+          <div class="cursor-pointer" @click="removeAction(index)">
+            <CircleX size="21" />
+          </div>
         </div>
         <div>
-            <Button variant="outline" @click="addAction" size="sm">Add action</Button>
+          <Input
+            type="text"
+            placeholder="Set value"
+            :modelValue="action.value"
+            @update:modelValue="(value) => handleValueChange(value, index)"
+          />
         </div>
+      </div>
     </div>
+    <div>
+      <Button variant="outline" @click="addAction" size="sm">Add action</Button>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { toRefs } from 'vue'
 import { Button } from '@/components/ui/button'
-import { CircleX } from 'lucide-vue-next';
+import { CircleX } from 'lucide-vue-next'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
 import { Input } from '@/components/ui/input'
 
 const props = defineProps({
-    actions: {
-        type: Object,
-        required: true,
-    },
+  actions: {
+    type: Object,
+    required: true
+  }
 })
 
 const { actions } = toRefs(props)
@@ -63,39 +73,39 @@ const { actions } = toRefs(props)
 const emit = defineEmits(['update-actions', 'add-action', 'remove-action'])
 
 const handleFieldChange = (value, index) => {
-    actions.value[index].type = value
-    emitUpdate(index)
+  actions.value[index].type = value
+  emitUpdate(index)
 }
 
 const handleValueChange = (value, index) => {
-    actions.value[index].value = value
-    emitUpdate(index)
+  actions.value[index].value = value
+  emitUpdate(index)
 }
 
 const removeAction = (index) => {
-    emit('remove-action', index)
+  emit('remove-action', index)
 }
 
 const addAction = (index) => {
-    emit('add-action', index)
+  emit('add-action', index)
 }
 
 const emitUpdate = (index) => {
-    emit('update-actions', actions, index)
+  emit('update-actions', actions, index)
 }
 
 const conversationActions = {
-    "assign_team": {
-        "label": "Assign to team"
-    },
-    "assign_user": {
-        "label": "Assign to user"
-    },
-    "set_status": {
-        "label": "Set status"
-    },
-    "set_priority": {
-        "label": "Set priority"
-    },
+  assign_team: {
+    label: 'Assign to team'
+  },
+  assign_user: {
+    label: 'Assign to user'
+  },
+  set_status: {
+    label: 'Set status'
+  },
+  set_priority: {
+    label: 'Set priority'
+  }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/automation/AutomationPage.vue b/frontend/src/components/admin/automation/AutomationPage.vue
index 918b1cc..54fc004 100644
--- a/frontend/src/components/admin/automation/AutomationPage.vue
+++ b/frontend/src/components/admin/automation/AutomationPage.vue
@@ -20,4 +20,4 @@ const router = useRouter()
 const newRule = () => {
   router.push({ path: `/admin/automations/new` })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/automation/AutomationTabs.vue b/frontend/src/components/admin/automation/AutomationTabs.vue
index 8565389..b9afe3e 100644
--- a/frontend/src/components/admin/automation/AutomationTabs.vue
+++ b/frontend/src/components/admin/automation/AutomationTabs.vue
@@ -1,35 +1,24 @@
 <template>
-    <Tabs default-value="conversation_creation">
-        <TabsList class="grid w-full grid-cols-3 mb-5">
-            <TabsTrigger value="conversation_creation">
-                Conversation creation
-            </TabsTrigger>
-            <TabsTrigger value="conversation_updates">
-                Conversation updates
-            </TabsTrigger>
-            <TabsTrigger value="time_triggers">
-                Time triggers
-            </TabsTrigger>
-        </TabsList>
-        <TabsContent value="conversation_creation">
-            <TabConversationCreation />
-        </TabsContent>
-        <TabsContent value="conversation_updates">
-            <TabConversationUpdate />
-        </TabsContent>
-        <TabsContent value="time_triggers">
-            <TabTimeTrigger />
-        </TabsContent>
-    </Tabs>
+  <Tabs default-value="conversation_creation">
+    <TabsList class="grid w-full grid-cols-3 mb-5">
+      <TabsTrigger value="conversation_creation"> Conversation creation </TabsTrigger>
+      <TabsTrigger value="conversation_updates"> Conversation updates </TabsTrigger>
+      <TabsTrigger value="time_triggers"> Time triggers </TabsTrigger>
+    </TabsList>
+    <TabsContent value="conversation_creation">
+      <TabConversationCreation />
+    </TabsContent>
+    <TabsContent value="conversation_updates">
+      <TabConversationUpdate />
+    </TabsContent>
+    <TabsContent value="time_triggers">
+      <TabTimeTrigger />
+    </TabsContent>
+  </Tabs>
 </template>
 
 <script setup>
-import {
-    Tabs,
-    TabsContent,
-    TabsList,
-    TabsTrigger,
-} from '@/components/ui/tabs'
+import { Tabs, TabsContent, TabsList, TabsTrigger } from '@/components/ui/tabs'
 
 import TabConversationCreation from './TabConversationCreation.vue'
 import TabConversationUpdate from './TabConversationUpdate.vue'
diff --git a/frontend/src/components/admin/automation/CreateOrEditRule.vue b/frontend/src/components/admin/automation/CreateOrEditRule.vue
index 7fe78ee..3c47033 100644
--- a/frontend/src/components/admin/automation/CreateOrEditRule.vue
+++ b/frontend/src/components/admin/automation/CreateOrEditRule.vue
@@ -1,232 +1,237 @@
 <template>
-    <div class="mb-5">
-        <CustomBreadcrumb :links="breadcrumbLinks" />
-    </div>
-    <span class="title">{{ formTitle }}</span>
+  <div class="mb-5">
+    <CustomBreadcrumb :links="breadcrumbLinks" />
+  </div>
+  <span class="title">{{ formTitle }}</span>
+  <div class="space-y-5">
     <div class="space-y-5">
-        <div class="space-y-5">
-            <div class="grid w-full max-w-sm items-center gap-1.5">
-                <Label for="rule_name">Name</Label>
-                <Input id="rule_name" type="text" placeholder="Name for this rule" v-model="rule.name" />
-            </div>
-            <div class="grid w-full max-w-sm items-center gap-1.5">
-                <Label for="rule_name">Description</Label>
-                <Input id="rule_name" type="text" placeholder="Description for this rule" v-model="rule.description" />
-            </div>
-            <div class="grid w-full max-w-sm items-center gap-1.5">
-                <Label for="rule_type">Type</Label>
-                <Select id="rule_type" :modelValue="rule.type" @update:modelValue="handeTypeUpdate">
-                    <SelectTrigger>
-                        <SelectValue placeholder="Select a type" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem value="new_conversation">
-                                New conversation
-                            </SelectItem>
-                            <SelectItem value="conversation_update">
-                                Conversation update
-                            </SelectItem>
-                            <SelectItem value="time_trigger">
-                                Time trigger
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-            </div>
-        </div>
-        <p class="font-semibold">Match these rules</p>
-        <RuleBox :ruleGroup="firstRuleGroup" @update-group="handleUpdateGroup" @add-condition="handleAddCondition"
-            @remove-condition="handleRemoveCondition" :groupIndex=0 />
-        <div class="flex justify-center">
-            <div class="flex items-center space-x-2">
-                <Button :class="[
-                    groupOperator === 'AND' ? 'bg-black' : 'bg-gray-100 text-black'
-                ]" @click="toggleGroupOperator('AND')">
-                    AND
-                </Button>
-                <Button :class="[
-                    groupOperator === 'OR' ? 'bg-black' : 'bg-gray-100 text-black'
-                ]" @click="toggleGroupOperator('OR')">
-                    OR
-                </Button>
-            </div>
-        </div>
-        <RuleBox :ruleGroup="secondRuleGroup" @update-group="handleUpdateGroup" @add-condition="handleAddCondition"
-            @remove-condition="handleRemoveCondition" :groupIndex=1 />
-        <p class="font-semibold">Perform these actions</p>
-        <ActionBox :actions="getActions()" :update-actions="handleUpdateActions" @add-action="handleAddAction"
-            @remove-action="handleRemoveAction" />
-        <Button @click="handleSave">Save</Button>
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <Label for="rule_name">Name</Label>
+        <Input id="rule_name" type="text" placeholder="Name for this rule" v-model="rule.name" />
+      </div>
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <Label for="rule_name">Description</Label>
+        <Input
+          id="rule_name"
+          type="text"
+          placeholder="Description for this rule"
+          v-model="rule.description"
+        />
+      </div>
+      <div class="grid w-full max-w-sm items-center gap-1.5">
+        <Label for="rule_type">Type</Label>
+        <Select id="rule_type" :modelValue="rule.type" @update:modelValue="handeTypeUpdate">
+          <SelectTrigger>
+            <SelectValue placeholder="Select a type" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="new_conversation"> New conversation </SelectItem>
+              <SelectItem value="conversation_update"> Conversation update </SelectItem>
+              <SelectItem value="time_trigger"> Time trigger </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
+    <p class="font-semibold">Match these rules</p>
+    <RuleBox
+      :ruleGroup="firstRuleGroup"
+      @update-group="handleUpdateGroup"
+      @add-condition="handleAddCondition"
+      @remove-condition="handleRemoveCondition"
+      :groupIndex="0"
+    />
+    <div class="flex justify-center">
+      <div class="flex items-center space-x-2">
+        <Button
+          :class="[groupOperator === 'AND' ? 'bg-black' : 'bg-gray-100 text-black']"
+          @click="toggleGroupOperator('AND')"
+        >
+          AND
+        </Button>
+        <Button
+          :class="[groupOperator === 'OR' ? 'bg-black' : 'bg-gray-100 text-black']"
+          @click="toggleGroupOperator('OR')"
+        >
+          OR
+        </Button>
+      </div>
+    </div>
+    <RuleBox
+      :ruleGroup="secondRuleGroup"
+      @update-group="handleUpdateGroup"
+      @add-condition="handleAddCondition"
+      @remove-condition="handleRemoveCondition"
+      :groupIndex="1"
+    />
+    <p class="font-semibold">Perform these actions</p>
+    <ActionBox
+      :actions="getActions()"
+      :update-actions="handleUpdateActions"
+      @add-action="handleAddAction"
+      @remove-action="handleRemoveAction"
+    />
+    <Button @click="handleSave">Save</Button>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref, computed } from 'vue';
-import { Label } from '@/components/ui/label';
-import { Input } from '@/components/ui/input';
-import { Button } from '@/components/ui/button';
-import RuleBox from './RuleBox.vue';
-import ActionBox from './ActionBox.vue';
-import api from '@/api';
+import { onMounted, ref, computed } from 'vue'
+import { Label } from '@/components/ui/label'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
+import RuleBox from './RuleBox.vue'
+import ActionBox from './ActionBox.vue'
+import api from '@/api'
 import { useRouter } from 'vue-router'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
-import {
-    CustomBreadcrumb,
-} from '@/components/ui/breadcrumb'
+import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 
 const rule = ref({
-    "id": 0,
-    "name": "",
-    "description": "",
-    "type": "new_conversation",
-    "rules": [
+  id: 0,
+  name: '',
+  description: '',
+  type: 'new_conversation',
+  rules: [
+    {
+      type: 'new_conversation',
+      groups: [
         {
-            "type": "new_conversation",
-            "groups": [
-                {
-                    "rules": [
-                    ],
-                    "logical_op": "OR"
-                },
-                {
-                    "rules": [
-                    ],
-                    "logical_op": "OR"
-                }
-            ],
-            "actions": [],
-            "group_operator": "OR"
+          rules: [],
+          logical_op: 'OR'
+        },
+        {
+          rules: [],
+          logical_op: 'OR'
         }
-    ]
+      ],
+      actions: [],
+      group_operator: 'OR'
+    }
+  ]
 })
 
 const props = defineProps({
-    id: {
-        type: [String, Number],
-        required: false,
-    },
+  id: {
+    type: [String, Number],
+    required: false
+  }
 })
 
 const breadcrumbPageLabel = () => {
-    if (props.id > 0)
-        return "Edit rule"
-    return "New rule"
+  if (props.id > 0) return 'Edit rule'
+  return 'New rule'
 }
 
 const formTitle = computed(() => {
-    if (props.id > 0)
-        return "Edit existing rule"
-    return "Create new rule"
+  if (props.id > 0) return 'Edit existing rule'
+  return 'Create new rule'
 })
 
 const breadcrumbLinks = [
-    { path: '/admin/automations', label: 'Automations' },
-    { path: '#', label: breadcrumbPageLabel() }
+  { path: '/admin/automations', label: 'Automations' },
+  { path: '#', label: breadcrumbPageLabel() }
 ]
 
 const router = useRouter()
 
-
 const firstRuleGroup = ref([])
 const secondRuleGroup = ref([])
-const groupOperator = ref("")
-
+const groupOperator = ref('')
 
 const getFirstGroup = () => {
-    if (rule.value.rules?.[0]?.groups?.[0]) {
-        return rule.value.rules[0].groups[0]
-    }
-    return []
+  if (rule.value.rules?.[0]?.groups?.[0]) {
+    return rule.value.rules[0].groups[0]
+  }
+  return []
 }
 
 const getSecondGroup = () => {
-    if (rule.value.rules?.[0]?.groups?.[1]) {
-        return rule.value.rules[0].groups[1]
-    }
-    return []
+  if (rule.value.rules?.[0]?.groups?.[1]) {
+    return rule.value.rules[0].groups[1]
+  }
+  return []
 }
 
 const getActions = () => {
-    if (rule.value.rules?.[0]?.actions) {
-        return rule.value.rules[0].actions
-    }
-    return []
+  if (rule.value.rules?.[0]?.actions) {
+    return rule.value.rules[0].actions
+  }
+  return []
 }
 
 const toggleGroupOperator = (value) => {
-    if (rule.value.rules?.[0]) {
-        rule.value.rules[0].group_operator = value;
-        groupOperator.value = value;
-    }
+  if (rule.value.rules?.[0]) {
+    rule.value.rules[0].group_operator = value
+    groupOperator.value = value
+  }
 }
 
 const getGroupOperator = () => {
-    if (rule.value.rules?.[0]) {
-        return rule.value.rules[0].group_operator;
-    }
-    return "";
+  if (rule.value.rules?.[0]) {
+    return rule.value.rules[0].group_operator
+  }
+  return ''
 }
 
 const handleUpdateGroup = (value, groupIndex) => {
-    rule.value.rules[0].groups[groupIndex] = value.value
+  rule.value.rules[0].groups[groupIndex] = value.value
 }
 
 const handleAddCondition = (groupIndex) => {
-    rule.value.rules[0].groups[groupIndex].rules.push({})
+  rule.value.rules[0].groups[groupIndex].rules.push({})
 }
 
 const handleRemoveCondition = (groupIndex, ruleIndex) => {
-    rule.value.rules[0].groups[groupIndex].rules.splice(ruleIndex, 1)
+  rule.value.rules[0].groups[groupIndex].rules.splice(ruleIndex, 1)
 }
 
 const handleUpdateActions = (value, index) => {
-    rule.value.rules[0].actions[index] = value
+  rule.value.rules[0].actions[index] = value
 }
 
 const handleAddAction = () => {
-    rule.value.rules[0].actions.push({})
+  rule.value.rules[0].actions.push({})
 }
 
 const handleRemoveAction = (index) => {
-    rule.value.rules[0].actions.splice(index, 1)
+  rule.value.rules[0].actions.splice(index, 1)
 }
 
 const handeTypeUpdate = (value) => {
-    rule.value.type = value
+  rule.value.type = value
 }
 
 const handleSave = async () => {
-    const updatedRule = { ...rule.value }
-    // Delete fields not required.
-    delete updatedRule.created_at
-    delete updatedRule.updated_at
-    if (props.id > 0)
-        await api.updateAutomationRule(props.id, updatedRule)
-    else
-        await api.createAutomationRule(updatedRule)
-    router.push({ path: `/admin/automations` })
+  const updatedRule = { ...rule.value }
+  // Delete fields not required.
+  delete updatedRule.created_at
+  delete updatedRule.updated_at
+  if (props.id > 0) await api.updateAutomationRule(props.id, updatedRule)
+  else await api.createAutomationRule(updatedRule)
+  router.push({ path: `/admin/automations` })
 }
 
 onMounted(async () => {
-    if (props.id > 0) {
-        try {
-            let resp = await api.getAutomationRule(props.id)
-            rule.value = resp.data.data;
-        } catch (error) {
-            console.log(error)
-            router.push({ path: `/admin/automations` })
-        }
+  if (props.id > 0) {
+    try {
+      let resp = await api.getAutomationRule(props.id)
+      rule.value = resp.data.data
+    } catch (error) {
+      console.log(error)
+      router.push({ path: `/admin/automations` })
     }
-    firstRuleGroup.value = getFirstGroup()
-    secondRuleGroup.value = getSecondGroup()
-    groupOperator.value = getGroupOperator()
+  }
+  firstRuleGroup.value = getFirstGroup()
+  secondRuleGroup.value = getSecondGroup()
+  groupOperator.value = getGroupOperator()
 })
 </script>
diff --git a/frontend/src/components/admin/automation/RuleBox.vue b/frontend/src/components/admin/automation/RuleBox.vue
index 0ad7f6c..c900d96 100644
--- a/frontend/src/components/admin/automation/RuleBox.vue
+++ b/frontend/src/components/admin/automation/RuleBox.vue
@@ -1,77 +1,89 @@
 <template>
-    <div>
-        <div class="mb-5">
-            <RadioGroup class="flex" :modelValue="ruleGroup.logical_op" @update:modelValue="handleGroupOperator">
-                <div class="flex items-center space-x-2">
-                    <RadioGroupItem value="OR" />
-                    <Label for="r1">Match <b>ANY</b> of below.</Label>
-                </div>
-                <div class="flex items-center space-x-2">
-                    <RadioGroupItem value="AND" />
-                    <Label for="r1">Match <b>ALL</b> of below.</Label>
-                </div>
-            </RadioGroup>
+  <div>
+    <div class="mb-5">
+      <RadioGroup
+        class="flex"
+        :modelValue="ruleGroup.logical_op"
+        @update:modelValue="handleGroupOperator"
+      >
+        <div class="flex items-center space-x-2">
+          <RadioGroupItem value="OR" />
+          <Label for="r1">Match <b>ANY</b> of below.</Label>
         </div>
-        <div class="box border p-5 space-y-5 rounded-lg">
-            <div class="space-y-5">
-                <div v-for="(rule, index) in ruleGroup.rules" :key="rule" class="space-y-5">
-                    <div v-if="index > 0">
-                        <hr class="border-t-2 border-dotted border-gray-300">
-                    </div>
-                    <div class="flex  justify-between">
-                        <div class="flex space-x-5">
-                            <Select v-model="rule.field"
-                                @update:modelValue="(value) => handleFieldChange(value, index)">
-                                <SelectTrigger class="w-56">
-                                    <SelectValue placeholder="Select field" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectGroup>
-                                        <SelectLabel>Conversation</SelectLabel>
-                                        <SelectItem v-for="(field, key) in conversationFields" :key="key" :value="key">
-                                            {{ field.label }}
-                                        </SelectItem>
-                                    </SelectGroup>
-                                </SelectContent>
-                            </Select>
-
-                            <Select v-model="rule.operator"
-                                @update:modelValue="(value) => handleOperatorChange(value, index)">
-                                <SelectTrigger class="w-56">
-                                    <SelectValue placeholder="Select operator" />
-                                </SelectTrigger>
-                                <SelectContent>
-                                    <SelectGroup>
-                                        <SelectItem v-for="(field, key) in operators" :key="key" :value="key">
-                                            {{ field.label }}
-                                        </SelectItem>
-                                    </SelectGroup>
-                                </SelectContent>
-                            </Select>
-                        </div>
-                        <div class="cursor-pointer" @click="removeCondition(index)">
-                            <CircleX size="21" />
-                        </div>
-                    </div>
-                    <div>
-                        <Input type="text" placeholder="Set value" :modelValue="rule.value"
-                            @update:modelValue="(value) => handleValueChange(value, index)" />
-                    </div>
-                    <div class="flex items-center space-x-2">
-                        <Checkbox id="terms" :defaultChecked="rule.case_sensitive_match"
-                            @update:checked="(value) => handleCaseSensitiveCheck(value, index)" />
-                        <label for="terms">
-                            Case sensitive match
-                        </label>
-                    </div>
-                </div>
-
-            </div>
-            <div>
-                <Button variant="outline" size="sm" @click="addCondition">Add condition</Button>
-            </div>
+        <div class="flex items-center space-x-2">
+          <RadioGroupItem value="AND" />
+          <Label for="r1">Match <b>ALL</b> of below.</Label>
         </div>
+      </RadioGroup>
     </div>
+    <div class="box border p-5 space-y-5 rounded-lg">
+      <div class="space-y-5">
+        <div v-for="(rule, index) in ruleGroup.rules" :key="rule" class="space-y-5">
+          <div v-if="index > 0">
+            <hr class="border-t-2 border-dotted border-gray-300" />
+          </div>
+          <div class="flex justify-between">
+            <div class="flex space-x-5">
+              <Select
+                v-model="rule.field"
+                @update:modelValue="(value) => handleFieldChange(value, index)"
+              >
+                <SelectTrigger class="w-56">
+                  <SelectValue placeholder="Select field" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectLabel>Conversation</SelectLabel>
+                    <SelectItem v-for="(field, key) in conversationFields" :key="key" :value="key">
+                      {{ field.label }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+
+              <Select
+                v-model="rule.operator"
+                @update:modelValue="(value) => handleOperatorChange(value, index)"
+              >
+                <SelectTrigger class="w-56">
+                  <SelectValue placeholder="Select operator" />
+                </SelectTrigger>
+                <SelectContent>
+                  <SelectGroup>
+                    <SelectItem v-for="(field, key) in operators" :key="key" :value="key">
+                      {{ field.label }}
+                    </SelectItem>
+                  </SelectGroup>
+                </SelectContent>
+              </Select>
+            </div>
+            <div class="cursor-pointer" @click="removeCondition(index)">
+              <CircleX size="21" />
+            </div>
+          </div>
+          <div>
+            <Input
+              type="text"
+              placeholder="Set value"
+              :modelValue="rule.value"
+              @update:modelValue="(value) => handleValueChange(value, index)"
+            />
+          </div>
+          <div class="flex items-center space-x-2">
+            <Checkbox
+              id="terms"
+              :defaultChecked="rule.case_sensitive_match"
+              @update:checked="(value) => handleCaseSensitiveCheck(value, index)"
+            />
+            <label for="terms"> Case sensitive match </label>
+          </div>
+        </div>
+      </div>
+      <div>
+        <Button variant="outline" size="sm" @click="addCondition">Add condition</Button>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -80,27 +92,27 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 import { Button } from '@/components/ui/button'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectLabel,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectLabel,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
-import { CircleX } from 'lucide-vue-next';
+import { CircleX } from 'lucide-vue-next'
 import { Label } from '@/components/ui/label'
 import { Input } from '@/components/ui/input'
 
 const props = defineProps({
-    ruleGroup: {
-        type: Object,
-        required: true,
-    },
-    groupIndex: {
-        Type: Number,
-        required: true,
-    }
+  ruleGroup: {
+    type: Object,
+    required: true
+  },
+  groupIndex: {
+    Type: Number,
+    required: true
+  }
 })
 
 const { ruleGroup } = toRefs(props)
@@ -108,81 +120,81 @@ const { ruleGroup } = toRefs(props)
 const emit = defineEmits(['update-group', 'add-condition', 'remove-condition'])
 
 const handleGroupOperator = (value) => {
-    ruleGroup.value.logical_op = value
-    emitUpdate()
+  ruleGroup.value.logical_op = value
+  emitUpdate()
 }
 
 const handleFieldChange = (value, ruleIndex) => {
-    ruleGroup.value.rules[ruleIndex].field = value
-    emitUpdate()
+  ruleGroup.value.rules[ruleIndex].field = value
+  emitUpdate()
 }
 
 const handleOperatorChange = (value, ruleIndex) => {
-    ruleGroup.value.rules[ruleIndex].operator = value
-    emitUpdate()
+  ruleGroup.value.rules[ruleIndex].operator = value
+  emitUpdate()
 }
 
 const handleValueChange = (value, ruleIndex) => {
-    ruleGroup.value.rules[ruleIndex].value = value
-    emitUpdate()
+  ruleGroup.value.rules[ruleIndex].value = value
+  emitUpdate()
 }
 
 const handleCaseSensitiveCheck = (value, ruleIndex) => {
-    ruleGroup.value.rules[ruleIndex].case_sensitive_match = value
-    emitUpdate()
+  ruleGroup.value.rules[ruleIndex].case_sensitive_match = value
+  emitUpdate()
 }
 
 const removeCondition = (index) => {
-    emit('remove-condition', props.groupIndex, index)
+  emit('remove-condition', props.groupIndex, index)
 }
 
 const addCondition = () => {
-    emit('add-condition', props.groupIndex)
+  emit('add-condition', props.groupIndex)
 }
 
 const emitUpdate = () => {
-    emit('update-group', ruleGroup, props.groupIndex)
+  emit('update-group', ruleGroup, props.groupIndex)
 }
 
 const conversationFields = {
-    "content": {
-        "label": "Content"
-    },
-    "subject": {
-        "label": "Subject"
-    },
-    "status": {
-        "label": "Status"
-    },
-    "priority": {
-        "label": "Priority"
-    },
-    "assigned_team": {
-        "label": "Assigned team"
-    },
-    "assigned_user": {
-        "label": "Assigned user"
-    }
+  content: {
+    label: 'Content'
+  },
+  subject: {
+    label: 'Subject'
+  },
+  status: {
+    label: 'Status'
+  },
+  priority: {
+    label: 'Priority'
+  },
+  assigned_team: {
+    label: 'Assigned team'
+  },
+  assigned_user: {
+    label: 'Assigned user'
+  }
 }
 
 const operators = {
-    "contains": {
-        "label": "Contains"
-    },
-    "not_contains": {
-        "label": "Not contains"
-    },
-    "equals": {
-        "label": "Equals"
-    },
-    "not_equals": {
-        "label": "Not equals"
-    },
-    "set": {
-        "label": "Set"
-    },
-    "not_set": {
-        "label": "Not set"
-    }
+  contains: {
+    label: 'Contains'
+  },
+  not_contains: {
+    label: 'Not contains'
+  },
+  equals: {
+    label: 'Equals'
+  },
+  not_equals: {
+    label: 'Not equals'
+  },
+  set: {
+    label: 'Set'
+  },
+  not_set: {
+    label: 'Not set'
+  }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/automation/RuleList.vue b/frontend/src/components/admin/automation/RuleList.vue
index 7daf532..b382941 100644
--- a/frontend/src/components/admin/automation/RuleList.vue
+++ b/frontend/src/components/admin/automation/RuleList.vue
@@ -1,55 +1,55 @@
 <template>
-    <div class="flex flex-col box px-5 py-6 rounded-lg justify-center">
-        <div class="flex justify-between space-y-3">
-            <div>
-                <span class="sub-title space-x-3 flex justify-center items-center">
-                    <div class="text-base">
-                        {{ rule.name }}
-                    </div>
-                    <div class="mb-1">
-                        <Badge v-if="!rule.disabled">Enabled</Badge>
-                        <Badge v-else variant="secondary">Disabled</Badge>
-                    </div>
-                </span>
-            </div>
-            <div>
-                <DropdownMenu>
-                    <DropdownMenuTrigger as-child>
-                        <button>
-                            <EllipsisVertical size=21></EllipsisVertical>
-                        </button>
-                    </DropdownMenuTrigger>
-                    <DropdownMenuContent>
-                        <DropdownMenuItem @click="navigateToEditRule(rule.id)">
-                            <span>Edit</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem @click="$emit('delete-rule', rule.id)">
-                            <span>Delete</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem @click="$emit('toggle-rule', rule.id)" v-if="!rule.disabled">
-                            <span>Disable</span>
-                        </DropdownMenuItem>
-                        <DropdownMenuItem @click="$emit('toggle-rule', rule.id)" v-else>
-                            <span>Enable</span>
-                        </DropdownMenuItem>
-                    </DropdownMenuContent>
-                </DropdownMenu>
-            </div>
-        </div>
-        <p class="text-sm-muted">
-            {{ rule.description }}
-        </p>
+  <div class="flex flex-col box px-5 py-6 rounded-lg justify-center">
+    <div class="flex justify-between space-y-3">
+      <div>
+        <span class="sub-title space-x-3 flex justify-center items-center">
+          <div class="text-base">
+            {{ rule.name }}
+          </div>
+          <div class="mb-1">
+            <Badge v-if="!rule.disabled">Enabled</Badge>
+            <Badge v-else variant="secondary">Disabled</Badge>
+          </div>
+        </span>
+      </div>
+      <div>
+        <DropdownMenu>
+          <DropdownMenuTrigger as-child>
+            <button>
+              <EllipsisVertical size="21"></EllipsisVertical>
+            </button>
+          </DropdownMenuTrigger>
+          <DropdownMenuContent>
+            <DropdownMenuItem @click="navigateToEditRule(rule.id)">
+              <span>Edit</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="$emit('delete-rule', rule.id)">
+              <span>Delete</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="$emit('toggle-rule', rule.id)" v-if="!rule.disabled">
+              <span>Disable</span>
+            </DropdownMenuItem>
+            <DropdownMenuItem @click="$emit('toggle-rule', rule.id)" v-else>
+              <span>Enable</span>
+            </DropdownMenuItem>
+          </DropdownMenuContent>
+        </DropdownMenu>
+      </div>
     </div>
+    <p class="text-sm-muted">
+      {{ rule.description }}
+    </p>
+  </div>
 </template>
 
 <script setup>
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger,
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
-import { EllipsisVertical } from 'lucide-vue-next';
+import { EllipsisVertical } from 'lucide-vue-next'
 import { useRouter } from 'vue-router'
 import { Badge } from '@/components/ui/badge'
 
@@ -57,13 +57,13 @@ const router = useRouter()
 defineEmits(['delete-rule', 'toggle-rule'])
 
 defineProps({
-    rule: {
-        type: Object,
-        required: true,
-    },
+  rule: {
+    type: Object,
+    required: true
+  }
 })
 
 const navigateToEditRule = (id) => {
-    router.push({ path: `/admin/automations/${id}/edit` })
+  router.push({ path: `/admin/automations/${id}/edit` })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/automation/TabConversationCreation.vue b/frontend/src/components/admin/automation/TabConversationCreation.vue
index 7f47c2b..c72a0a5 100644
--- a/frontend/src/components/admin/automation/TabConversationCreation.vue
+++ b/frontend/src/components/admin/automation/TabConversationCreation.vue
@@ -1,38 +1,44 @@
 <template>
-    <div class="space-y-5">
-        <div>
-            <p class="text-sm-muted">Rules that run when a new conversation is created</p>
-        </div>
-        <div v-if="showRuleList" class="space-y-5">
-            <RuleList v-for="rule in rules" :key="rule.name" :rule="rule" @delete-rule="deleteRule"  @toggle-rule="toggleRule"/>
-        </div>
+  <div class="space-y-5">
+    <div>
+      <p class="text-sm-muted">Rules that run when a new conversation is created</p>
     </div>
+    <div v-if="showRuleList" class="space-y-5">
+      <RuleList
+        v-for="rule in rules"
+        :key="rule.name"
+        :rule="rule"
+        @delete-rule="deleteRule"
+        @toggle-rule="toggleRule"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import RuleList from './RuleList.vue'
-import api from '@/api';
+import api from '@/api'
 
 const showRuleList = ref(true)
 const rules = ref([])
 
 onMounted(() => {
-    fetchRules()
+  fetchRules()
 })
 
 const fetchRules = async () => {
-    let resp = await api.getAutomationRules("new_conversation")
-    rules.value = resp.data.data
+  let resp = await api.getAutomationRules('new_conversation')
+  rules.value = resp.data.data
 }
 
 const deleteRule = async (id) => {
-    await api.deleteAutomationRule(id)
-    fetchRules()
+  await api.deleteAutomationRule(id)
+  fetchRules()
 }
 
 const toggleRule = async (id) => {
-    await api.toggleAutomationRule(id)
-    fetchRules()
+  await api.toggleAutomationRule(id)
+  fetchRules()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/automation/TabConversationUpdate.vue b/frontend/src/components/admin/automation/TabConversationUpdate.vue
index cdd925a..a033040 100644
--- a/frontend/src/components/admin/automation/TabConversationUpdate.vue
+++ b/frontend/src/components/admin/automation/TabConversationUpdate.vue
@@ -1,38 +1,44 @@
 <template>
-    <div class="space-y-5">
-        <div>
-            <p class="text-muted-foreground text-sm">Rules that run when a conversation is updated</p>
-        </div>
-        <div v-if="showRuleList" class="space-y-5">
-            <RuleList v-for="rule in rules" :key="rule.name" :rule="rule" @delete-rule="deleteRule"  @toggle-rule="toggleRule"/>
-        </div>
+  <div class="space-y-5">
+    <div>
+      <p class="text-muted-foreground text-sm">Rules that run when a conversation is updated</p>
     </div>
+    <div v-if="showRuleList" class="space-y-5">
+      <RuleList
+        v-for="rule in rules"
+        :key="rule.name"
+        :rule="rule"
+        @delete-rule="deleteRule"
+        @toggle-rule="toggleRule"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import RuleList from './RuleList.vue'
-import api from '@/api';
+import api from '@/api'
 
 const showRuleList = ref(true)
 const rules = ref([])
 
 onMounted(() => {
-    fetchRules()
+  fetchRules()
 })
 
 const fetchRules = async () => {
-    let resp = await api.getAutomationRules("conversation_update")
-    rules.value = resp.data.data
+  let resp = await api.getAutomationRules('conversation_update')
+  rules.value = resp.data.data
 }
 
 const deleteRule = async (id) => {
-    await api.deleteAutomationRule(id)
-    fetchRules()
+  await api.deleteAutomationRule(id)
+  fetchRules()
 }
 
 const toggleRule = async (id) => {
-    await api.toggleAutomationRule(id)
-    fetchRules()
+  await api.toggleAutomationRule(id)
+  fetchRules()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/automation/TabTimeTrigger.vue b/frontend/src/components/admin/automation/TabTimeTrigger.vue
index 05d70a6..42376b7 100644
--- a/frontend/src/components/admin/automation/TabTimeTrigger.vue
+++ b/frontend/src/components/admin/automation/TabTimeTrigger.vue
@@ -1,39 +1,44 @@
 <template>
-    <div class="space-y-5">
-        <div>
-            <p class="text-muted-foreground text-sm">Rules that run every hour</p>
-        </div>
-        <div v-if="showRuleList" class="space-y-5">
-            <RuleList v-for="rule in rules" :key="rule.name" :rule="rule" @delete-rule="deleteRule"
-                @toggle-rule="toggleRule" />
-        </div>
+  <div class="space-y-5">
+    <div>
+      <p class="text-muted-foreground text-sm">Rules that run every hour</p>
     </div>
+    <div v-if="showRuleList" class="space-y-5">
+      <RuleList
+        v-for="rule in rules"
+        :key="rule.name"
+        :rule="rule"
+        @delete-rule="deleteRule"
+        @toggle-rule="toggleRule"
+      />
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { ref, onMounted } from 'vue'
 import RuleList from './RuleList.vue'
-import api from '@/api';
+import api from '@/api'
 
 const showRuleList = ref(true)
 const rules = ref([])
 
 onMounted(() => {
-    fetchRules()
+  fetchRules()
 })
 
 const fetchRules = async () => {
-    let resp = await api.getAutomationRules("time_trigger")
-    rules.value = resp.data.data
+  let resp = await api.getAutomationRules('time_trigger')
+  rules.value = resp.data.data
 }
 
 const deleteRule = async (id) => {
-    await api.deleteAutomationRule(id)
-    fetchRules()
+  await api.deleteAutomationRule(id)
+  fetchRules()
 }
 
 const toggleRule = async (id) => {
-    await api.toggleAutomationRule(id)
-    fetchRules()
+  await api.toggleAutomationRule(id)
+  fetchRules()
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/common/MenuCard.vue b/frontend/src/components/admin/common/MenuCard.vue
index 3e02a0c..e7bf74e 100644
--- a/frontend/src/components/admin/common/MenuCard.vue
+++ b/frontend/src/components/admin/common/MenuCard.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="box flex-1 rounded-lg px-8 py-4 transition-shadow duration-170 cursor-pointer hover:bg-muted"
-    @click="handleClick">
+  <div
+    class="box flex-1 rounded-lg px-8 py-4 transition-shadow duration-170 cursor-pointer hover:bg-muted"
+    @click="handleClick"
+  >
     <div class="flex items-center mb-4">
       <component :is="icon" size="16" class="mr-2" />
       <p class="text-lg">{{ title }}</p>
diff --git a/frontend/src/components/admin/common/PageHeader.vue b/frontend/src/components/admin/common/PageHeader.vue
index cf80388..cc171b2 100644
--- a/frontend/src/components/admin/common/PageHeader.vue
+++ b/frontend/src/components/admin/common/PageHeader.vue
@@ -15,5 +15,5 @@ defineProps({
     type: String,
     required: true
   }
-});
-</script>
\ No newline at end of file
+})
+</script>
diff --git a/frontend/src/components/admin/conversation/ConversationPage.vue b/frontend/src/components/admin/conversation/ConversationPage.vue
index fae8d81..83c80db 100644
--- a/frontend/src/components/admin/conversation/ConversationPage.vue
+++ b/frontend/src/components/admin/conversation/ConversationPage.vue
@@ -1,55 +1,61 @@
 <template>
-    <div>
-        <div class="mb-5">
-            <PageHeader title="Conversation" description="Manage conversation settings" />
-        </div>
-        <div class="flex space-x-5">
-            <AdminMenuCard v-for="card in cards" :key="card.title" :onClick="card.onClick" :title="card.title"
-                :subTitle="card.subTitle" :icon="card.icon">
-            </AdminMenuCard>
-        </div>
+  <div>
+    <div class="mb-5">
+      <PageHeader title="Conversation" description="Manage conversation settings" />
     </div>
-    <router-view></router-view>
+    <div class="flex space-x-5">
+      <AdminMenuCard
+        v-for="card in cards"
+        :key="card.title"
+        :onClick="card.onClick"
+        :title="card.title"
+        :subTitle="card.subTitle"
+        :icon="card.icon"
+      >
+      </AdminMenuCard>
+    </div>
+  </div>
+  <router-view></router-view>
 </template>
 
 <script setup>
 import { useRouter } from 'vue-router'
 import { Tag, TrendingUp, Activity } from 'lucide-vue-next'
 import AdminMenuCard from '@/components/admin/common/MenuCard.vue'
-import PageHeader from '../common/PageHeader.vue';
+import PageHeader from '../common/PageHeader.vue'
 
 const router = useRouter()
 
 const navigateToTags = () => {
-    router.push('/admin/conversations/tags')
+  router.push('/admin/conversations/tags')
 }
 
 const navigateToStatus = () => {
-    router.push('/admin/conversations/status')
+  router.push('/admin/conversations/status')
 }
 
 const navigateToPriority = () => {
-    router.push('/admin/conversations/priority')
+  router.push('/admin/conversations/priority')
 }
 
 const cards = [
-    {
-        title: 'Tags',
-        subTitle: 'Manage conversation tags.',
-        onClick: navigateToTags,
-        icon: Tag
-    },
-    {
-        title: 'Priority',
-        subTitle: 'Manage conversation priorities.',
-        onClick: navigateToPriority,
-        icon: Activity
-    },
-    {
-        title: 'Status',
-        subTitle: 'Manage conversation statuses.',
-        onClick: navigateToStatus,
-        icon: TrendingUp
-    },
+  {
+    title: 'Tags',
+    subTitle: 'Manage conversation tags.',
+    onClick: navigateToTags,
+    icon: Tag
+  },
+  {
+    title: 'Priority',
+    subTitle: 'Manage conversation priorities.',
+    onClick: navigateToPriority,
+    icon: Activity
+  },
+  {
+    title: 'Status',
+    subTitle: 'Manage conversation statuses.',
+    onClick: navigateToStatus,
+    icon: TrendingUp
+  }
 ]
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/conversation/priority/PriorityPage.vue b/frontend/src/components/admin/conversation/priority/PriorityPage.vue
index 7745944..75f1a25 100644
--- a/frontend/src/components/admin/conversation/priority/PriorityPage.vue
+++ b/frontend/src/components/admin/conversation/priority/PriorityPage.vue
@@ -1,6 +1,3 @@
-<template>
-    Priority
-</template>
+<template>Priority</template>
 
-<script setup>
-</script>
\ No newline at end of file
+<script setup></script>
diff --git a/frontend/src/components/admin/conversation/status/StatusPage.vue b/frontend/src/components/admin/conversation/status/StatusPage.vue
index 0e88354..6dd1c04 100644
--- a/frontend/src/components/admin/conversation/status/StatusPage.vue
+++ b/frontend/src/components/admin/conversation/status/StatusPage.vue
@@ -1,6 +1,3 @@
-<template>
-    Status
-</template>
+<template>Status</template>
 
-<script setup>
-</script>
\ No newline at end of file
+<script setup></script>
diff --git a/frontend/src/components/admin/conversation/tags/TagsPage.vue b/frontend/src/components/admin/conversation/tags/TagsPage.vue
index 94635e0..d22c9f9 100644
--- a/frontend/src/components/admin/conversation/tags/TagsPage.vue
+++ b/frontend/src/components/admin/conversation/tags/TagsPage.vue
@@ -10,9 +10,7 @@
           <DialogContent class="sm:max-w-[425px]">
             <DialogHeader>
               <DialogTitle>Add a Tag</DialogTitle>
-              <DialogDescription>
-                Set tag name. Click save when you're done.
-              </DialogDescription>
+              <DialogDescription> Set tag name. Click save when you're done. </DialogDescription>
             </DialogHeader>
             <form @submit.prevent="onSubmit">
               <FormField v-slot="{ field }" name="name">
@@ -51,7 +49,7 @@ import {
   FormField,
   FormItem,
   FormLabel,
-  FormMessage,
+  FormMessage
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import {
@@ -61,7 +59,7 @@ import {
   DialogFooter,
   DialogHeader,
   DialogTitle,
-  DialogTrigger,
+  DialogTrigger
 } from '@/components/ui/dialog'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
@@ -76,13 +74,12 @@ const dialogOpen = ref(false)
 onMounted(() => {
   getTags()
   emit.on('refresh-list', (data) => {
-    if (data?.name === "tags")
-      getTags()
+    if (data?.name === 'tags') getTags()
   })
 })
 
 const form = useForm({
-  validationSchema: toTypedSchema(formSchema),
+  validationSchema: toTypedSchema(formSchema)
 })
 
 const getTags = async () => {
@@ -99,5 +96,4 @@ const onSubmit = form.handleSubmit(async (values) => {
     console.error('Failed to create tag:', error)
   }
 })
-
 </script>
diff --git a/frontend/src/components/admin/conversation/tags/dataTableColumns.js b/frontend/src/components/admin/conversation/tags/dataTableColumns.js
index 4fc2d62..6859c58 100644
--- a/frontend/src/components/admin/conversation/tags/dataTableColumns.js
+++ b/frontend/src/components/admin/conversation/tags/dataTableColumns.js
@@ -3,36 +3,36 @@ import dropdown from './dataTableDropdown.vue'
 import { format } from 'date-fns'
 
 export const columns = [
-    {
-        accessorKey: 'name',
-        header: function () {
-            return h('div', { class: 'text-center' }, 'Name')
-        },
-        cell: function ({ row }) {
-            return h('div', { class: 'text-center font-medium' }, row.getValue('name'))
-        }
+  {
+    accessorKey: 'name',
+    header: function () {
+      return h('div', { class: 'text-center' }, 'Name')
     },
-    {
-        accessorKey: 'created_at',
-        header: function () {
-            return h('div', { class: 'text-center' }, 'Created at')
-        },
-        cell: function ({ row }) {
-            return h('div', { class: 'text-center' }, format(row.getValue('created_at'), 'PPpp'))
-        }
-    },
-    {
-        id: 'actions',
-        enableHiding: false,
-        cell: ({ row }) => {
-            const tag = row.original
-            return h(
-                'div',
-                { class: 'relative' },
-                h(dropdown, {
-                    tag
-                })
-            )
-        }
+    cell: function ({ row }) {
+      return h('div', { class: 'text-center font-medium' }, row.getValue('name'))
     }
+  },
+  {
+    accessorKey: 'created_at',
+    header: function () {
+      return h('div', { class: 'text-center' }, 'Created at')
+    },
+    cell: function ({ row }) {
+      return h('div', { class: 'text-center' }, format(row.getValue('created_at'), 'PPpp'))
+    }
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const tag = row.original
+      return h(
+        'div',
+        { class: 'relative' },
+        h(dropdown, {
+          tag
+        })
+      )
+    }
+  }
 ]
diff --git a/frontend/src/components/admin/conversation/tags/dataTableDropdown.vue b/frontend/src/components/admin/conversation/tags/dataTableDropdown.vue
index 58efc4e..1112d7b 100644
--- a/frontend/src/components/admin/conversation/tags/dataTableDropdown.vue
+++ b/frontend/src/components/admin/conversation/tags/dataTableDropdown.vue
@@ -1,81 +1,74 @@
 <template>
-    <Dialog v-model:open="dialogOpen">
-        <DropdownMenu>
-            <DropdownMenuTrigger as-child>
-                <Button variant="ghost" class="w-8 h-8 p-0">
-                    <span class="sr-only">Open menu</span>
-                    <MoreHorizontal class="w-4 h-4" />
-                </Button>
-            </DropdownMenuTrigger>
-            <DropdownMenuContent>
-
-                <DialogTrigger as-child>
-                    <DropdownMenuItem>
-                        Edit
-                    </DropdownMenuItem>
-                </DialogTrigger>
-                <DropdownMenuItem @click="deleteTag">
-                    Delete
-                </DropdownMenuItem>
-            </DropdownMenuContent>
-        </DropdownMenu>
-        <DialogContent class="sm:max-w-[425px]">
-            <DialogHeader>
-                <DialogTitle>Edit tag</DialogTitle>
-                <DialogDescription>
-                    Change the tag name. Click save when you're done.
-                </DialogDescription>
-            </DialogHeader>
-            <form @submit.prevent="onSubmit">
-                <FormField v-slot="{ componentField }" name="name">
-                    <FormItem>
-                        <FormLabel>Name</FormLabel>
-                        <FormControl>
-                            <Input type="text" placeholder="billing, tech" v-bind="componentField" />
-                        </FormControl>
-                        <FormDescription>Renaming the tag will rename it across all conversations.</FormDescription>
-                        <FormMessage />
-                    </FormItem>
-                </FormField>
-                <DialogFooter>
-                    <Button type="submit" size="sm">
-                        Save changes
-                    </Button>
-                </DialogFooter>
-            </form>
-        </DialogContent>
-    </Dialog>
+  <Dialog v-model:open="dialogOpen">
+    <DropdownMenu>
+      <DropdownMenuTrigger as-child>
+        <Button variant="ghost" class="w-8 h-8 p-0">
+          <span class="sr-only">Open menu</span>
+          <MoreHorizontal class="w-4 h-4" />
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent>
+        <DialogTrigger as-child>
+          <DropdownMenuItem> Edit </DropdownMenuItem>
+        </DialogTrigger>
+        <DropdownMenuItem @click="deleteTag"> Delete </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+    <DialogContent class="sm:max-w-[425px]">
+      <DialogHeader>
+        <DialogTitle>Edit tag</DialogTitle>
+        <DialogDescription> Change the tag name. Click save when you're done. </DialogDescription>
+      </DialogHeader>
+      <form @submit.prevent="onSubmit">
+        <FormField v-slot="{ componentField }" name="name">
+          <FormItem>
+            <FormLabel>Name</FormLabel>
+            <FormControl>
+              <Input type="text" placeholder="billing, tech" v-bind="componentField" />
+            </FormControl>
+            <FormDescription
+              >Renaming the tag will rename it across all conversations.</FormDescription
+            >
+            <FormMessage />
+          </FormItem>
+        </FormField>
+        <DialogFooter>
+          <Button type="submit" size="sm"> Save changes </Button>
+        </DialogFooter>
+      </form>
+    </DialogContent>
+  </Dialog>
 </template>
 
 <script setup>
 import { watch, ref } from 'vue'
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { formSchema } from './formSchema.js'
 import {
-    FormControl,
-    FormDescription,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage
 } from '@/components/ui/form'
 import {
-    Dialog,
-    DialogContent,
-    DialogDescription,
-    DialogFooter,
-    DialogHeader,
-    DialogTitle,
-    DialogTrigger,
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogFooter,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger
 } from '@/components/ui/dialog'
 import { Input } from '@/components/ui/input'
 import { useEmitter } from '@/composables/useEmitter'
@@ -85,44 +78,44 @@ const dialogOpen = ref(false)
 const emit = useEmitter()
 
 const props = defineProps({
-    tag: {
-        type: Object,
-        required: true,
-        default: () => ({
-            id: '',
-            name: ''
-        })
-    }
+  tag: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: '',
+      name: ''
+    })
+  }
 })
 
 const form = useForm({
-    validationSchema: toTypedSchema(formSchema),
+  validationSchema: toTypedSchema(formSchema)
 })
 
 const onSubmit = form.handleSubmit(async (values) => {
-    await api.updateTag(props.tag.id, values)
-    dialogOpen.value = false
-    emitRefreshTagsList()
+  await api.updateTag(props.tag.id, values)
+  dialogOpen.value = false
+  emitRefreshTagsList()
 })
 
 const deleteTag = async () => {
-    await api.deleteTag(props.tag.id)
-    dialogOpen.value = false
-    emitRefreshTagsList()
+  await api.deleteTag(props.tag.id)
+  dialogOpen.value = false
+  emitRefreshTagsList()
 }
 
 const emitRefreshTagsList = () => {
-    emit.emit('refresh-list', {
-        name: 'tags'
-    })
+  emit.emit('refresh-list', {
+    name: 'tags'
+  })
 }
 
 // Watch for changes in initialValues and update the form.
 watch(
-    () => props.tag,
-    (newValues) => {
-        form.setValues(newValues)
-    },
-    { immediate: true, deep: true }
+  () => props.tag,
+  (newValues) => {
+    form.setValues(newValues)
+  },
+  { immediate: true, deep: true }
 )
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/conversation/tags/formSchema.js b/frontend/src/components/admin/conversation/tags/formSchema.js
index 948bc0f..602c23b 100644
--- a/frontend/src/components/admin/conversation/tags/formSchema.js
+++ b/frontend/src/components/admin/conversation/tags/formSchema.js
@@ -1,12 +1,11 @@
-import * as z from 'zod';
+import * as z from 'zod'
 
 export const formSchema = z.object({
-    name: z
-        .string({
-            required_error: 'Tag name is required.'
-        })
-        .min(1, {
-            message: 'First name must be at least 1 character.'
-        }),
-
-});
+  name: z
+    .string({
+      required_error: 'Tag name is required.'
+    })
+    .min(1, {
+      message: 'First name must be at least 1 character.'
+    })
+})
diff --git a/frontend/src/components/admin/general/GeneralPage.vue b/frontend/src/components/admin/general/GeneralPage.vue
index 9363372..d60b66c 100644
--- a/frontend/src/components/admin/general/GeneralPage.vue
+++ b/frontend/src/components/admin/general/GeneralPage.vue
@@ -9,28 +9,27 @@
 import { ref, onMounted } from 'vue'
 import GeneralSettingForm from './GeneralSettingForm.vue'
 import PageHeader from '../common/PageHeader.vue'
-import api from '@/api';
+import api from '@/api'
 
 const initialValues = ref({})
 
 onMounted(async () => {
-  const response = await api.getSettings('general');
-  const data = response.data.data;
+  const response = await api.getSettings('general')
+  const data = response.data.data
 
   initialValues.value = Object.keys(data).reduce((acc, key) => {
     // Remove 'app.' prefix
-    const newKey = key.replace(/^app\./, '');
-    acc[newKey] = data[key];
-    return acc;
-  }, {});
-});
-
+    const newKey = key.replace(/^app\./, '')
+    acc[newKey] = data[key]
+    return acc
+  }, {})
+})
 
 const submitForm = (values) => {
   // Prepend keys with `app.`
   const updatedValues = Object.fromEntries(
     Object.entries(values).map(([key, value]) => [`app.${key}`, value])
-  );
-  api.updateSettings('general', updatedValues);
+  )
+  api.updateSettings('general', updatedValues)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/general/GeneralSettingForm.vue b/frontend/src/components/admin/general/GeneralSettingForm.vue
index af00eb9..a517fa8 100644
--- a/frontend/src/components/admin/general/GeneralSettingForm.vue
+++ b/frontend/src/components/admin/general/GeneralSettingForm.vue
@@ -1,90 +1,92 @@
 <template>
-    <form @submit="onSubmit" class="w-2/3 space-y-6">
-        <FormField v-slot="{ field }" name="site_name">
-            <FormItem v-auto-animate>
-                <FormLabel>Site Name</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Site Name" v-bind="field" />
-                </FormControl>
-                <FormDescription>Enter the site name</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+  <form @submit="onSubmit" class="w-2/3 space-y-6">
+    <FormField v-slot="{ field }" name="site_name">
+      <FormItem v-auto-animate>
+        <FormLabel>Site Name</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Site Name" v-bind="field" />
+        </FormControl>
+        <FormDescription>Enter the site name</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ field }" name="lang">
-            <FormItem>
-                <FormLabel>Language</FormLabel>
-                <FormControl>
-                    <Select v-bind="field" :modelValue="field.value">
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select a language" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem value="en">
-                                    English
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </FormControl>
-                <FormDescription>Select language for the app.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ field }" name="lang">
+      <FormItem>
+        <FormLabel>Language</FormLabel>
+        <FormControl>
+          <Select v-bind="field" :modelValue="field.value">
+            <SelectTrigger>
+              <SelectValue placeholder="Select a language" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="en"> English </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </FormControl>
+        <FormDescription>Select language for the app.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ field }" name="root_url">
-            <FormItem v-auto-animate>
-                <FormLabel>Root URL</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Root URL" v-bind="field" />
-                </FormControl>
-                <FormDescription>Root URL of the app.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ field }" name="root_url">
+      <FormItem v-auto-animate>
+        <FormLabel>Root URL</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Root URL" v-bind="field" />
+        </FormControl>
+        <FormDescription>Root URL of the app.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ field }" name="favicon_url" :value="props.initialValues.favicon_url">
-            <FormItem v-auto-animate>
-                <FormLabel>Favicon URL</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Favicon URL" v-bind="field" />
-                </FormControl>
-                <FormDescription>Favicon URL for the app.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ field }" name="favicon_url" :value="props.initialValues.favicon_url">
+      <FormItem v-auto-animate>
+        <FormLabel>Favicon URL</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Favicon URL" v-bind="field" />
+        </FormControl>
+        <FormDescription>Favicon URL for the app.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ field }" name="max_file_upload_size" :value="props.initialValues.max_file_upload_size">
-            <FormItem v-auto-animate>
-                <FormLabel>Max allowed file upload size</FormLabel>
-                <FormControl>
-                    <Input type="number" placeholder="10" v-bind="field" />
-                </FormControl>
-                <FormDescription>In megabytes.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField
+      v-slot="{ field }"
+      name="max_file_upload_size"
+      :value="props.initialValues.max_file_upload_size"
+    >
+      <FormItem v-auto-animate>
+        <FormLabel>Max allowed file upload size</FormLabel>
+        <FormControl>
+          <Input type="number" placeholder="10" v-bind="field" />
+        </FormControl>
+        <FormDescription>In megabytes.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField name="allowed_file_upload_extensions" v-slot="{ componentField }">
-            <FormItem>
-                <FormLabel>Allowed file extensions</FormLabel>
-                <FormControl>
-                    <TagsInput v-model="componentField.modelValue">
-                        <TagsInputItem v-for="item in componentField.modelValue" :key="item" :value="item">
-                            <TagsInputItemText />
-                            <TagsInputItemDelete />
-                        </TagsInputItem>
-                        <TagsInputInput placeholder="jpg" />
-                    </TagsInput>
-                </FormControl>
-                <FormDescription>Use `*` to allow any file.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField name="allowed_file_upload_extensions" v-slot="{ componentField }">
+      <FormItem>
+        <FormLabel>Allowed file extensions</FormLabel>
+        <FormControl>
+          <TagsInput v-model="componentField.modelValue">
+            <TagsInputItem v-for="item in componentField.modelValue" :key="item" :value="item">
+              <TagsInputItemText />
+              <TagsInputItemDelete />
+            </TagsInputItem>
+            <TagsInputInput placeholder="jpg" />
+          </TagsInput>
+        </FormControl>
+        <FormDescription>Use `*` to allow any file.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <Button type="submit" size="sm"> {{ submitLabel }} </Button>
-    </form>
+    <Button type="submit" size="sm"> {{ submitLabel }} </Button>
+  </form>
 </template>
 
 <script setup>
@@ -95,55 +97,60 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { formSchema } from './formSchema.js'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import {
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormDescription
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
 } from '@/components/ui/form'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/components/ui/tags-input'
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText
+} from '@/components/ui/tags-input'
 import { Input } from '@/components/ui/input'
 
 const props = defineProps({
-    initialValues: {
-        type: Object,
-        required: false
-    },
-    submitForm: {
-        type: Function,
-        required: true
-    },
-    submitLabel: {
-        type: String,
-        required: false,
-        default: () => 'Submit'
-    },
+  initialValues: {
+    type: Object,
+    required: false
+  },
+  submitForm: {
+    type: Function,
+    required: true
+  },
+  submitLabel: {
+    type: String,
+    required: false,
+    default: () => 'Submit'
+  }
 })
 
 const form = useForm({
-    validationSchema: toTypedSchema(formSchema),
+  validationSchema: toTypedSchema(formSchema)
 })
 
 const onSubmit = form.handleSubmit((values) => {
-    props.submitForm(values)
+  props.submitForm(values)
 })
 
 // Watch for changes in initialValues and update the form.
 watch(
-    () => props.initialValues,
-    (newValues) => {
-        form.setValues(newValues);
-    },
-    { deep: true }
-);
-
-</script>
\ No newline at end of file
+  () => props.initialValues,
+  (newValues) => {
+    form.setValues(newValues)
+  },
+  { deep: true }
+)
+</script>
diff --git a/frontend/src/components/admin/general/formSchema.js b/frontend/src/components/admin/general/formSchema.js
index 599d82c..1406f03 100644
--- a/frontend/src/components/admin/general/formSchema.js
+++ b/frontend/src/components/admin/general/formSchema.js
@@ -1,42 +1,37 @@
 import * as z from 'zod'
 
 export const formSchema = z.object({
-    site_name: z
-        .string({
-            required_error: 'Site name is required.'
-        })
-        .min(1, {
-            message: 'Site name must be at least 1 characters.'
-        }),
-    lang: z
-        .string().optional(),
-    root_url: z
-        .string({
-            required_error: 'Root URL is required.'
-        })
-        .url({
-            message: 'Root URL must be a valid URL.'
-        }),
-    favicon_url: z
-        .string({
-            required_error: 'Favicon URL is required.'
-        })
-        .url({
-            message: 'Favicon URL must be a valid URL.'
-        }),
-    max_file_upload_size: z
-        .number({
-            required_error: 'Max upload file size is required.'
-        })
-        .min(1, {
-            message: 'Max upload file size must be at least 1 MB.'
-        })
-        .max(1024, {
-            message: 'Max upload file size cannot exceed 128 MB.'
-        }),
-    allowed_file_upload_extensions: z
-        .array(z.string())
-        .nullable()
-        .default([])
-        .optional(),
+  site_name: z
+    .string({
+      required_error: 'Site name is required.'
+    })
+    .min(1, {
+      message: 'Site name must be at least 1 characters.'
+    }),
+  lang: z.string().optional(),
+  root_url: z
+    .string({
+      required_error: 'Root URL is required.'
+    })
+    .url({
+      message: 'Root URL must be a valid URL.'
+    }),
+  favicon_url: z
+    .string({
+      required_error: 'Favicon URL is required.'
+    })
+    .url({
+      message: 'Favicon URL must be a valid URL.'
+    }),
+  max_file_upload_size: z
+    .number({
+      required_error: 'Max upload file size is required.'
+    })
+    .min(1, {
+      message: 'Max upload file size must be at least 1 MB.'
+    })
+    .max(1024, {
+      message: 'Max upload file size cannot exceed 128 MB.'
+    }),
+  allowed_file_upload_extensions: z.array(z.string()).nullable().default([]).optional()
 })
diff --git a/frontend/src/components/admin/inbox/EditInbox.vue b/frontend/src/components/admin/inbox/EditInbox.vue
index 8f5ea63..26be305 100644
--- a/frontend/src/components/admin/inbox/EditInbox.vue
+++ b/frontend/src/components/admin/inbox/EditInbox.vue
@@ -14,7 +14,7 @@ import { CustomBreadcrumb } from '@/components/ui/breadcrumb/index.js'
 
 const breadcrumbLinks = [
   { path: '/admin/inboxes', label: 'Inboxes' },
-  { path: '#', label: 'Edit Inbox' },
+  { path: '#', label: 'Edit Inbox' }
 ]
 const router = useRouter()
 const inbox = ref({})
diff --git a/frontend/src/components/admin/inbox/EmailInboxForm.vue b/frontend/src/components/admin/inbox/EmailInboxForm.vue
index e0a6afe..1b6dd4d 100644
--- a/frontend/src/components/admin/inbox/EmailInboxForm.vue
+++ b/frontend/src/components/admin/inbox/EmailInboxForm.vue
@@ -1,58 +1,64 @@
 <template>
-  <AutoForm class="w-11/12 space-y-6" :schema="emailChannelFormSchema" :form="form" :field-config="{
-    name: {
-      description: 'Name for your inbox.'
-    },
-    from: {
-      label: 'Email address',
-      description: 'From email address. e.g. My Support <mysupport@example.com>'
-    },
-    imap: {
-      label: 'IMAP',
-      password: {
-        inputProps: {
-          type: 'password',
-          placeholder: '••••••••'
+  <AutoForm
+    class="w-11/12 space-y-6"
+    :schema="emailChannelFormSchema"
+    :form="form"
+    :field-config="{
+      name: {
+        description: 'Name for your inbox.'
+      },
+      from: {
+        label: 'Email address',
+        description: 'From email address. e.g. My Support <mysupport@example.com>'
+      },
+      imap: {
+        label: 'IMAP',
+        password: {
+          inputProps: {
+            type: 'password',
+            placeholder: '••••••••'
+          }
+        },
+        read_interval: {
+          label: 'Emails scan interval'
         }
       },
-      read_interval: {
-        label: 'Emails scan interval'
-      }
-    },
-    smtp: {
-      label: 'SMTP',
-      max_conns: {
-        label: 'Max connections',
-        description: 'Maximum number of concurrent connections to the server.'
-      },
-      max_msg_retries: {
-        label: 'Retries',
-        description: 'Number of times to retry when a message fails.'
-      },
-      idle_timeout: {
-        label: 'Idle timeout',
-        description: `IdleTimeout is the maximum time to wait for new activity on a connection
+      smtp: {
+        label: 'SMTP',
+        max_conns: {
+          label: 'Max connections',
+          description: 'Maximum number of concurrent connections to the server.'
+        },
+        max_msg_retries: {
+          label: 'Retries',
+          description: 'Number of times to retry when a message fails.'
+        },
+        idle_timeout: {
+          label: 'Idle timeout',
+          description: `IdleTimeout is the maximum time to wait for new activity on a connection
         before closing it and removing it from the pool.`
-      },
-      wait_timeout: {
-        label: 'Wait timeout',
-        description: `PoolWaitTimeout is the maximum time to wait to obtain a connection from
+        },
+        wait_timeout: {
+          label: 'Wait timeout',
+          description: `PoolWaitTimeout is the maximum time to wait to obtain a connection from
       a pool before timing out. This may happen when all open connections are
       busy sending e-mails and they're not returning to the pool fast enough.
       This is also the timeout used when creating new SMTP connections.
       `
-      },
-      auth_protocol: {
-        label: 'Auth protocol'
-      },
-      password: {
-        inputProps: {
-          type: 'password',
-          placeholder: '••••••••'
+        },
+        auth_protocol: {
+          label: 'Auth protocol'
+        },
+        password: {
+          inputProps: {
+            type: 'password',
+            placeholder: '••••••••'
+          }
         }
       }
-    }
-  }" @submit="submitForm">
+    }"
+    @submit="submitForm"
+  >
     <Button type="submit" size="sm"> {{ props.submitLabel }} </Button>
   </AutoForm>
 </template>
@@ -90,8 +96,7 @@ const form = useForm({
 watch(
   () => props.initialValues,
   (newValues) => {
-    if (newValues)
-      form.setValues(newValues)
+    if (newValues) form.setValues(newValues)
   },
   { deep: true, immediate: true }
 )
diff --git a/frontend/src/components/admin/inbox/InboxDataTableDropDown.vue b/frontend/src/components/admin/inbox/InboxDataTableDropDown.vue
index 6e53fd6..cd8c7f9 100644
--- a/frontend/src/components/admin/inbox/InboxDataTableDropDown.vue
+++ b/frontend/src/components/admin/inbox/InboxDataTableDropDown.vue
@@ -41,7 +41,9 @@ function toggleInbox(id) {
     <DropdownMenuContent>
       <DropdownMenuItem @click="editInbox(props.inbox.id)"> Edit </DropdownMenuItem>
       <DropdownMenuItem @click="deleteInbox(props.inbox.id)"> Delete </DropdownMenuItem>
-      <DropdownMenuItem @click="toggleInbox(props.inbox.id)" v-if="props.inbox.disabled"> Enable </DropdownMenuItem>
+      <DropdownMenuItem @click="toggleInbox(props.inbox.id)" v-if="props.inbox.disabled">
+        Enable
+      </DropdownMenuItem>
       <DropdownMenuItem @click="toggleInbox(props.inbox.id)" v-else> Disable </DropdownMenuItem>
     </DropdownMenuContent>
   </DropdownMenu>
diff --git a/frontend/src/components/admin/inbox/InboxPage.vue b/frontend/src/components/admin/inbox/InboxPage.vue
index 2c1ba0e..820383e 100644
--- a/frontend/src/components/admin/inbox/InboxPage.vue
+++ b/frontend/src/components/admin/inbox/InboxPage.vue
@@ -111,7 +111,7 @@ const columns = [
           inbox,
           onEditInbox: (id) => handleEditInbox(id),
           onDeleteInbox: (id) => handleDeleteInbox(id),
-          onToggleInbox: (id) => handleToggleInbox(id),
+          onToggleInbox: (id) => handleToggleInbox(id)
         })
       )
     }
diff --git a/frontend/src/components/admin/inbox/NewInbox.vue b/frontend/src/components/admin/inbox/NewInbox.vue
index 208f898..2e88fb7 100644
--- a/frontend/src/components/admin/inbox/NewInbox.vue
+++ b/frontend/src/components/admin/inbox/NewInbox.vue
@@ -5,15 +5,27 @@
   <div class="space-y-10">
     <div class="mt-10">
       <Stepper class="flex w-full items-start gap-2" v-model="currentStep">
-        <StepperItem v-for="step in steps" :key="step.step" v-slot="{ state }"
-          class="relative flex w-full flex-col items-center justify-center" :step="step.step">
-          <StepperSeparator v-if="step.step !== steps[steps.length - 1].step"
-            class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary" />
+        <StepperItem
+          v-for="step in steps"
+          :key="step.step"
+          v-slot="{ state }"
+          class="relative flex w-full flex-col items-center justify-center"
+          :step="step.step"
+        >
+          <StepperSeparator
+            v-if="step.step !== steps[steps.length - 1].step"
+            class="absolute left-[calc(50%+20px)] right-[calc(-50%+10px)] top-5 block h-0.5 shrink-0 rounded-full bg-muted group-data-[state=completed]:bg-primary"
+          />
 
           <div>
-            <Button :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'" size="icon"
+            <Button
+              :variant="state === 'completed' || state === 'active' ? 'default' : 'outline'"
+              size="icon"
               class="z-10 rounded-full shrink-0"
-              :class="[state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background']">
+              :class="[
+                state === 'active' && 'ring-2 ring-ring ring-offset-2 ring-offset-background'
+              ]"
+            >
               <Check v-if="state === 'completed'" class="size-5" />
               <span v-if="state === 'active'">{{ currentStep }}</span>
               <span v-if="state === 'inactive'">{{ step.step }}</span>
@@ -21,12 +33,16 @@
           </div>
 
           <div class="mt-5 flex flex-col items-center text-center">
-            <StepperTitle :class="[state === 'active' && 'text-primary']"
-              class="text-sm font-semibold transition lg:text-base">
+            <StepperTitle
+              :class="[state === 'active' && 'text-primary']"
+              class="text-sm font-semibold transition lg:text-base"
+            >
               {{ step.title }}
             </StepperTitle>
-            <StepperDescription :class="[state === 'active' && 'text-primary']"
-              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm">
+            <StepperDescription
+              :class="[state === 'active' && 'text-primary']"
+              class="sr-only text-xs text-muted-foreground transition md:not-sr-only lg:text-sm"
+            >
               {{ step.description }}
             </StepperDescription>
           </div>
@@ -36,8 +52,14 @@
 
     <div>
       <div v-if="currentStep === 1" class="space-y-6">
-        <MenuCard v-for="channel in channels" :key="channel.title" :onClick="channel.onClick" :title="channel.title"
-          :subTitle="channel.subTitle" :icon="channel.icon">
+        <MenuCard
+          v-for="channel in channels"
+          :key="channel.title"
+          :onClick="channel.onClick"
+          :title="channel.title"
+          :subTitle="channel.subTitle"
+          :icon="channel.icon"
+        >
         </MenuCard>
       </div>
 
@@ -62,9 +84,15 @@ import { useToast } from '@/components/ui/toast/use-toast'
 import { handleHTTPError } from '@/utils/http'
 import { useRouter } from 'vue-router'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb/index.js'
-import { Check, Mail } from 'lucide-vue-next';
+import { Check, Mail } from 'lucide-vue-next'
 import MenuCard from '@/components/admin/common/MenuCard.vue'
-import { Stepper, StepperDescription, StepperItem, StepperSeparator, StepperTitle } from '@/components/ui/stepper'
+import {
+  Stepper,
+  StepperDescription,
+  StepperItem,
+  StepperSeparator,
+  StepperTitle
+} from '@/components/ui/stepper'
 import EmailInboxForm from '@/components/admin/inbox/EmailInboxForm.vue'
 import api from '@/api'
 
@@ -75,13 +103,13 @@ const steps = [
   {
     step: 1,
     title: 'Channel',
-    description: 'Choose a channel',
+    description: 'Choose a channel'
   },
   {
     step: 2,
     title: 'Configure',
-    description: 'Configure channel',
-  },
+    description: 'Configure channel'
+  }
 ]
 
 const selectChannel = (channel) => {
@@ -99,12 +127,12 @@ const channels = [
     subTitle: 'Create email inbox',
     onClick: selectEmailChannel,
     icon: Mail
-  },
+  }
 ]
 
 const breadcrumbLinks = [
   { path: '/admin/inboxes', label: 'Inboxes' },
-  { path: '#', label: 'New Inbox' },
+  { path: '#', label: 'New Inbox' }
 ]
 
 const router = useRouter()
@@ -133,7 +161,7 @@ const submitForm = (values) => {
   createInbox(payload)
 }
 
-async function createInbox (payload) {
+async function createInbox(payload) {
   try {
     await api.createInbox(payload)
     router.push('/admin/inboxes')
diff --git a/frontend/src/components/admin/inbox/emailChannelFormSchema.js b/frontend/src/components/admin/inbox/emailChannelFormSchema.js
index 93d6d04..c6e886c 100644
--- a/frontend/src/components/admin/inbox/emailChannelFormSchema.js
+++ b/frontend/src/components/admin/inbox/emailChannelFormSchema.js
@@ -26,7 +26,8 @@ export const emailChannelFormSchema = z.object({
         .string()
         .describe('Email scan interval')
         .refine(isGoDuration, {
-          message: 'Invalid duration format. Should be a number followed by s (seconds), m (minutes), or h (hours).',
+          message:
+            'Invalid duration format. Should be a number followed by s (seconds), m (minutes), or h (hours).'
         })
         .default('30s')
     })
@@ -85,7 +86,8 @@ export const emailChannelFormSchema = z.object({
               'Time to wait for new activity on a connection before closing it and removing it from the pool (s for seconds, m for minutes, h for hours).'
             )
             .refine(isGoDuration, {
-              message: 'Invalid duration format. Should be a number followed by s (seconds), m (minutes), or h (hours).',
+              message:
+                'Invalid duration format. Should be a number followed by s (seconds), m (minutes), or h (hours).'
             })
             .default('5s'),
           wait_timeout: z
@@ -94,7 +96,8 @@ export const emailChannelFormSchema = z.object({
               'Time to wait for new activity on a connection before closing it and removing it from the pool (s for seconds, m for minutes, h for hours).'
             )
             .refine(isGoDuration, {
-              message: 'Invalid duration format. Should be a number followed by s (seconds), m (minutes), or h (hours).',
+              message:
+                'Invalid duration format. Should be a number followed by s (seconds), m (minutes), or h (hours).'
             })
             .default('5s'),
           auth_protocol: z.enum(['login', 'cram', 'plain', 'none']).default('none').optional()
@@ -104,7 +107,7 @@ export const emailChannelFormSchema = z.object({
     .describe('SMTP servers')
     .default([
       {
-        host: "smtp.yourmailserver.com",
+        host: 'smtp.yourmailserver.com',
         port: 25,
         username: '',
         password: '',
@@ -115,4 +118,4 @@ export const emailChannelFormSchema = z.object({
         auth_protocol: 'plain'
       }
     ])
-});
+})
diff --git a/frontend/src/components/admin/oidc/AddEditOIDC.vue b/frontend/src/components/admin/oidc/AddEditOIDC.vue
index 758d1d3..a30004d 100644
--- a/frontend/src/components/admin/oidc/AddEditOIDC.vue
+++ b/frontend/src/components/admin/oidc/AddEditOIDC.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="mb-5">
-        <CustomBreadcrumb :links="breadcrumbLinks" />
-    </div>
-    <OIDCForm :initial-values="oidc" :submitForm="submitForm" :isNewForm=isNewForm />
+  <div class="mb-5">
+    <CustomBreadcrumb :links="breadcrumbLinks" />
+  </div>
+  <OIDCForm :initial-values="oidc" :submitForm="submitForm" :isNewForm="isNewForm" />
 </template>
 
 <script setup>
@@ -13,48 +13,47 @@ import { useRouter } from 'vue-router'
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
 
 const oidc = ref({
-    "provider": "Google"
+  provider: 'Google'
 })
 const router = useRouter()
 
 const props = defineProps({
-    id: {
-        type: String,
-        required: false
-    }
+  id: {
+    type: String,
+    required: false
+  }
 })
 
 const submitForm = async (values) => {
-    if (props.id) {
-        await api.updateOIDC(props.id, values)
-    } else {
-        await api.createOIDC(values)
-        router.push("/admin/oidc")
-    }
+  if (props.id) {
+    await api.updateOIDC(props.id, values)
+  } else {
+    await api.createOIDC(values)
+    router.push('/admin/oidc')
+  }
 }
 
 const breadCrumLabel = () => {
-    return props.id ? "Edit" : 'New';
+  return props.id ? 'Edit' : 'New'
 }
 
 const isNewForm = computed(() => {
-    return props.id ? false : true;
+  return props.id ? false : true
 })
 
 const breadcrumbLinks = [
-    { path: '/admin/oidc', label: 'OIDC' },
-    { path: '#', label: breadCrumLabel() }
+  { path: '/admin/oidc', label: 'OIDC' },
+  { path: '#', label: breadCrumLabel() }
 ]
 
 onMounted(async () => {
-    if (props.id) {
-        try {
-            const resp = await api.getOIDC(props.id)
-            oidc.value = resp.data.data
-        } catch (error) {
-            console.log(error)
-        }
+  if (props.id) {
+    try {
+      const resp = await api.getOIDC(props.id)
+      oidc.value = resp.data.data
+    } catch (error) {
+      console.log(error)
     }
+  }
 })
-
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/oidc/OIDCForm.vue b/frontend/src/components/admin/oidc/OIDCForm.vue
index df8f352..acc3707 100644
--- a/frontend/src/components/admin/oidc/OIDCForm.vue
+++ b/frontend/src/components/admin/oidc/OIDCForm.vue
@@ -1,103 +1,97 @@
 <template>
-    <form @submit="onSubmit" class="w-2/3 space-y-6">
+  <form @submit="onSubmit" class="w-2/3 space-y-6">
+    <FormField v-slot="{ componentField }" name="provider">
+      <FormItem>
+        <FormLabel>Provider</FormLabel>
+        <FormControl>
+          <Select v-bind="componentField">
+            <SelectTrigger>
+              <SelectValue placeholder="Select a provider" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="Google"> Google </SelectItem>
+                <SelectItem value="Github"> Github </SelectItem>
+                <SelectItem value="Custom"> Custom </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="provider">
-            <FormItem>
-                <FormLabel>Provider</FormLabel>
-                <FormControl>
-                    <Select v-bind="componentField">
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select a provider" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem value="Google">
-                                    Google
-                                </SelectItem>
-                                <SelectItem value="Github">
-                                    Github
-                                </SelectItem>
-                                <SelectItem value="Custom">
-                                    Custom
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="name">
+      <FormItem v-auto-animate>
+        <FormLabel>Name</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Google" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="name">
-            <FormItem v-auto-animate>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Google" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="provider_url">
+      <FormItem v-auto-animate>
+        <FormLabel>Provider URL</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Provider URL" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="provider_url">
-            <FormItem v-auto-animate>
-                <FormLabel>Provider URL</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Provider URL" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="client_id">
+      <FormItem v-auto-animate>
+        <FormLabel>Client ID</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Client ID" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="client_id">
-            <FormItem v-auto-animate>
-                <FormLabel>Client ID</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Client ID" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="client_secret">
+      <FormItem v-auto-animate>
+        <FormLabel>Client Secret</FormLabel>
+        <FormControl>
+          <Input type="password" placeholder="Client Secret" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="client_secret">
-            <FormItem v-auto-animate>
-                <FormLabel>Client Secret</FormLabel>
-                <FormControl>
-                    <Input type="password" placeholder="Client Secret" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="redirect_uri" v-if="!isNewForm">
+      <FormItem v-auto-animate>
+        <FormLabel>Redirect URI</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Redirect URI" v-bind="componentField" readonly />
+          <span
+            class="absolute end-0 inset-y-0 flex items-center justify-center px-2 cursor-pointer"
+          >
+            <Copy size="16" />
+          </span>
+        </FormControl>
+        <FormDescription>Set this URI for callback.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="redirect_uri" v-if="!isNewForm">
-            <FormItem v-auto-animate>
-                <FormLabel>Redirect URI</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Redirect URI" v-bind="componentField" readonly />
-                    <span class="absolute end-0 inset-y-0 flex items-center justify-center px-2 cursor-pointer">
-                        <Copy size="16" />
-                    </span>
-                </FormControl>
-                <FormDescription>Set this URI for callback.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField name="disabled" v-slot="{ value, handleChange }" v-if="!isNewForm">
+      <FormItem>
+        <FormControl>
+          <div class="flex items-center space-x-2">
+            <Checkbox :checked="value" @update:checked="handleChange" />
+            <Label>Disable</Label>
+          </div>
+        </FormControl>
+        <FormDescription></FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-
-        <FormField name="disabled" v-slot="{ value, handleChange }" v-if="!isNewForm">
-            <FormItem>
-                <FormControl>
-                    <div class="flex items-center space-x-2">
-                        <Checkbox :checked="value" @update:checked="handleChange" />
-                        <Label>Disable</Label>
-                    </div>
-                </FormControl>
-                <FormDescription></FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
-
-        <Button type="submit" size="sm"> {{ submitLabel }} </Button>
-    </form>
+    <Button type="submit" size="sm"> {{ submitLabel }} </Button>
+  </form>
 </template>
 
 <script setup>
@@ -110,57 +104,57 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import {
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormDescription,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
 } from '@/components/ui/form'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
 import { Input } from '@/components/ui/input'
-import { Copy } from 'lucide-vue-next';
+import { Copy } from 'lucide-vue-next'
 
 const props = defineProps({
-    initialValues: {
-        type: Object,
-        required: false
-    },
-    submitForm: {
-        type: Function,
-        required: true
-    },
-    submitLabel: {
-        type: String,
-        required: false,
-        default: () => 'Save'
-    },
-    isNewForm: {
-        type: Boolean
-    }
+  initialValues: {
+    type: Object,
+    required: false
+  },
+  submitForm: {
+    type: Function,
+    required: true
+  },
+  submitLabel: {
+    type: String,
+    required: false,
+    default: () => 'Save'
+  },
+  isNewForm: {
+    type: Boolean
+  }
 })
 
 const form = useForm({
-    validationSchema: toTypedSchema(oidcLoginFormSchema),
+  validationSchema: toTypedSchema(oidcLoginFormSchema)
 })
 
 const onSubmit = form.handleSubmit((values) => {
-    props.submitForm(values)
+  props.submitForm(values)
 })
 
 // Watch for changes in initialValues and update the form.
 watch(
-    () => props.initialValues,
-    (newValues) => {
-        form.setValues(newValues)
-    },
-    { deep: true, immediate: true }
+  () => props.initialValues,
+  (newValues) => {
+    form.setValues(newValues)
+  },
+  { deep: true, immediate: true }
 )
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/oidc/OIDCPage.vue b/frontend/src/components/admin/oidc/OIDCPage.vue
index adc0c09..a700776 100644
--- a/frontend/src/components/admin/oidc/OIDCPage.vue
+++ b/frontend/src/components/admin/oidc/OIDCPage.vue
@@ -10,7 +10,6 @@
   </div>
 </template>
 
-
 <script setup>
 import { ref, onMounted } from 'vue'
 import DataTable from '@/components/admin/DataTable.vue'
@@ -28,8 +27,7 @@ const emit = useEmitter()
 onMounted(() => {
   fetchAll()
   emit.on('refresh-list', (data) => {
-    if (data?.name === "inbox")
-      fetchAll
+    if (data?.name === 'inbox') fetchAll
   })
 })
 
@@ -39,6 +37,6 @@ const fetchAll = async () => {
 }
 
 const navigateToAddOIDC = () => {
-  router.push("/admin/oidc/new")
+  router.push('/admin/oidc/new')
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/oidc/dataTableColumns.js b/frontend/src/components/admin/oidc/dataTableColumns.js
index 85401b7..7897266 100644
--- a/frontend/src/components/admin/oidc/dataTableColumns.js
+++ b/frontend/src/components/admin/oidc/dataTableColumns.js
@@ -3,59 +3,59 @@ import dropdown from './dataTableDropdown.vue'
 import { format } from 'date-fns'
 
 export const columns = [
-    {
-        accessorKey: 'name',
-        header: function () {
-            return h('div', { class: 'text-center' }, 'Name')
-        },
-        cell: function ({ row }) {
-            return h('div', { class: 'text-center font-medium' }, row.getValue('name'))
-        }
+  {
+    accessorKey: 'name',
+    header: function () {
+      return h('div', { class: 'text-center' }, 'Name')
     },
-    {
-        accessorKey: 'provider',
-        header: function () {
-            return h('div', { class: 'text-center' }, 'Provider')
-        },
-        cell: function ({ row }) {
-            return h('div', { class: 'text-center font-medium' }, row.getValue('provider'))
-        }
-    },
-    {
-        accessorKey: 'disabled',
-        header: () => h('div', { class: 'text-center' }, 'Enabled'),
-        cell: ({ row }) => {
-            const disabled = row.getValue('disabled')
-            return h('div', { class: 'text-center' }, [
-                h('input', {
-                    type: 'checkbox',
-                    checked: !disabled,
-                    disabled: true
-                })
-            ])
-        }
-    },
-    {
-        accessorKey: 'updated_at',
-        header: function () {
-            return h('div', { class: 'text-center' }, 'Modified at')
-        },
-        cell: function ({ row }) {
-            return h('div', { class: 'text-center' }, format(row.getValue('updated_at'), 'PPpp'))
-        }
-    },
-    {
-        id: 'actions',
-        enableHiding: false,
-        cell: ({ row }) => {
-            const role = row.original
-            return h(
-                'div',
-                { class: 'relative' },
-                h(dropdown, {
-                    role
-                })
-            )
-        }
+    cell: function ({ row }) {
+      return h('div', { class: 'text-center font-medium' }, row.getValue('name'))
     }
+  },
+  {
+    accessorKey: 'provider',
+    header: function () {
+      return h('div', { class: 'text-center' }, 'Provider')
+    },
+    cell: function ({ row }) {
+      return h('div', { class: 'text-center font-medium' }, row.getValue('provider'))
+    }
+  },
+  {
+    accessorKey: 'disabled',
+    header: () => h('div', { class: 'text-center' }, 'Enabled'),
+    cell: ({ row }) => {
+      const disabled = row.getValue('disabled')
+      return h('div', { class: 'text-center' }, [
+        h('input', {
+          type: 'checkbox',
+          checked: !disabled,
+          disabled: true
+        })
+      ])
+    }
+  },
+  {
+    accessorKey: 'updated_at',
+    header: function () {
+      return h('div', { class: 'text-center' }, 'Modified at')
+    },
+    cell: function ({ row }) {
+      return h('div', { class: 'text-center' }, format(row.getValue('updated_at'), 'PPpp'))
+    }
+  },
+  {
+    id: 'actions',
+    enableHiding: false,
+    cell: ({ row }) => {
+      const role = row.original
+      return h(
+        'div',
+        { class: 'relative' },
+        h(dropdown, {
+          role
+        })
+      )
+    }
+  }
 ]
diff --git a/frontend/src/components/admin/oidc/dataTableDropdown.vue b/frontend/src/components/admin/oidc/dataTableDropdown.vue
index 2ab592b..572f0dc 100644
--- a/frontend/src/components/admin/oidc/dataTableDropdown.vue
+++ b/frontend/src/components/admin/oidc/dataTableDropdown.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
@@ -15,38 +15,38 @@ const router = useRouter()
 const emit = useEmitter()
 
 const props = defineProps({
-    role: {
-        type: Object,
-        required: true,
-        default: () => ({
-            id: ''
-        })
-    }
+  role: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: ''
+    })
+  }
 })
 
-function edit (id) {
-    router.push({ path: `/admin/oidc/${id}/edit` })
+function edit(id) {
+  router.push({ path: `/admin/oidc/${id}/edit` })
 }
 
-async function deleteOIDC (id) {
-    await api.deleteOIDC(id)
-    emit.emit('refresh-list', {
-        name: 'inbox'
-    })
+async function deleteOIDC(id) {
+  await api.deleteOIDC(id)
+  emit.emit('refresh-list', {
+    name: 'inbox'
+  })
 }
 </script>
 
 <template>
-    <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-            <Button variant="ghost" class="w-8 h-8 p-0">
-                <span class="sr-only">Open menu</span>
-                <MoreHorizontal class="w-4 h-4" />
-            </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-            <DropdownMenuItem @click="edit(props.role.id)"> Edit </DropdownMenuItem>
-            <DropdownMenuItem @click="deleteOIDC(props.role.id)"> Delete </DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="edit(props.role.id)"> Edit </DropdownMenuItem>
+      <DropdownMenuItem @click="deleteOIDC(props.role.id)"> Delete </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
 </template>
diff --git a/frontend/src/components/admin/oidc/formSchema.js b/frontend/src/components/admin/oidc/formSchema.js
index dcb93ea..48c2ae5 100644
--- a/frontend/src/components/admin/oidc/formSchema.js
+++ b/frontend/src/components/admin/oidc/formSchema.js
@@ -1,28 +1,23 @@
 import * as z from 'zod'
 
 export const oidcLoginFormSchema = z.object({
-    disabled: z
-        .boolean().optional(),
-    name: z
-        .string({
-            required_error: 'Name is required.'
-        }),
-    provider: z
-        .string().optional(),
-    provider_url: z
-        .string({
-            required_error: 'Provider URL is required.'
-        })
-        .url({
-            message: 'Provider URL must be a valid URL.'
-        }),
-    client_id: z
-        .string({
-            required_error: 'Client ID is required.'
-        }),
-    client_secret: z
-        .string({
-            required_error: 'Client Secret is required.'
-        }),
-    redirect_uri: z.string().readonly().optional(),
+  disabled: z.boolean().optional(),
+  name: z.string({
+    required_error: 'Name is required.'
+  }),
+  provider: z.string().optional(),
+  provider_url: z
+    .string({
+      required_error: 'Provider URL is required.'
+    })
+    .url({
+      message: 'Provider URL must be a valid URL.'
+    }),
+  client_id: z.string({
+    required_error: 'Client ID is required.'
+  }),
+  client_secret: z.string({
+    required_error: 'Client Secret is required.'
+  }),
+  redirect_uri: z.string().readonly().optional()
 })
diff --git a/frontend/src/components/admin/team/TeamPage.vue b/frontend/src/components/admin/team/TeamPage.vue
index 0ea74b0..1deaf4f 100644
--- a/frontend/src/components/admin/team/TeamPage.vue
+++ b/frontend/src/components/admin/team/TeamPage.vue
@@ -4,8 +4,14 @@
       <PageHeader title="Teams" description="Manage teams, users and roles" />
     </div>
     <div class="flex space-x-5">
-      <AdminMenuCard v-for="card in cards" :key="card.title" :onClick="card.onClick" :title="card.title"
-        :subTitle="card.subTitle" :icon="card.icon">
+      <AdminMenuCard
+        v-for="card in cards"
+        :key="card.title"
+        :onClick="card.onClick"
+        :title="card.title"
+        :subTitle="card.subTitle"
+        :icon="card.icon"
+      >
       </AdminMenuCard>
     </div>
   </div>
@@ -16,7 +22,7 @@
 import { useRouter } from 'vue-router'
 import { Users, UserRoundCog, User } from 'lucide-vue-next'
 import AdminMenuCard from '@/components/admin/common/MenuCard.vue'
-import PageHeader from '../common/PageHeader.vue';
+import PageHeader from '../common/PageHeader.vue'
 
 const router = useRouter()
 
@@ -50,6 +56,6 @@ const cards = [
     subTitle: 'Create and manage roles.',
     onClick: navigateToRoles,
     icon: UserRoundCog
-  },
+  }
 ]
 </script>
diff --git a/frontend/src/components/admin/team/roles/EditRole.vue b/frontend/src/components/admin/team/roles/EditRole.vue
index 0d1f27e..7bf4e8d 100644
--- a/frontend/src/components/admin/team/roles/EditRole.vue
+++ b/frontend/src/components/admin/team/roles/EditRole.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="mb-5">
-        <CustomBreadcrumb :links="breadcrumbLinks" />
-    </div>
-    <RoleForm :initial-values="role" :submitForm="submitForm" />
+  <div class="mb-5">
+    <CustomBreadcrumb :links="breadcrumbLinks" />
+  </div>
+  <RoleForm :initial-values="role" :submitForm="submitForm" />
 </template>
 
 <script setup>
@@ -15,27 +15,27 @@ import api from '@/api'
 const role = ref({})
 const { toast } = useToast()
 const props = defineProps({
-    id: {
-        type: String,
-        required: true
-    }
+  id: {
+    type: String,
+    required: true
+  }
 })
 
 onMounted(async () => {
-    const resp = await api.getRole(props.id)
-    role.value = resp.data.data
+  const resp = await api.getRole(props.id)
+  role.value = resp.data.data
 })
 
 const breadcrumbLinks = [
-    { path: '/admin/teams', label: 'Teams' },
-    { path: '/admin/teams/roles', label: 'Roles' },
-    { path: '#', label: 'Edit role' }
+  { path: '/admin/teams', label: 'Teams' },
+  { path: '/admin/teams/roles', label: 'Roles' },
+  { path: '#', label: 'Edit role' }
 ]
 
 const submitForm = async (values) => {
-    await api.updateRole(props.id, values)
-    toast({
-        description: 'Role saved successfully',
-    });
+  await api.updateRole(props.id, values)
+  toast({
+    description: 'Role saved successfully'
+  })
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/team/roles/NewRole.vue b/frontend/src/components/admin/team/roles/NewRole.vue
index 5fdf869..ce9fefe 100644
--- a/frontend/src/components/admin/team/roles/NewRole.vue
+++ b/frontend/src/components/admin/team/roles/NewRole.vue
@@ -1,26 +1,26 @@
 <template>
-    <div class="mb-5">
-        <CustomBreadcrumb :links="breadcrumbLinks" />
-    </div>
-    <RoleForm :initial-values="{}" :submitForm="submitForm"/>
+  <div class="mb-5">
+    <CustomBreadcrumb :links="breadcrumbLinks" />
+  </div>
+  <RoleForm :initial-values="{}" :submitForm="submitForm" />
 </template>
 
 <script setup>
 import { CustomBreadcrumb } from '@/components/ui/breadcrumb'
-import RoleForm from './RoleForm.vue';
-import api from '@/api';
+import RoleForm from './RoleForm.vue'
+import api from '@/api'
 import { useRouter } from 'vue-router'
 
 const router = useRouter()
 
 const breadcrumbLinks = [
-    { path: '/admin/teams', label: 'Teams' },
-    { path: '/admin/teams/roles', label: 'Roles' },
-    { path: '#', label: 'Add role' }
+  { path: '/admin/teams', label: 'Teams' },
+  { path: '/admin/teams/roles', label: 'Roles' },
+  { path: '#', label: 'Add role' }
 ]
 
 const submitForm = async (values) => {
-    await api.createRole(values)
-    router.push('/admin/teams/roles')
+  await api.createRole(values)
+  router.push('/admin/teams/roles')
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/team/roles/RoleForm.vue b/frontend/src/components/admin/team/roles/RoleForm.vue
index be63523..6b9c37e 100644
--- a/frontend/src/components/admin/team/roles/RoleForm.vue
+++ b/frontend/src/components/admin/team/roles/RoleForm.vue
@@ -1,45 +1,59 @@
 <template>
-    <form @submit.prevent="onSubmit" class="w-2/3 space-y-6">
-        <FormField v-slot="{ componentField }" name="name">
-            <FormItem v-auto-animate>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Agent" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
-        <FormField v-slot="{ componentField }" name="description">
-            <FormItem>
-                <FormLabel>Description</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="This role is for all support agents" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+  <form @submit.prevent="onSubmit" class="w-2/3 space-y-6">
+    <FormField v-slot="{ componentField }" name="name">
+      <FormItem v-auto-animate>
+        <FormLabel>Name</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Agent" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <FormField v-slot="{ componentField }" name="description">
+      <FormItem>
+        <FormLabel>Description</FormLabel>
+        <FormControl>
+          <Input
+            type="text"
+            placeholder="This role is for all support agents"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <p class="text-base">Set permissions for this role</p>
+    <p class="text-base">Set permissions for this role</p>
 
-        <div v-for="entity in permissions" :key="entity.name" class="border box p-4 rounded-lg shadow-sm">
-            <p class="text-lg mb-5">{{ entity.name }}</p>
-            <div class="space-y-4">
-                <FormField v-for="permission in entity.permissions" :key="permission.name" type="checkbox"
-                    :name="permission.name">
-                    <FormItem class="flex flex-col gap-y-5 space-y-0 rounded-lg">
-                        <div class="flex space-x-3">
-                            <FormControl>
-                                <Checkbox :checked="selectedPermissions.includes(permission.name)"
-                                    @update:checked="(newValue) => handleChange(newValue, permission.name)" />
-                                <FormLabel>{{ permission.label }}</FormLabel>
-                            </FormControl>
-                        </div>
-                    </FormItem>
-                </FormField>
+    <div
+      v-for="entity in permissions"
+      :key="entity.name"
+      class="border box p-4 rounded-lg shadow-sm"
+    >
+      <p class="text-lg mb-5">{{ entity.name }}</p>
+      <div class="space-y-4">
+        <FormField
+          v-for="permission in entity.permissions"
+          :key="permission.name"
+          type="checkbox"
+          :name="permission.name"
+        >
+          <FormItem class="flex flex-col gap-y-5 space-y-0 rounded-lg">
+            <div class="flex space-x-3">
+              <FormControl>
+                <Checkbox
+                  :checked="selectedPermissions.includes(permission.name)"
+                  @update:checked="(newValue) => handleChange(newValue, permission.name)"
+                />
+                <FormLabel>{{ permission.label }}</FormLabel>
+              </FormControl>
             </div>
-        </div>
-        <Button type="submit" size="sm">{{ submitLabel }}</Button>
-    </form>
+          </FormItem>
+        </FormField>
+      </div>
+    </div>
+    <Button type="submit" size="sm">{{ submitLabel }}</Button>
+  </form>
 </template>
 
 <script setup>
@@ -54,92 +68,92 @@ import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/comp
 import { Input } from '@/components/ui/input'
 
 const props = defineProps({
-    initialValues: {
-        type: Object,
-        required: false
-    },
-    submitForm: {
-        type: Function,
-        required: true
-    },
-    submitLabel: {
-        type: String,
-        required: false,
-        default: () => 'Submit'
-    },
+  initialValues: {
+    type: Object,
+    required: false
+  },
+  submitForm: {
+    type: Function,
+    required: true
+  },
+  submitLabel: {
+    type: String,
+    required: false,
+    default: () => 'Submit'
+  }
 })
 
 const permissions = ref([
-    {
-        name: 'Conversation',
-        permissions: [
-            { name: 'conversation:reply', label: 'Reply to conversations' },
-            { name: 'conversation:edit_all_properties', label: 'Edit all conversation properties' },
-            { name: 'conversation:edit_status', label: 'Edit conversation status' },
-            { name: 'conversation:edit_priority', label: 'Edit conversation priority' },
-            { name: 'conversation:edit_team', label: 'Edit conversation team' },
-            { name: 'conversation:edit_user', label: 'Edit conversation user' },
-            { name: 'conversation:view_all', label: 'View all conversations' },
-            { name: 'conversation:view_team', label: 'View team conversations' },
-            { name: 'conversation:view_assigned', label: 'View assigned conversations' }
-        ]
-    },
-    {
-        name: 'Admin',
-        permissions: [
-            { name: 'admin:access', label: 'Access the admin panel' },
-            { name: 'settings:manage_general', label: 'Manage general settings' },
-            { name: 'settings:manage_file', label: 'Manage file upload settings' },
-            { name: 'login:manage', label: 'Manage login settings' },
-            { name: 'inboxes:manage', label: 'Manage inboxes' },
-            { name: 'users:manage', label: 'Manage users' },
-            { name: 'teams:manage', label: 'Manage teams' },
-            { name: 'roles:manage', label: 'Manage roles' },
-            { name: 'automations:manage', label: 'Manage automations' },
-            { name: 'templates:manage', label: 'Manage templates' }
-        ]
-    },
-    {
-        name: 'Dashboard',
-        permissions: [
-            { name: 'dashboard:view_global', label: 'Access global dashboard' },
-            { name: 'dashboard:view_team_self', label: 'Access dashboard of teams the user is part of' }
-        ]
-    }
-]);
+  {
+    name: 'Conversation',
+    permissions: [
+      { name: 'conversation:reply', label: 'Reply to conversations' },
+      { name: 'conversation:edit_all_properties', label: 'Edit all conversation properties' },
+      { name: 'conversation:edit_status', label: 'Edit conversation status' },
+      { name: 'conversation:edit_priority', label: 'Edit conversation priority' },
+      { name: 'conversation:edit_team', label: 'Edit conversation team' },
+      { name: 'conversation:edit_user', label: 'Edit conversation user' },
+      { name: 'conversation:view_all', label: 'View all conversations' },
+      { name: 'conversation:view_team', label: 'View team conversations' },
+      { name: 'conversation:view_assigned', label: 'View assigned conversations' }
+    ]
+  },
+  {
+    name: 'Admin',
+    permissions: [
+      { name: 'admin:access', label: 'Access the admin panel' },
+      { name: 'settings:manage_general', label: 'Manage general settings' },
+      { name: 'settings:manage_file', label: 'Manage file upload settings' },
+      { name: 'login:manage', label: 'Manage login settings' },
+      { name: 'inboxes:manage', label: 'Manage inboxes' },
+      { name: 'users:manage', label: 'Manage users' },
+      { name: 'teams:manage', label: 'Manage teams' },
+      { name: 'roles:manage', label: 'Manage roles' },
+      { name: 'automations:manage', label: 'Manage automations' },
+      { name: 'templates:manage', label: 'Manage templates' }
+    ]
+  },
+  {
+    name: 'Dashboard',
+    permissions: [
+      { name: 'dashboard:view_global', label: 'Access global dashboard' },
+      { name: 'dashboard:view_team_self', label: 'Access dashboard of teams the user is part of' }
+    ]
+  }
+])
 
 const selectedPermissions = ref([])
 
 const form = useForm({
-    validationSchema: toTypedSchema(formSchema),
-    initialValues: props.initialValues
+  validationSchema: toTypedSchema(formSchema),
+  initialValues: props.initialValues
 })
 
 const onSubmit = form.handleSubmit((values) => {
-    values.permissions = selectedPermissions.value
-    props.submitForm(values)
+  values.permissions = selectedPermissions.value
+  props.submitForm(values)
 })
 
 const handleChange = (value, perm) => {
-    if (value) {
-        selectedPermissions.value.push(perm)
-    } else {
-        const index = selectedPermissions.value.indexOf(perm)
-        if (index > -1) {
-            selectedPermissions.value.splice(index, 1)
-        }
+  if (value) {
+    selectedPermissions.value.push(perm)
+  } else {
+    const index = selectedPermissions.value.indexOf(perm)
+    if (index > -1) {
+      selectedPermissions.value.splice(index, 1)
     }
+  }
 }
 
 // Watch for changes in initialValues and update the form.
 watch(
-    () => props.initialValues,
-    (newValues) => {
-        if (newValues) {
-            form.setValues(newValues)
-            selectedPermissions.value = newValues.permissions || []
-        }
-    },
-    { deep: true }
+  () => props.initialValues,
+  (newValues) => {
+    if (newValues) {
+      form.setValues(newValues)
+      selectedPermissions.value = newValues.permissions || []
+    }
+  },
+  { deep: true }
 )
 </script>
diff --git a/frontend/src/components/admin/team/roles/RolesPage.vue b/frontend/src/components/admin/team/roles/RolesPage.vue
index 844ace6..7ac2b9a 100644
--- a/frontend/src/components/admin/team/roles/RolesPage.vue
+++ b/frontend/src/components/admin/team/roles/RolesPage.vue
@@ -1,14 +1,14 @@
 <template>
-    <div class="mb-5">
-        <CustomBreadcrumb :links="breadcrumbLinks" />
-    </div>
-    <div class="flex justify-end mb-5">
-        <Button @click="navigateToAddRole" size="sm"> New role </Button>
-    </div>
-    <div class="w-full">
-        <DataTable :columns="columns" :data="roles" />
-    </div>
-    <router-view></router-view>
+  <div class="mb-5">
+    <CustomBreadcrumb :links="breadcrumbLinks" />
+  </div>
+  <div class="flex justify-end mb-5">
+    <Button @click="navigateToAddRole" size="sm"> New role </Button>
+  </div>
+  <div class="w-full">
+    <DataTable :columns="columns" :data="roles" />
+  </div>
+  <router-view></router-view>
 </template>
 
 <script setup>
@@ -26,28 +26,28 @@ const { toast } = useToast()
 const router = useRouter()
 const roles = ref([])
 const breadcrumbLinks = [
-    { path: '/admin/teams', label: 'Teams' },
-    { path: '#', label: 'Roles' }
+  { path: '/admin/teams', label: 'Teams' },
+  { path: '#', label: 'Roles' }
 ]
 
 const getRoles = async () => {
-    try {
-        const resp = await api.getRoles()
-        roles.value = resp.data.data
-    } catch (error) {
-        toast({
-            title: 'Could not fetch roles.',
-            variant: 'destructive',
-            description: handleHTTPError(error).message
-        })
-    }
+  try {
+    const resp = await api.getRoles()
+    roles.value = resp.data.data
+  } catch (error) {
+    toast({
+      title: 'Could not fetch roles.',
+      variant: 'destructive',
+      description: handleHTTPError(error).message
+    })
+  }
 }
 
 onMounted(async () => {
-    getRoles()
+  getRoles()
 })
 
 const navigateToAddRole = () => {
-    router.push('/admin/teams/roles/new')
+  router.push('/admin/teams/roles/new')
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/team/roles/formSchema.js b/frontend/src/components/admin/team/roles/formSchema.js
index 89556ba..6210ff7 100644
--- a/frontend/src/components/admin/team/roles/formSchema.js
+++ b/frontend/src/components/admin/team/roles/formSchema.js
@@ -1,20 +1,20 @@
 import * as z from 'zod'
 
 export const formSchema = z.object({
-    name: z
-        .string({
-            required_error: 'Name is required.'
-        })
-        .min(2, {
-            message: 'First name must be at least 2 characters.'
-        }),
+  name: z
+    .string({
+      required_error: 'Name is required.'
+    })
+    .min(2, {
+      message: 'First name must be at least 2 characters.'
+    }),
 
-    description: z
-        .string({
-            required_error: 'Description is required.'
-        })
-        .min(2, {
-            message: 'First name must be at least 2 characters.'
-        }),
-    permissions: z.array(z.string()).optional()
-})
\ No newline at end of file
+  description: z
+    .string({
+      required_error: 'Description is required.'
+    })
+    .min(2, {
+      message: 'First name must be at least 2 characters.'
+    }),
+  permissions: z.array(z.string()).optional()
+})
diff --git a/frontend/src/components/admin/team/teams/AddTeamForm.vue b/frontend/src/components/admin/team/teams/AddTeamForm.vue
index 6e47bc7..389d24a 100644
--- a/frontend/src/components/admin/team/teams/AddTeamForm.vue
+++ b/frontend/src/components/admin/team/teams/AddTeamForm.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="mb-5">
-        <CustomBreadcrumb :links="breadcrumbLinks" />
-    </div>
-    <TeamForm :initial-values="{}" :submitForm="submitForm" />
+  <div class="mb-5">
+    <CustomBreadcrumb :links="breadcrumbLinks" />
+  </div>
+  <TeamForm :initial-values="{}" :submitForm="submitForm" />
 </template>
 
 <script setup>
@@ -14,24 +14,24 @@ import api from '@/api'
 
 const { toast } = useToast()
 const breadcrumbLinks = [
-    { path: '/admin/teams', label: 'Teams' },
-    { path: '/admin/teams/teams', label: 'Teams' },
-    { path: '/admin/teams/teams/new', label: 'New team' },
+  { path: '/admin/teams', label: 'Teams' },
+  { path: '/admin/teams/teams', label: 'Teams' },
+  { path: '/admin/teams/teams/new', label: 'New team' }
 ]
 
 const submitForm = (values) => {
-    createTeam(values)
+  createTeam(values)
 }
 
 const createTeam = async (values) => {
-    try {
-        await api.createTeam(values)
-    } catch (error) {
-        toast({
-            title: 'Could not create team.',
-            variant: 'destructive',
-            description: handleHTTPError(error).message
-        })
-    }
+  try {
+    await api.createTeam(values)
+  } catch (error) {
+    toast({
+      title: 'Could not create team.',
+      variant: 'destructive',
+      description: handleHTTPError(error).message
+    })
+  }
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/team/teams/TeamForm.vue b/frontend/src/components/admin/team/teams/TeamForm.vue
index 1b366ff..f0151d8 100644
--- a/frontend/src/components/admin/team/teams/TeamForm.vue
+++ b/frontend/src/components/admin/team/teams/TeamForm.vue
@@ -60,11 +60,11 @@ const props = defineProps({
     type: String,
     required: false,
     default: () => 'Submit'
-  },
+  }
 })
 
 const form = useForm({
-  validationSchema: toTypedSchema(teamFormSchema),
+  validationSchema: toTypedSchema(teamFormSchema)
 })
 
 const onSubmit = form.handleSubmit((values) => {
diff --git a/frontend/src/components/admin/team/teams/TeamsDataTableColumns.js b/frontend/src/components/admin/team/teams/TeamsDataTableColumns.js
index 9358f64..f0a05ec 100644
--- a/frontend/src/components/admin/team/teams/TeamsDataTableColumns.js
+++ b/frontend/src/components/admin/team/teams/TeamsDataTableColumns.js
@@ -18,7 +18,11 @@ export const columns = [
       return h('div', { class: 'text-center' }, 'Modified at')
     },
     cell: function ({ row }) {
-      return h('div', { class: 'text-center font-medium' }, format(row.getValue('updated_at'), 'PPpp'))
+      return h(
+        'div',
+        { class: 'text-center font-medium' },
+        format(row.getValue('updated_at'), 'PPpp')
+      )
     }
   },
   {
diff --git a/frontend/src/components/admin/team/teams/TeamsPage.vue b/frontend/src/components/admin/team/teams/TeamsPage.vue
index 12f6ea8..d4aa300 100644
--- a/frontend/src/components/admin/team/teams/TeamsPage.vue
+++ b/frontend/src/components/admin/team/teams/TeamsPage.vue
@@ -28,7 +28,7 @@ import { useRouter } from 'vue-router'
 
 const breadcrumbLinks = [
   { path: '/admin/teams', label: 'Teams' },
-  { path: '/admin/teams/', label: 'Teams' },
+  { path: '/admin/teams/', label: 'Teams' }
 ]
 
 const router = useRouter()
@@ -48,7 +48,6 @@ const getData = async () => {
   }
 }
 
-
 const navigateToAddTeam = () => {
   router.push('/admin/teams/teams/new')
 }
diff --git a/frontend/src/components/admin/team/users/UserForm.vue b/frontend/src/components/admin/team/users/UserForm.vue
index cc6c912..3a24637 100644
--- a/frontend/src/components/admin/team/users/UserForm.vue
+++ b/frontend/src/components/admin/team/users/UserForm.vue
@@ -33,7 +33,11 @@
       <FormItem>
         <FormLabel>Select teams</FormLabel>
         <FormControl>
-          <SelectTag v-model="componentField.modelValue" :items="teamNames" placeHolder="Select teams"></SelectTag>
+          <SelectTag
+            v-model="componentField.modelValue"
+            :items="teamNames"
+            placeHolder="Select teams"
+          ></SelectTag>
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -43,7 +47,11 @@
       <FormItem>
         <FormLabel>Select roles</FormLabel>
         <FormControl>
-          <SelectTag v-model="componentField.modelValue" :items="roleNames" placeHolder="Select roles"></SelectTag>
+          <SelectTag
+            v-model="componentField.modelValue"
+            :items="roleNames"
+            placeHolder="Select roles"
+          ></SelectTag>
         </FormControl>
         <FormMessage />
       </FormItem>
@@ -75,9 +83,7 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import { FormControl, FormField, FormItem, FormLabel, FormMessage } from '@/components/ui/form'
-import {
-  SelectTag
-} from '@/components/ui/select'
+import { SelectTag } from '@/components/ui/select'
 import { Input } from '@/components/ui/input'
 import api from '@/api'
 
@@ -105,24 +111,19 @@ const props = defineProps({
   }
 })
 
-
 onMounted(async () => {
   try {
-    const [teamsResp, rolesResp] = await Promise.all([
-      api.getTeams(),
-      api.getRoles()
-    ]);
-
-    teams.value = teamsResp.data.data;
-    roles.value = rolesResp.data.data;
+    const [teamsResp, rolesResp] = await Promise.all([api.getTeams(), api.getRoles()])
 
+    teams.value = teamsResp.data.data
+    roles.value = rolesResp.data.data
   } catch (err) {
-    console.log(err);
+    console.log(err)
   }
-});
+})
 
-const teamNames = computed(() => teams.value.map(team => team.name));
-const roleNames = computed(() => roles.value.map(role => role.name));
+const teamNames = computed(() => teams.value.map((team) => team.name))
+const roleNames = computed(() => roles.value.map((role) => role.name))
 
 const form = useForm({
   validationSchema: toTypedSchema(userFormSchema),
@@ -141,4 +142,4 @@ watch(
   },
   { immediate: true, deep: true }
 )
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/team/users/UsersDataTableColumns.js b/frontend/src/components/admin/team/users/UsersDataTableColumns.js
index fd58828..04fc264 100644
--- a/frontend/src/components/admin/team/users/UsersDataTableColumns.js
+++ b/frontend/src/components/admin/team/users/UsersDataTableColumns.js
@@ -36,7 +36,11 @@ export const columns = [
       return h('div', { class: 'text-center' }, 'Modified at')
     },
     cell: function ({ row }) {
-      return h('div', { class: 'text-center font-medium' }, format(row.getValue('updated_at'), 'PPpp'))
+      return h(
+        'div',
+        { class: 'text-center font-medium' },
+        format(row.getValue('updated_at'), 'PPpp')
+      )
     }
   },
   {
diff --git a/frontend/src/components/admin/team/users/userFormSchema.js b/frontend/src/components/admin/team/users/userFormSchema.js
index 5b93449..6fa56ef 100644
--- a/frontend/src/components/admin/team/users/userFormSchema.js
+++ b/frontend/src/components/admin/team/users/userFormSchema.js
@@ -1,4 +1,4 @@
-import * as z from 'zod';
+import * as z from 'zod'
 
 export const userFormSchema = z.object({
   first_name: z
@@ -23,5 +23,5 @@ export const userFormSchema = z.object({
 
   roles: z.array(z.string()).optional(),
 
-  send_welcome_email: z.boolean().optional(),
-});
+  send_welcome_email: z.boolean().optional()
+})
diff --git a/frontend/src/components/admin/templates/AddEditTemplate.vue b/frontend/src/components/admin/templates/AddEditTemplate.vue
index a6a9da5..0d6d2a6 100644
--- a/frontend/src/components/admin/templates/AddEditTemplate.vue
+++ b/frontend/src/components/admin/templates/AddEditTemplate.vue
@@ -1,8 +1,8 @@
 <template>
-    <div class="mb-5">
-        <CustomBreadcrumb :links="breadcrumbLinks" />
-    </div>
-    <TemplateForm :initial-values="template" :submitForm="submitForm" />
+  <div class="mb-5">
+    <CustomBreadcrumb :links="breadcrumbLinks" />
+  </div>
+  <TemplateForm :initial-values="template" :submitForm="submitForm" />
 </template>
 
 <script setup>
@@ -16,38 +16,38 @@ const template = ref({})
 const router = useRouter()
 
 const props = defineProps({
-    id: {
-        type: String,
-        required: true
-    }
+  id: {
+    type: String,
+    required: true
+  }
 })
 
 const submitForm = async (values) => {
-    if (props.id) {
-        await api.updateTemplate(props.id, values)
-    } else {
-        await api.createTemplate(values)
-        router.push("/admin/templates")
-    }
+  if (props.id) {
+    await api.updateTemplate(props.id, values)
+  } else {
+    await api.createTemplate(values)
+    router.push('/admin/templates')
+  }
 }
 
 const breadCrumLabel = () => {
-    return props.id ? "Edit" : 'New';
+  return props.id ? 'Edit' : 'New'
 }
 
 const breadcrumbLinks = [
-    { path: '/admin/templates', label: 'Templates' },
-    { path: '#', label: breadCrumLabel() }
+  { path: '/admin/templates', label: 'Templates' },
+  { path: '#', label: breadCrumLabel() }
 ]
 
 onMounted(async () => {
-    if (props.id) {
-        try {
-            const resp = await api.getTemplate(props.id)
-            template.value = resp.data.data
-        } catch (error) {
-            console.log(error)
-        }
+  if (props.id) {
+    try {
+      const resp = await api.getTemplate(props.id)
+      template.value = resp.data.data
+    } catch (error) {
+      console.log(error)
     }
+  }
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/templates/TemplateForm.vue b/frontend/src/components/admin/templates/TemplateForm.vue
index 4768424..b9cf530 100644
--- a/frontend/src/components/admin/templates/TemplateForm.vue
+++ b/frontend/src/components/admin/templates/TemplateForm.vue
@@ -1,41 +1,41 @@
 <template>
-    <form @submit="onSubmit" class="w-2/3 space-y-6">
-        <FormField v-slot="{ componentField }" name="name">
-            <FormItem v-auto-animate>
-                <FormLabel>Name</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Template name" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+  <form @submit="onSubmit" class="w-2/3 space-y-6">
+    <FormField v-slot="{ componentField }" name="name">
+      <FormItem v-auto-animate>
+        <FormLabel>Name</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Template name" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="body">
-            <FormItem v-auto-animate>
-                <FormLabel>HTML body</FormLabel>
-                <FormControl>
-                    <Textarea placeholder="HTML here.." v-bind="componentField" class="h-52" />
-                </FormControl>
-                <FormDescription>{{ templateBodyDescription() }}</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="body">
+      <FormItem v-auto-animate>
+        <FormLabel>HTML body</FormLabel>
+        <FormControl>
+          <Textarea placeholder="HTML here.." v-bind="componentField" class="h-52" />
+        </FormControl>
+        <FormDescription>{{ templateBodyDescription() }}</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField name="is_default" v-slot="{ value, handleChange }">
-            <FormItem>
-                <FormControl>
-                    <div class="flex items-center space-x-2">
-                        <Checkbox :checked="value" @update:checked="handleChange"/>
-                        <Label>Is default</Label>
-                    </div>
-                </FormControl>
-                <FormDescription>There can be only one default template.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField name="is_default" v-slot="{ value, handleChange }">
+      <FormItem>
+        <FormControl>
+          <div class="flex items-center space-x-2">
+            <Checkbox :checked="value" @update:checked="handleChange" />
+            <Label>Is default</Label>
+          </div>
+        </FormControl>
+        <FormDescription>There can be only one default template.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <Button type="submit" size="sm"> {{ submitLabel }} </Button>
-    </form>
+    <Button type="submit" size="sm"> {{ submitLabel }} </Button>
+  </form>
 </template>
 
 <script setup>
@@ -46,12 +46,12 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { formSchema } from './formSchema.js'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import {
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormDescription,
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
 } from '@/components/ui/form'
 import { Input } from '@/components/ui/input'
 import { Textarea } from '@/components/ui/textarea'
@@ -59,37 +59,37 @@ import { Checkbox } from '@/components/ui/checkbox'
 import { Label } from '@/components/ui/label'
 
 const props = defineProps({
-    initialValues: {
-        type: Object,
-        required: false
-    },
-    submitForm: {
-        type: Function,
-        required: true
-    },
-    submitLabel: {
-        type: String,
-        required: false,
-        default: () => 'Save'
-    },
+  initialValues: {
+    type: Object,
+    required: false
+  },
+  submitForm: {
+    type: Function,
+    required: true
+  },
+  submitLabel: {
+    type: String,
+    required: false,
+    default: () => 'Save'
+  }
 })
 
 const templateBodyDescription = () => 'Make sure the template has {{ .Content }}'
 
 const form = useForm({
-    validationSchema: toTypedSchema(formSchema),
+  validationSchema: toTypedSchema(formSchema)
 })
 
 const onSubmit = form.handleSubmit((values) => {
-    props.submitForm(values)
+  props.submitForm(values)
 })
 
 // Watch for changes in initialValues and update the form.
 watch(
-    () => props.initialValues,
-    (newValues) => {
-        form.setValues(newValues)
-    },
-    { deep: true }
+  () => props.initialValues,
+  (newValues) => {
+    form.setValues(newValues)
+  },
+  { deep: true }
 )
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/templates/TemplatesPage.vue b/frontend/src/components/admin/templates/TemplatesPage.vue
index e4a5d3b..b648b9c 100644
--- a/frontend/src/components/admin/templates/TemplatesPage.vue
+++ b/frontend/src/components/admin/templates/TemplatesPage.vue
@@ -1,18 +1,17 @@
 <template>
-    <div>
-        <div class="flex justify-between mb-5">
-            <PageHeader title="Templates" description="Manage email templates" />
-            <div class="flex justify-end mb-4">
-                <Button @click="navigateToAddTemplate" size="sm"> New template </Button>
-            </div>
-        </div>
-        <div class="w-full">
-            <DataTable :columns="columns" :data="templates" />
-        </div>
+  <div>
+    <div class="flex justify-between mb-5">
+      <PageHeader title="Templates" description="Manage email templates" />
+      <div class="flex justify-end mb-4">
+        <Button @click="navigateToAddTemplate" size="sm"> New template </Button>
+      </div>
     </div>
+    <div class="w-full">
+      <DataTable :columns="columns" :data="templates" />
+    </div>
+  </div>
 </template>
 
-
 <script setup>
 import { ref, onMounted } from 'vue'
 import DataTable from '@/components/admin/DataTable.vue'
@@ -26,11 +25,11 @@ const templates = ref([])
 const router = useRouter()
 
 onMounted(async () => {
-    const resp = await api.getTemplates()
-    templates.value = resp.data.data
+  const resp = await api.getTemplates()
+  templates.value = resp.data.data
 })
 
 const navigateToAddTemplate = () => {
-    router.push('/admin/templates/new')
+  router.push('/admin/templates/new')
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/admin/templates/dataTableDropdown.vue b/frontend/src/components/admin/templates/dataTableDropdown.vue
index d4fe884..03fdeda 100644
--- a/frontend/src/components/admin/templates/dataTableDropdown.vue
+++ b/frontend/src/components/admin/templates/dataTableDropdown.vue
@@ -1,10 +1,10 @@
 <script setup>
 import { MoreHorizontal } from 'lucide-vue-next'
 import {
-    DropdownMenu,
-    DropdownMenuContent,
-    DropdownMenuItem,
-    DropdownMenuTrigger
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger
 } from '@/components/ui/dropdown-menu'
 import { Button } from '@/components/ui/button'
 import { useRouter } from 'vue-router'
@@ -12,30 +12,30 @@ import { useRouter } from 'vue-router'
 const router = useRouter()
 
 const props = defineProps({
-    template: {
-        type: Object,
-        required: true,
-        default: () => ({
-            id: ''
-        })
-    }
+  template: {
+    type: Object,
+    required: true,
+    default: () => ({
+      id: ''
+    })
+  }
 })
 
-function editTemplate (id) {
-    router.push({ path: `/admin/templates/${id}/edit` })
+function editTemplate(id) {
+  router.push({ path: `/admin/templates/${id}/edit` })
 }
 </script>
 
 <template>
-    <DropdownMenu>
-        <DropdownMenuTrigger as-child>
-            <Button variant="ghost" class="w-8 h-8 p-0">
-                <span class="sr-only">Open menu</span>
-                <MoreHorizontal class="w-4 h-4" />
-            </Button>
-        </DropdownMenuTrigger>
-        <DropdownMenuContent>
-            <DropdownMenuItem @click="editTemplate(props.template.id)"> Edit </DropdownMenuItem>
-        </DropdownMenuContent>
-    </DropdownMenu>
+  <DropdownMenu>
+    <DropdownMenuTrigger as-child>
+      <Button variant="ghost" class="w-8 h-8 p-0">
+        <span class="sr-only">Open menu</span>
+        <MoreHorizontal class="w-4 h-4" />
+      </Button>
+    </DropdownMenuTrigger>
+    <DropdownMenuContent>
+      <DropdownMenuItem @click="editTemplate(props.template.id)"> Edit </DropdownMenuItem>
+    </DropdownMenuContent>
+  </DropdownMenu>
 </template>
diff --git a/frontend/src/components/admin/templates/formSchema.js b/frontend/src/components/admin/templates/formSchema.js
index 97f59a1..bf0057b 100644
--- a/frontend/src/components/admin/templates/formSchema.js
+++ b/frontend/src/components/admin/templates/formSchema.js
@@ -1,13 +1,11 @@
 import * as z from 'zod'
 
 export const formSchema = z.object({
-    name: z
-        .string({
-            required_error: 'Template name is required.'
-        }),
-    body: z
-        .string({
-            required_error: 'Template body is required.'
-        }),
-    is_default: z.boolean().optional()
+  name: z.string({
+    required_error: 'Template name is required.'
+  }),
+  body: z.string({
+    required_error: 'Template body is required.'
+  }),
+  is_default: z.boolean().optional()
 })
diff --git a/frontend/src/components/admin/uploads/LocalFsForm.vue b/frontend/src/components/admin/uploads/LocalFsForm.vue
index 4d85fea..e85bad4 100644
--- a/frontend/src/components/admin/uploads/LocalFsForm.vue
+++ b/frontend/src/components/admin/uploads/LocalFsForm.vue
@@ -1,106 +1,104 @@
 <template>
-    <form @submit="onLocalFsSubmit" class="w-2/3 space-y-6">
-        <FormField v-slot="{ componentField }" name="provider">
-            <FormItem >
-                <FormLabel>Provider</FormLabel>
-                <FormControl>
-                    <Select v-bind="componentField" v-model="componentField.modelValue"
-                        @update:modelValue="handleProviderUpdate">
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select a provider" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem value="s3">
-                                    S3
-                                </SelectItem>
-                                <SelectItem value="localfs">
-                                    Local filesystem
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+  <form @submit="onLocalFsSubmit" class="w-2/3 space-y-6">
+    <FormField v-slot="{ componentField }" name="provider">
+      <FormItem>
+        <FormLabel>Provider</FormLabel>
+        <FormControl>
+          <Select
+            v-bind="componentField"
+            v-model="componentField.modelValue"
+            @update:modelValue="handleProviderUpdate"
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select a provider" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="s3"> S3 </SelectItem>
+                <SelectItem value="localfs"> Local filesystem </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="upload_path">
-            <FormItem v-auto-animate>
-                <FormLabel>Upload path</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="/home/ubuntu/uploads" v-bind="componentField" />
-                </FormControl>
-                <FormDescription> Path to the directory where files will be uploaded. </FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
-        <Button type="submit" size="sm"> {{ submitLabel }} </Button>
-    </form>
+    <FormField v-slot="{ componentField }" name="upload_path">
+      <FormItem v-auto-animate>
+        <FormLabel>Upload path</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="/home/ubuntu/uploads" v-bind="componentField" />
+        </FormControl>
+        <FormDescription> Path to the directory where files will be uploaded. </FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit" size="sm"> {{ submitLabel }} </Button>
+  </form>
 </template>
 
 <script setup>
-import {  watch } from 'vue'
+import { watch } from 'vue'
 import { Button } from '@/components/ui/button'
 import { useForm } from 'vee-validate'
 import { toTypedSchema } from '@vee-validate/zod'
 import { localFsFormSchema } from './formSchema.js'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import {
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormDescription
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
 } from '@/components/ui/form'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
 import { Input } from '@/components/ui/input'
 
 const props = defineProps({
-    initialValues: {
-        type: Object,
-        required: false
-    },
-    submitForm: {
-        type: Function,
-        required: true
-    },
-    submitLabel: {
-        type: String,
-        required: false,
-        default: () => 'Submit'
-    },
+  initialValues: {
+    type: Object,
+    required: false
+  },
+  submitForm: {
+    type: Function,
+    required: true
+  },
+  submitLabel: {
+    type: String,
+    required: false,
+    default: () => 'Submit'
+  }
 })
 
 const emit = defineEmits(['provider-update'])
 
 const localFsForm = useForm({
-    validationSchema: toTypedSchema(localFsFormSchema),
+  validationSchema: toTypedSchema(localFsFormSchema)
 })
 
 const onLocalFsSubmit = localFsForm.handleSubmit((values) => {
-    props.submitForm(values)
+  props.submitForm(values)
 })
 
 const handleProviderUpdate = (value) => {
-    emit('provider-update', value)
+  emit('provider-update', value)
 }
 
 // Watch for changes in initialValues and update the form.
 watch(
-    () => props.initialValues,
-    (newValues) => {
-        localFsForm.setValues(newValues)
-    },
-    { deep: true, immediate: true }
+  () => props.initialValues,
+  (newValues) => {
+    localFsForm.setValues(newValues)
+  },
+  { deep: true, immediate: true }
 )
-
 </script>
diff --git a/frontend/src/components/admin/uploads/S3Form.vue b/frontend/src/components/admin/uploads/S3Form.vue
index 858ca86..da006f1 100644
--- a/frontend/src/components/admin/uploads/S3Form.vue
+++ b/frontend/src/components/admin/uploads/S3Form.vue
@@ -1,127 +1,128 @@
 <template>
-    <form @submit="onS3FormSubmit" class="w-2/3 space-y-6">
-        <FormField v-slot="{ componentField }" name="provider">
-            <FormItem>
-                <FormLabel>Provider</FormLabel>
-                <FormControl>
-                    <Select v-bind="componentField" v-model="componentField.modelValue"
-                        @update:modelValue="handleProviderUpdate">
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select a provider" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem value="s3">
-                                    S3
-                                </SelectItem>
-                                <SelectItem value="localfs">
-                                    Local filesystem
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+  <form @submit="onS3FormSubmit" class="w-2/3 space-y-6">
+    <FormField v-slot="{ componentField }" name="provider">
+      <FormItem>
+        <FormLabel>Provider</FormLabel>
+        <FormControl>
+          <Select
+            v-bind="componentField"
+            v-model="componentField.modelValue"
+            @update:modelValue="handleProviderUpdate"
+          >
+            <SelectTrigger>
+              <SelectValue placeholder="Select a provider" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="s3"> S3 </SelectItem>
+                <SelectItem value="localfs"> Local filesystem </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="region">
-            <FormItem v-auto-animate>
-                <FormLabel>Region</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="ap-south-1" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="region">
+      <FormItem v-auto-animate>
+        <FormLabel>Region</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="ap-south-1" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="access_key">
-            <FormItem v-auto-animate>
-                <FormLabel>AWS access key</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="AWS access key" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="access_key">
+      <FormItem v-auto-animate>
+        <FormLabel>AWS access key</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="AWS access key" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="access_secret">
-            <FormItem v-auto-animate>
-                <FormLabel>AWS access secret</FormLabel>
-                <FormControl>
-                    <Input type="password" placeholder="AWS access secret" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="access_secret">
+      <FormItem v-auto-animate>
+        <FormLabel>AWS access secret</FormLabel>
+        <FormControl>
+          <Input type="password" placeholder="AWS access secret" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="bucket_type">
-            <FormItem>
-                <FormLabel>Bucket type</FormLabel>
-                <FormControl>
-                    <Select v-bind="componentField" v-model="componentField.modelValue">
-                        <SelectTrigger>
-                            <SelectValue placeholder="Select bucket type" />
-                        </SelectTrigger>
-                        <SelectContent>
-                            <SelectGroup>
-                                <SelectItem value="public">
-                                    Public
-                                </SelectItem>
-                                <SelectItem value="private">
-                                    Private
-                                </SelectItem>
-                            </SelectGroup>
-                        </SelectContent>
-                    </Select>
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="bucket_type">
+      <FormItem>
+        <FormLabel>Bucket type</FormLabel>
+        <FormControl>
+          <Select v-bind="componentField" v-model="componentField.modelValue">
+            <SelectTrigger>
+              <SelectValue placeholder="Select bucket type" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectGroup>
+                <SelectItem value="public"> Public </SelectItem>
+                <SelectItem value="private"> Private </SelectItem>
+              </SelectGroup>
+            </SelectContent>
+          </Select>
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="bucket">
-            <FormItem v-auto-animate>
-                <FormLabel>Bucket</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Bucket" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="bucket">
+      <FormItem v-auto-animate>
+        <FormLabel>Bucket</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Bucket" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="bucket_path">
-            <FormItem v-auto-animate>
-                <FormLabel>Bucket path</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="Bucket path" v-bind="componentField" />
-                </FormControl>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="bucket_path">
+      <FormItem v-auto-animate>
+        <FormLabel>Bucket path</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="Bucket path" v-bind="componentField" />
+        </FormControl>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="upload_expiry">
-            <FormItem v-auto-animate>
-                <FormLabel>Upload expiry</FormLabel>
-                <FormControl>
-                    <Input type="text" placeholder="24h" v-bind="componentField" />
-                </FormControl>
-                <FormDescription>Only applicable for private buckets.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
+    <FormField v-slot="{ componentField }" name="upload_expiry">
+      <FormItem v-auto-animate>
+        <FormLabel>Upload expiry</FormLabel>
+        <FormControl>
+          <Input type="text" placeholder="24h" v-bind="componentField" />
+        </FormControl>
+        <FormDescription>Only applicable for private buckets.</FormDescription>
+        <FormMessage />
+      </FormItem>
+    </FormField>
 
-        <FormField v-slot="{ componentField }" name="url">
-            <FormItem v-auto-animate>
-                <FormLabel>S3 backend URL</FormLabel>
-                <FormControl>
-                    <Input type="url" placeholder="https://ap-south-1.s3.amazonaws.com" v-bind="componentField"/>
-                </FormControl>
-                <FormDescription>Only change if using a custom S3 compatible backend like Minio.</FormDescription>
-                <FormMessage />
-            </FormItem>
-        </FormField>
-        <Button type="submit" size="sm"> {{ submitLabel }} </Button>
-    </form>
+    <FormField v-slot="{ componentField }" name="url">
+      <FormItem v-auto-animate>
+        <FormLabel>S3 backend URL</FormLabel>
+        <FormControl>
+          <Input
+            type="url"
+            placeholder="https://ap-south-1.s3.amazonaws.com"
+            v-bind="componentField"
+          />
+        </FormControl>
+        <FormDescription
+          >Only change if using a custom S3 compatible backend like Minio.</FormDescription
+        >
+        <FormMessage />
+      </FormItem>
+    </FormField>
+    <Button type="submit" size="sm"> {{ submitLabel }} </Button>
+  </form>
 </template>
 
 <script setup>
@@ -132,60 +133,59 @@ import { toTypedSchema } from '@vee-validate/zod'
 import { s3FormSchema } from './formSchema.js'
 import { vAutoAnimate } from '@formkit/auto-animate/vue'
 import {
-    FormControl,
-    FormField,
-    FormItem,
-    FormLabel,
-    FormMessage,
-    FormDescription
+  FormControl,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+  FormDescription
 } from '@/components/ui/form'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
 import { Input } from '@/components/ui/input'
 
 const props = defineProps({
-    initialValues: {
-        type: Object,
-        required: false
-    },
-    submitForm: {
-        type: Function,
-        required: true
-    },
-    submitLabel: {
-        type: String,
-        required: false,
-        default: () => 'Submit'
-    },
+  initialValues: {
+    type: Object,
+    required: false
+  },
+  submitForm: {
+    type: Function,
+    required: true
+  },
+  submitLabel: {
+    type: String,
+    required: false,
+    default: () => 'Submit'
+  }
 })
 
 const emit = defineEmits(['provider-update'])
 
 const s3Form = useForm({
-    validationSchema: toTypedSchema(s3FormSchema),
+  validationSchema: toTypedSchema(s3FormSchema)
 })
 
 const onS3FormSubmit = s3Form.handleSubmit((values) => {
-    props.submitForm(values)
+  props.submitForm(values)
 })
 
 const handleProviderUpdate = (value) => {
-    emit('provider-update', value)
+  emit('provider-update', value)
 }
 
 // Watch for changes in initialValues and update the form.
 watch(
-    () => props.initialValues,
-    (newValues) => {
-        s3Form.setValues(newValues)
-    },
-    { deep: true, immediate: true }
+  () => props.initialValues,
+  (newValues) => {
+    s3Form.setValues(newValues)
+  },
+  { deep: true, immediate: true }
 )
-
 </script>
diff --git a/frontend/src/components/admin/uploads/UploadsPage.vue b/frontend/src/components/admin/uploads/UploadsPage.vue
index 6d207db..be33c26 100644
--- a/frontend/src/components/admin/uploads/UploadsPage.vue
+++ b/frontend/src/components/admin/uploads/UploadsPage.vue
@@ -3,8 +3,13 @@
     <PageHeader title="Uploads" description="Manage file upload settings" />
   </div>
   <div>
-    <component :is="formProvider === 's3' ? S3Form : LocalFsForm" :submitForm="submitForm"
-      :initialValues="initialValues" submitLabel="Save" @provider-update="handleProviderUpdate" />
+    <component
+      :is="formProvider === 's3' ? S3Form : LocalFsForm"
+      :submitForm="submitForm"
+      :initialValues="initialValues"
+      submitLabel="Save"
+      @provider-update="handleProviderUpdate"
+    />
   </div>
 </template>
 
@@ -19,34 +24,34 @@ const initialValues = ref({})
 
 onMounted(async () => {
   const resp = await api.getSettings('upload')
-  const config = resp.data.data;
-  const modifiedConfig = {};
+  const config = resp.data.data
+  const modifiedConfig = {}
   for (const key in config) {
     if (key.startsWith('upload.localfs.')) {
-      const newKey = key.replace('upload.localfs.', '');
-      modifiedConfig[newKey] = config[key];
+      const newKey = key.replace('upload.localfs.', '')
+      modifiedConfig[newKey] = config[key]
     } else if (key.startsWith('upload.s3')) {
-      const newKey = key.replace('upload.s3.', '');
-      modifiedConfig[newKey] = config[key];
+      const newKey = key.replace('upload.s3.', '')
+      modifiedConfig[newKey] = config[key]
     } else if (key.startsWith('upload.')) {
-      const newKey = key.replace('upload.', '');
-      modifiedConfig[newKey] = config[key];
+      const newKey = key.replace('upload.', '')
+      modifiedConfig[newKey] = config[key]
     }
   }
   initialValues.value = modifiedConfig
 })
 
 const submitForm = async (values) => {
-  const prefixedValues = {};
+  const prefixedValues = {}
   for (const key in values) {
     if (values.provider === 'localfs') {
-      prefixedValues[`upload.localfs.${key}`] = values[key];
+      prefixedValues[`upload.localfs.${key}`] = values[key]
     } else if (values.provider === 's3') {
-      prefixedValues[`upload.s3.${key}`] = values[key];
+      prefixedValues[`upload.s3.${key}`] = values[key]
     }
   }
-  prefixedValues['upload.provider'] = values.provider;
-  await api.updateSettings('upload', prefixedValues);
+  prefixedValues['upload.provider'] = values.provider
+  await api.updateSettings('upload', prefixedValues)
 }
 
 const formProvider = computed(() => {
diff --git a/frontend/src/components/admin/uploads/formSchema.js b/frontend/src/components/admin/uploads/formSchema.js
index 10d17a6..621eed5 100644
--- a/frontend/src/components/admin/uploads/formSchema.js
+++ b/frontend/src/components/admin/uploads/formSchema.js
@@ -1,55 +1,44 @@
 import * as z from 'zod'
 
 export const s3FormSchema = z.object({
-    provider: z
-        .string({
-            required_error: 'Provider is required.'
-        }),
-    region: z
-        .string({
-            required_error: 'Region is required.'
-        }),
-    access_key: z
-        .string({
-            required_error: 'AWS access key is required.'
-        }),
-    access_secret: z
-        .string({
-            required_error: 'AWS access secret is required.'
-        }),
-    bucket_type: z
-        .string({
-            required_error: 'Bucket type is required.'
-        }),
-    bucket: z
-        .string({
-            required_error: 'Bucket is required.'
-        }),
-    bucket_path: z
-        .string({
-            required_error: 'Bucket path is required.'
-        }),
-    upload_expiry: z
-        .string({
-            required_error: 'Upload expiry is required.'
-        }),
-    url: z
-        .string({
-            required_error: 'S3 backend URL is required.'
-        })
-        .url({
-            message: 'S3 backend URL must be a valid URL.'
-        }),
+  provider: z.string({
+    required_error: 'Provider is required.'
+  }),
+  region: z.string({
+    required_error: 'Region is required.'
+  }),
+  access_key: z.string({
+    required_error: 'AWS access key is required.'
+  }),
+  access_secret: z.string({
+    required_error: 'AWS access secret is required.'
+  }),
+  bucket_type: z.string({
+    required_error: 'Bucket type is required.'
+  }),
+  bucket: z.string({
+    required_error: 'Bucket is required.'
+  }),
+  bucket_path: z.string({
+    required_error: 'Bucket path is required.'
+  }),
+  upload_expiry: z.string({
+    required_error: 'Upload expiry is required.'
+  }),
+  url: z
+    .string({
+      required_error: 'S3 backend URL is required.'
+    })
+    .url({
+      message: 'S3 backend URL must be a valid URL.'
+    })
 })
 
-
 export const localFsFormSchema = z.object({
-    provider: z
-        .string({
-            required_error: 'Provider is required.'
-        }),
-    upload_path: z
-        .string({
-            required_error: 'Upload path is required.'
-        }),
-})
\ No newline at end of file
+  provider: z.string({
+    required_error: 'Provider is required.'
+  }),
+  upload_path: z.string({
+    required_error: 'Upload path is required.'
+  })
+})
diff --git a/frontend/src/components/attachment/AttachmentsPreview.vue b/frontend/src/components/attachment/AttachmentsPreview.vue
index 8d26bec..70ff774 100644
--- a/frontend/src/components/attachment/AttachmentsPreview.vue
+++ b/frontend/src/components/attachment/AttachmentsPreview.vue
@@ -1,47 +1,51 @@
 <template>
-    <div class="flex m-2 items-end text-sm overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer">
-        <div v-for="(attachment) in attachments" :key="attachment.uuid"
-            class="flex items-center p-1 bg-[#F5F5F4] gap-1 rounded-md max-w-[15rem]">
-            <!-- Filename tooltip -->
-                <Tooltip>
-                    <TooltipTrigger as-child>
-                        <div class="overflow-hidden text-ellipsis  whitespace-nowrap">
-                            {{ attachment.name }}
-                        </div>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        {{ attachment.name }}
-                    </TooltipContent>
-                </Tooltip>
-            <div>
-                {{ formatBytes(attachment.size) }}
-            </div>
-            <div @click="onDelete(attachment.uuid)">
-                <X size="13" />
-            </div>
-        </div>
+  <div
+    class="flex m-2 items-end text-sm overflow-hidden text-ellipsis whitespace-nowrap cursor-pointer"
+  >
+    <div
+      v-for="attachment in attachments"
+      :key="attachment.uuid"
+      class="flex items-center p-1 bg-[#F5F5F4] gap-1 rounded-md max-w-[15rem]"
+    >
+      <!-- Filename tooltip -->
+      <Tooltip>
+        <TooltipTrigger as-child>
+          <div class="overflow-hidden text-ellipsis whitespace-nowrap">
+            {{ getAttachmentName(attachment.filename) }}
+          </div>
+        </TooltipTrigger>
+        <TooltipContent>
+          {{ attachment.filename }}
+        </TooltipContent>
+      </Tooltip>
+      <div>
+        {{ formatBytes(attachment.size) }}
+      </div>
+      <div @click="onDelete(attachment.uuid)">
+        <X size="13" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { formatBytes } from '@/utils/file.js';
+import { formatBytes } from '@/utils/file.js'
 
-import { X } from 'lucide-vue-next';
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger,
-} from '@/components/ui/tooltip'
+import { X } from 'lucide-vue-next'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 defineProps({
-    attachments: {
-        type: Array,
-        required: true,
-    },
-    onDelete: {
-        type: Function,
-        required: true,
-    }
+  attachments: {
+    type: Array,
+    required: true
+  },
+  onDelete: {
+    type: Function,
+    required: true
+  }
 })
 
+const getAttachmentName = (name) => {
+  return name.substring(0, 20)
+}
 </script>
diff --git a/frontend/src/components/attachment/FileAttachmentPreview.vue b/frontend/src/components/attachment/FileAttachmentPreview.vue
index 6c572f4..92d6cde 100644
--- a/frontend/src/components/attachment/FileAttachmentPreview.vue
+++ b/frontend/src/components/attachment/FileAttachmentPreview.vue
@@ -1,36 +1,31 @@
 <template>
-    <div class="flex items-center group text-left">
-        <div class="relative w-36 h-28 flex items-center justify-center">
-            <div>
-                <span class="size-20">📄</span>
-            </div>
-            <div class="
-                p-1
-                absolute
-                inset-0
-                text-gray-50
-                opacity-10
-                group-hover:opacity-100
-                overlay
-                text-wrap
-                ">
-                <p class="font-bold text-xs opacity-0 group-hover:opacity-100">{{ getAttachmentName(attachment.name) }}</p>
-                <p class="text-xs opacity-0 group-hover:opacity-100">{{ formatBytes(attachment.size) }}</p>
-            </div>
-        </div>
+  <div class="flex items-center group text-left">
+    <div class="relative w-36 h-28 flex items-center justify-center">
+      <div>
+        <span class="size-20">📄</span>
+      </div>
+      <div
+        class="p-1 absolute inset-0 text-gray-50 opacity-10 group-hover:opacity-100 overlay text-wrap"
+      >
+        <p class="font-bold text-xs opacity-0 group-hover:opacity-100">
+          {{ getAttachmentName(attachment.name) }}
+        </p>
+        <p class="text-xs opacity-0 group-hover:opacity-100">{{ formatBytes(attachment.size) }}</p>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { formatBytes } from '@/utils/file.js';
+import { formatBytes } from '@/utils/file.js'
 defineProps({
-    attachment: {
-        type: Object,
-        required: true,
-    },
+  attachment: {
+    type: Object,
+    required: true
+  }
 })
 
 const getAttachmentName = (name) => {
-    return name.substring(0, 50)
+  return name.substring(0, 50)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/attachment/ImageAttachmentPreview.vue b/frontend/src/components/attachment/ImageAttachmentPreview.vue
index 0ac7e51..7bfbd16 100644
--- a/frontend/src/components/attachment/ImageAttachmentPreview.vue
+++ b/frontend/src/components/attachment/ImageAttachmentPreview.vue
@@ -1,34 +1,31 @@
 <template>
-    <div class="flex flex-wrap items-center group text-left">
-        <div class="relative">
-            <img :src=attachment.url class="w-36 h-28 flex items-center object-cover" />
-            <div class="
-                p-1
-                absolute
-                inset-0
-                text-gray-50
-                opacity-0
-                group-hover:opacity-100
-                overlay
-                text-wrap
-            ">
-                <p class="font-bold text-xs">{{ trimAttachmentName(attachment.name) }}</p>
-                <p class="text-xs">{{ formatBytes(attachment.size) }}</p>
-            </div>
-        </div>
+  <div class="flex flex-wrap items-center group text-left">
+    <div class="relative">
+      <img
+        :src="getThumbFilepath(attachment.url)"
+        class="w-36 h-28 flex items-center object-cover"
+      />
+      <div
+        class="p-1 absolute inset-0 text-gray-50 opacity-0 group-hover:opacity-100 overlay text-wrap"
+      >
+        <p class="font-bold text-xs">{{ trimAttachmentName(attachment.name) }}</p>
+        <p class="text-xs">{{ formatBytes(attachment.size) }}</p>
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { formatBytes } from '@/utils/file.js'
+import { formatBytes, getThumbFilepath } from '@/utils/file.js'
+
 defineProps({
-    attachment: {
-        type: Object,
-        required: true,
-    },
+  attachment: {
+    type: Object,
+    required: true
+  }
 })
 
 const trimAttachmentName = (name) => {
-    return name.substring(0, 40)
+  return name.substring(0, 40)
 }
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/attachment/MessageAttachmentPreview.vue b/frontend/src/components/attachment/MessageAttachmentPreview.vue
index b0344d0..009bda7 100644
--- a/frontend/src/components/attachment/MessageAttachmentPreview.vue
+++ b/frontend/src/components/attachment/MessageAttachmentPreview.vue
@@ -1,26 +1,30 @@
 <template>
-    <div class="flex flex-row flex-wrap gap-2 break-all">
-        <div v-for="(attachment) in attachments" :key="attachment.uuid" class="flex items-center cursor-pointer">
-            <div>
-                <ImageAttachmentPreview v-if="isImage(attachment)" :attachment="attachment" />
-                <FileAttachmentPreview v-else :attachment="attachment" />
-            </div>
-        </div>
+  <div class="flex flex-row flex-wrap gap-2 break-all">
+    <div
+      v-for="attachment in attachments"
+      :key="attachment.uuid"
+      class="flex items-center cursor-pointer"
+    >
+      <div>
+        <ImageAttachmentPreview v-if="isImage(attachment)" :attachment="attachment" />
+        <FileAttachmentPreview v-else :attachment="attachment" />
+      </div>
     </div>
+  </div>
 </template>
 
 <script setup>
-import ImageAttachmentPreview from "@/components/attachment/ImageAttachmentPreview.vue"
-import FileAttachmentPreview from "@/components/attachment/FileAttachmentPreview.vue"
+import ImageAttachmentPreview from '@/components/attachment/ImageAttachmentPreview.vue'
+import FileAttachmentPreview from '@/components/attachment/FileAttachmentPreview.vue'
 
 defineProps({
-    attachments: {
-        type: Array,
-        required: true,
-    },
+  attachments: {
+    type: Array,
+    required: true
+  }
 })
 
 const isImage = (attachment) => {
-    return attachment.content_type.includes('image');
+  return attachment.content_type.includes('image')
 }
 </script>
diff --git a/frontend/src/components/common/PageHeader.vue b/frontend/src/components/common/PageHeader.vue
index a0ee8f4..1291bda 100644
--- a/frontend/src/components/common/PageHeader.vue
+++ b/frontend/src/components/common/PageHeader.vue
@@ -1,25 +1,25 @@
 <template>
-    <div>
-        <span class="title">
-            {{ title }}
-        </span>
-        <p class="text-sm-muted">
-            {{ subTitle }}
-        </p>
-    </div>
-    <Separator class="my-3" />
+  <div>
+    <span class="title">
+      {{ title }}
+    </span>
+    <p class="text-sm-muted">
+      {{ subTitle }}
+    </p>
+  </div>
+  <Separator class="my-3" />
 </template>
 
 <script setup>
 import { Separator } from '@/components/ui/separator'
 defineProps({
-    title: {
-        type: String,
-        required: true
-    },
-    subTitle: {
-        type: String,
-        required: true
-    },
-});
+  title: {
+    type: String,
+    required: true
+  },
+  subTitle: {
+    type: String,
+    required: true
+  }
+})
 </script>
diff --git a/frontend/src/components/common/SidebarNav.vue b/frontend/src/components/common/SidebarNav.vue
index 460b35c..36cb9ea 100644
--- a/frontend/src/components/common/SidebarNav.vue
+++ b/frontend/src/components/common/SidebarNav.vue
@@ -1,19 +1,27 @@
 <template>
-    <nav class="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1">
-        <router-link v-for="item in navItems" :key="item.title" :to="item.href">
-            <template v-slot="{ navigate, isActive }">
-                <Button as="a" :href="item.href" variant="ghost" :class="cn(
-                    'w-full text-left justify-start h-16 pl-3',
-                    isActive || isChildActive(item.href) ? 'bg-muted hover:bg-muted' : ''
-                )" @click="navigate">
-                    <div class="flex flex-col items-start space-y-1">
-                        <span class="text-sm">{{ item.title }}</span>
-                        <p class="text-xs-muted break-words whitespace-normal">{{ item.description }}</p>
-                    </div>
-                </Button>
-            </template>
-        </router-link>
-    </nav>
+  <nav class="flex space-x-2 lg:flex-col lg:space-x-0 lg:space-y-1">
+    <router-link v-for="item in navItems" :key="item.title" :to="item.href">
+      <template v-slot="{ navigate, isActive }">
+        <Button
+          as="a"
+          :href="item.href"
+          variant="ghost"
+          :class="
+            cn(
+              'w-full text-left justify-start h-16 pl-3',
+              isActive || isChildActive(item.href) ? 'bg-muted hover:bg-muted' : ''
+            )
+          "
+          @click="navigate"
+        >
+          <div class="flex flex-col items-start space-y-1">
+            <span class="text-sm">{{ item.title }}</span>
+            <p class="text-xs-muted break-words whitespace-normal">{{ item.description }}</p>
+          </div>
+        </Button>
+      </template>
+    </router-link>
+  </nav>
 </template>
 
 <script setup>
@@ -25,14 +33,14 @@ import { useRoute } from 'vue-router'
 const route = useRoute()
 
 defineProps({
-    navItems: {
-        type: Array,
-        required: true,
-        default: () => []
-    }
+  navItems: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
 })
 
 const isChildActive = (href) => {
-    return route.path.startsWith(href)
+  return route.path.startsWith(href)
 }
 </script>
diff --git a/frontend/src/components/conversation/Conversation.vue b/frontend/src/components/conversation/ConversationPage.vue
similarity index 78%
rename from frontend/src/components/conversation/Conversation.vue
rename to frontend/src/components/conversation/ConversationPage.vue
index 82dcd26..6078574 100644
--- a/frontend/src/components/conversation/Conversation.vue
+++ b/frontend/src/components/conversation/ConversationPage.vue
@@ -23,17 +23,12 @@
             <Icon icon="lucide:ellipsis-vertical" class="mt-2 size-6"></Icon>
           </DropdownMenuTrigger>
           <DropdownMenuContent>
-            <DropdownMenuItem @click="handleUpdateStatus('Open')">
-              <span>Open</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem @click="handleUpdateStatus('Processing')">
-              <span>Processing</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem @click="handleUpdateStatus('Spam')">
-              <span>Mark as spam</span>
-            </DropdownMenuItem>
-            <DropdownMenuItem @click="handleUpdateStatus('Resolved')">
-              <span>Resolve</span>
+            <DropdownMenuItem
+              v-for="status in statuses"
+              :key="status.name"
+              @click="handleUpdateStatus(status.name)"
+            >
+              {{ status.name }}
             </DropdownMenuItem>
           </DropdownMenuContent>
         </DropdownMenu>
@@ -49,9 +44,8 @@
 </template>
 
 <script setup>
-import { computed } from 'vue'
+import { computed, ref, onMounted } from 'vue'
 import { useConversationStore } from '@/stores/conversation'
-
 import { Error } from '@/components/ui/error'
 import { Badge } from '@/components/ui/badge'
 import {
@@ -63,9 +57,20 @@ import {
 import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import MessageList from '@/components/message/MessageList.vue'
 import ReplyBox from './ReplyBox.vue'
+import api from '@/api'
 import { Icon } from '@iconify/vue'
 
 const conversationStore = useConversationStore()
+const statuses = ref([])
+
+onMounted(() => {
+  getAllStatuses()
+})
+
+const getAllStatuses = async () => {
+  const resp = await api.getAllStatuses()
+  statuses.value = resp.data.data
+}
 
 const getBadgeVariant = computed(() => {
   return conversationStore.conversation.data?.status == 'Spam' ? 'destructive' : 'primary'
diff --git a/frontend/src/components/conversation/ConversationSideBar.vue b/frontend/src/components/conversation/ConversationSideBar.vue
index 9d7f56e..f8bb84d 100644
--- a/frontend/src/components/conversation/ConversationSideBar.vue
+++ b/frontend/src/components/conversation/ConversationSideBar.vue
@@ -2,27 +2,43 @@
   <div class="p-3">
     <div>
       <Avatar class="size-20">
-        <AvatarImage :src=conversationStore.conversation.data.avatar_url
-          v-if="conversationStore.conversation.data.avatar_url" />
+        <AvatarImage
+          :src="conversationStore.conversation.data.avatar_url"
+          v-if="conversationStore.conversation.data.avatar_url"
+        />
         <AvatarFallback>
           {{ conversationStore.conversation.data.first_name.toUpperCase().substring(0, 2) }}
         </AvatarFallback>
       </Avatar>
       <h4 class="mt-3">
-        {{ conversationStore.conversation.data.first_name + ' ' +
-          conversationStore.conversation.data.last_name }}
+        {{
+          conversationStore.conversation.data.first_name +
+          ' ' +
+          conversationStore.conversation.data.last_name
+        }}
       </h4>
-      <p class="text-sm text-muted-foreground flex gap-2 mt-1" v-if="conversationStore.conversation.data.email">
+      <p
+        class="text-sm text-muted-foreground flex gap-2 mt-1"
+        v-if="conversationStore.conversation.data.email"
+      >
         <Mail class="size-3 mt-1"></Mail>
         {{ conversationStore.conversation.data.email }}
       </p>
-      <p class="text-sm text-muted-foreground flex gap-2 mt-1" v-if="conversationStore.conversation.data.phone_number">
+      <p
+        class="text-sm text-muted-foreground flex gap-2 mt-1"
+        v-if="conversationStore.conversation.data.phone_number"
+      >
         <Phone class="size-3 mt-1"></Phone>
         {{ conversationStore.conversation.data.phone_number }}
       </p>
     </div>
 
-    <Accordion type="single" collapsible class="border-t mt-4" :default-value="actionAccordion.title">
+    <Accordion
+      type="single"
+      collapsible
+      class="border-t mt-4"
+      :default-value="actionAccordion.title"
+    >
       <AccordionItem :value="actionAccordion.title">
         <AccordionTrigger>
           <h4 class="scroll-m-20 text-base font-medium tracking-tight">
@@ -30,20 +46,34 @@
           </h4>
         </AccordionTrigger>
         <AccordionContent>
-
           <!-- Agent assign -->
           <div class="mb-3">
             <Popover v-model:open="agentSelectDropdownOpen">
               <PopoverTrigger as-child>
-                <Button variant="outline" role="combobox" :aria-expanded="agentSelectDropdownOpen"
-                  class="w-full justify-between">
-                  {{ conversationStore.conversation.data.assigned_user_id
-                    ? (() => {
-                      console.log(' ->', conversationStore.conversation.data.assigned_user_id, 'agents ', agents)
-                      const agent = agents.find(agent => agent.id === conversationStore.conversation.data.assigned_user_id);
-                      return agent ? `${agent.first_name} ${agent.last_name}` : "Select agent...";
-                    })()
-                    : "Select agent..."
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  :aria-expanded="agentSelectDropdownOpen"
+                  class="w-full justify-between"
+                >
+                  {{
+                    conversationStore.conversation.data.assigned_user_id
+                      ? (() => {
+                          console.log(
+                            ' ->',
+                            conversationStore.conversation.data.assigned_user_id,
+                            'agents ',
+                            agents
+                          )
+                          const agent = agents.find(
+                            (agent) =>
+                              agent.id === conversationStore.conversation.data.assigned_user_id
+                          )
+                          return agent
+                            ? `${agent.first_name} ${agent.last_name}`
+                            : 'Select agent...'
+                        })()
+                      : 'Select agent...'
                   }}
                   <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
@@ -54,20 +84,32 @@
                   <CommandEmpty>No agent found.</CommandEmpty>
                   <CommandList>
                     <CommandGroup>
-                      <CommandItem v-for="agent in agents" :key="agent.id"
-                        :value="agent.id + ':' + agent.first_name + ' ' + agent.last_name" @select="(ev) => {
-                          if (typeof ev.detail.value === 'string') {
-                            const id = ev.detail.value.split(':')[0]
-                            console.log('setting id ', id)
-                            conversationStore.conversation.data.assigned_user_id = Number(id)
+                      <CommandItem
+                        v-for="agent in agents"
+                        :key="agent.id"
+                        :value="agent.id + ':' + agent.first_name + ' ' + agent.last_name"
+                        @select="
+                          (ev) => {
+                            if (typeof ev.detail.value === 'string') {
+                              const id = ev.detail.value.split(':')[0]
+                              console.log('setting id ', id)
+                              conversationStore.conversation.data.assigned_user_id = Number(id)
+                            }
+                            agentSelectDropdownOpen = false
                           }
-                          agentSelectDropdownOpen = false
-                        }">
+                        "
+                      >
                         {{ agent.first_name + ' ' + agent.last_name }}
-                        <CheckIcon :class="cn(
-                          'ml-auto h-4 w-4',
-                          conversationStore.conversation.data.assigned_user_id === agent.id ? 'opacity-100' : 'opacity-0',
-                        )" />
+                        <CheckIcon
+                          :class="
+                            cn(
+                              'ml-auto h-4 w-4',
+                              conversationStore.conversation.data.assigned_user_id === agent.id
+                                ? 'opacity-100'
+                                : 'opacity-0'
+                            )
+                          "
+                        />
                       </CommandItem>
                     </CommandGroup>
                   </CommandList>
@@ -81,12 +123,19 @@
           <div class="mb-3">
             <Popover v-model:open="teamSelectDropdownOpen">
               <PopoverTrigger as-child>
-                <Button variant="outline" role="combobox" :aria-expanded="teamSelectDropdownOpen"
-                  class="w-full justify-between">
-                  {{ conversationStore.conversation.data.assigned_team_id
-                    ? teams.find((team) => team.id ===
-                      conversationStore.conversation.data.assigned_team_id)?.name
-                    : "Select team..." }}
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  :aria-expanded="teamSelectDropdownOpen"
+                  class="w-full justify-between"
+                >
+                  {{
+                    conversationStore.conversation.data.assigned_team_id
+                      ? teams.find(
+                          (team) => team.id === conversationStore.conversation.data.assigned_team_id
+                        )?.name
+                      : 'Select team...'
+                  }}
                   <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
@@ -96,18 +145,31 @@
                   <CommandEmpty>No team found.</CommandEmpty>
                   <CommandList>
                     <CommandGroup>
-                      <CommandItem v-for="team in teams" :key="team.id" :value="team.id + ':' + team.name" @select="(ev) => {
-                        if (ev.detail.value) {
-                          const id = ev.detail.value.split(':')[0]
-                          conversationStore.conversation.data.assigned_team_id = Number(id)
-                        }
-                        teamSelectDropdownOpen = false
-                      }">
+                      <CommandItem
+                        v-for="team in teams"
+                        :key="team.id"
+                        :value="team.id + ':' + team.name"
+                        @select="
+                          (ev) => {
+                            if (ev.detail.value) {
+                              const id = ev.detail.value.split(':')[0]
+                              conversationStore.conversation.data.assigned_team_id = Number(id)
+                            }
+                            teamSelectDropdownOpen = false
+                          }
+                        "
+                      >
                         {{ team.name }}
-                        <CheckIcon :class="cn(
-                          'ml-auto h-4 w-4',
-                          conversationStore.conversation.data.assigned_team_id === team.id ? 'opacity-100' : 'opacity-0',
-                        )" />
+                        <CheckIcon
+                          :class="
+                            cn(
+                              'ml-auto h-4 w-4',
+                              conversationStore.conversation.data.assigned_team_id === team.id
+                                ? 'opacity-100'
+                                : 'opacity-0'
+                            )
+                          "
+                        />
                       </CommandItem>
                     </CommandGroup>
                   </CommandList>
@@ -118,16 +180,22 @@
           <!-- Team assign end -->
 
           <!-- Priority  -->
-
           <div class="mb-3">
             <Popover v-model:open="prioritySelectDropdownOpen">
               <PopoverTrigger as-child>
-                <Button variant="outline" role="combobox" :aria-expanded="prioritySelectDropdownOpen"
-                  class="w-full justify-between">
-                  {{ conversationStore.conversation.data.priority
-                    ? priorities.find((priority) => priority ===
-                      conversationStore.conversation.data.priority)
-                    : "Select priority..." }}
+                <Button
+                  variant="outline"
+                  role="combobox"
+                  :aria-expanded="prioritySelectDropdownOpen"
+                  class="w-full justify-between"
+                >
+                  {{
+                    conversationStore.conversation.data.priority
+                      ? priorities.find(
+                          (priority) => priority === conversationStore.conversation.data.priority
+                        )
+                      : 'Select priority...'
+                  }}
                   <CaretSortIcon class="ml-2 h-4 w-4 shrink-0 opacity-50" />
                 </Button>
               </PopoverTrigger>
@@ -137,18 +205,31 @@
                   <CommandEmpty>No priority found.</CommandEmpty>
                   <CommandList>
                     <CommandGroup>
-                      <CommandItem v-for="priority in priorities" :key="priority" :value="priority" @select="(ev) => {
-                        if (ev.detail.value) {
-                          const p = ev.detail.value
-                          conversationStore.conversation.data.priority = p;
-                        }
-                        prioritySelectDropdownOpen = false
-                      }">
+                      <CommandItem
+                        v-for="priority in priorities"
+                        :key="priority"
+                        :value="priority"
+                        @select="
+                          (ev) => {
+                            if (ev.detail.value) {
+                              const p = ev.detail.value
+                              conversationStore.conversation.data.priority = p
+                            }
+                            prioritySelectDropdownOpen = false
+                          }
+                        "
+                      >
                         {{ priority }}
-                        <CheckIcon :class="cn(
-                          'ml-auto h-4 w-4',
-                          conversationStore.conversation.data.priority === priority ? 'opacity-100' : 'opacity-0',
-                        )" />
+                        <CheckIcon
+                          :class="
+                            cn(
+                              'ml-auto h-4 w-4',
+                              conversationStore.conversation.data.priority === priority
+                                ? 'opacity-100'
+                                : 'opacity-0'
+                            )
+                          "
+                        />
                       </CommandItem>
                     </CommandGroup>
                   </CommandList>
@@ -159,7 +240,11 @@
           <!-- Priority end -->
 
           <!-- Tags -->
-          <TagsInput class="px-0 gap-0 w-full" :model-value="tagsSelected" @update:modelValue="handleUpsertTags">
+          <TagsInput
+            class="px-0 gap-0 w-full"
+            :model-value="tagsSelected"
+            @update:modelValue="handleUpsertTags"
+          >
             <div class="flex gap-2 flex-wrap items-center px-3">
               <TagsInputItem v-for="item in tagsSelected" :key="item" :value="item">
                 <TagsInputItemText />
@@ -167,31 +252,47 @@
               </TagsInputItem>
             </div>
 
-            <ComboboxRoot v-model="tagsSelected" v-model:open="tagDropdownOpen" v-model:searchTerm="tagSearchTerm"
-              class="w-full">
+            <ComboboxRoot
+              v-model="tagsSelected"
+              v-model:open="tagDropdownOpen"
+              v-model:searchTerm="tagSearchTerm"
+              class="w-full"
+            >
               <ComboboxAnchor as-child>
                 <ComboboxInput placeholder="Add tags..." as-child>
-                  <TagsInputInput class="w-full px-3" :class="tagsSelected.length > 0 ? 'mt-2' : ''"
-                    @keydown.enter.prevent />
+                  <TagsInputInput
+                    class="w-full px-3"
+                    :class="tagsSelected.length > 0 ? 'mt-2' : ''"
+                    @keydown.enter.prevent
+                  />
                 </ComboboxInput>
               </ComboboxAnchor>
 
               <ComboboxPortal>
-                <CommandList position="popper"
-                  class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">
+                <CommandList
+                  position="popper"
+                  class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+                >
                   <CommandEmpty />
                   <CommandGroup>
-                    <CommandItem v-for="ftag in tagsFiltered" :key="ftag.value" :value="ftag.label" @select.prevent="(ev) => {
-                      if (typeof ev.detail.value === 'string') {
-                        tagSearchTerm = ''
-                        tagsSelected.push(ev.detail.value)
-                        tagDropdownOpen = false
-                      }
+                    <CommandItem
+                      v-for="ftag in tagsFiltered"
+                      :key="ftag.value"
+                      :value="ftag.label"
+                      @select.prevent="
+                        (ev) => {
+                          if (typeof ev.detail.value === 'string') {
+                            tagSearchTerm = ''
+                            tagsSelected.push(ev.detail.value)
+                            tagDropdownOpen = false
+                          }
 
-                      if (tagsFiltered.length === 0) {
-                        tagDropdownOpen = false
-                      }
-                    }">
+                          if (tagsFiltered.length === 0) {
+                            tagDropdownOpen = false
+                          }
+                        }
+                      "
+                    >
                       {{ ftag.label }}
                     </CommandItem>
                   </CommandGroup>
@@ -200,12 +301,10 @@
             </ComboboxRoot>
           </TagsInput>
           <!-- Tags end -->
-
         </AccordionContent>
       </AccordionItem>
     </Accordion>
 
-
     <Accordion type="single" collapsible :default-value="infoAccordion.title">
       <AccordionItem :value="infoAccordion.title">
         <AccordionTrigger>
@@ -214,49 +313,35 @@
           </h4>
         </AccordionTrigger>
         <AccordionContent>
-
           <div class="flex flex-col gap-1 mb-5">
             <p class="font-medium">Initiated at</p>
             <p>
-              {{ format(conversationStore.conversation.data.created_at, "PPpp") }}
+              {{ format(conversationStore.conversation.data.created_at, 'PPpp') }}
             </p>
           </div>
 
-
           <div class="flex flex-col gap-1 mb-5">
-            <p class="font-medium">
-              First reply at
-            </p>
+            <p class="font-medium">First reply at</p>
             <p v-if="conversationStore.conversation.data.first_reply_at">
-              {{ format(conversationStore.conversation.data.first_reply_at, "PPpp") }}
-            </p>
-            <p v-else>
-              -
+              {{ format(conversationStore.conversation.data.first_reply_at, 'PPpp') }}
             </p>
+            <p v-else>-</p>
           </div>
 
           <div class="flex flex-col gap-1 mb-5">
-            <p class="font-medium">
-              Resolved at
-            </p>
+            <p class="font-medium">Resolved at</p>
             <p v-if="conversationStore.conversation.data.resolved_at">
-              {{ format(conversationStore.conversation.data.resolved_at, "PPpp") }}
-            </p>
-            <p v-else>
-              -
+              {{ format(conversationStore.conversation.data.resolved_at, 'PPpp') }}
             </p>
+            <p v-else>-</p>
           </div>
 
           <div class="flex flex-col gap-1 mb-5">
-            <p class="font-medium">
-              Closed at
-            </p>
+            <p class="font-medium">Closed at</p>
             <p v-if="conversationStore.conversation.data.closed_at">
-              {{ format(conversationStore.conversation.data.closed_at, "PPpp") }}
-            </p>
-            <p v-else>
-              -
+              {{ format(conversationStore.conversation.data.closed_at, 'PPpp') }}
             </p>
+            <p v-else>-</p>
           </div>
         </AccordionContent>
       </AccordionItem>
@@ -268,94 +353,124 @@
 import { ref, onMounted, computed } from 'vue'
 import { useConversationStore } from '@/stores/conversation'
 import { format } from 'date-fns'
-import api from '@/api';
+import api from '@/api'
 
-import { Accordion, AccordionContent, AccordionItem, AccordionTrigger } from '@/components/ui/accordion'
+import {
+  Accordion,
+  AccordionContent,
+  AccordionItem,
+  AccordionTrigger
+} from '@/components/ui/accordion'
 import { CaretSortIcon, CheckIcon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 import { Button } from '@/components/ui/button'
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from '@/components/ui/popover'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
-import { CommandEmpty, CommandGroup, CommandInput, Command, CommandItem, CommandList } from '@/components/ui/command'
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/components/ui/tags-input'
-import { Mail, Phone } from "lucide-vue-next"
+import {
+  CommandEmpty,
+  CommandGroup,
+  CommandInput,
+  Command,
+  CommandItem,
+  CommandList
+} from '@/components/ui/command'
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText
+} from '@/components/ui/tags-input'
+import { Mail, Phone } from 'lucide-vue-next'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { handleHTTPError } from '@/utils/http'
 
-const priorities = ["Low", "Medium", "High"]
+const priorities = ref([])
 const { toast } = useToast()
-const conversationStore = useConversationStore();
+const conversationStore = useConversationStore()
 const agents = ref([])
 const teams = ref([])
 const agentSelectDropdownOpen = ref(false)
 const teamSelectDropdownOpen = ref(false)
 const prioritySelectDropdownOpen = ref(false)
-const tagsSelected = computed(() => conversationStore.conversation.data.tags);
+const tagsSelected = computed(() => conversationStore.conversation.data.tags)
 const tags = ref([])
 const tagIDMap = {}
 const tagDropdownOpen = ref(false)
 const tagSearchTerm = ref('')
-const tagsFiltered = computed(() => tags.value.filter(i => !tagsSelected.value.includes(i.label)))
+const tagsFiltered = computed(() => tags.value.filter((i) => !tagsSelected.value.includes(i.label)))
 
 const actionAccordion = {
-  "title": "Actions"
+  title: 'Actions'
 }
 const infoAccordion = {
-  "title": "Information"
+  title: 'Information'
 }
 
 onMounted(() => {
-  api.getUsers().then((resp) => {
-    agents.value = resp.data.data;
-  }).catch(error => {
-    toast({
-      title: 'Could not fetch users',
-      variant: 'destructive',
-      description: handleHTTPError(error).message,
+  api
+    .getUsers()
+    .then((resp) => {
+      agents.value = resp.data.data
     })
-  })
-
-  api.getTeams().then((resp) => {
-    teams.value = resp.data.data;
-  }).catch(error => {
-    toast({
-      title: 'Could not fetch teams',
-      variant: 'destructive',
-      description: handleHTTPError(error).message,
-    })
-  })
-
-  api.getTags().then(async (resp) => {
-    let dt = resp.data.data
-    dt.forEach(item => {
-      tags.value.push({
-        label: item.name,
-        value: item.id,
+    .catch((error) => {
+      toast({
+        title: 'Could not fetch users',
+        variant: 'destructive',
+        description: handleHTTPError(error).message
       })
-      tagIDMap[item.name] = item.id
     })
-  }).catch(error => {
-    toast({
-      title: 'Could not fetch tags',
-      variant: 'destructive',
-      description: handleHTTPError(error).message,
+
+  api
+    .getTeams()
+    .then((resp) => {
+      teams.value = resp.data.data
     })
-  })
+    .catch((error) => {
+      toast({
+        title: 'Could not fetch teams',
+        variant: 'destructive',
+        description: handleHTTPError(error).message
+      })
+    })
+
+  api
+    .getTags()
+    .then(async (resp) => {
+      let dt = resp.data.data
+      dt.forEach((item) => {
+        tags.value.push({
+          label: item.name,
+          value: item.id
+        })
+        tagIDMap[item.name] = item.id
+      })
+    })
+    .catch((error) => {
+      toast({
+        title: 'Could not fetch tags',
+        variant: 'destructive',
+        description: handleHTTPError(error).message
+      })
+    })
+
+  getPrioritites()
 })
 
+const getPrioritites = async () => {
+  const resp = await api.getAllPriorities()
+  priorities.value = resp.data.data.map((priority) => priority.name)
+}
+
 const handleAssignedUserChange = (v) => {
-  conversationStore.updateAssignee("user", {
-    "assignee_id": v.split(":")[0]
+  conversationStore.updateAssignee('user', {
+    assignee_id: v.split(':')[0]
   })
 }
 const handleAssignedTeamChange = (v) => {
-  conversationStore.updateAssignee("team", {
-    "assignee_id": v.split(":")[0]
+  conversationStore.updateAssignee('team', {
+    assignee_id: v.split(':')[0]
   })
 }
 
@@ -370,8 +485,7 @@ const handleUpsertTags = () => {
     }
   })
   conversationStore.upsertTags({
-    "tag_ids": JSON.stringify(tagIDs)
+    tag_ids: JSON.stringify(tagIDs)
   })
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/conversation/Editor.vue b/frontend/src/components/conversation/Editor.vue
index bb62532..0f23b5d 100644
--- a/frontend/src/components/conversation/Editor.vue
+++ b/frontend/src/components/conversation/Editor.vue
@@ -1,126 +1,138 @@
 <template>
-    <div class="max-h-[600px] overflow-y-auto">
-        <EditorContent :editor="editor" />
-    </div>
+  <div class="max-h-[600px] overflow-y-auto">
+    <EditorContent :editor="editor" />
+  </div>
 </template>
 
 <script setup>
-import { ref, watch, watchEffect, onUnmounted } from "vue"
+import { ref, watch, watchEffect, onUnmounted } from 'vue'
 
 import { useEditor, EditorContent } from '@tiptap/vue-3'
-import Placeholder from "@tiptap/extension-placeholder"
+import Placeholder from '@tiptap/extension-placeholder'
 import Image from '@tiptap/extension-image'
 import StarterKit from '@tiptap/starter-kit'
 
-const emit = defineEmits(['send', 'input', 'editorText', 'updateBold', 'updateItalic', 'contentCleared', 'contentSet', 'editorReady'])
+const emit = defineEmits([
+  'send',
+  'input',
+  'editorText',
+  'updateBold',
+  'updateItalic',
+  'contentCleared',
+  'contentSet',
+  'editorReady'
+])
 
 const props = defineProps({
-    placeholder: String,
-    messageType: String,
-    isBold: Boolean,
-    isItalic: Boolean,
-    clearContent: Boolean,
-    contentToSet: String
+  placeholder: String,
+  messageType: String,
+  isBold: Boolean,
+  isItalic: Boolean,
+  clearContent: Boolean,
+  contentToSet: String
 })
 
-
-const editor = ref(useEditor({
+const editor = ref(
+  useEditor({
     content: '',
     extensions: [
-        StarterKit,
-        Image,
-        Placeholder.configure({
-            placeholder: () => {
-                return props.placeholder
-            },
-        })
+      StarterKit,
+      Image,
+      Placeholder.configure({
+        placeholder: () => {
+          return props.placeholder
+        }
+      })
     ],
     autofocus: true,
     editorProps: {
-        attributes: {
-            // No outline for the editor.
-            class: "outline-none",
-        },
-        // Emit new input text.
-        handleTextInput: (view, from, to, text) => {
-            emit('input', text)
-        }
-    },
-}))
+      attributes: {
+        // No outline for the editor.
+        class: 'outline-none'
+      },
+      // Emit new input text.
+      handleTextInput: (view, from, to, text) => {
+        emit('input', text)
+      }
+    }
+  })
+)
 
 watchEffect(() => {
+  if (editor.value) {
+    // Emit the editor instance when it's ready
     if (editor.value) {
-        // Emit the editor instance when it's ready
-        if (editor.value) {
-            emit('editorReady', editor.value)
-        }
-
-        emit("editorText", {
-            text: editor.value.getText(),
-            html: editor.value.getHTML(),
-        });
-
-        // Emit bold and italic state changes
-        emit('updateBold', editor.value.isActive('bold'));
-        emit('updateItalic', editor.value.isActive('italic'));
+      emit('editorReady', editor.value)
     }
+
+    emit('editorText', {
+      text: editor.value.getText(),
+      html: editor.value.getHTML()
+    })
+
+    // Emit bold and italic state changes
+    emit('updateBold', editor.value.isActive('bold'))
+    emit('updateItalic', editor.value.isActive('italic'))
+  }
 })
 
 // Watcher for bold and italic changes
 watchEffect(() => {
-    if (props.isBold !== editor.value?.isActive('bold')) {
-        if (props.isBold) {
-            editor.value?.chain().focus().setBold().run();
-        } else {
-            editor.value?.chain().focus().unsetBold().run();
-        }
+  if (props.isBold !== editor.value?.isActive('bold')) {
+    if (props.isBold) {
+      editor.value?.chain().focus().setBold().run()
+    } else {
+      editor.value?.chain().focus().unsetBold().run()
     }
-    if (props.isItalic !== editor.value?.isActive('italic')) {
-        if (props.isItalic) {
-            editor.value?.chain().focus().setItalic().run();
-        } else {
-            editor.value?.chain().focus().unsetItalic().run();
-        }
+  }
+  if (props.isItalic !== editor.value?.isActive('italic')) {
+    if (props.isItalic) {
+      editor.value?.chain().focus().setItalic().run()
+    } else {
+      editor.value?.chain().focus().unsetItalic().run()
     }
-});
+  }
+})
 
 // Watcher for clearContent prop
 watchEffect(() => {
-    if (props.clearContent) {
-        editor.value?.commands.clearContent()
-        emit('contentCleared')
-    }
-});
+  if (props.clearContent) {
+    editor.value?.commands.clearContent()
+    emit('contentCleared')
+  }
+})
 
-watch(() => props.contentToSet, (newContent) => {
+watch(
+  () => props.contentToSet,
+  (newContent) => {
     if (newContent) {
-        editor.value.commands.setContent(newContent);
-        editor.value.commands.focus();
-        emit('contentSet');
+      editor.value.commands.setContent(newContent)
+      editor.value.commands.focus()
+      emit('contentSet')
     }
-});
+  }
+)
 
 onUnmounted(() => {
-    editor.value.destroy()
+  editor.value.destroy()
 })
 </script>
 
-
 <style lang="scss">
 // Moving placeholder to the top.
 .tiptap p.is-editor-empty:first-child::before {
-    content: attr(data-placeholder);
-    float: left;
-    color: #adb5bd;
-    pointer-events: none;
-    height: 0;
+  content: attr(data-placeholder);
+  float: left;
+  color: #adb5bd;
+  pointer-events: none;
+  height: 0;
 }
 
 // Editor height
 .ProseMirror {
-    min-height: 150px !important;
-    max-height: 100% !important;
-    overflow-y: scroll !important;
-    padding: 10px 10px;
+  min-height: 150px !important;
+  max-height: 100% !important;
+  overflow-y: scroll !important;
+  padding: 10px 10px;
 }
 </style>
diff --git a/frontend/src/components/conversation/ReplyBox.vue b/frontend/src/components/conversation/ReplyBox.vue
index faff00d..5cc33a2 100644
--- a/frontend/src/components/conversation/ReplyBox.vue
+++ b/frontend/src/components/conversation/ReplyBox.vue
@@ -1,220 +1,250 @@
 <template>
-    <div>
-        <div v-if="filteredCannedResponses.length > 0" class="w-full drop-shadow-sm overflow-hidden p-2 border-t">
-            <ul ref="responsesList" class="space-y-2 max-h-96 overflow-y-auto">
-                <li v-for="(response, index) in filteredCannedResponses" :key="response.id"
-                    :class="['cursor-pointer rounded p-1 hover:bg-secondary', { 'bg-secondary': index === selectedResponseIndex }]"
-                    @click="selectResponse(response.content)" @mouseenter="selectedResponseIndex = index">
-                    <span class="font-semibold">{{ response.title }}</span> - {{ response.content }}
-                </li>
-            </ul>
-        </div>
-        <div class="border-t ">
-            <!-- Message type toggle -->
-            <div class="flex justify-between px-2 border-b py-2">
-                <Tabs v-model:model-value="messageType">
-                    <TabsList>
-                        <TabsTrigger value="reply">
-                            Reply
-                        </TabsTrigger>
-                        <TabsTrigger value="private_note">
-                            Private note
-                        </TabsTrigger>
-                    </TabsList>
-                </Tabs>
-            </div>
-
-            <!-- Editor -->
-            <Editor @keydown="handleKeydown" @editorText="handleEditorText" :placeholder="editorPlaceholder"
-                :isBold="isBold" :clearContent="clearContent" :isItalic="isItalic" @updateBold="updateBold"
-                @updateItalic="updateItalic" @contentCleared="handleContentCleared" @contentSet="clearContentToSet"
-                @editorReady="onEditorReady" :messageType="messageType" :contentToSet="contentToSet"
-                :cannedResponses="cannedResponsesStore.responses" />
-
-            <!-- Attachments preview -->
-            <AttachmentsPreview :attachments="uploadedFiles" :onDelete="handleOnFileDelete"></AttachmentsPreview>
-
-            <!-- Bottom menu bar -->
-            <ReplyBoxBottomMenuBar :handleFileUpload="handleFileUpload"
-                :handleInlineImageUpload="handleInlineImageUpload" :isBold="isBold" :isItalic="isItalic"
-                @toggleBold="toggleBold" @toggleItalic="toggleItalic" :hasText="hasText" :handleSend="handleSend">
-            </ReplyBoxBottomMenuBar>
-        </div>
+  <div>
+    <div
+      v-if="filteredCannedResponses.length > 0"
+      class="w-full overflow-hidden p-2 border-t backdrop-blur"
+    >
+      <ul ref="responsesList" class="space-y-2 max-h-96 overflow-y-auto">
+        <li
+          v-for="(response, index) in filteredCannedResponses"
+          :key="response.id"
+          :class="[
+            'cursor-pointer rounded p-1 hover:bg-secondary',
+            { 'bg-secondary': index === selectedResponseIndex }
+          ]"
+          @click="selectResponse(response.content)"
+          @mouseenter="selectedResponseIndex = index"
+        >
+          <span class="font-semibold">{{ response.title }}</span> - {{ response.content }}
+        </li>
+      </ul>
     </div>
+    <div class="border-t">
+      <!-- Message type toggle -->
+      <div class="flex justify-between px-2 border-b py-2">
+        <Tabs v-model:model-value="messageType">
+          <TabsList>
+            <TabsTrigger value="reply"> Reply </TabsTrigger>
+            <TabsTrigger value="private_note"> Private note </TabsTrigger>
+          </TabsList>
+        </Tabs>
+      </div>
+
+      <!-- Editor -->
+      <Editor
+        @keydown="handleKeydown"
+        @editorText="handleEditorText"
+        :placeholder="editorPlaceholder"
+        :isBold="isBold"
+        :clearContent="clearContent"
+        :isItalic="isItalic"
+        @updateBold="updateBold"
+        @updateItalic="updateItalic"
+        @contentCleared="handleContentCleared"
+        @contentSet="clearContentToSet"
+        @editorReady="onEditorReady"
+        :messageType="messageType"
+        :contentToSet="contentToSet"
+        :cannedResponses="cannedResponsesStore.responses"
+      />
+
+      <!-- Attachments preview -->
+      <AttachmentsPreview
+        :attachments="uploadedFiles"
+        :onDelete="handleOnFileDelete"
+      ></AttachmentsPreview>
+
+      <!-- Bottom menu bar -->
+      <ReplyBoxBottomMenuBar
+        :handleFileUpload="handleFileUpload"
+        :handleInlineImageUpload="handleInlineImageUpload"
+        :isBold="isBold"
+        :isItalic="isItalic"
+        @toggleBold="toggleBold"
+        @toggleItalic="toggleItalic"
+        :hasText="hasText"
+        :handleSend="handleSend"
+      >
+      </ReplyBoxBottomMenuBar>
+    </div>
+  </div>
 </template>
 
-
 <script setup>
-import { ref, onMounted, computed } from "vue";
-import api from '@/api';
+import { ref, onMounted, computed } from 'vue'
+import api from '@/api'
 
 import Editor from './Editor.vue'
 import { useConversationStore } from '@/stores/conversation'
 import { useCannedResponses } from '@/stores/canned_responses'
-import {
-    Tabs,
-    TabsList,
-    TabsTrigger,
-} from '@/components/ui/tabs'
-import AttachmentsPreview from "@/components/attachment/AttachmentsPreview.vue"
-import ReplyBoxBottomMenuBar from "@/components/conversation/ReplyBoxBottomMenuBar.vue"
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
+import AttachmentsPreview from '@/components/attachment/AttachmentsPreview.vue'
+import ReplyBoxBottomMenuBar from '@/components/conversation/ReplyBoxBottomMenuBar.vue'
 
 const clearContent = ref(false)
 const isBold = ref(false)
 const isItalic = ref(false)
-const editorText = ref("")
-const editorHTML = ref("")
-const contentToSet = ref("")
+const editorText = ref('')
+const editorHTML = ref('')
+const contentToSet = ref('')
 const conversationStore = useConversationStore()
 const cannedResponsesStore = useCannedResponses()
 const filteredCannedResponses = ref([])
 const uploadedFiles = ref([])
-const messageType = ref("reply")
+const messageType = ref('reply')
 const selectedResponseIndex = ref(-1)
 const responsesList = ref(null)
 let editorInstance = null
 
 onMounted(() => {
-    cannedResponsesStore.fetchAll()
+  cannedResponsesStore.fetchAll()
 })
 
 const updateBold = (newState) => {
-    isBold.value = newState;
+  isBold.value = newState
 }
 
 const updateItalic = (newState) => {
-    isItalic.value = newState;
+  isItalic.value = newState
 }
 
 const toggleBold = () => {
-    isBold.value = !isBold.value;
+  isBold.value = !isBold.value
 }
 
 const toggleItalic = () => {
-    isItalic.value = !isItalic.value;
+  isItalic.value = !isItalic.value
 }
 
 const editorPlaceholder = computed(() => {
-    return "Shift + Enter to add a new line; Press '/' to select a Canned Response."
+  return "Shift + Enter to add a new line; Press '/' to select a Canned Response."
 })
 
 const filterCannedResponses = (input) => {
-    // Extract the text after the last `/`
-    const lastSlashIndex = input.lastIndexOf('/');
-    if (lastSlashIndex !== -1) {
-        const searchText = input.substring(lastSlashIndex + 1).trim();
+  // Extract the text after the last `/`
+  const lastSlashIndex = input.lastIndexOf('/')
+  if (lastSlashIndex !== -1) {
+    const searchText = input.substring(lastSlashIndex + 1).trim()
 
-        // Filter canned responses based on the search text
-        filteredCannedResponses.value = cannedResponsesStore.responses.filter(response =>
-            response.title.toLowerCase().includes(searchText.toLowerCase())
-        );
+    // Filter canned responses based on the search text
+    filteredCannedResponses.value = cannedResponsesStore.responses.filter((response) =>
+      response.title.toLowerCase().includes(searchText.toLowerCase())
+    )
 
-        // Reset the selected response index
-        selectedResponseIndex.value = filteredCannedResponses.value.length > 0 ? 0 : -1;
-    } else {
-        filteredCannedResponses.value = [];
-        selectedResponseIndex.value = -1;
-    }
+    // Reset the selected response index
+    selectedResponseIndex.value = filteredCannedResponses.value.length > 0 ? 0 : -1
+  } else {
+    filteredCannedResponses.value = []
+    selectedResponseIndex.value = -1
+  }
 }
 
 const handleEditorText = (text) => {
-    editorText.value = text.text
-    editorHTML.value = text.html
-    filterCannedResponses(text.text)
+  editorText.value = text.text
+  editorHTML.value = text.html
+  filterCannedResponses(text.text)
 }
 
 const hasText = computed(() => {
-    return editorText.value.length > 0 ? true : false
-});
+  return editorText.value.length > 0 ? true : false
+})
 
 const onEditorReady = (editor) => {
-    editorInstance = editor
-};
+  editorInstance = editor
+}
 
-const handleFileUpload = event => {
-    for (const file of event.target.files) {
-        api.uploadMedia({
-            files: file,
-        }).then((resp) => {
-            uploadedFiles.value.push(resp.data.data)
-        }).catch((err) => {
-            console.error(err)
-        })
-    }
-};
+const handleFileUpload = (event) => {
+  for (const file of event.target.files) {
+    api
+      .uploadMedia({
+        files: file
+      })
+      .then((resp) => {
+        uploadedFiles.value.push(resp.data.data)
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }
+}
 
-const handleInlineImageUpload = event => {
-    for (const file of event.target.files) {
-        api.uploadMedia({
-            files: file,
-        }).then((resp) => {
-            editorInstance.commands.setImage({
-                src: resp.data.data.url,
-                alt: resp.data.data.filename,
-                title: resp.data.data.filename,
-            })
-        }).catch((err) => {
-            console.error(err)
+const handleInlineImageUpload = (event) => {
+  for (const file of event.target.files) {
+    api
+      .uploadMedia({
+        files: file
+      })
+      .then((resp) => {
+        editorInstance.commands.setImage({
+          src: resp.data.data.url,
+          alt: resp.data.data.filename,
+          title: resp.data.data.filename
         })
-    }
-};
+      })
+      .catch((err) => {
+        console.error(err)
+      })
+  }
+}
 
 const handleContentCleared = () => {
-    clearContent.value = false
+  clearContent.value = false
 }
 
 const handleSend = async () => {
-    const attachmentIDs = uploadedFiles.value.map((file) => file.id)
-    await api.sendMessage(conversationStore.conversation.data.uuid, {
-        private: messageType.value === "private_note",
-        message: editorHTML.value,
-        attachments: attachmentIDs,
-    })
-    api.updateAssigneeLastSeen(conversationStore.conversation.data.uuid)
-    clearContent.value = true
-    uploadedFiles.value = []
+  const attachmentIDs = uploadedFiles.value.map((file) => file.id)
+  await api.sendMessage(conversationStore.conversation.data.uuid, {
+    private: messageType.value === 'private_note',
+    message: editorHTML.value,
+    attachments: attachmentIDs
+  })
+  api.updateAssigneeLastSeen(conversationStore.conversation.data.uuid)
+  clearContent.value = true
+  uploadedFiles.value = []
 }
 
-const handleOnFileDelete = uuid => {
-    uploadedFiles.value = uploadedFiles.value.filter(item => item.uuid !== uuid);
-};
+const handleOnFileDelete = (uuid) => {
+  uploadedFiles.value = uploadedFiles.value.filter((item) => item.uuid !== uuid)
+}
 
 const handleKeydown = (event) => {
-    if (filteredCannedResponses.value.length > 0) {
-        if (event.key === 'ArrowDown') {
-            event.preventDefault();
-            selectedResponseIndex.value = (selectedResponseIndex.value + 1) % filteredCannedResponses.value.length;
-            scrollToSelectedItem();
-        } else if (event.key === 'ArrowUp') {
-            event.preventDefault();
-            selectedResponseIndex.value = (selectedResponseIndex.value - 1 + filteredCannedResponses.value.length) % filteredCannedResponses.value.length;
-            scrollToSelectedItem();
-        } else if (event.key === 'Enter') {
-            event.preventDefault();
-            selectResponse(filteredCannedResponses.value[selectedResponseIndex.value].content);
-        }
+  if (filteredCannedResponses.value.length > 0) {
+    if (event.key === 'ArrowDown') {
+      event.preventDefault()
+      selectedResponseIndex.value =
+        (selectedResponseIndex.value + 1) % filteredCannedResponses.value.length
+      scrollToSelectedItem()
+    } else if (event.key === 'ArrowUp') {
+      event.preventDefault()
+      selectedResponseIndex.value =
+        (selectedResponseIndex.value - 1 + filteredCannedResponses.value.length) %
+        filteredCannedResponses.value.length
+      scrollToSelectedItem()
+    } else if (event.key === 'Enter') {
+      event.preventDefault()
+      selectResponse(filteredCannedResponses.value[selectedResponseIndex.value].content)
     }
+  }
 }
 
 const scrollToSelectedItem = () => {
-    const list = responsesList.value;
-    const selectedItem = list.children[selectedResponseIndex.value];
-    if (selectedItem) {
-        selectedItem.scrollIntoView({
-            behavior: 'smooth',
-            block: 'nearest'
-        });
-    }
+  const list = responsesList.value
+  const selectedItem = list.children[selectedResponseIndex.value]
+  if (selectedItem) {
+    selectedItem.scrollIntoView({
+      behavior: 'smooth',
+      block: 'nearest'
+    })
+  }
 }
 
 const selectResponse = (content) => {
-    contentToSet.value = content
-    filteredCannedResponses.value = [];
-    selectedResponseIndex.value = -1;
+  contentToSet.value = content
+  filteredCannedResponses.value = []
+  selectedResponseIndex.value = -1
 }
 
 const clearContentToSet = () => {
-    contentToSet.value = null;
+  contentToSet.value = null
 }
-
 </script>
diff --git a/frontend/src/components/conversation/ReplyBoxBottomMenuBar.vue b/frontend/src/components/conversation/ReplyBoxBottomMenuBar.vue
index 3243316..5695093 100644
--- a/frontend/src/components/conversation/ReplyBoxBottomMenuBar.vue
+++ b/frontend/src/components/conversation/ReplyBoxBottomMenuBar.vue
@@ -1,60 +1,77 @@
 <template>
-    <div class="flex justify-between items-center border-y h-14 px-2">
-        <div class="flex justify-items-start gap-2">
-            <input type="file" class="hidden" ref="attachmentInput" multiple @change="handleFileUpload">
-            <input type="file" class="hidden" ref="inlineImageInput" accept="image/*"
-                @change="handleInlineImageUpload">
-            <Toggle class="px-2 py-2 border-0" variant="outline" @click="toggleBold" :pressed="isBold">
-                <Bold class="h-4 w-4" />
-            </Toggle>
-            <Toggle class="px-2 py-2 border-0" variant="outline" @click="toggleItalic" :pressed="isItalic">
-                <Italic class="h-4 w-4" />
-            </Toggle>
-            <Toggle class="px-2 py-2 border-0" variant="outline" @click="triggerFileUpload" :pressed="false">
-                <Paperclip class="h-4 w-4" />
-            </Toggle>
-            <Toggle class="px-2 py-2 border-0" variant="outline" @click="triggerInlineImage" :pressed="false">
-                <Image class="h-4 w-4" />
-            </Toggle>
-        </div>
-        <Button class="h-8 w-6 px-8" @click="handleSend" :disabled="!hasText">
-            Send
-        </Button>
+  <div class="flex justify-between items-center border-y h-14 px-2">
+    <div class="flex justify-items-start gap-2">
+      <input type="file" class="hidden" ref="attachmentInput" multiple @change="handleFileUpload" />
+      <input
+        type="file"
+        class="hidden"
+        ref="inlineImageInput"
+        accept="image/*"
+        @change="handleInlineImageUpload"
+      />
+      <Toggle class="px-2 py-2 border-0" variant="outline" @click="toggleBold" :pressed="isBold">
+        <Bold class="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        class="px-2 py-2 border-0"
+        variant="outline"
+        @click="toggleItalic"
+        :pressed="isItalic"
+      >
+        <Italic class="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        class="px-2 py-2 border-0"
+        variant="outline"
+        @click="triggerFileUpload"
+        :pressed="false"
+      >
+        <Paperclip class="h-4 w-4" />
+      </Toggle>
+      <Toggle
+        class="px-2 py-2 border-0"
+        variant="outline"
+        @click="triggerInlineImage"
+        :pressed="false"
+      >
+        <Image class="h-4 w-4" />
+      </Toggle>
     </div>
+    <Button class="h-8 w-6 px-8" @click="handleSend" :disabled="!hasText"> Send </Button>
+  </div>
 </template>
 
 <script setup>
-import { ref } from "vue"
-import { Button } from '@/components/ui/button';
-import { Toggle } from '@/components/ui/toggle';
-import { Paperclip, Bold, Italic, Image } from "lucide-vue-next";
+import { ref } from 'vue'
+import { Button } from '@/components/ui/button'
+import { Toggle } from '@/components/ui/toggle'
+import { Paperclip, Bold, Italic, Image } from 'lucide-vue-next'
 
 const attachmentInput = ref(null)
 const inlineImageInput = ref(null)
-const emit = defineEmits(['toggleBold', 'toggleItalic']);
+const emit = defineEmits(['toggleBold', 'toggleItalic'])
 defineProps({
-    isBold: Boolean,
-    isItalic: Boolean,
-    hasText: Boolean,
-    handleSend: Function,
-    handleFileUpload: Function,
-    handleInlineImageUpload: Function,
-});
+  isBold: Boolean,
+  isItalic: Boolean,
+  hasText: Boolean,
+  handleSend: Function,
+  handleFileUpload: Function,
+  handleInlineImageUpload: Function
+})
 
 const toggleBold = () => {
-    emit('toggleBold');
-};
+  emit('toggleBold')
+}
 
 const toggleItalic = () => {
-    emit('toggleItalic');
-};
+  emit('toggleItalic')
+}
 
 const triggerFileUpload = () => {
-    attachmentInput.value.click()
-};
+  attachmentInput.value.click()
+}
 
 const triggerInlineImage = () => {
-    inlineImageInput.value.click();
-};
-
+  inlineImageInput.value.click()
+}
 </script>
diff --git a/frontend/src/components/conversationlist/ConversationEmptyList.vue b/frontend/src/components/conversationlist/ConversationEmptyList.vue
index 6e395b2..a1a0718 100644
--- a/frontend/src/components/conversationlist/ConversationEmptyList.vue
+++ b/frontend/src/components/conversationlist/ConversationEmptyList.vue
@@ -1,15 +1,15 @@
 <template>
-    <div class="flex flex-col items-center justify-center h-64">
-        <MessageCircleWarning :stroke-width="1.4" :size="90" />
-        <h1 class="text-lg font-semibold text-gray-800">
-            {{ $t('conversations.emptyState') }}
-        </h1>
-        <p class="text-gray-600">
-            {{ $t('globals.messages.adjustFilters') }}
-        </p>
-    </div>
+  <div class="flex flex-col items-center justify-center h-64">
+    <MessageCircleWarning :stroke-width="1.4" :size="90" />
+    <h1 class="text-lg font-semibold text-gray-800">
+      {{ $t('conversations.emptyState') }}
+    </h1>
+    <p class="text-gray-600">
+      {{ $t('globals.messages.adjustFilters') }}
+    </p>
+  </div>
 </template>
 
 <script setup>
 import { MessageCircleWarning } from 'lucide-vue-next'
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/conversationlist/ConversationList.vue b/frontend/src/components/conversationlist/ConversationList.vue
index d1e1642..097c25f 100644
--- a/frontend/src/components/conversationlist/ConversationList.vue
+++ b/frontend/src/components/conversationlist/ConversationList.vue
@@ -1,122 +1,93 @@
 <template>
-    <div class="h-screen">
-        <div class="flex justify-between px-2 py-2 border-b">
-            <Tabs v-model:model-value="conversationType">
-                <TabsList class="w-full flex justify-evenly">
-                    <TabsTrigger value="assigned" class="w-full">
-                        Assigned
-                    </TabsTrigger>
-                    <TabsTrigger value="unassigned" class="w-full">
-                        Unassigned
-                    </TabsTrigger>
-                    <TabsTrigger value="all" class="w-full">
-                        All
-                    </TabsTrigger>
-                </TabsList>
-            </Tabs>
+  <div class="h-screen">
+    <div class="flex justify-between px-2 py-2 border-b">
+      <Tabs v-model:model-value="conversationType">
+        <TabsList class="w-full flex justify-evenly">
+          <TabsTrigger value="assigned" class="w-full"> Assigned </TabsTrigger>
+          <TabsTrigger value="unassigned" class="w-full"> Unassigned </TabsTrigger>
+          <TabsTrigger value="all" class="w-full"> All </TabsTrigger>
+        </TabsList>
+      </Tabs>
 
-            <Popover>
-                <PopoverTrigger as-child>
-                    <div class="flex items-center mr-2">
-                        <ListFilter size="20" class="mx-auto cursor-pointer"></ListFilter>
-                    </div>
-                </PopoverTrigger>
-                <PopoverContent class="w-52">
-                    <div>
-                        <Select @update:modelValue="handleFilterChange" v-model="predefinedFilter">
-                            <SelectTrigger>
-                                <SelectValue placeholder="Select a filter" />
-                            </SelectTrigger>
-                            <SelectContent>
-                                <SelectGroup>
-                                    <!-- <SelectLabel>Status</SelectLabel> -->
-                                    <SelectItem value="status_all">
-                                        All
-                                    </SelectItem>
-                                    <SelectItem value="status_open">
-                                        Open
-                                    </SelectItem>
-                                    <SelectItem value="status_processing">
-                                        Processing
-                                    </SelectItem>
-                                    <SelectItem value="status_spam">
-                                        Spam
-                                    </SelectItem>
-                                    <SelectItem value="status_resolved">
-                                        Resolved
-                                    </SelectItem>
-                                </SelectGroup>
-                            </SelectContent>
-                        </Select>
-                    </div>
-                </PopoverContent>
-            </Popover>
-
-
-        </div>
-
-        <EmptyList v-if="emptyConversations"></EmptyList>
-
-        <div class="h-screen overflow-y-scroll pb-[180px] flex flex-col">
-            <ConversationListItem />
-
-            <div v-if="conversationsLoading">
-                <div class="flex items-center gap-5 p-6 border-b" v-for="index in 8" :key="index">
-                    <Skeleton class="h-12 w-12 rounded-full" />
-                    <div class="space-y-2">
-                        <Skeleton class="h-4 w-[250px]" />
-                        <Skeleton class="h-4 w-[200px]" />
-                    </div>
-                </div>
-            </div>
-
-            <div class="flex justify-center items-center mt-5 relative">
-                <div v-if="conversationStore.conversations.hasMore && !hasErrored && hasConversations">
-                    <Button variant="link" @click="loadNextPage">
-                        <Spinner v-if="conversationStore.conversations.loading" />
-                        <p v-else>Load more...</p>
-                    </Button>
-                </div>
-                <div v-else-if="everythingLoaded">
-                    All conversations loaded!
-                </div>
-            </div>
-        </div>
+      <Popover>
+        <PopoverTrigger as-child>
+          <div class="flex items-center mr-2">
+            <ListFilter size="20" class="mx-auto cursor-pointer"></ListFilter>
+          </div>
+        </PopoverTrigger>
+        <PopoverContent class="w-52">
+          <div>
+            <Select @update:modelValue="handleFilterChange" v-model="predefinedFilter">
+              <SelectTrigger>
+                <SelectValue placeholder="Select a filter" />
+              </SelectTrigger>
+              <SelectContent>
+                <SelectGroup>
+                  <!-- <SelectLabel>Status</SelectLabel> -->
+                  <SelectItem value="status_all"> All </SelectItem>
+                  <SelectItem value="status_open"> Open </SelectItem>
+                  <SelectItem value="status_processing"> Processing </SelectItem>
+                  <SelectItem value="status_spam"> Spam </SelectItem>
+                  <SelectItem value="status_resolved"> Resolved </SelectItem>
+                </SelectGroup>
+              </SelectContent>
+            </Select>
+          </div>
+        </PopoverContent>
+      </Popover>
     </div>
+
+    <EmptyList v-if="emptyConversations"></EmptyList>
+
+    <div class="h-screen overflow-y-scroll pb-[180px] flex flex-col">
+      <ConversationListItem />
+
+      <div v-if="conversationsLoading">
+        <div class="flex items-center gap-5 p-6 border-b" v-for="index in 8" :key="index">
+          <Skeleton class="h-12 w-12 rounded-full" />
+          <div class="space-y-2">
+            <Skeleton class="h-4 w-[250px]" />
+            <Skeleton class="h-4 w-[200px]" />
+          </div>
+        </div>
+      </div>
+
+      <div class="flex justify-center items-center mt-5 relative">
+        <div v-if="conversationStore.conversations.hasMore && !hasErrored && hasConversations">
+          <Button variant="link" @click="loadNextPage">
+            <Spinner v-if="conversationStore.conversations.loading" />
+            <p v-else>Load more...</p>
+          </Button>
+        </div>
+        <div v-else-if="everythingLoaded">All conversations loaded!</div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { onMounted, ref, watch, computed, onUnmounted } from 'vue'
 import { useConversationStore } from '@/stores/conversation'
-import { subscribeConversations } from "@/websocket.js"
+import { subscribeConversations } from '@/websocket.js'
 import { CONVERSATION_LIST_TYPE, CONVERSATION_PRE_DEFINED_FILTERS } from '@/constants/conversation'
 
 import { Error } from '@/components/ui/error'
-import { ListFilter } from 'lucide-vue-next';
+import { ListFilter } from 'lucide-vue-next'
 import { Skeleton } from '@/components/ui/skeleton'
-import {
-    Tabs,
-    TabsList,
-    TabsTrigger,
-} from '@/components/ui/tabs'
+import { Tabs, TabsList, TabsTrigger } from '@/components/ui/tabs'
 import { Button } from '@/components/ui/button'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
 import Spinner from '@/components/ui/spinner/Spinner.vue'
 import EmptyList from '@/components/conversationlist/ConversationEmptyList.vue'
 import ConversationListItem from '@/components/conversationlist/ConversationListItem.vue'
-import {
-    Popover,
-    PopoverContent,
-    PopoverTrigger,
-} from '@/components/ui/popover'
-
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
 
 const conversationStore = useConversationStore()
 const predefinedFilter = ref(CONVERSATION_PRE_DEFINED_FILTERS.ALL)
@@ -124,53 +95,58 @@ const conversationType = ref(CONVERSATION_LIST_TYPE.ASSIGNED)
 let listRefreshInterval = null
 
 onMounted(() => {
+  conversationStore.fetchConversations(conversationType.value, predefinedFilter.value)
+  subscribeConversations(conversationType.value, predefinedFilter.value)
+  // Refesh list every 1 minute to sync any missed changes.
+  listRefreshInterval = setInterval(() => {
     conversationStore.fetchConversations(conversationType.value, predefinedFilter.value)
-    subscribeConversations(conversationType.value, predefinedFilter.value)
-    // Refesh list every 1 minute to sync any missed changes.
-    listRefreshInterval = setInterval(() => {
-        conversationStore.fetchConversations(conversationType.value, predefinedFilter.value)
-    }, 60000)
+  }, 60000)
 })
 
 onUnmounted(() => {
-    clearInterval(listRefreshInterval)
+  clearInterval(listRefreshInterval)
 })
 
 watch(conversationType, (newType) => {
-    conversationStore.fetchConversations(newType, predefinedFilter.value)
-    subscribeConversations(newType, predefinedFilter.value)
-});
+  conversationStore.fetchConversations(newType, predefinedFilter.value)
+  subscribeConversations(newType, predefinedFilter.value)
+})
 
 const handleFilterChange = (filter) => {
-    predefinedFilter.value = filter
-    conversationStore.fetchConversations(conversationType.value, filter)
-    subscribeConversations(conversationType.value, predefinedFilter.value)
+  predefinedFilter.value = filter
+  conversationStore.fetchConversations(conversationType.value, filter)
+  subscribeConversations(conversationType.value, predefinedFilter.value)
 }
 
 const loadNextPage = () => {
-    conversationStore.fetchNextConversations(conversationType.value, predefinedFilter.value)
-};
+  conversationStore.fetchNextConversations(conversationType.value, predefinedFilter.value)
+}
 
 const hasConversations = computed(() => {
-    return conversationStore.sortedConversations.length !== 0 && !conversationStore.conversations.errorMessage && !conversationStore.conversations.loading
+  return (
+    conversationStore.sortedConversations.length !== 0 &&
+    !conversationStore.conversations.errorMessage &&
+    !conversationStore.conversations.loading
+  )
 })
 
 const emptyConversations = computed(() => {
-    return conversationStore.sortedConversations.length === 0 && !conversationStore.conversations.errorMessage && !conversationStore.conversations.loading
+  return (
+    conversationStore.sortedConversations.length === 0 &&
+    !conversationStore.conversations.errorMessage &&
+    !conversationStore.conversations.loading
+  )
 })
 
 const hasErrored = computed(() => {
-    return conversationStore.conversations.errorMessage ? true : false
+  return conversationStore.conversations.errorMessage ? true : false
 })
 
 const everythingLoaded = computed(() => {
-    return !conversationStore.conversations.errorMessage && !emptyConversations.value
+  return !conversationStore.conversations.errorMessage && !emptyConversations.value
 })
 
-
 const conversationsLoading = computed(() => {
-    return conversationStore.conversations.loading
+  return conversationStore.conversations.loading
 })
-
-
 </script>
diff --git a/frontend/src/components/conversationlist/ConversationListItem.vue b/frontend/src/components/conversationlist/ConversationListItem.vue
index a8d078a..897545b 100644
--- a/frontend/src/components/conversationlist/ConversationListItem.vue
+++ b/frontend/src/components/conversationlist/ConversationListItem.vue
@@ -1,48 +1,53 @@
 <template>
-    <div class="flex items-center cursor-pointer flex-row hover:bg-slate-50"
-        :class="{ 'bg-slate-100': conversation.uuid === conversationStore.conversation.data?.uuid }"
-        v-for="conversation in conversationStore.sortedConversations" :key="conversation.uuid"
-        @click="router.push('/conversations/' + conversation.uuid)">
-        <div class="pl-3">
-            <Avatar class="size-[45px]">
-                <AvatarImage :src=conversation.avatar_url v-if="conversation.avatar_url" />
-                <AvatarFallback>
-                    {{ conversation.first_name.substring(0, 2).toUpperCase() }}
-                </AvatarFallback>
-            </Avatar>
-        </div>
-        <div class="ml-3 w-full border-b pb-2">
-            <div class="flex justify-between pt-2 pr-3">
-                <div>
-                    <p class="text-xs text-gray-600 flex gap-x-1">
-                        <Mail size="12" />
-                        {{ conversation.inbox_name }}
-                    </p>
-                    <p class="text-base font-normal">
-                        {{ conversationStore.getContactFullName(conversation.uuid) }}
-                    </p>
-                </div>
-                <div>
-                    <span class="text-sm text-muted-foreground" v-if="conversation.last_message_at">
-                        {{ formatTime(conversation.last_message_at) }}
-                    </span>
-                </div>
-            </div>
-            <div class="pt-2 pr-3">
-                <div class="flex justify-between">
-                    <p class="text-gray-800 max-w-xs text-sm dark:text-white text-ellipsis flex gap-1">
-                        <CheckCheck :size="14" /> {{ conversation.last_message }}
-                    </p>
-                    <div class="flex items-center justify-center bg-green-500 rounded-full w-[20px] h-[20px]"
-                        v-if="conversation.unread_message_count > 0">
-                        <span class="text-white text-xs font-extrabold">
-                            {{ conversation.unread_message_count }}
-                        </span>
-                    </div>
-                </div>
-            </div>
-        </div>
+  <div
+    class="flex items-center cursor-pointer flex-row hover:bg-slate-50"
+    :class="{ 'bg-slate-100': conversation.uuid === conversationStore.conversation.data?.uuid }"
+    v-for="conversation in conversationStore.sortedConversations"
+    :key="conversation.uuid"
+    @click="router.push('/conversations/' + conversation.uuid)"
+  >
+    <div class="pl-3">
+      <Avatar class="size-[45px]">
+        <AvatarImage :src="conversation.avatar_url" v-if="conversation.avatar_url" />
+        <AvatarFallback>
+          {{ conversation.first_name.substring(0, 2).toUpperCase() }}
+        </AvatarFallback>
+      </Avatar>
     </div>
+    <div class="ml-3 w-full border-b pb-2">
+      <div class="flex justify-between pt-2 pr-3">
+        <div>
+          <p class="text-xs text-gray-600 flex gap-x-1">
+            <Mail size="12" />
+            {{ conversation.inbox_name }}
+          </p>
+          <p class="text-base font-normal">
+            {{ conversationStore.getContactFullName(conversation.uuid) }}
+          </p>
+        </div>
+        <div>
+          <span class="text-sm text-muted-foreground" v-if="conversation.last_message_at">
+            {{ formatTime(conversation.last_message_at) }}
+          </span>
+        </div>
+      </div>
+      <div class="pt-2 pr-3">
+        <div class="flex justify-between">
+          <p class="text-gray-800 max-w-xs text-sm dark:text-white text-ellipsis flex gap-1">
+            <CheckCheck :size="14" /> {{ conversation.last_message }}
+          </p>
+          <div
+            class="flex items-center justify-center bg-green-500 rounded-full w-[20px] h-[20px]"
+            v-if="conversation.unread_message_count > 0"
+          >
+            <span class="text-white text-xs font-extrabold">
+              {{ conversation.unread_message_count }}
+            </span>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
@@ -55,4 +60,4 @@ import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 
 const router = useRouter()
 const conversationStore = useConversationStore()
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/dashboard/agent/DashboardBarChart.vue b/frontend/src/components/dashboard/agent/DashboardBarChart.vue
index 693ce9a..7f33eae 100644
--- a/frontend/src/components/dashboard/agent/DashboardBarChart.vue
+++ b/frontend/src/components/dashboard/agent/DashboardBarChart.vue
@@ -1,16 +1,21 @@
 <template>
-    <BarChart :data="data" index="status" :categories="['Low', 'Medium', 'High']" :show-grid-line="true"
-        :margin="{ top: 0, bottom: 0, left: 0, right: 0 }" />
+  <BarChart
+    :data="data"
+    index="status"
+    :categories="['Low', 'Medium', 'High']"
+    :show-grid-line="true"
+    :margin="{ top: 0, bottom: 0, left: 0, right: 0 }"
+  />
 </template>
 
 <script setup>
 import { BarChart } from '@/components/ui/chart-bar'
 
 defineProps({
-    data: {
-        type: Array,
-        required: true,
-        default: () => []
-    }
-});
-</script>
\ No newline at end of file
+  data: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+})
+</script>
diff --git a/frontend/src/components/dashboard/agent/DashboardCard.vue b/frontend/src/components/dashboard/agent/DashboardCard.vue
index 987b219..5e9b78e 100644
--- a/frontend/src/components/dashboard/agent/DashboardCard.vue
+++ b/frontend/src/components/dashboard/agent/DashboardCard.vue
@@ -1,35 +1,29 @@
 <template>
-    <div class="flex gap-x-5">
-        <Card class="w-1/6 dashboard-card" v-for="(value, key) in counts" :key="key">
-            <CardHeader>
-                <CardTitle class="text-2xl">
-                    {{ value }}
-                </CardTitle>
-                <CardDescription>
-                    {{ labels[key] }}
-                </CardDescription>
-            </CardHeader>
-        </Card>
-    </div>
+  <div class="flex gap-x-5">
+    <Card class="w-1/6 dashboard-card" v-for="(value, key) in counts" :key="key">
+      <CardHeader>
+        <CardTitle class="text-2xl">
+          {{ value }}
+        </CardTitle>
+        <CardDescription>
+          {{ labels[key] }}
+        </CardDescription>
+      </CardHeader>
+    </Card>
+  </div>
 </template>
 
 <script setup>
-import {
-    Card,
-    CardDescription,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card'
-
+import { Card, CardDescription, CardHeader, CardTitle } from '@/components/ui/card'
 
 defineProps({
-    counts: {
-        type: Object,
-        required: true,
-    },
-    labels: {
-        type: Object,
-        required: true,
-    }
+  counts: {
+    type: Object,
+    required: true
+  },
+  labels: {
+    type: Object,
+    required: true
+  }
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/dashboard/agent/DashboardLineChart.vue b/frontend/src/components/dashboard/agent/DashboardLineChart.vue
index 6b429d1..e2f6ae2 100644
--- a/frontend/src/components/dashboard/agent/DashboardLineChart.vue
+++ b/frontend/src/components/dashboard/agent/DashboardLineChart.vue
@@ -1,25 +1,32 @@
 <template>
-    <LineChart :data="renamedData" index="date" :categories="['New conversations']" :y-formatter="(tick) => {
+  <LineChart
+    :data="renamedData"
+    index="date"
+    :categories="['New conversations']"
+    :y-formatter="
+      (tick) => {
         return tick
-    }" />
+      }
+    "
+  />
 </template>
 
 <script setup>
-import { computed } from 'vue';
+import { computed } from 'vue'
 import { LineChart } from '@/components/ui/chart-line'
 
 const props = defineProps({
-    data: {
-        type: Array,
-        required: true,
-        default: () => []
-    }
-});
+  data: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
+})
 
-const renamedData = computed(() => 
-    props.data.map(item => ({
-        ...item,
-        'New conversations': item.new_conversations
-    }))
-);
+const renamedData = computed(() =>
+  props.data.map((item) => ({
+    ...item,
+    'New conversations': item.new_conversations
+  }))
+)
 </script>
diff --git a/frontend/src/components/message/ActivityMessageBubble.vue b/frontend/src/components/message/ActivityMessageBubble.vue
index f507350..d4bd641 100644
--- a/frontend/src/components/message/ActivityMessageBubble.vue
+++ b/frontend/src/components/message/ActivityMessageBubble.vue
@@ -1,30 +1,26 @@
 <template>
-    <div class="text-center">
-        <div class="text-muted-foreground text-sm">
-            {{ message.content }}
-                <Tooltip>
-                    <TooltipTrigger>
-                        <span class="text-xs ml-1">{{ format(message.updated_at, 'h:mm a') }}</span>
-                    </TooltipTrigger>
-                    <TooltipContent>
-                        <p>
-                            {{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
-                        </p>
-                    </TooltipContent>
-                </Tooltip>
-        </div>
+  <div class="text-center">
+    <div class="text-muted-foreground text-sm">
+      {{ message.content }}
+      <Tooltip>
+        <TooltipTrigger>
+          <span class="text-xs ml-1">{{ format(message.updated_at, 'h:mm a') }}</span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>
+            {{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
+          </p>
+        </TooltipContent>
+      </Tooltip>
     </div>
+  </div>
 </template>
 
 <script setup>
 import { format } from 'date-fns'
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger
-} from '@/components/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 
 defineProps({
-    message: Object,
+  message: Object
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/message/AgentMessageBubble.vue b/frontend/src/components/message/AgentMessageBubble.vue
index 2330619..ab53dad 100644
--- a/frontend/src/components/message/AgentMessageBubble.vue
+++ b/frontend/src/components/message/AgentMessageBubble.vue
@@ -1,123 +1,112 @@
 <template>
-    <div class="flex flex-col items-end text-left">
-
-        <div class="pr-[47px] mb-1">
-            <p class="text-muted-foreground text-sm">
-                {{ getFullName }}
-            </p>
-        </div>
-        {{ mess }}
-        <div class="flex flex-row gap-2 justify-end">
-            <div class="
-                flex
-                flex-col
-                message-bubble
-                justify-end
-                items-end
-                relative
-                !rounded-tr-none
-                " :class="{
-                    '!bg-[#FEF1E1]': message.private,
-                    'bg-white': !message.private,
-                    'opacity-50 animate-pulse': message.status === 'pending',
-                    'bg-red': message.status === 'failed'
-                }">
-
-                <div v-html=message.content :class="{ 'mb-3': message.attachments.length > 0 }"></div>
-                <MessageAttachmentPreview :attachments="message.attachments" />
-                <Spinner v-if="message.status === 'pending'" />
-
-                <!-- Icons -->
-                <div class="flex items-center space-x-2 mt-2">
-
-                    <Lock :size="10" v-if="isPrivateMessage" />
-                    
-                    <CheckCheck :size="14" v-if="showCheckCheck" />
-                    
-                    <RotateCcw size="10" @click="retryMessage(message)" class="cursor-pointer"
-                        v-if="showRetry"></RotateCcw>
-                </div>
-            </div>
-            <Avatar class="cursor-pointer">
-                <AvatarImage :src=getAvatar />
-                <AvatarFallback>
-                    {{ avatarFallback }}
-                </AvatarFallback>
-            </Avatar>
-
-        </div>
-
-        <div class="pr-[47px]">
-            <Tooltip>
-                <TooltipTrigger>
-                    <span class="text-muted-foreground text-xs mt-1">
-                        {{ format(message.updated_at, "h:mm a") }}
-                    </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                    {{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
-                </TooltipContent>
-            </Tooltip>
-        </div>
+  <div class="flex flex-col items-end text-left">
+    <div class="pr-[47px] mb-1">
+      <p class="text-muted-foreground text-sm">
+        {{ getFullName }}
+      </p>
     </div>
+    {{ mess }}
+    <div class="flex flex-row gap-2 justify-end">
+      <div
+        class="flex flex-col message-bubble justify-end items-end relative !rounded-tr-none"
+        :class="{
+          '!bg-[#FEF1E1]': message.private,
+          'bg-white': !message.private,
+          'opacity-50 animate-pulse': message.status === 'pending',
+          'bg-red': message.status === 'failed'
+        }"
+      >
+        <div v-html="message.content" :class="{ 'mb-3': message.attachments.length > 0 }"></div>
+        <MessageAttachmentPreview :attachments="message.attachments" />
+        <Spinner v-if="message.status === 'pending'" />
+
+        <!-- Icons -->
+        <div class="flex items-center space-x-2 mt-2">
+          <Lock :size="10" v-if="isPrivateMessage" />
+
+          <CheckCheck :size="14" v-if="showCheckCheck" />
+
+          <RotateCcw
+            size="10"
+            @click="retryMessage(message)"
+            class="cursor-pointer"
+            v-if="showRetry"
+          ></RotateCcw>
+        </div>
+      </div>
+      <Avatar class="cursor-pointer">
+        <AvatarImage :src="getAvatar" />
+        <AvatarFallback>
+          {{ avatarFallback }}
+        </AvatarFallback>
+      </Avatar>
+    </div>
+
+    <div class="pr-[47px]">
+      <Tooltip>
+        <TooltipTrigger>
+          <span class="text-muted-foreground text-xs mt-1">
+            {{ format(message.updated_at, 'h:mm a') }}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>
+          {{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
 import { format } from 'date-fns'
 import { useConversationStore } from '@/stores/conversation'
-import { Lock } from 'lucide-vue-next';
+import { Lock } from 'lucide-vue-next'
 import api from '@/api'
 
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger
-} from '@/components/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { Spinner } from '@/components/ui/spinner'
-import { RotateCcw, CheckCheck } from 'lucide-vue-next';
+import { RotateCcw, CheckCheck } from 'lucide-vue-next'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
-import MessageAttachmentPreview from "@/components/attachment/MessageAttachmentPreview.vue"
-
+import MessageAttachmentPreview from '@/components/attachment/MessageAttachmentPreview.vue'
 
 const props = defineProps({
-    message: Object,
+  message: Object
 })
-const convStore = useConversationStore();
+const convStore = useConversationStore()
 
 const participant = computed(() => {
-    return convStore.conversation?.participants?.[props.message.sender_uuid] ?? {};
-});
+  return convStore.conversation?.participants?.[props.message.sender_uuid] ?? {}
+})
 
 const getFullName = computed(() => {
-    const firstName = participant.value?.first_name ?? 'Unknown'
-    const lastName = participant.value?.last_name ?? 'User'
-    return `${firstName} ${lastName}`;
-});
+  const firstName = participant.value?.first_name ?? 'Unknown'
+  const lastName = participant.value?.last_name ?? 'User'
+  return `${firstName} ${lastName}`
+})
 
 const getAvatar = computed(() => {
-    return participant.value?.avatar_url
-});
+  return participant.value?.avatar_url
+})
 
 const isPrivateMessage = computed(() => {
-    return props.message.private
+  return props.message.private
 })
 
 const showCheckCheck = computed(() => {
-    return props.message.status == 'sent' && !isPrivateMessage.value
+  return props.message.status == 'sent' && !isPrivateMessage.value
 })
 
 const showRetry = computed(() => {
-    return props.message.status == 'failed'
+  return props.message.status == 'failed'
 })
 
 const avatarFallback = computed(() => {
-    const firstName = participant.value?.first_name ?? 'A'
-    return firstName.toUpperCase().substring(0, 2);
-});
+  const firstName = participant.value?.first_name ?? 'A'
+  return firstName.toUpperCase().substring(0, 2)
+})
 
 const retryMessage = (msg) => {
-    api.retryMessage(msg.uuid)
+  api.retryMessage(msg.uuid)
 }
-
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/message/ContactMessageBubble.vue b/frontend/src/components/message/ContactMessageBubble.vue
index 3f4dbb2..e189831 100644
--- a/frontend/src/components/message/ContactMessageBubble.vue
+++ b/frontend/src/components/message/ContactMessageBubble.vue
@@ -1,68 +1,67 @@
 <template>
-    <div class="flex flex-col items-start">
-        <div class="pl-[47px] mb-1">
-            <p class="text-muted-foreground text-sm">
-                {{ getFullName }}
-            </p>
-        </div>
-        <div class="flex flex-row gap-2">
-            <Avatar class="cursor-pointer">
-                <AvatarImage :src=getAvatar />
-                <AvatarFallback>
-                    {{ avatarFallback }}
-                </AvatarFallback>
-            </Avatar>
-            <div class="flex flex-col justify-end message-bubble !rounded-tl-none">
-                <Letter :html=message.content class="mb-1" :class="{ 'mb-3': message.attachments.length > 0 }" />
-                <MessageAttachmentPreview :attachments="message.attachments" />
-            </div>
-        </div>
-        <div class="pl-[47px]">
-            <Tooltip>
-                <TooltipTrigger>
-                    <span class="text-muted-foreground text-xs mt-1">
-                        {{ format(message.updated_at, "h:mm a") }}
-                    </span>
-                </TooltipTrigger>
-                <TooltipContent>
-                    <p>
-                        {{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
-                    </p>
-                </TooltipContent>
-            </Tooltip>
-        </div>
+  <div class="flex flex-col items-start">
+    <div class="pl-[47px] mb-1">
+      <p class="text-muted-foreground text-sm">
+        {{ getFullName }}
+      </p>
     </div>
+    <div class="flex flex-row gap-2">
+      <Avatar class="cursor-pointer">
+        <AvatarImage :src="getAvatar" />
+        <AvatarFallback>
+          {{ avatarFallback }}
+        </AvatarFallback>
+      </Avatar>
+      <div class="flex flex-col justify-end message-bubble !rounded-tl-none">
+        <Letter
+          :html="message.content"
+          class="mb-1"
+          :class="{ 'mb-3': message.attachments.length > 0 }"
+        />
+        <MessageAttachmentPreview :attachments="message.attachments" />
+      </div>
+    </div>
+    <div class="pl-[47px]">
+      <Tooltip>
+        <TooltipTrigger>
+          <span class="text-muted-foreground text-xs mt-1">
+            {{ format(message.updated_at, 'h:mm a') }}
+          </span>
+        </TooltipTrigger>
+        <TooltipContent>
+          <p>
+            {{ format(message.updated_at, "MMMM dd, yyyy 'at' HH:mm") }}
+          </p>
+        </TooltipContent>
+      </Tooltip>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { computed } from "vue"
+import { computed } from 'vue'
 import { format } from 'date-fns'
 import { useConversationStore } from '@/stores/conversation'
 
-import {
-    Tooltip,
-    TooltipContent,
-    TooltipTrigger
-} from '@/components/ui/tooltip'
+import { Tooltip, TooltipContent, TooltipTrigger } from '@/components/ui/tooltip'
 import { Avatar, AvatarFallback, AvatarImage } from '@/components/ui/avatar'
 import { Letter } from 'vue-letter'
-import MessageAttachmentPreview from "@/components/attachment/MessageAttachmentPreview.vue"
-
+import MessageAttachmentPreview from '@/components/attachment/MessageAttachmentPreview.vue'
 
 defineProps({
-    message: Object,
+  message: Object
 })
 const convStore = useConversationStore()
 
 const getAvatar = computed(() => {
-    return convStore.conversation.data.avatar_url ? convStore.conversation.avatar_url : ''
+  return convStore.conversation.data.avatar_url ? convStore.conversation.avatar_url : ''
 })
 
 const getFullName = computed(() => {
-    return convStore.conversation.data.first_name + ' ' + convStore.conversation.data.last_name
+  return convStore.conversation.data.first_name + ' ' + convStore.conversation.data.last_name
 })
 
 const avatarFallback = computed(() => {
-    return convStore.conversation.data.first_name.toUpperCase().substring(0, 2)
+  return convStore.conversation.data.first_name.toUpperCase().substring(0, 2)
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/message/MessageList.vue b/frontend/src/components/message/MessageList.vue
index b738941..8a9d39e 100644
--- a/frontend/src/components/message/MessageList.vue
+++ b/frontend/src/components/message/MessageList.vue
@@ -1,68 +1,75 @@
 <template>
-    <div ref="threadEl" class="overflow-y-scroll">
-        <div class="text-center mt-3" v-if="conversationStore.messages.hasMore && !conversationStore.messages.loading">
-            <Button variant="ghost" @click="conversationStore.fetchNextMessages">
-                <RefreshCw size="17" class="mr-2" />
-                Load more
-            </Button>
-        </div>
-        <div v-for="message in conversationStore.sortedMessages" :key="message.uuid"
-            :class="message.type === 'activity' ? 'm-4' : 'm-6'">
-            <div v-if="!message.private">
-                <ContactMessageBubble :message="message" v-if="message.type === 'incoming'" />
-                <AgentMessageBubble :message="message" v-if="message.type === 'outgoing'" />
-            </div>
-            <div v-else-if="isPrivateNote(message)">
-                <AgentMessageBubble :message="message" v-if="message.type === 'outgoing'" />
-            </div>
-            <div v-else-if="message.type === 'activity'">
-                <ActivityMessageBubble :message="message" />
-            </div>
-        </div>
+  <div ref="threadEl" class="overflow-y-scroll">
+    <div
+      class="text-center mt-3"
+      v-if="conversationStore.messages.hasMore && !conversationStore.messages.loading"
+    >
+      <Button variant="ghost" @click="conversationStore.fetchNextMessages">
+        <RefreshCw size="17" class="mr-2" />
+        Load more
+      </Button>
     </div>
+    <div
+      v-for="message in conversationStore.sortedMessages"
+      :key="message.uuid"
+      :class="message.type === 'activity' ? 'm-4' : 'm-6'"
+    >
+      <div v-if="!message.private">
+        <ContactMessageBubble :message="message" v-if="message.type === 'incoming'" />
+        <AgentMessageBubble :message="message" v-if="message.type === 'outgoing'" />
+      </div>
+      <div v-else-if="isPrivateNote(message)">
+        <AgentMessageBubble :message="message" v-if="message.type === 'outgoing'" />
+      </div>
+      <div v-else-if="message.type === 'activity'">
+        <ActivityMessageBubble :message="message" />
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, watch } from 'vue';
-import ContactMessageBubble from "./ContactMessageBubble.vue";
-import ActivityMessageBubble from "./ActivityMessageBubble.vue";
-import AgentMessageBubble from "./AgentMessageBubble.vue";
+import { ref, onMounted, watch } from 'vue'
+import ContactMessageBubble from './ContactMessageBubble.vue'
+import ActivityMessageBubble from './ActivityMessageBubble.vue'
+import AgentMessageBubble from './AgentMessageBubble.vue'
 import { useConversationStore } from '@/stores/conversation'
-import { Button } from '@/components/ui/button';
-import { RefreshCw } from 'lucide-vue-next';
-import { useEmitter } from '@/composables/useEmitter';
+import { Button } from '@/components/ui/button'
+import { RefreshCw } from 'lucide-vue-next'
+import { useEmitter } from '@/composables/useEmitter'
 
 const conversationStore = useConversationStore()
 const threadEl = ref(null)
 const emitter = useEmitter()
 
-
 const scrollToBottom = () => {
-    setTimeout(() => {
-        const thread = threadEl.value
-        if (thread) {
-            thread.scrollTop = thread.scrollHeight
-        }
-    }, 0)
-};
-
+  setTimeout(() => {
+    const thread = threadEl.value
+    if (thread) {
+      thread.scrollTop = thread.scrollHeight
+    }
+  }, 0)
+}
 
 onMounted(() => {
-    scrollToBottom()
-    // On new outgoing message to the current conversation, scroll to the bottom.
-    emitter.on('new-outgoing-message', (data) => {
-        if (data.conversation_uuid === conversationStore.conversation.data.uuid) {
-            scrollToBottom()
-        }
-    });
-});
+  scrollToBottom()
+  // On new outgoing message to the current conversation, scroll to the bottom.
+  emitter.on('new-outgoing-message', (data) => {
+    if (data.conversation_uuid === conversationStore.conversation.data.uuid) {
+      scrollToBottom()
+    }
+  })
+})
 
 // On conversation change scroll to the bottom
-watch(() => conversationStore.conversation.data, () => {
+watch(
+  () => conversationStore.conversation.data,
+  () => {
     scrollToBottom()
-});
+  }
+)
 
 const isPrivateNote = (message) => {
-    return message.type === "outgoing" && message.private
-};
+  return message.type === 'outgoing' && message.private
+}
 </script>
diff --git a/frontend/src/components/ui/accordion/Accordion.vue b/frontend/src/components/ui/accordion/Accordion.vue
index 062b92f..72997ef 100644
--- a/frontend/src/components/ui/accordion/Accordion.vue
+++ b/frontend/src/components/ui/accordion/Accordion.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { AccordionRoot, useForwardPropsEmits } from "radix-vue";
+import { AccordionRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   collapsible: { type: Boolean, required: false },
@@ -10,11 +10,11 @@ const props = defineProps({
   as: { type: null, required: false },
   type: { type: null, required: false },
   modelValue: { type: null, required: false },
-  defaultValue: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
+  defaultValue: { type: null, required: false }
+})
+const emits = defineEmits(['update:modelValue'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/accordion/AccordionContent.vue b/frontend/src/components/ui/accordion/AccordionContent.vue
index 2d314a3..99f5b4a 100644
--- a/frontend/src/components/ui/accordion/AccordionContent.vue
+++ b/frontend/src/components/ui/accordion/AccordionContent.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from "vue";
-import { AccordionContent } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { AccordionContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/accordion/AccordionItem.vue b/frontend/src/components/ui/accordion/AccordionItem.vue
index 28c204a..aae4af9 100644
--- a/frontend/src/components/ui/accordion/AccordionItem.vue
+++ b/frontend/src/components/ui/accordion/AccordionItem.vue
@@ -1,23 +1,23 @@
 <script setup>
-import { computed } from "vue";
-import { AccordionItem, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { AccordionItem, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   value: { type: String, required: true },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/accordion/AccordionTrigger.vue b/frontend/src/components/ui/accordion/AccordionTrigger.vue
index 8a89394..15121ab 100644
--- a/frontend/src/components/ui/accordion/AccordionTrigger.vue
+++ b/frontend/src/components/ui/accordion/AccordionTrigger.vue
@@ -1,20 +1,20 @@
 <script setup>
-import { computed } from "vue";
-import { AccordionHeader, AccordionTrigger } from "radix-vue";
-import { ChevronDownIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { AccordionHeader, AccordionTrigger } from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/accordion/index.js b/frontend/src/components/ui/accordion/index.js
index 92efaba..9340ac0 100644
--- a/frontend/src/components/ui/accordion/index.js
+++ b/frontend/src/components/ui/accordion/index.js
@@ -1,4 +1,4 @@
-export { default as Accordion } from "./Accordion.vue";
-export { default as AccordionContent } from "./AccordionContent.vue";
-export { default as AccordionItem } from "./AccordionItem.vue";
-export { default as AccordionTrigger } from "./AccordionTrigger.vue";
+export { default as Accordion } from './Accordion.vue'
+export { default as AccordionContent } from './AccordionContent.vue'
+export { default as AccordionItem } from './AccordionItem.vue'
+export { default as AccordionTrigger } from './AccordionTrigger.vue'
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialog.vue b/frontend/src/components/ui/alert-dialog/AlertDialog.vue
index ee62438..91bbee3 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialog.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialog.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { AlertDialogRoot, useForwardPropsEmits } from "radix-vue";
+import { AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   open: { type: Boolean, required: false },
-  defaultOpen: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  defaultOpen: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogAction.vue b/frontend/src/components/ui/alert-dialog/AlertDialogAction.vue
index 11ba517..801bba4 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogAction.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogAction.vue
@@ -1,27 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { AlertDialogAction } from "radix-vue";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { computed } from 'vue'
+import { AlertDialogAction } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogAction
-    v-bind="delegatedProps"
-    :class="cn(buttonVariants(), props.class)"
-  >
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
     <slot />
   </AlertDialogAction>
 </template>
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogCancel.vue b/frontend/src/components/ui/alert-dialog/AlertDialogCancel.vue
index 08b56f3..70fe873 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogCancel.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -1,28 +1,26 @@
 <script setup>
-import { computed } from "vue";
-import { AlertDialogCancel } from "radix-vue";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { computed } from 'vue'
+import { AlertDialogCancel } from 'radix-vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
   <AlertDialogCancel
     v-bind="delegatedProps"
-    :class="
-      cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)
-    "
+    :class="cn(buttonVariants({ variant: 'outline' }), 'mt-2 sm:mt-0', props.class)"
   >
     <slot />
   </AlertDialogCancel>
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogContent.vue b/frontend/src/components/ui/alert-dialog/AlertDialogContent.vue
index 73a78c8..b2cad69 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogContent.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogContent.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { computed } from "vue";
+import { computed } from 'vue'
 import {
   AlertDialogContent,
   AlertDialogOverlay,
   AlertDialogPortal,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
+  useForwardPropsEmits
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
@@ -14,24 +14,24 @@ const props = defineProps({
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'openAutoFocus',
+  'closeAutoFocus'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -44,7 +44,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       :class="
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
+          props.class
         )
       "
     >
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogDescription.vue b/frontend/src/components/ui/alert-dialog/AlertDialogDescription.vue
index 89f054a..3ebe8ae 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogDescription.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from "vue";
-import { AlertDialogDescription } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { AlertDialogDescription } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogFooter.vue b/frontend/src/components/ui/alert-dialog/AlertDialogFooter.vue
index f623c10..8b69675 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogFooter.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -1,20 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
+  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogHeader.vue b/frontend/src/components/ui/alert-dialog/AlertDialogHeader.vue
index b9bd423..0cf8b8c 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogHeader.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -1,15 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <div
-    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
-  >
+  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogTitle.vue b/frontend/src/components/ui/alert-dialog/AlertDialogTitle.vue
index 91a440e..5e90902 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogTitle.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -1,26 +1,23 @@
 <script setup>
-import { computed } from "vue";
-import { AlertDialogTitle } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { AlertDialogTitle } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-  <AlertDialogTitle
-    v-bind="delegatedProps"
-    :class="cn('text-lg font-semibold', props.class)"
-  >
+  <AlertDialogTitle v-bind="delegatedProps" :class="cn('text-lg font-semibold', props.class)">
     <slot />
   </AlertDialogTitle>
 </template>
diff --git a/frontend/src/components/ui/alert-dialog/AlertDialogTrigger.vue b/frontend/src/components/ui/alert-dialog/AlertDialogTrigger.vue
index be5cadf..347c0bb 100644
--- a/frontend/src/components/ui/alert-dialog/AlertDialogTrigger.vue
+++ b/frontend/src/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { AlertDialogTrigger } from "radix-vue";
+import { AlertDialogTrigger } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/alert-dialog/index.js b/frontend/src/components/ui/alert-dialog/index.js
index 23df425..91d138a 100644
--- a/frontend/src/components/ui/alert-dialog/index.js
+++ b/frontend/src/components/ui/alert-dialog/index.js
@@ -1,9 +1,9 @@
-export { default as AlertDialog } from "./AlertDialog.vue";
-export { default as AlertDialogTrigger } from "./AlertDialogTrigger.vue";
-export { default as AlertDialogContent } from "./AlertDialogContent.vue";
-export { default as AlertDialogHeader } from "./AlertDialogHeader.vue";
-export { default as AlertDialogTitle } from "./AlertDialogTitle.vue";
-export { default as AlertDialogDescription } from "./AlertDialogDescription.vue";
-export { default as AlertDialogFooter } from "./AlertDialogFooter.vue";
-export { default as AlertDialogAction } from "./AlertDialogAction.vue";
-export { default as AlertDialogCancel } from "./AlertDialogCancel.vue";
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
diff --git a/frontend/src/components/ui/alert/Alert.vue b/frontend/src/components/ui/alert/Alert.vue
index 3ac2f85..f889172 100644
--- a/frontend/src/components/ui/alert/Alert.vue
+++ b/frontend/src/components/ui/alert/Alert.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { alertVariants } from ".";
-import { cn } from "@/lib/utils";
+import { alertVariants } from '.'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   class: { type: null, required: false },
-  variant: { type: null, required: false },
-});
+  variant: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/alert/AlertDescription.vue b/frontend/src/components/ui/alert/AlertDescription.vue
index 3725b26..9e99e4d 100644
--- a/frontend/src/components/ui/alert/AlertDescription.vue
+++ b/frontend/src/components/ui/alert/AlertDescription.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/alert/AlertTitle.vue b/frontend/src/components/ui/alert/AlertTitle.vue
index 977cadc..aa04fd2 100644
--- a/frontend/src/components/ui/alert/AlertTitle.vue
+++ b/frontend/src/components/ui/alert/AlertTitle.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/alert/index.js b/frontend/src/components/ui/alert/index.js
index f809937..81d1f32 100644
--- a/frontend/src/components/ui/alert/index.js
+++ b/frontend/src/components/ui/alert/index.js
@@ -1,21 +1,21 @@
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority'
 
-export { default as Alert } from "./Alert.vue";
-export { default as AlertTitle } from "./AlertTitle.vue";
-export { default as AlertDescription } from "./AlertDescription.vue";
+export { default as Alert } from './Alert.vue'
+export { default as AlertTitle } from './AlertTitle.vue'
+export { default as AlertDescription } from './AlertDescription.vue'
 
 export const alertVariants = cva(
-  "relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7",
+  'relative w-full rounded-lg border px-4 py-3 text-sm [&>svg+div]:translate-y-[-3px] [&>svg]:absolute [&>svg]:left-4 [&>svg]:top-4 [&>svg]:text-foreground [&>svg~*]:pl-7',
   {
     variants: {
       variant: {
-        default: "bg-background text-foreground",
+        default: 'bg-background text-foreground',
         destructive:
-          "border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive",
-      },
+          'border-destructive/50 text-destructive dark:border-destructive [&>svg]:text-destructive'
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
+      variant: 'default'
+    }
   }
-);
+)
diff --git a/frontend/src/components/ui/auto-form/AutoForm.vue b/frontend/src/components/ui/auto-form/AutoForm.vue
index d505ad9..ed2bdaa 100644
--- a/frontend/src/components/ui/auto-form/AutoForm.vue
+++ b/frontend/src/components/ui/auto-form/AutoForm.vue
@@ -1,79 +1,72 @@
 <script setup>
-import { computed, toRefs } from "vue";
-import { toTypedSchema } from "@vee-validate/zod";
-import {
-  getBaseSchema,
-  getBaseType,
-  getDefaultValueInZodStack,
-  getObjectFormSchema,
-} from "./utils";
-import AutoFormField from "./AutoFormField.vue";
-import { provideDependencies } from "./dependencies";
-import { Form } from "@/components/ui/form";
+import { computed, toRefs } from 'vue'
+import { toTypedSchema } from '@vee-validate/zod'
+import { getBaseSchema, getBaseType, getDefaultValueInZodStack, getObjectFormSchema } from './utils'
+import AutoFormField from './AutoFormField.vue'
+import { provideDependencies } from './dependencies'
+import { Form } from '@/components/ui/form'
 
 const props = defineProps({
   schema: { type: null, required: true },
   form: { type: Object, required: false },
   fieldConfig: { type: null, required: false },
-  dependencies: { type: Array, required: false },
-});
+  dependencies: { type: Array, required: false }
+})
 
-const emits = defineEmits(["submit"]);
+const emits = defineEmits(['submit'])
 
-const { dependencies } = toRefs(props);
-provideDependencies(dependencies);
+const { dependencies } = toRefs(props)
+provideDependencies(dependencies)
 
 const shapes = computed(() => {
-  const val = {};
-  const baseSchema = getObjectFormSchema(props.schema);
-  const shape = baseSchema.shape;
+  const val = {}
+  const baseSchema = getObjectFormSchema(props.schema)
+  const shape = baseSchema.shape
   Object.keys(shape).forEach((name) => {
-    const item = shape[name];
-    const baseItem = getBaseSchema(item);
-    let options =
-      baseItem && "values" in baseItem._def ? baseItem._def.values : undefined;
-    if (!Array.isArray(options) && typeof options === "object")
-      options = Object.values(options);
+    const item = shape[name]
+    const baseItem = getBaseSchema(item)
+    let options = baseItem && 'values' in baseItem._def ? baseItem._def.values : undefined
+    if (!Array.isArray(options) && typeof options === 'object') options = Object.values(options)
 
     val[name] = {
       type: getBaseType(item),
       default: getDefaultValueInZodStack(item),
       options,
-      required: !["ZodOptional", "ZodNullable"].includes(item._def.typeName),
-      schema: baseItem,
-    };
-  });
-  return val;
-});
+      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
+      schema: baseItem
+    }
+  })
+  return val
+})
 
 const fields = computed(() => {
-  const val = {};
+  const val = {}
   for (const key in shapes.value) {
-    const shape = shapes.value[key];
+    const shape = shapes.value[key]
     val[key] = {
       shape,
       config: props.fieldConfig?.[key],
-      fieldName: key,
-    };
+      fieldName: key
+    }
   }
-  return val;
-});
+  return val
+})
 
-const formComponent = computed(() => (props.form ? "form" : Form));
+const formComponent = computed(() => (props.form ? 'form' : Form))
 const formComponentProps = computed(() => {
   if (props.form) {
     return {
-      onSubmit: props.form.handleSubmit((val) => emits("submit", val)),
-    };
+      onSubmit: props.form.handleSubmit((val) => emits('submit', val))
+    }
   } else {
-    const formSchema = toTypedSchema(props.schema);
+    const formSchema = toTypedSchema(props.schema)
     return {
       keepValues: true,
       validationSchema: formSchema,
-      onSubmit: (val) => emits("submit", val),
-    };
+      onSubmit: (val) => emits('submit', val)
+    }
   }
-});
+})
 </script>
 
 <template>
@@ -86,11 +79,7 @@ const formComponentProps = computed(() => {
           :field-name="key.toString()"
           :config="fieldConfig?.[key]"
         >
-          <AutoFormField
-            :config="fieldConfig?.[key]"
-            :field-name="key.toString()"
-            :shape="shape"
-          />
+          <AutoFormField :config="fieldConfig?.[key]" :field-name="key.toString()" :shape="shape" />
         </slot>
       </template>
     </slot>
diff --git a/frontend/src/components/ui/auto-form/AutoFormField.vue b/frontend/src/components/ui/auto-form/AutoFormField.vue
index 7826b13..0cc1166 100644
--- a/frontend/src/components/ui/auto-form/AutoFormField.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormField.vue
@@ -1,27 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from "./constant";
-import useDependencies from "./dependencies";
+import { computed } from 'vue'
+import { DEFAULT_ZOD_HANDLERS, INPUT_COMPONENTS } from './constant'
+import useDependencies from './dependencies'
 
 const props = defineProps({
   fieldName: { type: String, required: true },
   shape: { type: Object, required: true },
-  config: { type: null, required: false },
-});
+  config: { type: null, required: false }
+})
 
 function isValidConfig(config) {
-  return !!config?.component;
+  return !!config?.component
 }
 
 const delegatedProps = computed(() => {
-  if (["ZodObject", "ZodArray"].includes(props.shape?.type))
-    return { schema: props.shape?.schema };
-  return undefined;
-});
+  if (['ZodObject', 'ZodArray'].includes(props.shape?.type)) return { schema: props.shape?.schema }
+  return undefined
+})
 
-const { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(
-  props.fieldName,
-);
+const { isDisabled, isHidden, isRequired, overrideOptions } = useDependencies(props.fieldName)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldArray.vue b/frontend/src/components/ui/auto-form/AutoFormFieldArray.vue
index 76c98e2..4ce46cb 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldArray.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldArray.vue
@@ -1,66 +1,60 @@
 <script setup>
-import * as z from "zod";
-import { computed, provide } from "vue";
-import { PlusIcon, TrashIcon } from "lucide-vue-next";
-import { FieldArray, FieldContextKey, useField } from "vee-validate";
-import { beautifyObjectName, getBaseType } from "./utils";
-import AutoFormField from "./AutoFormField.vue";
-import AutoFormLabel from "./AutoFormLabel.vue";
+import * as z from 'zod'
+import { computed, provide } from 'vue'
+import { PlusIcon, TrashIcon } from 'lucide-vue-next'
+import { FieldArray, FieldContextKey, useField } from 'vee-validate'
+import { beautifyObjectName, getBaseType } from './utils'
+import AutoFormField from './AutoFormField.vue'
+import AutoFormLabel from './AutoFormLabel.vue'
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { Button } from "@/components/ui/button";
-import { Separator } from "@/components/ui/separator";
-import { FormItem, FormMessage } from "@/components/ui/form";
+  AccordionTrigger
+} from '@/components/ui/accordion'
+import { Button } from '@/components/ui/button'
+import { Separator } from '@/components/ui/separator'
+import { FormItem, FormMessage } from '@/components/ui/form'
 
 const props = defineProps({
   fieldName: { type: String, required: true },
   required: { type: Boolean, required: false },
   config: { type: null, required: false },
   schema: { type: null, required: false },
-  disabled: { type: Boolean, required: false },
-});
+  disabled: { type: Boolean, required: false }
+})
 
 function isZodArray(item) {
-  return item instanceof z.ZodArray;
+  return item instanceof z.ZodArray
 }
 
 function isZodDefault(item) {
-  return item instanceof z.ZodDefault;
+  return item instanceof z.ZodDefault
 }
 
 const itemShape = computed(() => {
-  if (!props.schema) return;
+  if (!props.schema) return
 
   const schema = isZodArray(props.schema)
     ? props.schema._def.type
     : isZodDefault(props.schema)
       ? props.schema._def.innerType._def.type
-      : null;
+      : null
 
   return {
     type: getBaseType(schema),
-    schema,
-  };
-});
+    schema
+  }
+})
 
-const fieldContext = useField(props.fieldName);
-provide(FieldContextKey, fieldContext);
+const fieldContext = useField(props.fieldName)
+provide(FieldContextKey, fieldContext)
 </script>
 
 <template>
   <FieldArray v-slot="{ fields, remove, push }" as="section" :name="fieldName">
     <slot v-bind="props">
-      <Accordion
-        type="multiple"
-        class="w-full"
-        collapsible
-        :disabled="disabled"
-        as-child
-      >
+      <Accordion type="multiple" class="w-full" collapsible :disabled="disabled" as-child>
         <FormItem>
           <AccordionItem :value="fieldName" class="border-none">
             <AccordionTrigger>
@@ -80,12 +74,7 @@ provide(FieldContextKey, fieldContext);
                   />
 
                   <div class="!my-4 flex justify-end">
-                    <Button
-                      type="button"
-                      size="icon"
-                      variant="secondary"
-                      @click="remove(index)"
-                    >
+                    <Button type="button" size="icon" variant="secondary" @click="remove(index)">
                       <TrashIcon :size="16" />
                     </Button>
                   </div>
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldBoolean.vue b/frontend/src/components/ui/auto-form/AutoFormFieldBoolean.vue
index afe97b9..6541c2f 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldBoolean.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldBoolean.vue
@@ -1,28 +1,26 @@
 <script setup>
-import { computed } from "vue";
-import { beautifyObjectName } from "./utils";
-import AutoFormLabel from "./AutoFormLabel.vue";
+import { computed } from 'vue'
+import { beautifyObjectName } from './utils'
+import AutoFormLabel from './AutoFormLabel.vue'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
-  FormMessage,
-} from "@/components/ui/form";
-import { Switch } from "@/components/ui/switch";
-import { Checkbox } from "@/components/ui/checkbox";
+  FormMessage
+} from '@/components/ui/form'
+import { Switch } from '@/components/ui/switch'
+import { Checkbox } from '@/components/ui/checkbox'
 
 const props = defineProps({
   fieldName: { type: String, required: true },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   config: { type: Object, required: false },
-  disabled: { type: Boolean, required: false },
-});
+  disabled: { type: Boolean, required: false }
+})
 
-const booleanComponent = computed(() =>
-  props.config?.component === "switch" ? Switch : Checkbox,
-);
+const booleanComponent = computed(() => (props.config?.component === 'switch' ? Switch : Checkbox))
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldDate.vue b/frontend/src/components/ui/auto-form/AutoFormFieldDate.vue
index 4901b86..d5b6428 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldDate.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldDate.vue
@@ -1,36 +1,32 @@
 <script setup>
-import { DateFormatter, getLocalTimeZone } from "@internationalized/date";
-import { CalendarIcon } from "@radix-icons/vue";
-import { beautifyObjectName } from "./utils";
-import AutoFormLabel from "./AutoFormLabel.vue";
+import { DateFormatter, getLocalTimeZone } from '@internationalized/date'
+import { CalendarIcon } from '@radix-icons/vue'
+import { beautifyObjectName } from './utils'
+import AutoFormLabel from './AutoFormLabel.vue'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
-  FormMessage,
-} from "@/components/ui/form";
+  FormMessage
+} from '@/components/ui/form'
 
-import { Calendar } from "@/components/ui/calendar";
-import { Button } from "@/components/ui/button";
-import {
-  Popover,
-  PopoverContent,
-  PopoverTrigger,
-} from "@/components/ui/popover";
-import { cn } from "@/lib/utils";
+import { Calendar } from '@/components/ui/calendar'
+import { Button } from '@/components/ui/button'
+import { Popover, PopoverContent, PopoverTrigger } from '@/components/ui/popover'
+import { cn } from '@/lib/utils'
 
 defineProps({
   fieldName: { type: String, required: true },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   config: { type: Object, required: false },
-  disabled: { type: Boolean, required: false },
-});
+  disabled: { type: Boolean, required: false }
+})
 
-const df = new DateFormatter("en-US", {
-  dateStyle: "long",
-});
+const df = new DateFormatter('en-US', {
+  dateStyle: 'long'
+})
 </script>
 
 <template>
@@ -49,20 +45,15 @@ const df = new DateFormatter("en-US", {
                   :class="
                     cn(
                       'w-full justify-start text-left font-normal',
-                      !slotProps.componentField.modelValue &&
-                        'text-muted-foreground',
+                      !slotProps.componentField.modelValue && 'text-muted-foreground'
                     )
                   "
                 >
                   <CalendarIcon class="mr-2 h-4 w-4" />
                   {{
                     slotProps.componentField.modelValue
-                      ? df.format(
-                          slotProps.componentField.modelValue.toDate(
-                            getLocalTimeZone(),
-                          ),
-                        )
-                      : "Pick a date"
+                      ? df.format(slotProps.componentField.modelValue.toDate(getLocalTimeZone()))
+                      : 'Pick a date'
                   }}
                 </Button>
               </PopoverTrigger>
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldEnum.vue b/frontend/src/components/ui/auto-form/AutoFormFieldEnum.vue
index 3422669..74084fa 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldEnum.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldEnum.vue
@@ -1,22 +1,22 @@
 <script setup>
-import AutoFormLabel from "./AutoFormLabel.vue";
-import { beautifyObjectName } from "./utils";
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
-  FormMessage,
-} from "@/components/ui/form";
+  FormMessage
+} from '@/components/ui/form'
 import {
   Select,
   SelectContent,
   SelectItem,
   SelectTrigger,
-  SelectValue,
-} from "@/components/ui/select";
-import { Label } from "@/components/ui/label";
-import { RadioGroup, RadioGroupItem } from "@/components/ui/radio-group";
+  SelectValue
+} from '@/components/ui/select'
+import { Label } from '@/components/ui/label'
+import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
 
 defineProps({
   fieldName: { type: String, required: true },
@@ -24,8 +24,8 @@ defineProps({
   required: { type: Boolean, required: false },
   config: { type: Object, required: false },
   disabled: { type: Boolean, required: false },
-  options: { type: Array, required: false },
-});
+  options: { type: Array, required: false }
+})
 </script>
 
 <template>
@@ -48,26 +48,16 @@ defineProps({
               class="mb-2 flex items-center gap-3 space-y-0"
             >
               <RadioGroupItem :id="`${option}-${index}`" :value="option" />
-              <Label :for="`${option}-${index}`">{{
-                beautifyObjectName(option)
-              }}</Label>
+              <Label :for="`${option}-${index}`">{{ beautifyObjectName(option) }}</Label>
             </div>
           </RadioGroup>
 
-          <Select
-            v-else
-            :disabled="disabled"
-            v-bind="{ ...slotProps.componentField }"
-          >
+          <Select v-else :disabled="disabled" v-bind="{ ...slotProps.componentField }">
             <SelectTrigger class="w-full">
               <SelectValue :placeholder="config?.inputProps?.placeholder" />
             </SelectTrigger>
             <SelectContent>
-              <SelectItem
-                v-for="option in options"
-                :key="option"
-                :value="option"
-              >
+              <SelectItem v-for="option in options" :key="option" :value="option">
                 {{ beautifyObjectName(option) }}
               </SelectItem>
             </SelectContent>
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldFile.vue b/frontend/src/components/ui/auto-form/AutoFormFieldFile.vue
index 47470c3..38cc486 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldFile.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldFile.vue
@@ -1,40 +1,40 @@
 <script setup>
-import { ref } from "vue";
-import { TrashIcon } from "@radix-icons/vue";
-import { beautifyObjectName } from "./utils";
-import AutoFormLabel from "./AutoFormLabel.vue";
+import { ref } from 'vue'
+import { TrashIcon } from '@radix-icons/vue'
+import { beautifyObjectName } from './utils'
+import AutoFormLabel from './AutoFormLabel.vue'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Button } from "@/components/ui/button";
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Button } from '@/components/ui/button'
 
 defineProps({
   fieldName: { type: String, required: true },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   config: { type: Object, required: false },
-  disabled: { type: Boolean, required: false },
-});
+  disabled: { type: Boolean, required: false }
+})
 
-const inputFile = ref();
+const inputFile = ref()
 async function parseFileAsString(file) {
   return new Promise((resolve, reject) => {
     if (file) {
-      const reader = new FileReader();
+      const reader = new FileReader()
       reader.onloadend = () => {
-        resolve(reader.result);
-      };
+        resolve(reader.result)
+      }
       reader.onerror = (err) => {
-        reject(err);
-      };
-      reader.readAsDataURL(file);
+        reject(err)
+      }
+      reader.readAsDataURL(file)
     }
-  });
+  })
 }
 </script>
 
@@ -53,10 +53,10 @@ async function parseFileAsString(file) {
             :disabled="disabled"
             @change="
               async (ev) => {
-                const file = ev.target.files?.[0];
-                inputFile = file;
-                const parsed = await parseFileAsString(file);
-                slotProps.componentField.onInput(parsed);
+                const file = ev.target.files?.[0]
+                inputFile = file
+                const parsed = await parseFileAsString(file)
+                slotProps.componentField.onInput(parsed)
               }
             "
           />
@@ -73,8 +73,8 @@ async function parseFileAsString(file) {
               type="button"
               @click="
                 () => {
-                  inputFile = undefined;
-                  slotProps.componentField.onInput(undefined);
+                  inputFile = undefined
+                  slotProps.componentField.onInput(undefined)
                 }
               "
             >
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldInput.vue b/frontend/src/components/ui/auto-form/AutoFormFieldInput.vue
index 245d51d..2a394d7 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldInput.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldInput.vue
@@ -1,27 +1,25 @@
 <script setup>
-import { computed } from "vue";
-import AutoFormLabel from "./AutoFormLabel.vue";
-import { beautifyObjectName } from "./utils";
+import { computed } from 'vue'
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
-import { Textarea } from "@/components/ui/textarea";
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
+import { Textarea } from '@/components/ui/textarea'
 
 const props = defineProps({
   fieldName: { type: String, required: true },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   config: { type: Object, required: false },
-  disabled: { type: Boolean, required: false },
-});
-const inputComponent = computed(() =>
-  props.config?.component === "textarea" ? Textarea : Input,
-);
+  disabled: { type: Boolean, required: false }
+})
+const inputComponent = computed(() => (props.config?.component === 'textarea' ? Textarea : Input))
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldNumber.vue b/frontend/src/components/ui/auto-form/AutoFormFieldNumber.vue
index c24bbed..ea1c255 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldNumber.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldNumber.vue
@@ -1,26 +1,26 @@
 <script setup>
-import AutoFormLabel from "./AutoFormLabel.vue";
-import { beautifyObjectName } from "./utils";
+import AutoFormLabel from './AutoFormLabel.vue'
+import { beautifyObjectName } from './utils'
 import {
   FormControl,
   FormDescription,
   FormField,
   FormItem,
-  FormMessage,
-} from "@/components/ui/form";
-import { Input } from "@/components/ui/input";
+  FormMessage
+} from '@/components/ui/form'
+import { Input } from '@/components/ui/input'
 
 defineOptions({
-  inheritAttrs: false,
-});
+  inheritAttrs: false
+})
 
 defineProps({
   fieldName: { type: String, required: true },
   label: { type: String, required: false },
   required: { type: Boolean, required: false },
   config: { type: Object, required: false },
-  disabled: { type: Boolean, required: false },
-});
+  disabled: { type: Boolean, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/auto-form/AutoFormFieldObject.vue b/frontend/src/components/ui/auto-form/AutoFormFieldObject.vue
index d759eb7..c14f11c 100644
--- a/frontend/src/components/ui/auto-form/AutoFormFieldObject.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormFieldObject.vue
@@ -1,69 +1,56 @@
 <script setup>
-import { computed, provide } from "vue";
-import { FieldContextKey, useField } from "vee-validate";
-import AutoFormField from "./AutoFormField.vue";
-import {
-  beautifyObjectName,
-  getBaseSchema,
-  getBaseType,
-  getDefaultValueInZodStack,
-} from "./utils";
-import AutoFormLabel from "./AutoFormLabel.vue";
+import { computed, provide } from 'vue'
+import { FieldContextKey, useField } from 'vee-validate'
+import AutoFormField from './AutoFormField.vue'
+import { beautifyObjectName, getBaseSchema, getBaseType, getDefaultValueInZodStack } from './utils'
+import AutoFormLabel from './AutoFormLabel.vue'
 import {
   Accordion,
   AccordionContent,
   AccordionItem,
-  AccordionTrigger,
-} from "@/components/ui/accordion";
-import { FormItem } from "@/components/ui/form";
+  AccordionTrigger
+} from '@/components/ui/accordion'
+import { FormItem } from '@/components/ui/form'
 
 const props = defineProps({
   fieldName: { type: String, required: true },
   required: { type: Boolean, required: false },
   config: { type: null, required: false },
   schema: { type: Object, required: false },
-  disabled: { type: Boolean, required: false },
-});
+  disabled: { type: Boolean, required: false }
+})
 
 const shapes = computed(() => {
-  const val = {};
+  const val = {}
 
-  if (!props.schema) return;
-  const shape = getBaseSchema(props.schema)?.shape;
-  if (!shape) return;
+  if (!props.schema) return
+  const shape = getBaseSchema(props.schema)?.shape
+  if (!shape) return
   Object.keys(shape).forEach((name) => {
-    const item = shape[name];
-    const baseItem = getBaseSchema(item);
-    let options =
-      baseItem && "values" in baseItem._def ? baseItem._def.values : undefined;
-    if (!Array.isArray(options) && typeof options === "object")
-      options = Object.values(options);
+    const item = shape[name]
+    const baseItem = getBaseSchema(item)
+    let options = baseItem && 'values' in baseItem._def ? baseItem._def.values : undefined
+    if (!Array.isArray(options) && typeof options === 'object') options = Object.values(options)
 
     val[name] = {
       type: getBaseType(item),
       default: getDefaultValueInZodStack(item),
       options,
-      required: !["ZodOptional", "ZodNullable"].includes(item._def.typeName),
-      schema: item,
-    };
-  });
-  return val;
-});
+      required: !['ZodOptional', 'ZodNullable'].includes(item._def.typeName),
+      schema: item
+    }
+  })
+  return val
+})
 
-const fieldContext = useField(props.fieldName);
-provide(FieldContextKey, fieldContext);
+const fieldContext = useField(props.fieldName)
+provide(FieldContextKey, fieldContext)
 </script>
 
 <template>
   <section>
     <slot v-bind="props">
-      <Accordion
-        type="single"
-        as-child
-        class="w-full"
-        collapsible
-        :disabled="disabled"
-      >
+      <Accordion type="single" as-child class="w-full" collapsible :disabled="disabled">
         <FormItem>
           <AccordionItem :value="fieldName" class="border-none">
             <AccordionTrigger>
diff --git a/frontend/src/components/ui/auto-form/AutoFormLabel.vue b/frontend/src/components/ui/auto-form/AutoFormLabel.vue
index 0018aa8..fb7a8ca 100644
--- a/frontend/src/components/ui/auto-form/AutoFormLabel.vue
+++ b/frontend/src/components/ui/auto-form/AutoFormLabel.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { FormLabel } from "@/components/ui/form";
+import { FormLabel } from '@/components/ui/form'
 
 defineProps({
-  required: { type: Boolean, required: false },
-});
+  required: { type: Boolean, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/auto-form/constant.js b/frontend/src/components/ui/auto-form/constant.js
index da25fc1..e5450c7 100644
--- a/frontend/src/components/ui/auto-form/constant.js
+++ b/frontend/src/components/ui/auto-form/constant.js
@@ -1,11 +1,11 @@
-import AutoFormFieldArray from "./AutoFormFieldArray.vue";
-import AutoFormFieldBoolean from "./AutoFormFieldBoolean.vue";
-import AutoFormFieldDate from "./AutoFormFieldDate.vue";
-import AutoFormFieldEnum from "./AutoFormFieldEnum.vue";
-import AutoFormFieldFile from "./AutoFormFieldFile.vue";
-import AutoFormFieldInput from "./AutoFormFieldInput.vue";
-import AutoFormFieldNumber from "./AutoFormFieldNumber.vue";
-import AutoFormFieldObject from "./AutoFormFieldObject.vue";
+import AutoFormFieldArray from './AutoFormFieldArray.vue'
+import AutoFormFieldBoolean from './AutoFormFieldBoolean.vue'
+import AutoFormFieldDate from './AutoFormFieldDate.vue'
+import AutoFormFieldEnum from './AutoFormFieldEnum.vue'
+import AutoFormFieldFile from './AutoFormFieldFile.vue'
+import AutoFormFieldInput from './AutoFormFieldInput.vue'
+import AutoFormFieldNumber from './AutoFormFieldNumber.vue'
+import AutoFormFieldObject from './AutoFormFieldObject.vue'
 
 export const INPUT_COMPONENTS = {
   date: AutoFormFieldDate,
@@ -18,20 +18,20 @@ export const INPUT_COMPONENTS = {
   string: AutoFormFieldInput,
   file: AutoFormFieldFile,
   array: AutoFormFieldArray,
-  object: AutoFormFieldObject,
-};
+  object: AutoFormFieldObject
+}
 
 /**
  * Define handlers for specific Zod types.
  * You can expand this object to support more types.
  */
 export const DEFAULT_ZOD_HANDLERS = {
-  ZodString: "string",
-  ZodBoolean: "checkbox",
-  ZodDate: "date",
-  ZodEnum: "select",
-  ZodNativeEnum: "select",
-  ZodNumber: "number",
-  ZodArray: "array",
-  ZodObject: "object",
-};
+  ZodString: 'string',
+  ZodBoolean: 'checkbox',
+  ZodDate: 'date',
+  ZodEnum: 'select',
+  ZodNativeEnum: 'select',
+  ZodNumber: 'number',
+  ZodArray: 'array',
+  ZodObject: 'object'
+}
diff --git a/frontend/src/components/ui/auto-form/dependencies.js b/frontend/src/components/ui/auto-form/dependencies.js
index 2147713..63649b0 100644
--- a/frontend/src/components/ui/auto-form/dependencies.js
+++ b/frontend/src/components/ui/auto-form/dependencies.js
@@ -1,98 +1,89 @@
-import { computed, ref, watch } from "vue";
-import { useFieldValue, useFormValues } from "vee-validate";
-import { createContext } from "radix-vue";
-import { DependencyType } from "./interface";
-import { getFromPath, getIndexIfArray } from "./utils";
+import { computed, ref, watch } from 'vue'
+import { useFieldValue, useFormValues } from 'vee-validate'
+import { createContext } from 'radix-vue'
+import { DependencyType } from './interface'
+import { getFromPath, getIndexIfArray } from './utils'
 
-export const [injectDependencies, provideDependencies] = createContext(
-  "AutoFormDependencies",
-);
+export const [injectDependencies, provideDependencies] = createContext('AutoFormDependencies')
 
 export default function useDependencies(fieldName) {
-  const form = useFormValues();
+  const form = useFormValues()
   // parsed test[0].age => test.age
-  const currentFieldName = fieldName.replace(/\[\d+\]/g, "");
-  const currentFieldValue = useFieldValue(fieldName);
+  const currentFieldName = fieldName.replace(/\[\d+\]/g, '')
+  const currentFieldValue = useFieldValue(fieldName)
 
-  if (!form)
-    throw new Error("useDependencies should be used within <AutoForm>");
+  if (!form) throw new Error('useDependencies should be used within <AutoForm>')
 
-  const dependencies = injectDependencies();
-  const isDisabled = ref(false);
-  const isHidden = ref(false);
-  const isRequired = ref(false);
-  const overrideOptions = ref();
+  const dependencies = injectDependencies()
+  const isDisabled = ref(false)
+  const isHidden = ref(false)
+  const isRequired = ref(false)
+  const overrideOptions = ref()
 
   const currentFieldDependencies = computed(() =>
-    dependencies.value?.filter(
-      (dependency) => dependency.targetField === currentFieldName,
-    ),
-  );
+    dependencies.value?.filter((dependency) => dependency.targetField === currentFieldName)
+  )
 
   function getSourceValue(dep) {
-    const source = dep.sourceField;
-    const index = getIndexIfArray(fieldName) ?? -1;
-    const [sourceLast, ...sourceInitial] = source.split(".").toReversed();
-    const [_targetLast, ...targetInitial] = dep.targetField
-      .split(".")
-      .toReversed();
+    const source = dep.sourceField
+    const index = getIndexIfArray(fieldName) ?? -1
+    const [sourceLast, ...sourceInitial] = source.split('.').toReversed()
+    const [_targetLast, ...targetInitial] = dep.targetField.split('.').toReversed()
 
-    if (index >= 0 && sourceInitial.join(",") === targetInitial.join(",")) {
-      const [_currentLast, ...currentInitial] = fieldName
-        .split(".")
-        .toReversed();
-      return getFromPath(form.value, currentInitial.join(".") + sourceLast);
+    if (index >= 0 && sourceInitial.join(',') === targetInitial.join(',')) {
+      const [_currentLast, ...currentInitial] = fieldName.split('.').toReversed()
+      return getFromPath(form.value, currentInitial.join('.') + sourceLast)
     }
 
-    return getFromPath(form.value, source);
+    return getFromPath(form.value, source)
   }
 
   const sourceFieldValues = computed(() =>
-    currentFieldDependencies.value?.map((dep) => getSourceValue(dep)),
-  );
+    currentFieldDependencies.value?.map((dep) => getSourceValue(dep))
+  )
 
   const resetConditionState = () => {
-    isDisabled.value = false;
-    isHidden.value = false;
-    isRequired.value = false;
-    overrideOptions.value = undefined;
-  };
+    isDisabled.value = false
+    isHidden.value = false
+    isRequired.value = false
+    overrideOptions.value = undefined
+  }
 
   watch(
     [sourceFieldValues, dependencies],
     () => {
-      resetConditionState();
+      resetConditionState()
       currentFieldDependencies.value?.forEach((dep) => {
-        const sourceValue = getSourceValue(dep);
-        const conditionMet = dep.when(sourceValue, currentFieldValue.value);
+        const sourceValue = getSourceValue(dep)
+        const conditionMet = dep.when(sourceValue, currentFieldValue.value)
 
         switch (dep.type) {
           case DependencyType.DISABLES:
-            if (conditionMet) isDisabled.value = true;
+            if (conditionMet) isDisabled.value = true
 
-            break;
+            break
           case DependencyType.REQUIRES:
-            if (conditionMet) isRequired.value = true;
+            if (conditionMet) isRequired.value = true
 
-            break;
+            break
           case DependencyType.HIDES:
-            if (conditionMet) isHidden.value = true;
+            if (conditionMet) isHidden.value = true
 
-            break;
+            break
           case DependencyType.SETS_OPTIONS:
-            if (conditionMet) overrideOptions.value = dep.options;
+            if (conditionMet) overrideOptions.value = dep.options
 
-            break;
+            break
         }
-      });
+      })
     },
-    { immediate: true, deep: true },
-  );
+    { immediate: true, deep: true }
+  )
 
   return {
     isDisabled,
     isHidden,
     isRequired,
-    overrideOptions,
-  };
+    overrideOptions
+  }
 }
diff --git a/frontend/src/components/ui/auto-form/index.js b/frontend/src/components/ui/auto-form/index.js
index 9128fb4..1d346f0 100644
--- a/frontend/src/components/ui/auto-form/index.js
+++ b/frontend/src/components/ui/auto-form/index.js
@@ -1,14 +1,14 @@
-export { getObjectFormSchema, getBaseSchema, getBaseType } from "./utils";
+export { getObjectFormSchema, getBaseSchema, getBaseType } from './utils'
 
-export { default as AutoForm } from "./AutoForm.vue";
-export { default as AutoFormField } from "./AutoFormField.vue";
-export { default as AutoFormLabel } from "./AutoFormLabel.vue";
+export { default as AutoForm } from './AutoForm.vue'
+export { default as AutoFormField } from './AutoFormField.vue'
+export { default as AutoFormLabel } from './AutoFormLabel.vue'
 
-export { default as AutoFormFieldArray } from "./AutoFormFieldArray.vue";
-export { default as AutoFormFieldBoolean } from "./AutoFormFieldBoolean.vue";
-export { default as AutoFormFieldDate } from "./AutoFormFieldDate.vue";
-export { default as AutoFormFieldEnum } from "./AutoFormFieldEnum.vue";
-export { default as AutoFormFieldFile } from "./AutoFormFieldFile.vue";
-export { default as AutoFormFieldInput } from "./AutoFormFieldInput.vue";
-export { default as AutoFormFieldNumber } from "./AutoFormFieldNumber.vue";
-export { default as AutoFormFieldObject } from "./AutoFormFieldObject.vue";
+export { default as AutoFormFieldArray } from './AutoFormFieldArray.vue'
+export { default as AutoFormFieldBoolean } from './AutoFormFieldBoolean.vue'
+export { default as AutoFormFieldDate } from './AutoFormFieldDate.vue'
+export { default as AutoFormFieldEnum } from './AutoFormFieldEnum.vue'
+export { default as AutoFormFieldFile } from './AutoFormFieldFile.vue'
+export { default as AutoFormFieldInput } from './AutoFormFieldInput.vue'
+export { default as AutoFormFieldNumber } from './AutoFormFieldNumber.vue'
+export { default as AutoFormFieldObject } from './AutoFormFieldObject.vue'
diff --git a/frontend/src/components/ui/auto-form/interface.js b/frontend/src/components/ui/auto-form/interface.js
index b57873b..a1f5f1f 100644
--- a/frontend/src/components/ui/auto-form/interface.js
+++ b/frontend/src/components/ui/auto-form/interface.js
@@ -1,7 +1,7 @@
 export let DependencyType = /*#__PURE__*/ (function (DependencyType) {
-  DependencyType[(DependencyType["DISABLES"] = 0)] = "DISABLES";
-  DependencyType[(DependencyType["REQUIRES"] = 1)] = "REQUIRES";
-  DependencyType[(DependencyType["HIDES"] = 2)] = "HIDES";
-  DependencyType[(DependencyType["SETS_OPTIONS"] = 3)] = "SETS_OPTIONS";
-  return DependencyType;
-})({});
+  DependencyType[(DependencyType['DISABLES'] = 0)] = 'DISABLES'
+  DependencyType[(DependencyType['REQUIRES'] = 1)] = 'REQUIRES'
+  DependencyType[(DependencyType['HIDES'] = 2)] = 'HIDES'
+  DependencyType[(DependencyType['SETS_OPTIONS'] = 3)] = 'SETS_OPTIONS'
+  return DependencyType
+})({})
diff --git a/frontend/src/components/ui/auto-form/utils.js b/frontend/src/components/ui/auto-form/utils.js
index 8ee2147..b0ad13c 100644
--- a/frontend/src/components/ui/auto-form/utils.js
+++ b/frontend/src/components/ui/auto-form/utils.js
@@ -7,9 +7,9 @@
 export function beautifyObjectName(string) {
   // Remove bracketed indices
   // if numbers only return the string
-  let output = string.replace(/\[\d+\]/g, "").replace(/([A-Z])/g, " $1");
-  output = output.charAt(0).toUpperCase() + output.slice(1);
-  return output;
+  let output = string.replace(/\[\d+\]/g, '').replace(/([A-Z])/g, ' $1')
+  output = output.charAt(0).toUpperCase() + output.slice(1)
+  return output
 }
 
 /**
@@ -18,12 +18,12 @@ export function beautifyObjectName(string) {
  * @returns index or undefined
  */
 export function getIndexIfArray(string) {
-  const indexRegex = /\[(\d+)\]/;
+  const indexRegex = /\[(\d+)\]/
   // Match the index
-  const match = string.match(indexRegex);
+  const match = string.match(indexRegex)
   // Extract the index (number)
-  const index = match ? Number.parseInt(match[1]) : undefined;
-  return index;
+  const index = match ? Number.parseInt(match[1]) : undefined
+  return index
 }
 
 /**
@@ -31,12 +31,12 @@ export function getIndexIfArray(string) {
  * This will unpack optionals, refinements, etc.
  */
 export function getBaseSchema(schema) {
-  if (!schema) return null;
-  if ("innerType" in schema._def) return getBaseSchema(schema._def.innerType);
+  if (!schema) return null
+  if ('innerType' in schema._def) return getBaseSchema(schema._def.innerType)
 
-  if ("schema" in schema._def) return getBaseSchema(schema._def.schema);
+  if ('schema' in schema._def) return getBaseSchema(schema._def.schema)
 
-  return schema;
+  return schema
 }
 
 /**
@@ -44,96 +44,93 @@ export function getBaseSchema(schema) {
  * This will unpack optionals, refinements, etc.
  */
 export function getBaseType(schema) {
-  const baseSchema = getBaseSchema(schema);
-  return baseSchema ? baseSchema._def.typeName : "";
+  const baseSchema = getBaseSchema(schema)
+  return baseSchema ? baseSchema._def.typeName : ''
 }
 
 /**
  * Search for a "ZodDefault" in the Zod stack and return its value.
  */
 export function getDefaultValueInZodStack(schema) {
-  const typedSchema = schema;
+  const typedSchema = schema
 
-  if (typedSchema._def.typeName === "ZodDefault")
-    return typedSchema._def.defaultValue();
+  if (typedSchema._def.typeName === 'ZodDefault') return typedSchema._def.defaultValue()
 
-  if ("innerType" in typedSchema._def) {
-    return getDefaultValueInZodStack(typedSchema._def.innerType);
+  if ('innerType' in typedSchema._def) {
+    return getDefaultValueInZodStack(typedSchema._def.innerType)
   }
-  if ("schema" in typedSchema._def) {
-    return getDefaultValueInZodStack(typedSchema._def.schema);
+  if ('schema' in typedSchema._def) {
+    return getDefaultValueInZodStack(typedSchema._def.schema)
   }
 
-  return undefined;
+  return undefined
 }
 
 export function getObjectFormSchema(schema) {
-  if (schema?._def.typeName === "ZodEffects") {
-    const typedSchema = schema;
-    return getObjectFormSchema(typedSchema._def.schema);
+  if (schema?._def.typeName === 'ZodEffects') {
+    const typedSchema = schema
+    return getObjectFormSchema(typedSchema._def.schema)
   }
-  return schema;
+  return schema
 }
 
 function isIndex(value) {
-  return Number(value) >= 0;
+  return Number(value) >= 0
 }
 /**
  * Constructs a path with dot paths for arrays to use brackets to be compatible with vee-validate path syntax
  */
 export function normalizeFormPath(path) {
-  const pathArr = path.split(".");
-  if (!pathArr.length) return "";
+  const pathArr = path.split('.')
+  if (!pathArr.length) return ''
 
-  let fullPath = String(pathArr[0]);
+  let fullPath = String(pathArr[0])
   for (let i = 1; i < pathArr.length; i++) {
     if (isIndex(pathArr[i])) {
-      fullPath += `[${pathArr[i]}]`;
-      continue;
+      fullPath += `[${pathArr[i]}]`
+      continue
     }
 
-    fullPath += `.${pathArr[i]}`;
+    fullPath += `.${pathArr[i]}`
   }
 
-  return fullPath;
+  return fullPath
 }
 
 /**
  * Checks if the path opted out of nested fields using `[fieldName]` syntax
  */
 export function isNotNestedPath(path) {
-  return /^\[.+\]$/.test(path);
+  return /^\[.+\]$/.test(path)
 }
 function isObject(obj) {
-  return (
-    obj !== null && !!obj && typeof obj === "object" && !Array.isArray(obj)
-  );
+  return obj !== null && !!obj && typeof obj === 'object' && !Array.isArray(obj)
 }
 function isContainerValue(value) {
-  return isObject(value) || Array.isArray(value);
+  return isObject(value) || Array.isArray(value)
 }
 function cleanupNonNestedPath(path) {
-  if (isNotNestedPath(path)) return path.replace(/\[|\]/g, "");
+  if (isNotNestedPath(path)) return path.replace(/\[|\]/g, '')
 
-  return path;
+  return path
 }
 
 /**
  * Gets a nested property value from an object
  */
 export function getFromPath(object, path, fallback) {
-  if (!object) return fallback;
+  if (!object) return fallback
 
-  if (isNotNestedPath(path)) return object[cleanupNonNestedPath(path)];
+  if (isNotNestedPath(path)) return object[cleanupNonNestedPath(path)]
 
-  const resolvedValue = (path || "")
+  const resolvedValue = (path || '')
     .split(/\.|\[(\d+)\]/)
     .filter(Boolean)
     .reduce((acc, propKey) => {
-      if (isContainerValue(acc) && propKey in acc) return acc[propKey];
+      if (isContainerValue(acc) && propKey in acc) return acc[propKey]
 
-      return fallback;
-    }, object);
+      return fallback
+    }, object)
 
-  return resolvedValue;
+  return resolvedValue
 }
diff --git a/frontend/src/components/ui/avatar/Avatar.vue b/frontend/src/components/ui/avatar/Avatar.vue
index fbb0262..bea051a 100644
--- a/frontend/src/components/ui/avatar/Avatar.vue
+++ b/frontend/src/components/ui/avatar/Avatar.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { AvatarRoot } from "radix-vue";
-import { avatarVariant } from ".";
-import { cn } from "@/lib/utils";
+import { AvatarRoot } from 'radix-vue'
+import { avatarVariant } from '.'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   class: { type: null, required: false },
-  size: { type: null, required: false, default: "sm" },
-  shape: { type: null, required: false, default: "circle" },
-});
+  size: { type: null, required: false, default: 'sm' },
+  shape: { type: null, required: false, default: 'circle' }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/avatar/AvatarFallback.vue b/frontend/src/components/ui/avatar/AvatarFallback.vue
index a194420..05388b1 100644
--- a/frontend/src/components/ui/avatar/AvatarFallback.vue
+++ b/frontend/src/components/ui/avatar/AvatarFallback.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { AvatarFallback } from "radix-vue";
+import { AvatarFallback } from 'radix-vue'
 
 const props = defineProps({
   delayMs: { type: Number, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/avatar/AvatarImage.vue b/frontend/src/components/ui/avatar/AvatarImage.vue
index 94e2040..4e8e84f 100644
--- a/frontend/src/components/ui/avatar/AvatarImage.vue
+++ b/frontend/src/components/ui/avatar/AvatarImage.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { AvatarImage } from "radix-vue";
+import { AvatarImage } from 'radix-vue'
 
 const props = defineProps({
   src: { type: String, required: true },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/avatar/index.js b/frontend/src/components/ui/avatar/index.js
index a5a6050..e75e44b 100644
--- a/frontend/src/components/ui/avatar/index.js
+++ b/frontend/src/components/ui/avatar/index.js
@@ -1,22 +1,22 @@
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority'
 
-export { default as Avatar } from "./Avatar.vue";
-export { default as AvatarImage } from "./AvatarImage.vue";
-export { default as AvatarFallback } from "./AvatarFallback.vue";
+export { default as Avatar } from './Avatar.vue'
+export { default as AvatarImage } from './AvatarImage.vue'
+export { default as AvatarFallback } from './AvatarFallback.vue'
 
 export const avatarVariant = cva(
-  "inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden",
+  'inline-flex items-center justify-center font-normal text-foreground select-none shrink-0 bg-secondary overflow-hidden',
   {
     variants: {
       size: {
-        sm: "h-10 w-10 text-xs",
-        base: "h-16 w-16 text-2xl",
-        lg: "h-32 w-32 text-5xl",
+        sm: 'h-10 w-10 text-xs',
+        base: 'h-16 w-16 text-2xl',
+        lg: 'h-32 w-32 text-5xl'
       },
       shape: {
-        circle: "rounded-full",
-        square: "rounded-md",
-      },
-    },
+        circle: 'rounded-full',
+        square: 'rounded-md'
+      }
+    }
   }
-);
+)
diff --git a/frontend/src/components/ui/badge/Badge.vue b/frontend/src/components/ui/badge/Badge.vue
index 0697f9c..8297f3f 100644
--- a/frontend/src/components/ui/badge/Badge.vue
+++ b/frontend/src/components/ui/badge/Badge.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { badgeVariants } from ".";
-import { cn } from "@/lib/utils";
+import { badgeVariants } from '.'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   variant: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/badge/index.js b/frontend/src/components/ui/badge/index.js
index 098b372..e0b6198 100644
--- a/frontend/src/components/ui/badge/index.js
+++ b/frontend/src/components/ui/badge/index.js
@@ -1,23 +1,22 @@
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority'
 
-export { default as Badge } from "./Badge.vue";
+export { default as Badge } from './Badge.vue'
 
 export const badgeVariants = cva(
-  "inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  'inline-flex items-center rounded-md border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
-        default:
-          "border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80",
+        default: 'border-transparent bg-primary text-primary-foreground shadow hover:bg-primary/80',
         secondary:
-          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          "border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80",
-        outline: "text-foreground",
-      },
+          'border-transparent bg-destructive text-destructive-foreground shadow hover:bg-destructive/80',
+        outline: 'text-foreground'
+      }
     },
     defaultVariants: {
-      variant: "default",
-    },
+      variant: 'default'
+    }
   }
-);
+)
diff --git a/frontend/src/components/ui/breadcrumb/Breadcrumb.vue b/frontend/src/components/ui/breadcrumb/Breadcrumb.vue
index 69f6bb0..5e43de6 100644
--- a/frontend/src/components/ui/breadcrumb/Breadcrumb.vue
+++ b/frontend/src/components/ui/breadcrumb/Breadcrumb.vue
@@ -1,7 +1,7 @@
 <script setup>
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
index 300cc20..71ae384 100644
--- a/frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbEllipsis.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DotsHorizontalIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { DotsHorizontalIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue
index c5dba79..e40de5c 100644
--- a/frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbItem.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue
index 29ccd9e..afdd279 100644
--- a/frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbLink.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { Primitive } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { Primitive } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "a" },
-  class: { type: null, required: false },
-});
+  as: { type: null, required: false, default: 'a' },
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbList.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbList.vue
index 88c80ea..91429f8 100644
--- a/frontend/src/components/ui/breadcrumb/BreadcrumbList.vue
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbList.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
@@ -11,7 +11,7 @@ const props = defineProps({
     :class="
       cn(
         'flex flex-wrap items-center gap-1.5 break-words text-sm text-muted-foreground sm:gap-2.5',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue
index 93b42e5..47205ed 100644
--- a/frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbPage.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/breadcrumb/BreadcrumbSeparator.vue b/frontend/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
index ba01983..a65770c 100644
--- a/frontend/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
+++ b/frontend/src/components/ui/breadcrumb/BreadcrumbSeparator.vue
@@ -1,18 +1,14 @@
 <script setup>
-import { ChevronRightIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <li
-    role="presentation"
-    aria-hidden="true"
-    :class="cn('[&>svg]:size-3.5', props.class)"
-  >
+  <li role="presentation" aria-hidden="true" :class="cn('[&>svg]:size-3.5', props.class)">
     <slot>
       <ChevronRightIcon />
     </slot>
diff --git a/frontend/src/components/ui/breadcrumb/Custom.vue b/frontend/src/components/ui/breadcrumb/Custom.vue
index 9c670ed..aca10e4 100644
--- a/frontend/src/components/ui/breadcrumb/Custom.vue
+++ b/frontend/src/components/ui/breadcrumb/Custom.vue
@@ -1,33 +1,33 @@
 <template>
-    <Breadcrumb>
-        <BreadcrumbList>
-            <BreadcrumbItem v-for="(item, index) in links" :key="index">
-                <router-link :to="item.path">
-                    {{ item.label }}
-                </router-link>
-                <BreadcrumbSeparator v-if="index < links.length - 1">
-                    <ChevronRight />
-                </BreadcrumbSeparator>
-            </BreadcrumbItem>
-        </BreadcrumbList>
-    </Breadcrumb>
+  <Breadcrumb>
+    <BreadcrumbList>
+      <BreadcrumbItem v-for="(item, index) in links" :key="index">
+        <router-link :to="item.path">
+          {{ item.label }}
+        </router-link>
+        <BreadcrumbSeparator v-if="index < links.length - 1">
+          <ChevronRight />
+        </BreadcrumbSeparator>
+      </BreadcrumbItem>
+    </BreadcrumbList>
+  </Breadcrumb>
 </template>
 
 <script setup>
-import { ChevronRight } from 'lucide-vue-next';
+import { ChevronRight } from 'lucide-vue-next'
 import {
-    Breadcrumb,
-    BreadcrumbItem,
-    BreadcrumbList,
-    BreadcrumbSeparator,
+  Breadcrumb,
+  BreadcrumbItem,
+  BreadcrumbList,
+  BreadcrumbSeparator
 } from '@/components/ui/breadcrumb'
 import { defineProps } from 'vue'
 
 defineProps({
-    links: {
-        type: Array,
-        required: true,
-        default: () => []
-    }
+  links: {
+    type: Array,
+    required: true,
+    default: () => []
+  }
 })
-</script>
\ No newline at end of file
+</script>
diff --git a/frontend/src/components/ui/breadcrumb/index.js b/frontend/src/components/ui/breadcrumb/index.js
index 1a17521..f11c9d0 100644
--- a/frontend/src/components/ui/breadcrumb/index.js
+++ b/frontend/src/components/ui/breadcrumb/index.js
@@ -1,8 +1,8 @@
-export { default as Breadcrumb } from "./Breadcrumb.vue";
-export { default as BreadcrumbEllipsis } from "./BreadcrumbEllipsis.vue";
-export { default as BreadcrumbItem } from "./BreadcrumbItem.vue";
-export { default as BreadcrumbLink } from "./BreadcrumbLink.vue";
-export { default as BreadcrumbList } from "./BreadcrumbList.vue";
-export { default as BreadcrumbPage } from "./BreadcrumbPage.vue";
-export { default as BreadcrumbSeparator } from "./BreadcrumbSeparator.vue";
-export { default as CustomBreadcrumb } from './Custom.vue'
\ No newline at end of file
+export { default as Breadcrumb } from './Breadcrumb.vue'
+export { default as BreadcrumbEllipsis } from './BreadcrumbEllipsis.vue'
+export { default as BreadcrumbItem } from './BreadcrumbItem.vue'
+export { default as BreadcrumbLink } from './BreadcrumbLink.vue'
+export { default as BreadcrumbList } from './BreadcrumbList.vue'
+export { default as BreadcrumbPage } from './BreadcrumbPage.vue'
+export { default as BreadcrumbSeparator } from './BreadcrumbSeparator.vue'
+export { default as CustomBreadcrumb } from './Custom.vue'
diff --git a/frontend/src/components/ui/button/Button.vue b/frontend/src/components/ui/button/Button.vue
index b71e575..4edae9f 100644
--- a/frontend/src/components/ui/button/Button.vue
+++ b/frontend/src/components/ui/button/Button.vue
@@ -1,27 +1,26 @@
 <script setup>
-import { Primitive } from "radix-vue";
-import { buttonVariants } from ".";
-import { cn } from "@/lib/utils";
-import { ref, computed } from "vue";
-import { ReloadIcon } from "@radix-icons/vue";
+import { Primitive } from 'radix-vue'
+import { buttonVariants } from '.'
+import { cn } from '@/lib/utils'
+import { ref, computed } from 'vue'
+import { ReloadIcon } from '@radix-icons/vue'
 
 const props = defineProps({
   variant: { type: null, required: false },
   size: { type: null, required: false },
   class: { type: null, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false, default: "button" },
-  isLoading: { type: Boolean, required: false, default: false },
-});
+  as: { type: null, required: false, default: 'button' },
+  isLoading: { type: Boolean, required: false, default: false }
+})
 
-const isDisabled = ref(false);
+const isDisabled = ref(false)
 
 const computedClass = computed(() => {
   return cn(buttonVariants({ variant: props.variant, size: props.size }), props.class, {
-    "cursor-not-allowed opacity-50": props.isLoading || isDisabled.value,
-  });
-});
-
+    'cursor-not-allowed opacity-50': props.isLoading || isDisabled.value
+  })
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/button/index.js b/frontend/src/components/ui/button/index.js
index 147b32d..b50b970 100644
--- a/frontend/src/components/ui/button/index.js
+++ b/frontend/src/components/ui/button/index.js
@@ -1,30 +1,31 @@
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority'
 
-export { default as Button } from "./Button.vue";
+export { default as Button } from './Button.vue'
 
 export const buttonVariants = cva(
-  "inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50",
+  'inline-flex items-center justify-center whitespace-nowrap rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
-        default: "bg-primary text-primary-foreground shadow hover:bg-primary/90",
-        destructive: "bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90",
-        outline: "border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground",
-        secondary: "bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80",
-        ghost: "hover:bg-accent hover:text-accent-foreground",
-        link: "text-primary underline-offset-4 hover:underline",
+        default: 'bg-primary text-primary-foreground shadow hover:bg-primary/90',
+        destructive: 'bg-destructive text-destructive-foreground shadow-sm hover:bg-destructive/90',
+        outline:
+          'border border-input bg-background shadow-sm hover:bg-accent hover:text-accent-foreground',
+        secondary: 'bg-secondary text-secondary-foreground shadow-sm hover:bg-secondary/80',
+        ghost: 'hover:bg-accent hover:text-accent-foreground',
+        link: 'text-primary underline-offset-4 hover:underline'
       },
       size: {
-        default: "h-9 px-4 py-2",
-        xs: "h-7 rounded px-2",
-        sm: "h-8 rounded-md px-3 text-xs",
-        lg: "h-10 rounded-md px-8",
-        icon: "h-9 w-9",
-      },
+        default: 'h-9 px-4 py-2',
+        xs: 'h-7 rounded px-2',
+        sm: 'h-8 rounded-md px-3 text-xs',
+        lg: 'h-10 rounded-md px-8',
+        icon: 'h-9 w-9'
+      }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
+      variant: 'default',
+      size: 'default'
+    }
   }
-);
+)
diff --git a/frontend/src/components/ui/calendar/Calendar.vue b/frontend/src/components/ui/calendar/Calendar.vue
index 69cd398..6b450cd 100644
--- a/frontend/src/components/ui/calendar/Calendar.vue
+++ b/frontend/src/components/ui/calendar/Calendar.vue
@@ -1,6 +1,6 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarRoot, useForwardPropsEmits } from "radix-vue";
+import { computed } from 'vue'
+import { CalendarRoot, useForwardPropsEmits } from 'radix-vue'
 import {
   CalendarCell,
   CalendarCellTrigger,
@@ -12,9 +12,9 @@ import {
   CalendarHeader,
   CalendarHeading,
   CalendarNextButton,
-  CalendarPrevButton,
-} from ".";
-import { cn } from "@/lib/utils";
+  CalendarPrevButton
+} from '.'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   modelValue: { type: null, required: false },
@@ -40,26 +40,22 @@ const props = defineProps({
   dir: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const emits = defineEmits(["update:modelValue", "update:placeholder"]);
+const emits = defineEmits(['update:modelValue', 'update:placeholder'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <CalendarRoot
-    v-slot="{ grid, weekDays }"
-    :class="cn('p-3', props.class)"
-    v-bind="forwarded"
-  >
+  <CalendarRoot v-slot="{ grid, weekDays }" :class="cn('p-3', props.class)" v-bind="forwarded">
     <CalendarHeader>
       <CalendarPrevButton />
       <CalendarHeading />
@@ -81,11 +77,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
             :key="`weekDate-${index}`"
             class="mt-2 w-full"
           >
-            <CalendarCell
-              v-for="weekDate in weekDates"
-              :key="weekDate.toString()"
-              :date="weekDate"
-            >
+            <CalendarCell v-for="weekDate in weekDates" :key="weekDate.toString()" :date="weekDate">
               <CalendarCellTrigger :day="weekDate" :month="month.value" />
             </CalendarCell>
           </CalendarGridRow>
diff --git a/frontend/src/components/ui/calendar/CalendarCell.vue b/frontend/src/components/ui/calendar/CalendarCell.vue
index 6602dfa..14043f2 100644
--- a/frontend/src/components/ui/calendar/CalendarCell.vue
+++ b/frontend/src/components/ui/calendar/CalendarCell.vue
@@ -1,22 +1,22 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarCell, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CalendarCell, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   date: { type: null, required: true },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -24,7 +24,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     :class="
       cn(
         'relative p-0 text-center text-sm focus-within:relative focus-within:z-20 [&:has([data-selected])]:rounded-md [&:has([data-selected])]:bg-accent [&:has([data-selected][data-outside-view])]:bg-accent/50',
-        props.class,
+        props.class
       )
     "
     v-bind="forwardedProps"
diff --git a/frontend/src/components/ui/calendar/CalendarCellTrigger.vue b/frontend/src/components/ui/calendar/CalendarCellTrigger.vue
index 9a57494..b8c6065 100644
--- a/frontend/src/components/ui/calendar/CalendarCellTrigger.vue
+++ b/frontend/src/components/ui/calendar/CalendarCellTrigger.vue
@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarCellTrigger, useForwardProps } from "radix-vue";
-import { buttonVariants } from "@/components/ui/button";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CalendarCellTrigger, useForwardProps } from 'radix-vue'
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   day: { type: null, required: true },
   month: { type: null, required: true },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -36,7 +36,7 @@ const forwardedProps = useForwardProps(delegatedProps);
         'data-[unavailable]:text-destructive-foreground data-[unavailable]:line-through',
         // Outside months
         'data-[outside-view]:text-muted-foreground data-[outside-view]:opacity-50 [&[data-outside-view][data-selected]]:bg-accent/50 [&[data-outside-view][data-selected]]:text-muted-foreground [&[data-outside-view][data-selected]]:opacity-30',
-        props.class,
+        props.class
       )
     "
     v-bind="forwardedProps"
diff --git a/frontend/src/components/ui/calendar/CalendarGrid.vue b/frontend/src/components/ui/calendar/CalendarGrid.vue
index 934c29f..8532e83 100644
--- a/frontend/src/components/ui/calendar/CalendarGrid.vue
+++ b/frontend/src/components/ui/calendar/CalendarGrid.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarGrid, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CalendarGrid, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridBody.vue b/frontend/src/components/ui/calendar/CalendarGridBody.vue
index 8cfcfab..04e782f 100644
--- a/frontend/src/components/ui/calendar/CalendarGridBody.vue
+++ b/frontend/src/components/ui/calendar/CalendarGridBody.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { CalendarGridBody } from "radix-vue";
+import { CalendarGridBody } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridHead.vue b/frontend/src/components/ui/calendar/CalendarGridHead.vue
index c0f75d5..98e8198 100644
--- a/frontend/src/components/ui/calendar/CalendarGridHead.vue
+++ b/frontend/src/components/ui/calendar/CalendarGridHead.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { CalendarGridHead } from "radix-vue";
+import { CalendarGridHead } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/calendar/CalendarGridRow.vue b/frontend/src/components/ui/calendar/CalendarGridRow.vue
index 9b5e49e..883735c 100644
--- a/frontend/src/components/ui/calendar/CalendarGridRow.vue
+++ b/frontend/src/components/ui/calendar/CalendarGridRow.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarGridRow, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CalendarGridRow, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/calendar/CalendarHeadCell.vue b/frontend/src/components/ui/calendar/CalendarHeadCell.vue
index c1baa8c..b1dd645 100644
--- a/frontend/src/components/ui/calendar/CalendarHeadCell.vue
+++ b/frontend/src/components/ui/calendar/CalendarHeadCell.vue
@@ -1,31 +1,26 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarHeadCell, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CalendarHeadCell, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <CalendarHeadCell
-    :class="
-      cn(
-        'w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground',
-        props.class,
-      )
-    "
+    :class="cn('w-8 rounded-md text-[0.8rem] font-normal text-muted-foreground', props.class)"
     v-bind="forwardedProps"
   >
     <slot />
diff --git a/frontend/src/components/ui/calendar/CalendarHeader.vue b/frontend/src/components/ui/calendar/CalendarHeader.vue
index e4291da..1b27cc2 100644
--- a/frontend/src/components/ui/calendar/CalendarHeader.vue
+++ b/frontend/src/components/ui/calendar/CalendarHeader.vue
@@ -1,28 +1,26 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarHeader, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CalendarHeader, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <CalendarHeader
-    :class="
-      cn('relative flex w-full items-center justify-between pt-1', props.class)
-    "
+    :class="cn('relative flex w-full items-center justify-between pt-1', props.class)"
     v-bind="forwardedProps"
   >
     <slot />
diff --git a/frontend/src/components/ui/calendar/CalendarHeading.vue b/frontend/src/components/ui/calendar/CalendarHeading.vue
index 5079b98..78ccec9 100644
--- a/frontend/src/components/ui/calendar/CalendarHeading.vue
+++ b/frontend/src/components/ui/calendar/CalendarHeading.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarHeading, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CalendarHeading, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/calendar/CalendarNextButton.vue b/frontend/src/components/ui/calendar/CalendarNextButton.vue
index b3a5323..1861a67 100644
--- a/frontend/src/components/ui/calendar/CalendarNextButton.vue
+++ b/frontend/src/components/ui/calendar/CalendarNextButton.vue
@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarNext, useForwardProps } from "radix-vue";
-import { ChevronRightIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { computed } from 'vue'
+import { CalendarNext, useForwardProps } from 'radix-vue'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
 
 const props = defineProps({
   step: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       cn(
         buttonVariants({ variant: 'outline' }),
         'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        props.class,
+        props.class
       )
     "
     v-bind="forwardedProps"
diff --git a/frontend/src/components/ui/calendar/CalendarPrevButton.vue b/frontend/src/components/ui/calendar/CalendarPrevButton.vue
index a5b07f1..42a9dee 100644
--- a/frontend/src/components/ui/calendar/CalendarPrevButton.vue
+++ b/frontend/src/components/ui/calendar/CalendarPrevButton.vue
@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { CalendarPrev, useForwardProps } from "radix-vue";
-import { ChevronLeftIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
-import { buttonVariants } from "@/components/ui/button";
+import { computed } from 'vue'
+import { CalendarPrev, useForwardProps } from 'radix-vue'
+import { ChevronLeftIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
+import { buttonVariants } from '@/components/ui/button'
 
 const props = defineProps({
   step: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       cn(
         buttonVariants({ variant: 'outline' }),
         'h-7 w-7 bg-transparent p-0 opacity-50 hover:opacity-100',
-        props.class,
+        props.class
       )
     "
     v-bind="forwardedProps"
diff --git a/frontend/src/components/ui/calendar/index.js b/frontend/src/components/ui/calendar/index.js
index f5e9b7e..5239a1b 100644
--- a/frontend/src/components/ui/calendar/index.js
+++ b/frontend/src/components/ui/calendar/index.js
@@ -1,12 +1,12 @@
-export { default as Calendar } from "./Calendar.vue";
-export { default as CalendarCell } from "./CalendarCell.vue";
-export { default as CalendarCellTrigger } from "./CalendarCellTrigger.vue";
-export { default as CalendarGrid } from "./CalendarGrid.vue";
-export { default as CalendarGridBody } from "./CalendarGridBody.vue";
-export { default as CalendarGridHead } from "./CalendarGridHead.vue";
-export { default as CalendarGridRow } from "./CalendarGridRow.vue";
-export { default as CalendarHeadCell } from "./CalendarHeadCell.vue";
-export { default as CalendarHeader } from "./CalendarHeader.vue";
-export { default as CalendarHeading } from "./CalendarHeading.vue";
-export { default as CalendarNextButton } from "./CalendarNextButton.vue";
-export { default as CalendarPrevButton } from "./CalendarPrevButton.vue";
+export { default as Calendar } from './Calendar.vue'
+export { default as CalendarCell } from './CalendarCell.vue'
+export { default as CalendarCellTrigger } from './CalendarCellTrigger.vue'
+export { default as CalendarGrid } from './CalendarGrid.vue'
+export { default as CalendarGridBody } from './CalendarGridBody.vue'
+export { default as CalendarGridHead } from './CalendarGridHead.vue'
+export { default as CalendarGridRow } from './CalendarGridRow.vue'
+export { default as CalendarHeadCell } from './CalendarHeadCell.vue'
+export { default as CalendarHeader } from './CalendarHeader.vue'
+export { default as CalendarHeading } from './CalendarHeading.vue'
+export { default as CalendarNextButton } from './CalendarNextButton.vue'
+export { default as CalendarPrevButton } from './CalendarPrevButton.vue'
diff --git a/frontend/src/components/ui/card/Card.vue b/frontend/src/components/ui/card/Card.vue
index 8a4c86b..f8ed028 100644
--- a/frontend/src/components/ui/card/Card.vue
+++ b/frontend/src/components/ui/card/Card.vue
@@ -1,17 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <div
-    :class="
-      cn('rounded-xl border bg-card text-card-foreground shadow', props.class)
-    "
-  >
+  <div :class="cn('rounded-xl border bg-card text-card-foreground shadow', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/card/CardContent.vue b/frontend/src/components/ui/card/CardContent.vue
index cbbb03f..2d759b9 100644
--- a/frontend/src/components/ui/card/CardContent.vue
+++ b/frontend/src/components/ui/card/CardContent.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardDescription.vue b/frontend/src/components/ui/card/CardDescription.vue
index 9a9356c..2d37ffb 100644
--- a/frontend/src/components/ui/card/CardDescription.vue
+++ b/frontend/src/components/ui/card/CardDescription.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardFooter.vue b/frontend/src/components/ui/card/CardFooter.vue
index b40e7b2..ce203ce 100644
--- a/frontend/src/components/ui/card/CardFooter.vue
+++ b/frontend/src/components/ui/card/CardFooter.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardHeader.vue b/frontend/src/components/ui/card/CardHeader.vue
index 828d609..28a9b4b 100644
--- a/frontend/src/components/ui/card/CardHeader.vue
+++ b/frontend/src/components/ui/card/CardHeader.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/CardTitle.vue b/frontend/src/components/ui/card/CardTitle.vue
index 04e3462..2e14f77 100644
--- a/frontend/src/components/ui/card/CardTitle.vue
+++ b/frontend/src/components/ui/card/CardTitle.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/card/index.js b/frontend/src/components/ui/card/index.js
index 27eae38..8170483 100644
--- a/frontend/src/components/ui/card/index.js
+++ b/frontend/src/components/ui/card/index.js
@@ -1,6 +1,6 @@
-export { default as Card } from "./Card.vue";
-export { default as CardHeader } from "./CardHeader.vue";
-export { default as CardTitle } from "./CardTitle.vue";
-export { default as CardDescription } from "./CardDescription.vue";
-export { default as CardContent } from "./CardContent.vue";
-export { default as CardFooter } from "./CardFooter.vue";
+export { default as Card } from './Card.vue'
+export { default as CardHeader } from './CardHeader.vue'
+export { default as CardTitle } from './CardTitle.vue'
+export { default as CardDescription } from './CardDescription.vue'
+export { default as CardContent } from './CardContent.vue'
+export { default as CardFooter } from './CardFooter.vue'
diff --git a/frontend/src/components/ui/chart-bar/BarChart.vue b/frontend/src/components/ui/chart-bar/BarChart.vue
index 4904e34..1bbcf46 100644
--- a/frontend/src/components/ui/chart-bar/BarChart.vue
+++ b/frontend/src/components/ui/chart-bar/BarChart.vue
@@ -1,19 +1,10 @@
 <script setup>
-import {
-  VisAxis,
-  VisGroupedBar,
-  VisStackedBar,
-  VisXYContainer,
-} from "@unovis/vue";
-import { Axis, GroupedBar, StackedBar } from "@unovis/ts";
-import { computed, ref } from "vue";
-import { useMounted } from "@vueuse/core";
-import {
-  ChartCrosshair,
-  ChartLegend,
-  defaultColors,
-} from "@/components/ui/chart";
-import { cn } from "@/lib/utils";
+import { VisAxis, VisGroupedBar, VisStackedBar, VisXYContainer } from '@unovis/vue'
+import { Axis, GroupedBar, StackedBar } from '@unovis/ts'
+import { computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/components/ui/chart'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   data: { type: Array, required: true },
@@ -23,7 +14,7 @@ const props = defineProps({
   margin: {
     type: null,
     required: false,
-    default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+    default: () => ({ top: 0, bottom: 0, left: 0, right: 0 })
   },
   filterOpacity: { type: Number, required: false, default: 0.2 },
   xFormatter: { type: Function, required: false },
@@ -34,54 +25,44 @@ const props = defineProps({
   showLegend: { type: Boolean, required: false, default: true },
   showGridLine: { type: Boolean, required: false, default: true },
   customTooltip: { type: null, required: false },
-  type: { type: String, required: false, default: "grouped" },
-  roundedCorners: { type: Number, required: false, default: 0 },
-});
-const emits = defineEmits(["legendItemClick"]);
+  type: { type: String, required: false, default: 'grouped' },
+  roundedCorners: { type: Number, required: false, default: 0 }
+})
+const emits = defineEmits(['legendItemClick'])
 
-const index = computed(() => props.index);
+const index = computed(() => props.index)
 const colors = computed(() =>
-  props.colors?.length ? props.colors : defaultColors(props.categories.length),
-);
+  props.colors?.length ? props.colors : defaultColors(props.categories.length)
+)
 const legendItems = ref(
   props.categories.map((category, i) => ({
     name: category,
     color: colors.value[i],
-    inactive: false,
-  })),
-);
+    inactive: false
+  }))
+)
 
-const isMounted = useMounted();
+const isMounted = useMounted()
 
 function handleLegendItemClick(d, i) {
-  emits("legendItemClick", d, i);
+  emits('legendItemClick', d, i)
 }
 
-const VisBarComponent = computed(() =>
-  props.type === "grouped" ? VisGroupedBar : VisStackedBar,
-);
+const VisBarComponent = computed(() => (props.type === 'grouped' ? VisGroupedBar : VisStackedBar))
 const selectorsBar = computed(() =>
-  props.type === "grouped"
-    ? GroupedBar.selectors.bar
-    : StackedBar.selectors.bar,
-);
+  props.type === 'grouped' ? GroupedBar.selectors.bar : StackedBar.selectors.bar
+)
 </script>
 
 <template>
-  <div
-    :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')"
-  >
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
     <ChartLegend
       v-if="showLegend"
       v-model:items="legendItems"
       @legend-item-click="handleLegendItemClick"
     />
 
-    <VisXYContainer
-      :data="data"
-      :style="{ height: isMounted ? '100%' : 'auto' }"
-      :margin="margin"
-    >
+    <VisXYContainer :data="data" :style="{ height: isMounted ? '100%' : 'auto' }" :margin="margin">
       <ChartCrosshair
         v-if="showTooltip"
         :colors="colors"
@@ -99,10 +80,10 @@ const selectorsBar = computed(() =>
         :attributes="{
           [selectorsBar]: {
             opacity: (d, i) => {
-              const pos = i % categories.length;
-              return legendItems[pos]?.inactive ? filterOpacity : 1;
-            },
-          },
+              const pos = i % categories.length
+              return legendItems[pos]?.inactive ? filterOpacity : 1
+            }
+          }
         }"
       />
 
@@ -123,8 +104,8 @@ const selectorsBar = computed(() =>
         :grid-line="showGridLine"
         :attributes="{
           [Axis.selectors.grid]: {
-            class: 'text-muted',
-          },
+            class: 'text-muted'
+          }
         }"
         tick-text-color="hsl(var(--vis-text-color))"
       />
diff --git a/frontend/src/components/ui/chart-bar/index.js b/frontend/src/components/ui/chart-bar/index.js
index 5733f0a..805149a 100644
--- a/frontend/src/components/ui/chart-bar/index.js
+++ b/frontend/src/components/ui/chart-bar/index.js
@@ -1 +1 @@
-export { default as BarChart } from "./BarChart.vue";
+export { default as BarChart } from './BarChart.vue'
diff --git a/frontend/src/components/ui/chart-donut/DonutChart.vue b/frontend/src/components/ui/chart-donut/DonutChart.vue
index 593d900..b4c4175 100644
--- a/frontend/src/components/ui/chart-donut/DonutChart.vue
+++ b/frontend/src/components/ui/chart-donut/DonutChart.vue
@@ -1,43 +1,53 @@
 <script setup>
-import { VisDonut, VisSingleContainer } from '@unovis/vue';
-import { Donut } from '@unovis/ts';
-import { computed, ref } from 'vue';
-import { useMounted } from '@vueuse/core';
-import { ChartSingleTooltip, defaultColors } from '@/components/ui/chart';
-import { cn } from '@/lib/utils';
+import { VisDonut, VisSingleContainer } from '@unovis/vue'
+import { Donut } from '@unovis/ts'
+import { computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { ChartSingleTooltip, defaultColors } from '@/components/ui/chart'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-    data: { type: Array, required: true },
-    colors: { type: Array, required: false },
-    index: { type: null, required: true },
-    margin: { type: null, required: false, default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }) },
-    showLegend: { type: Boolean, required: false, default: true },
-    showTooltip: { type: Boolean, required: false, default: true },
-    filterOpacity: { type: Number, required: false, default: 0.2 },
-    category: { type: String, required: true },
-    type: { type: String, required: false, default: 'donut' },
-    sortFunction: { type: Function, required: false, default: () => undefined },
-    valueFormatter: { type: Function, required: false, default: (tick) => `${tick}` },
-    customTooltip: { type: null, required: false }
-  }
-);
+  data: { type: Array, required: true },
+  colors: { type: Array, required: false },
+  index: { type: null, required: true },
+  margin: {
+    type: null,
+    required: false,
+    default: () => ({ top: 0, bottom: 0, left: 0, right: 0 })
+  },
+  showLegend: { type: Boolean, required: false, default: true },
+  showTooltip: { type: Boolean, required: false, default: true },
+  filterOpacity: { type: Number, required: false, default: 0.2 },
+  category: { type: String, required: true },
+  type: { type: String, required: false, default: 'donut' },
+  sortFunction: { type: Function, required: false, default: () => undefined },
+  valueFormatter: { type: Function, required: false, default: (tick) => `${tick}` },
+  customTooltip: { type: null, required: false }
+})
 
+const category = computed(() => props.category)
+const index = computed(() => props.index)
 
-const category = computed(() => props.category);
-const index = computed(() => props.index);
+const isMounted = useMounted()
+const activeSegmentKey = ref()
+const colors = computed(() =>
+  props.colors?.length
+    ? props.colors
+    : defaultColors(props.data.filter((d) => d[props.category]).filter(Boolean).length)
+)
+const legendItems = computed(() =>
+  props.data.map((item, i) => ({
+    name: item[props.index],
+    color: colors.value[i],
+    inactive: false
+  }))
+)
 
-const isMounted = useMounted();
-const activeSegmentKey = ref();
-const colors = computed(() => props.colors?.length ? props.colors : defaultColors(props.data.filter((d) => d[props.category]).filter(Boolean).length));
-const legendItems = computed(() => props.data.map((item, i) => ({
-  name: item[props.index],
-  color: colors.value[i],
-  inactive: false
-})));
-
-const totalValue = computed(() => props.data.reduce((prev, curr) => {
-  return prev + curr[props.category];
-}, 0))
+const totalValue = computed(() =>
+  props.data.reduce((prev, curr) => {
+    return prev + curr[props.category]
+  }, 0)
+)
 </script>
 
 <template>
@@ -66,17 +76,15 @@ const totalValue = computed(() => props.data.reduce((prev, curr) => {
           [Donut.selectors.segment]: {
             click: (d, ev, i, elements) => {
               if (d?.data?.[index] === activeSegmentKey) {
-                activeSegmentKey = undefined;
-                elements.forEach((el) => (el.style.opacity = '1'));
+                activeSegmentKey = undefined
+                elements.forEach((el) => (el.style.opacity = '1'))
               } else {
-                activeSegmentKey = d?.data?.[index];
-                elements.forEach(
-                  (el) => (el.style.opacity = `${filterOpacity}`),
-                );
-                elements[i].style.opacity = '1';
+                activeSegmentKey = d?.data?.[index]
+                elements.forEach((el) => (el.style.opacity = `${filterOpacity}`))
+                elements[i].style.opacity = '1'
               }
-            },
-          },
+            }
+          }
         }"
       />
 
diff --git a/frontend/src/components/ui/chart-donut/index.js b/frontend/src/components/ui/chart-donut/index.js
index 95b69ad..b42413a 100644
--- a/frontend/src/components/ui/chart-donut/index.js
+++ b/frontend/src/components/ui/chart-donut/index.js
@@ -1 +1 @@
-export { default as DonutChart } from "./DonutChart.vue";
+export { default as DonutChart } from './DonutChart.vue'
diff --git a/frontend/src/components/ui/chart-line/LineChart.vue b/frontend/src/components/ui/chart-line/LineChart.vue
index 53cbfb4..283db29 100644
--- a/frontend/src/components/ui/chart-line/LineChart.vue
+++ b/frontend/src/components/ui/chart-line/LineChart.vue
@@ -1,15 +1,11 @@
 <script setup>
-import { CurveType } from "@unovis/ts";
-import { VisAxis, VisLine, VisXYContainer } from "@unovis/vue";
-import { Axis, Line } from "@unovis/ts";
-import { computed, ref } from "vue";
-import { useMounted } from "@vueuse/core";
-import {
-  ChartCrosshair,
-  ChartLegend,
-  defaultColors,
-} from "@/components/ui/chart";
-import { cn } from "@/lib/utils";
+import { CurveType } from '@unovis/ts'
+import { VisAxis, VisLine, VisXYContainer } from '@unovis/vue'
+import { Axis, Line } from '@unovis/ts'
+import { computed, ref } from 'vue'
+import { useMounted } from '@vueuse/core'
+import { ChartCrosshair, ChartLegend, defaultColors } from '@/components/ui/chart'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   data: { type: Array, required: true },
@@ -19,7 +15,7 @@ const props = defineProps({
   margin: {
     type: null,
     required: false,
-    default: () => ({ top: 0, bottom: 0, left: 0, right: 0 }),
+    default: () => ({ top: 0, bottom: 0, left: 0, right: 0 })
   },
   filterOpacity: { type: Number, required: false, default: 0.2 },
   xFormatter: { type: Function, required: false },
@@ -30,35 +26,33 @@ const props = defineProps({
   showLegend: { type: Boolean, required: false, default: true },
   showGridLine: { type: Boolean, required: false, default: true },
   customTooltip: { type: null, required: false },
-  curveType: { type: String, required: false, default: CurveType.MonotoneX },
-});
+  curveType: { type: String, required: false, default: CurveType.MonotoneX }
+})
 
-const emits = defineEmits(["legendItemClick"]);
+const emits = defineEmits(['legendItemClick'])
 
-const index = computed(() => props.index);
+const index = computed(() => props.index)
 const colors = computed(() =>
-  props.colors?.length ? props.colors : defaultColors(props.categories.length),
-);
+  props.colors?.length ? props.colors : defaultColors(props.categories.length)
+)
 
 const legendItems = ref(
   props.categories.map((category, i) => ({
     name: category,
     color: colors.value[i],
-    inactive: false,
-  })),
-);
+    inactive: false
+  }))
+)
 
-const isMounted = useMounted();
+const isMounted = useMounted()
 
 function handleLegendItemClick(d, i) {
-  emits("legendItemClick", d, i);
+  emits('legendItemClick', d, i)
 }
 </script>
 
 <template>
-  <div
-    :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')"
-  >
+  <div :class="cn('w-full h-[400px] flex flex-col items-end', $attrs.class ?? '')">
     <ChartLegend
       v-if="showLegend"
       v-model:items="legendItems"
@@ -86,11 +80,10 @@ function handleLegendItemClick(d, i) {
           :color="colors[i]"
           :attributes="{
             [Line.selectors.line]: {
-              opacity: legendItems.find((item) => item.name === category)
-                ?.inactive
+              opacity: legendItems.find((item) => item.name === category)?.inactive
                 ? filterOpacity
-                : 1,
-            },
+                : 1
+            }
           }"
         />
       </template>
@@ -112,8 +105,8 @@ function handleLegendItemClick(d, i) {
         :grid-line="showGridLine"
         :attributes="{
           [Axis.selectors.grid]: {
-            class: 'text-muted',
-          },
+            class: 'text-muted'
+          }
         }"
         tick-text-color="hsl(var(--vis-text-color))"
       />
diff --git a/frontend/src/components/ui/chart-line/index.js b/frontend/src/components/ui/chart-line/index.js
index 3e38c68..5d827c8 100644
--- a/frontend/src/components/ui/chart-line/index.js
+++ b/frontend/src/components/ui/chart-line/index.js
@@ -1 +1 @@
-export { default as LineChart } from "./LineChart.vue";
+export { default as LineChart } from './LineChart.vue'
diff --git a/frontend/src/components/ui/chart/ChartCrosshair.vue b/frontend/src/components/ui/chart/ChartCrosshair.vue
index c71db9f..079558e 100644
--- a/frontend/src/components/ui/chart/ChartCrosshair.vue
+++ b/frontend/src/components/ui/chart/ChartCrosshair.vue
@@ -1,41 +1,39 @@
 <script setup>
-import { VisCrosshair, VisTooltip } from "@unovis/vue";
-import { omit } from "@unovis/ts";
-import { createApp } from "vue";
-import { ChartTooltip } from ".";
+import { VisCrosshair, VisTooltip } from '@unovis/vue'
+import { omit } from '@unovis/ts'
+import { createApp } from 'vue'
+import { ChartTooltip } from '.'
 
 const props = defineProps({
   colors: { type: Array, required: true, default: () => [] },
   index: { type: String, required: true },
   items: { type: Array, required: true },
-  customTooltip: { type: null, required: false },
-});
+  customTooltip: { type: null, required: false }
+})
 
 // Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap();
+const wm = new WeakMap()
 function template(d) {
   if (wm.has(d)) {
-    return wm.get(d);
+    return wm.get(d)
   } else {
-    const componentDiv = document.createElement("div");
-    const omittedData = Object.entries(omit(d, [props.index])).map(
-      ([key, value]) => {
-        const legendReference = props.items.find((i) => i.name === key);
-        return { ...legendReference, value };
-      },
-    );
-    const TooltipComponent = props.customTooltip ?? ChartTooltip;
+    const componentDiv = document.createElement('div')
+    const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
+      const legendReference = props.items.find((i) => i.name === key)
+      return { ...legendReference, value }
+    })
+    const TooltipComponent = props.customTooltip ?? ChartTooltip
     createApp(TooltipComponent, {
       title: d[props.index].toString(),
-      data: omittedData,
-    }).mount(componentDiv);
-    wm.set(d, componentDiv.innerHTML);
-    return componentDiv.innerHTML;
+      data: omittedData
+    }).mount(componentDiv)
+    wm.set(d, componentDiv.innerHTML)
+    return componentDiv.innerHTML
   }
 }
 
 function color(d, i) {
-  return props.colors[i] ?? "transparent";
+  return props.colors[i] ?? 'transparent'
 }
 </script>
 
diff --git a/frontend/src/components/ui/chart/ChartLegend.vue b/frontend/src/components/ui/chart/ChartLegend.vue
index d007e13..928314d 100644
--- a/frontend/src/components/ui/chart/ChartLegend.vue
+++ b/frontend/src/components/ui/chart/ChartLegend.vue
@@ -1,49 +1,45 @@
 <script setup>
-import { VisBulletLegend } from "@unovis/vue";
-import { BulletLegend } from "@unovis/ts";
-import { nextTick, onMounted, ref } from "vue";
-import { buttonVariants } from "@/components/ui/button";
+import { VisBulletLegend } from '@unovis/vue'
+import { BulletLegend } from '@unovis/ts'
+import { nextTick, onMounted, ref } from 'vue'
+import { buttonVariants } from '@/components/ui/button'
 
 const props = defineProps({
-  items: { type: Array, required: true, default: () => [] },
-});
+  items: { type: Array, required: true, default: () => [] }
+})
 
-const emits = defineEmits(["legendItemClick", "update:items"]);
+const emits = defineEmits(['legendItemClick', 'update:items'])
 
-const elRef = ref();
+const elRef = ref()
 
 onMounted(() => {
-  const selector = `.${BulletLegend.selectors.item}`;
+  const selector = `.${BulletLegend.selectors.item}`
   nextTick(() => {
-    const elements = elRef.value?.querySelectorAll(selector);
-    const classes = buttonVariants({ variant: "ghost", size: "xs" }).split(" ");
+    const elements = elRef.value?.querySelectorAll(selector)
+    const classes = buttonVariants({ variant: 'ghost', size: 'xs' }).split(' ')
 
-    elements?.forEach((el) =>
-      el.classList.add(...classes, "!inline-flex", "!mr-2"),
-    );
-  });
-});
+    elements?.forEach((el) => el.classList.add(...classes, '!inline-flex', '!mr-2'))
+  })
+})
 
 function onLegendItemClick(d, i) {
-  emits("legendItemClick", d, i);
-  const isBulletActive = !props.items[i].inactive;
-  const isFilterApplied = props.items.some((i) => i.inactive);
+  emits('legendItemClick', d, i)
+  const isBulletActive = !props.items[i].inactive
+  const isFilterApplied = props.items.some((i) => i.inactive)
   if (isFilterApplied && isBulletActive) {
     // reset filter
     emits(
-      "update:items",
-      props.items.map((item) => ({ ...item, inactive: false })),
-    );
+      'update:items',
+      props.items.map((item) => ({ ...item, inactive: false }))
+    )
   } else {
     // apply selection, set other item as inactive
     emits(
-      "update:items",
+      'update:items',
       props.items.map((item) =>
-        item.name === d.name
-          ? { ...d, inactive: false }
-          : { ...item, inactive: true },
-      ),
-    );
+        item.name === d.name ? { ...d, inactive: false } : { ...item, inactive: true }
+      )
+    )
   }
 }
 </script>
diff --git a/frontend/src/components/ui/chart/ChartSingleTooltip.vue b/frontend/src/components/ui/chart/ChartSingleTooltip.vue
index 7b3fc01..4a461f4 100644
--- a/frontend/src/components/ui/chart/ChartSingleTooltip.vue
+++ b/frontend/src/components/ui/chart/ChartSingleTooltip.vue
@@ -1,52 +1,49 @@
 <script setup>
-import { VisTooltip } from '@unovis/vue';
-import { omit } from '@unovis/ts';
-import { createApp } from 'vue';
-import { ChartTooltip } from '.';
+import { VisTooltip } from '@unovis/vue'
+import { omit } from '@unovis/ts'
+import { createApp } from 'vue'
+import { ChartTooltip } from '.'
 
 const props = defineProps({
-    selector: { type: String, required: true },
-    index: { type: String, required: true },
-    items: { type: Array, required: false },
-    valueFormatter: { type: Function, required: false, default: (tick) => `${tick}` },
-    customTooltip: { type: null, required: false }
-  }
-);
+  selector: { type: String, required: true },
+  index: { type: String, required: true },
+  items: { type: Array, required: false },
+  valueFormatter: { type: Function, required: false, default: (tick) => `${tick}` },
+  customTooltip: { type: null, required: false }
+})
 
 // Use weakmap to store reference to each datapoint for Tooltip
-const wm = new WeakMap();
+const wm = new WeakMap()
 function template(d, i, elements) {
   if (props.index in d) {
     if (wm.has(d)) {
-      return wm.get(d);
-    } else
-    {
-      const componentDiv = document.createElement('div');
+      return wm.get(d)
+    } else {
+      const componentDiv = document.createElement('div')
       const omittedData = Object.entries(omit(d, [props.index])).map(([key, value]) => {
-        const legendReference = props.items?.find((i) => i.name === key);
-        return { ...legendReference, value: props.valueFormatter(value) };
-      });
-      const TooltipComponent = props.customTooltip ?? ChartTooltip;
-      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv);
-      wm.set(d, componentDiv.innerHTML);
-      return componentDiv.innerHTML;
+        const legendReference = props.items?.find((i) => i.name === key)
+        return { ...legendReference, value: props.valueFormatter(value) }
+      })
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
     }
-  }
-  else
-  {
-    const data = d.data;
+  } else {
+    const data = d.data
 
     if (wm.has(data)) {
-      return wm.get(data);
-    } else
-    {
-      const style = getComputedStyle(elements[i]);
-      const omittedData = [{ name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }];
-      const componentDiv = document.createElement('div');
-      const TooltipComponent = props.customTooltip ?? ChartTooltip;
-      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv);
-      wm.set(d, componentDiv.innerHTML);
-      return componentDiv.innerHTML;
+      return wm.get(data)
+    } else {
+      const style = getComputedStyle(elements[i])
+      const omittedData = [
+        { name: data.name, value: props.valueFormatter(data[props.index]), color: style.fill }
+      ]
+      const componentDiv = document.createElement('div')
+      const TooltipComponent = props.customTooltip ?? ChartTooltip
+      createApp(TooltipComponent, { title: d[props.index], data: omittedData }).mount(componentDiv)
+      wm.set(d, componentDiv.innerHTML)
+      return componentDiv.innerHTML
     }
   }
 }
@@ -57,7 +54,7 @@ function template(d, i, elements) {
     :horizontal-shift="20"
     :vertical-shift="20"
     :triggers="{
-      [selector]: template,
+      [selector]: template
     }"
   />
 </template>
diff --git a/frontend/src/components/ui/chart/ChartTooltip.vue b/frontend/src/components/ui/chart/ChartTooltip.vue
index 288aca3..7366b8f 100644
--- a/frontend/src/components/ui/chart/ChartTooltip.vue
+++ b/frontend/src/components/ui/chart/ChartTooltip.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card'
 
 defineProps({
   title: { type: String, required: false },
-  data: { type: Array, required: true },
-});
+  data: { type: Array, required: true }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/chart/index.js b/frontend/src/components/ui/chart/index.js
index cc10d78..61dafc1 100644
--- a/frontend/src/components/ui/chart/index.js
+++ b/frontend/src/components/ui/chart/index.js
@@ -1,23 +1,22 @@
-export { default as ChartTooltip } from "./ChartTooltip.vue";
-export { default as ChartSingleTooltip } from "./ChartSingleTooltip.vue";
-export { default as ChartLegend } from "./ChartLegend.vue";
-export { default as ChartCrosshair } from "./ChartCrosshair.vue";
+export { default as ChartTooltip } from './ChartTooltip.vue'
+export { default as ChartSingleTooltip } from './ChartSingleTooltip.vue'
+export { default as ChartLegend } from './ChartLegend.vue'
+export { default as ChartCrosshair } from './ChartCrosshair.vue'
 
 export function defaultColors(count = 3) {
-  const quotient = Math.floor(count / 2);
-  const remainder = count % 2;
+  const quotient = Math.floor(count / 2)
+  const remainder = count % 2
 
-  const primaryCount = quotient + remainder;
-  const secondaryCount = quotient;
+  const primaryCount = quotient + remainder
+  const secondaryCount = quotient
   return [
     ...Array.from(Array(primaryCount).keys()).map(
-      (i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`,
+      (i) => `hsl(var(--vis-primary-color) / ${1 - (1 / primaryCount) * i})`
     ),
     ...Array.from(Array(secondaryCount).keys()).map(
-      (i) =>
-        `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`,
-    ),
-  ];
+      (i) => `hsl(var(--vis-secondary-color) / ${1 - (1 / secondaryCount) * i})`
+    )
+  ]
 }
 
-export * from "./interface";
+export * from './interface'
diff --git a/frontend/src/components/ui/chart/interface.js b/frontend/src/components/ui/chart/interface.js
index cb0ff5c..336ce12 100644
--- a/frontend/src/components/ui/chart/interface.js
+++ b/frontend/src/components/ui/chart/interface.js
@@ -1 +1 @@
-export {};
+export {}
diff --git a/frontend/src/components/ui/checkbox/Checkbox.vue b/frontend/src/components/ui/checkbox/Checkbox.vue
index d63f12e..a201797 100644
--- a/frontend/src/components/ui/checkbox/Checkbox.vue
+++ b/frontend/src/components/ui/checkbox/Checkbox.vue
@@ -1,12 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import {
-  CheckboxIndicator,
-  CheckboxRoot,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { CheckIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { CheckboxIndicator, CheckboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   defaultChecked: { type: Boolean, required: false },
@@ -18,17 +14,17 @@ const props = defineProps({
   id: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["update:checked"]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['update:checked'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -37,13 +33,11 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     :class="
       cn(
         'peer h-4 w-4 shrink-0 rounded-sm border border-primary shadow focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=checked]:text-primary-foreground',
-        props.class,
+        props.class
       )
     "
   >
-    <CheckboxIndicator
-      class="flex h-full w-full items-center justify-center text-current"
-    >
+    <CheckboxIndicator class="flex h-full w-full items-center justify-center text-current">
       <slot>
         <CheckIcon class="h-4 w-4" />
       </slot>
diff --git a/frontend/src/components/ui/checkbox/index.js b/frontend/src/components/ui/checkbox/index.js
index 75be342..8c28c28 100644
--- a/frontend/src/components/ui/checkbox/index.js
+++ b/frontend/src/components/ui/checkbox/index.js
@@ -1 +1 @@
-export { default as Checkbox } from "./Checkbox.vue";
+export { default as Checkbox } from './Checkbox.vue'
diff --git a/frontend/src/components/ui/command/Command.vue b/frontend/src/components/ui/command/Command.vue
index d8a3fa2..2c81f4c 100644
--- a/frontend/src/components/ui/command/Command.vue
+++ b/frontend/src/components/ui/command/Command.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { computed } from "vue";
-import { ComboboxRoot, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ComboboxRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  modelValue: { type: null, required: false, default: "" },
+  modelValue: { type: null, required: false, default: '' },
   defaultValue: { type: null, required: false },
   open: { type: Boolean, required: false, default: true },
   defaultOpen: { type: Boolean, required: false },
@@ -18,22 +18,18 @@ const props = defineProps({
   resetSearchTermOnBlur: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const emits = defineEmits([
-  "update:modelValue",
-  "update:open",
-  "update:searchTerm",
-]);
+const emits = defineEmits(['update:modelValue', 'update:open', 'update:searchTerm'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/command/CommandDialog.vue b/frontend/src/components/ui/command/CommandDialog.vue
index 61eeb89..f4e9429 100644
--- a/frontend/src/components/ui/command/CommandDialog.vue
+++ b/frontend/src/components/ui/command/CommandDialog.vue
@@ -1,16 +1,16 @@
 <script setup>
-import { useForwardPropsEmits } from "radix-vue";
-import Command from "./Command.vue";
-import { Dialog, DialogContent } from "@/components/ui/dialog";
+import { useForwardPropsEmits } from 'radix-vue'
+import Command from './Command.vue'
+import { Dialog, DialogContent } from '@/components/ui/dialog'
 
 const props = defineProps({
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  modal: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/command/CommandEmpty.vue b/frontend/src/components/ui/command/CommandEmpty.vue
index b27c110..08efd11 100644
--- a/frontend/src/components/ui/command/CommandEmpty.vue
+++ b/frontend/src/components/ui/command/CommandEmpty.vue
@@ -1,26 +1,23 @@
 <script setup>
-import { computed } from "vue";
-import { ComboboxEmpty } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ComboboxEmpty } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-  <ComboboxEmpty
-    v-bind="delegatedProps"
-    :class="cn('py-6 text-center text-sm', props.class)"
-  >
+  <ComboboxEmpty v-bind="delegatedProps" :class="cn('py-6 text-center text-sm', props.class)">
     <slot />
   </ComboboxEmpty>
 </template>
diff --git a/frontend/src/components/ui/command/CommandGroup.vue b/frontend/src/components/ui/command/CommandGroup.vue
index cd0baa8..af6731d 100644
--- a/frontend/src/components/ui/command/CommandGroup.vue
+++ b/frontend/src/components/ui/command/CommandGroup.vue
@@ -1,20 +1,20 @@
 <script setup>
-import { computed } from "vue";
-import { ComboboxGroup, ComboboxLabel } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ComboboxGroup, ComboboxLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  heading: { type: String, required: false },
-});
+  heading: { type: String, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
@@ -27,10 +27,7 @@ const delegatedProps = computed(() => {
       )
     "
   >
-    <ComboboxLabel
-      v-if="heading"
-      class="px-2 py-1.5 text-xs font-medium text-muted-foreground"
-    >
+    <ComboboxLabel v-if="heading" class="px-2 py-1.5 text-xs font-medium text-muted-foreground">
       {{ heading }}
     </ComboboxLabel>
     <slot />
diff --git a/frontend/src/components/ui/command/CommandInput.vue b/frontend/src/components/ui/command/CommandInput.vue
index b8e4ea7..0ff8418 100644
--- a/frontend/src/components/ui/command/CommandInput.vue
+++ b/frontend/src/components/ui/command/CommandInput.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { computed } from "vue";
-import { MagnifyingGlassIcon } from "@radix-icons/vue";
-import { ComboboxInput, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { MagnifyingGlassIcon } from '@radix-icons/vue'
+import { ComboboxInput, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 defineOptions({
-  inheritAttrs: false,
-});
+  inheritAttrs: false
+})
 
 const props = defineProps({
   type: { type: String, required: false },
@@ -14,16 +14,16 @@ const props = defineProps({
   autoFocus: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/command/CommandItem.vue b/frontend/src/components/ui/command/CommandItem.vue
index 7dabf37..1c3e19d 100644
--- a/frontend/src/components/ui/command/CommandItem.vue
+++ b/frontend/src/components/ui/command/CommandItem.vue
@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { ComboboxItem, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ComboboxItem, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   value: { type: null, required: true },
   disabled: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["select"]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['select'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/command/CommandList.vue b/frontend/src/components/ui/command/CommandList.vue
index fe8728b..314282f 100644
--- a/frontend/src/components/ui/command/CommandList.vue
+++ b/frontend/src/components/ui/command/CommandList.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { ComboboxContent, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ComboboxContent, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
@@ -23,22 +23,22 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   disableOutsidePointerEvents: { type: Boolean, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/command/CommandSeparator.vue b/frontend/src/components/ui/command/CommandSeparator.vue
index f96ea0f..ce9f9c7 100644
--- a/frontend/src/components/ui/command/CommandSeparator.vue
+++ b/frontend/src/components/ui/command/CommandSeparator.vue
@@ -1,26 +1,23 @@
 <script setup>
-import { computed } from "vue";
-import { ComboboxSeparator } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ComboboxSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-  <ComboboxSeparator
-    v-bind="delegatedProps"
-    :class="cn('-mx-1 h-px bg-border', props.class)"
-  >
+  <ComboboxSeparator v-bind="delegatedProps" :class="cn('-mx-1 h-px bg-border', props.class)">
     <slot />
   </ComboboxSeparator>
 </template>
diff --git a/frontend/src/components/ui/command/CommandShortcut.vue b/frontend/src/components/ui/command/CommandShortcut.vue
index 6301f1a..481bd2c 100644
--- a/frontend/src/components/ui/command/CommandShortcut.vue
+++ b/frontend/src/components/ui/command/CommandShortcut.vue
@@ -1,17 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <span
-    :class="
-      cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)
-    "
-  >
+  <span :class="cn('ml-auto text-xs tracking-widest text-muted-foreground', props.class)">
     <slot />
   </span>
 </template>
diff --git a/frontend/src/components/ui/command/index.js b/frontend/src/components/ui/command/index.js
index 2f33b76..0e35f4b 100644
--- a/frontend/src/components/ui/command/index.js
+++ b/frontend/src/components/ui/command/index.js
@@ -1,9 +1,9 @@
-export { default as Command } from "./Command.vue";
-export { default as CommandDialog } from "./CommandDialog.vue";
-export { default as CommandEmpty } from "./CommandEmpty.vue";
-export { default as CommandGroup } from "./CommandGroup.vue";
-export { default as CommandInput } from "./CommandInput.vue";
-export { default as CommandItem } from "./CommandItem.vue";
-export { default as CommandList } from "./CommandList.vue";
-export { default as CommandSeparator } from "./CommandSeparator.vue";
-export { default as CommandShortcut } from "./CommandShortcut.vue";
+export { default as Command } from './Command.vue'
+export { default as CommandDialog } from './CommandDialog.vue'
+export { default as CommandEmpty } from './CommandEmpty.vue'
+export { default as CommandGroup } from './CommandGroup.vue'
+export { default as CommandInput } from './CommandInput.vue'
+export { default as CommandItem } from './CommandItem.vue'
+export { default as CommandList } from './CommandList.vue'
+export { default as CommandSeparator } from './CommandSeparator.vue'
+export { default as CommandShortcut } from './CommandShortcut.vue'
diff --git a/frontend/src/components/ui/dialog/Dialog.vue b/frontend/src/components/ui/dialog/Dialog.vue
index 53e2911..1cce970 100644
--- a/frontend/src/components/ui/dialog/Dialog.vue
+++ b/frontend/src/components/ui/dialog/Dialog.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { DialogRoot, useForwardPropsEmits } from "radix-vue";
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  modal: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dialog/DialogClose.vue b/frontend/src/components/ui/dialog/DialogClose.vue
index c6120c8..15a475e 100644
--- a/frontend/src/components/ui/dialog/DialogClose.vue
+++ b/frontend/src/components/ui/dialog/DialogClose.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DialogClose } from "radix-vue";
+import { DialogClose } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dialog/DialogContent.vue b/frontend/src/components/ui/dialog/DialogContent.vue
index 332a663..0587472 100644
--- a/frontend/src/components/ui/dialog/DialogContent.vue
+++ b/frontend/src/components/ui/dialog/DialogContent.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { computed } from "vue";
+import { computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { Cross2Icon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+  useForwardPropsEmits
+} from 'radix-vue'
+import { Cross2Icon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
@@ -16,24 +16,24 @@ const props = defineProps({
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'openAutoFocus',
+  'closeAutoFocus'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -46,7 +46,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       :class="
         cn(
           'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
-          props.class,
+          props.class
         )
       "
     >
diff --git a/frontend/src/components/ui/dialog/DialogDescription.vue b/frontend/src/components/ui/dialog/DialogDescription.vue
index 012ae0e..f9d4e82 100644
--- a/frontend/src/components/ui/dialog/DialogDescription.vue
+++ b/frontend/src/components/ui/dialog/DialogDescription.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { DialogDescription, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DialogDescription, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dialog/DialogFooter.vue b/frontend/src/components/ui/dialog/DialogFooter.vue
index f623c10..8b69675 100644
--- a/frontend/src/components/ui/dialog/DialogFooter.vue
+++ b/frontend/src/components/ui/dialog/DialogFooter.vue
@@ -1,20 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
+  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/dialog/DialogHeader.vue b/frontend/src/components/ui/dialog/DialogHeader.vue
index e745386..02c5b1f 100644
--- a/frontend/src/components/ui/dialog/DialogHeader.vue
+++ b/frontend/src/components/ui/dialog/DialogHeader.vue
@@ -1,15 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <div
-    :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)"
-  >
+  <div :class="cn('flex flex-col gap-y-1.5 text-center sm:text-left', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/dialog/DialogScrollContent.vue b/frontend/src/components/ui/dialog/DialogScrollContent.vue
index 1b9b18f..ca8e66a 100644
--- a/frontend/src/components/ui/dialog/DialogScrollContent.vue
+++ b/frontend/src/components/ui/dialog/DialogScrollContent.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { computed } from "vue";
+import { computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
+  useForwardPropsEmits
+} from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
@@ -15,24 +15,24 @@ const props = defineProps({
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'openAutoFocus',
+  'closeAutoFocus'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -42,20 +42,21 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     >
       <DialogContent
         :class="
-cn(
-  'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
-  props.class
-)"
+          cn(
+            'relative z-50 grid w-full max-w-lg my-8 gap-4 border border-border bg-background p-6 shadow-lg duration-200 sm:rounded-lg md:w-full',
+            props.class
+          )
+        "
         v-bind="forwarded"
         @pointer-down-outside="
           (event) => {
-            const originalEvent = event.detail.originalEvent;
-            const target = originalEvent.target;
+            const originalEvent = event.detail.originalEvent
+            const target = originalEvent.target
             if (
               originalEvent.offsetX > target.clientWidth ||
               originalEvent.offsetY > target.clientHeight
             ) {
-              event.preventDefault();
+              event.preventDefault()
             }
           }
         "
diff --git a/frontend/src/components/ui/dialog/DialogTitle.vue b/frontend/src/components/ui/dialog/DialogTitle.vue
index 5679a3a..bc242d6 100644
--- a/frontend/src/components/ui/dialog/DialogTitle.vue
+++ b/frontend/src/components/ui/dialog/DialogTitle.vue
@@ -1,29 +1,27 @@
 <script setup>
-import { computed } from "vue";
-import { DialogTitle, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DialogTitle, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DialogTitle
     v-bind="forwardedProps"
-    :class="
-      cn('text-lg font-semibold leading-none tracking-tight', props.class)
-    "
+    :class="cn('text-lg font-semibold leading-none tracking-tight', props.class)"
   >
     <slot />
   </DialogTitle>
diff --git a/frontend/src/components/ui/dialog/DialogTrigger.vue b/frontend/src/components/ui/dialog/DialogTrigger.vue
index 4878e62..ccb596c 100644
--- a/frontend/src/components/ui/dialog/DialogTrigger.vue
+++ b/frontend/src/components/ui/dialog/DialogTrigger.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DialogTrigger } from "radix-vue";
+import { DialogTrigger } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dialog/index.js b/frontend/src/components/ui/dialog/index.js
index b92d799..847e999 100644
--- a/frontend/src/components/ui/dialog/index.js
+++ b/frontend/src/components/ui/dialog/index.js
@@ -1,9 +1,9 @@
-export { default as Dialog } from "./Dialog.vue";
-export { default as DialogClose } from "./DialogClose.vue";
-export { default as DialogTrigger } from "./DialogTrigger.vue";
-export { default as DialogHeader } from "./DialogHeader.vue";
-export { default as DialogTitle } from "./DialogTitle.vue";
-export { default as DialogDescription } from "./DialogDescription.vue";
-export { default as DialogContent } from "./DialogContent.vue";
-export { default as DialogScrollContent } from "./DialogScrollContent.vue";
-export { default as DialogFooter } from "./DialogFooter.vue";
+export { default as Dialog } from './Dialog.vue'
+export { default as DialogClose } from './DialogClose.vue'
+export { default as DialogTrigger } from './DialogTrigger.vue'
+export { default as DialogHeader } from './DialogHeader.vue'
+export { default as DialogTitle } from './DialogTitle.vue'
+export { default as DialogDescription } from './DialogDescription.vue'
+export { default as DialogContent } from './DialogContent.vue'
+export { default as DialogScrollContent } from './DialogScrollContent.vue'
+export { default as DialogFooter } from './DialogFooter.vue'
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenu.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenu.vue
index 9004afd..5deaae3 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenu.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenu.vue
@@ -1,15 +1,15 @@
 <script setup>
-import { DropdownMenuRoot, useForwardPropsEmits } from "radix-vue";
+import { DropdownMenuRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
   dir: { type: String, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  modal: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
index 674f045..ab7d515 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuCheckboxItem.vue
@@ -1,12 +1,12 @@
 <script setup>
-import { computed } from "vue";
+import { computed } from 'vue'
 import {
   DropdownMenuCheckboxItem,
   DropdownMenuItemIndicator,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { CheckIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+  useForwardPropsEmits
+} from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   checked: { type: [Boolean, String], required: false },
@@ -14,17 +14,17 @@ const props = defineProps({
   textValue: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["select", "update:checked"]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['select', 'update:checked'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -33,7 +33,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     :class="
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue
index f090e8e..664441e 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuContent.vue
@@ -1,11 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import {
-  DropdownMenuContent,
-  DropdownMenuPortal,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DropdownMenuContent, DropdownMenuPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
@@ -24,23 +20,23 @@ const props = defineProps({
   prioritizePosition: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "closeAutoFocus",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'closeAutoFocus'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -50,7 +46,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       :class="
         cn(
           'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class,
+          props.class
         )
       "
     >
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuGroup.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
index 7f6e887..ebd7f61 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuGroup.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DropdownMenuGroup } from "radix-vue";
+import { DropdownMenuGroup } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue
index 3b0f027..d04fc0e 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuItem.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { DropdownMenuItem, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DropdownMenuItem, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   disabled: { type: Boolean, required: false },
@@ -9,16 +9,16 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  inset: { type: Boolean, required: false },
-});
+  inset: { type: Boolean, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -28,7 +28,7 @@ const forwardedProps = useForwardProps(delegatedProps);
       cn(
         'cursor-pointer relative flex select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
         inset && 'pl-8',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuLabel.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
index 9f66f42..ded3e7a 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuLabel.vue
@@ -1,30 +1,28 @@
 <script setup>
-import { computed } from "vue";
-import { DropdownMenuLabel, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DropdownMenuLabel, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  inset: { type: Boolean, required: false },
-});
+  inset: { type: Boolean, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <DropdownMenuLabel
     v-bind="forwardedProps"
-    :class="
-      cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)
-    "
+    :class="cn('px-2 py-1.5 text-sm font-semibold', inset && 'pl-8', props.class)"
   >
     <slot />
   </DropdownMenuLabel>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
index 5426e90..6791c8c 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioGroup.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { DropdownMenuRadioGroup, useForwardPropsEmits } from "radix-vue";
+import { DropdownMenuRadioGroup, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   modelValue: { type: String, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
+  as: { type: null, required: false }
+})
+const emits = defineEmits(['update:modelValue'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
index d049957..1582fba 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuRadioItem.vue
@@ -1,12 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import {
-  DropdownMenuItemIndicator,
-  DropdownMenuRadioItem,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { DotFilledIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DropdownMenuItemIndicator, DropdownMenuRadioItem, useForwardPropsEmits } from 'radix-vue'
+import { DotFilledIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   value: { type: String, required: true },
@@ -14,18 +10,18 @@ const props = defineProps({
   textValue: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const emits = defineEmits(["select"]);
+const emits = defineEmits(['select'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -34,7 +30,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     :class="
       cn(
         'relative flex cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none transition-colors focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
index ce5e1c5..c30fe69 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSeparator.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from "vue";
-import { DropdownMenuSeparator } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DropdownMenuSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
index b4ee962..e2a3a64 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuShortcut.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSub.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSub.vue
index 5f8cb56..754b690 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuSub.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSub.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { DropdownMenuSub, useForwardPropsEmits } from "radix-vue";
+import { DropdownMenuSub, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
-  open: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  open: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
index 7ee36d6..160a958 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubContent.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { DropdownMenuSubContent, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DropdownMenuSubContent, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
@@ -18,25 +18,25 @@ const props = defineProps({
   prioritizePosition: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "entryFocus",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'entryFocus',
+  'openAutoFocus',
+  'closeAutoFocus'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -45,7 +45,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     :class="
       cn(
         'z-50 min-w-32 overflow-hidden rounded-md border bg-popover p-1 text-popover-foreground shadow-lg data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
index f930e10..d437f05 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuSubTrigger.vue
@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { DropdownMenuSubTrigger, useForwardProps } from "radix-vue";
-import { ChevronRightIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DropdownMenuSubTrigger, useForwardProps } from 'radix-vue'
+import { ChevronRightIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   textValue: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -27,7 +27,7 @@ const forwardedProps = useForwardProps(delegatedProps);
     :class="
       cn(
         'flex cursor-default select-none items-center rounded-sm px-2 py-1.5 text-sm outline-none focus:bg-accent data-[state=open]:bg-accent',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue b/frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
index e0e098a..1434fa8 100644
--- a/frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
+++ b/frontend/src/components/ui/dropdown-menu/DropdownMenuTrigger.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { DropdownMenuTrigger, useForwardProps } from "radix-vue";
+import { DropdownMenuTrigger, useForwardProps } from 'radix-vue'
 
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 
-const forwardedProps = useForwardProps(props);
+const forwardedProps = useForwardProps(props)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/dropdown-menu/index.js b/frontend/src/components/ui/dropdown-menu/index.js
index 84f7c3a..6f9446c 100644
--- a/frontend/src/components/ui/dropdown-menu/index.js
+++ b/frontend/src/components/ui/dropdown-menu/index.js
@@ -1,16 +1,16 @@
-export { DropdownMenuPortal } from "radix-vue";
+export { DropdownMenuPortal } from 'radix-vue'
 
-export { default as DropdownMenu } from "./DropdownMenu.vue";
-export { default as DropdownMenuTrigger } from "./DropdownMenuTrigger.vue";
-export { default as DropdownMenuContent } from "./DropdownMenuContent.vue";
-export { default as DropdownMenuGroup } from "./DropdownMenuGroup.vue";
-export { default as DropdownMenuRadioGroup } from "./DropdownMenuRadioGroup.vue";
-export { default as DropdownMenuItem } from "./DropdownMenuItem.vue";
-export { default as DropdownMenuCheckboxItem } from "./DropdownMenuCheckboxItem.vue";
-export { default as DropdownMenuRadioItem } from "./DropdownMenuRadioItem.vue";
-export { default as DropdownMenuShortcut } from "./DropdownMenuShortcut.vue";
-export { default as DropdownMenuSeparator } from "./DropdownMenuSeparator.vue";
-export { default as DropdownMenuLabel } from "./DropdownMenuLabel.vue";
-export { default as DropdownMenuSub } from "./DropdownMenuSub.vue";
-export { default as DropdownMenuSubTrigger } from "./DropdownMenuSubTrigger.vue";
-export { default as DropdownMenuSubContent } from "./DropdownMenuSubContent.vue";
+export { default as DropdownMenu } from './DropdownMenu.vue'
+export { default as DropdownMenuTrigger } from './DropdownMenuTrigger.vue'
+export { default as DropdownMenuContent } from './DropdownMenuContent.vue'
+export { default as DropdownMenuGroup } from './DropdownMenuGroup.vue'
+export { default as DropdownMenuRadioGroup } from './DropdownMenuRadioGroup.vue'
+export { default as DropdownMenuItem } from './DropdownMenuItem.vue'
+export { default as DropdownMenuCheckboxItem } from './DropdownMenuCheckboxItem.vue'
+export { default as DropdownMenuRadioItem } from './DropdownMenuRadioItem.vue'
+export { default as DropdownMenuShortcut } from './DropdownMenuShortcut.vue'
+export { default as DropdownMenuSeparator } from './DropdownMenuSeparator.vue'
+export { default as DropdownMenuLabel } from './DropdownMenuLabel.vue'
+export { default as DropdownMenuSub } from './DropdownMenuSub.vue'
+export { default as DropdownMenuSubTrigger } from './DropdownMenuSubTrigger.vue'
+export { default as DropdownMenuSubContent } from './DropdownMenuSubContent.vue'
diff --git a/frontend/src/components/ui/error/Error.vue b/frontend/src/components/ui/error/Error.vue
index bb6e0da..82f3e50 100644
--- a/frontend/src/components/ui/error/Error.vue
+++ b/frontend/src/components/ui/error/Error.vue
@@ -1,19 +1,19 @@
 <script setup lang="ts">
-import { TriangleAlert } from 'lucide-vue-next';
+import { TriangleAlert } from 'lucide-vue-next'
 import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert'
 
 defineProps({
-    errorMessage: String,
-    border: Boolean
-});
+  errorMessage: String,
+  border: Boolean
+})
 </script>
 
 <template>
-  <Alert variant="destructive" v-if="errorMessage" :class="{'border-0': !border}">
+  <Alert variant="destructive" v-if="errorMessage" :class="{ 'border-0': !border }">
     <TriangleAlert class="w-4 h-4" />
     <AlertTitle>Error</AlertTitle>
     <AlertDescription>
       {{ errorMessage }}
     </AlertDescription>
   </Alert>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/src/components/ui/error/index.js b/frontend/src/components/ui/error/index.js
index e165197..759a6f9 100644
--- a/frontend/src/components/ui/error/index.js
+++ b/frontend/src/components/ui/error/index.js
@@ -1 +1 @@
-export { default as Error } from "./Error.vue";
\ No newline at end of file
+export { default as Error } from './Error.vue'
diff --git a/frontend/src/components/ui/form/FormControl.vue b/frontend/src/components/ui/form/FormControl.vue
index 4677e88..0bdd326 100644
--- a/frontend/src/components/ui/form/FormControl.vue
+++ b/frontend/src/components/ui/form/FormControl.vue
@@ -1,16 +1,14 @@
 <script setup>
-import { Slot } from "radix-vue";
-import { useFormField } from "./useFormField";
+import { Slot } from 'radix-vue'
+import { useFormField } from './useFormField'
 
-const { error, formItemId, formDescriptionId, formMessageId } = useFormField();
+const { error, formItemId, formDescriptionId, formMessageId } = useFormField()
 </script>
 
 <template>
   <Slot
     :id="formItemId"
-    :aria-describedby="
-      !error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`
-    "
+    :aria-describedby="!error ? `${formDescriptionId}` : `${formDescriptionId} ${formMessageId}`"
     :aria-invalid="!!error"
   >
     <slot />
diff --git a/frontend/src/components/ui/form/FormDescription.vue b/frontend/src/components/ui/form/FormDescription.vue
index 757a06a..8d6ecd3 100644
--- a/frontend/src/components/ui/form/FormDescription.vue
+++ b/frontend/src/components/ui/form/FormDescription.vue
@@ -1,19 +1,16 @@
 <script setup>
-import { useFormField } from "./useFormField";
-import { cn } from "@/lib/utils";
+import { useFormField } from './useFormField'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const { formDescriptionId } = useFormField();
+const { formDescriptionId } = useFormField()
 </script>
 
 <template>
-  <p
-    :id="formDescriptionId"
-    :class="cn('text-sm text-muted-foreground', props.class)"
-  >
+  <p :id="formDescriptionId" :class="cn('text-sm text-muted-foreground', props.class)">
     <slot />
   </p>
 </template>
diff --git a/frontend/src/components/ui/form/FormItem.vue b/frontend/src/components/ui/form/FormItem.vue
index 31b4a5b..c10c350 100644
--- a/frontend/src/components/ui/form/FormItem.vue
+++ b/frontend/src/components/ui/form/FormItem.vue
@@ -1,15 +1,15 @@
 <script setup>
-import { provide } from "vue";
-import { useId } from "radix-vue";
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
-import { cn } from "@/lib/utils";
+import { provide } from 'vue'
+import { useId } from 'radix-vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const id = useId();
-provide(FORM_ITEM_INJECTION_KEY, id);
+const id = useId()
+provide(FORM_ITEM_INJECTION_KEY, id)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/form/FormLabel.vue b/frontend/src/components/ui/form/FormLabel.vue
index 860fad3..88b0fd3 100644
--- a/frontend/src/components/ui/form/FormLabel.vue
+++ b/frontend/src/components/ui/form/FormLabel.vue
@@ -1,23 +1,20 @@
 <script setup>
-import { useFormField } from "./useFormField";
-import { cn } from "@/lib/utils";
-import { Label } from "@/components/ui/label";
+import { useFormField } from './useFormField'
+import { cn } from '@/lib/utils'
+import { Label } from '@/components/ui/label'
 
 const props = defineProps({
   for: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const { error, formItemId } = useFormField();
+const { error, formItemId } = useFormField()
 </script>
 
 <template>
-  <Label
-    :class="cn(error && 'text-destructive', props.class)"
-    :for="formItemId"
-  >
+  <Label :class="cn(error && 'text-destructive', props.class)" :for="formItemId">
     <slot />
   </Label>
 </template>
diff --git a/frontend/src/components/ui/form/FormMessage.vue b/frontend/src/components/ui/form/FormMessage.vue
index 4294cf0..cecfe23 100644
--- a/frontend/src/components/ui/form/FormMessage.vue
+++ b/frontend/src/components/ui/form/FormMessage.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { ErrorMessage } from "vee-validate";
-import { toValue } from "vue";
-import { useFormField } from "./useFormField";
+import { ErrorMessage } from 'vee-validate'
+import { toValue } from 'vue'
+import { useFormField } from './useFormField'
 
-const { name, formMessageId } = useFormField();
+const { name, formMessageId } = useFormField()
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/form/index.js b/frontend/src/components/ui/form/index.js
index 63d6c77..00053cf 100644
--- a/frontend/src/components/ui/form/index.js
+++ b/frontend/src/components/ui/form/index.js
@@ -1,11 +1,7 @@
-export {
-  Form,
-  Field as FormField,
-  FieldArray as FormFieldArray,
-} from "vee-validate";
-export { default as FormItem } from "./FormItem.vue";
-export { default as FormLabel } from "./FormLabel.vue";
-export { default as FormControl } from "./FormControl.vue";
-export { default as FormMessage } from "./FormMessage.vue";
-export { default as FormDescription } from "./FormDescription.vue";
-export { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
+export { Form, Field as FormField, FieldArray as FormFieldArray } from 'vee-validate'
+export { default as FormItem } from './FormItem.vue'
+export { default as FormLabel } from './FormLabel.vue'
+export { default as FormControl } from './FormControl.vue'
+export { default as FormMessage } from './FormMessage.vue'
+export { default as FormDescription } from './FormDescription.vue'
+export { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
diff --git a/frontend/src/components/ui/form/injectionKeys.js b/frontend/src/components/ui/form/injectionKeys.js
index 533eabd..1452cfc 100644
--- a/frontend/src/components/ui/form/injectionKeys.js
+++ b/frontend/src/components/ui/form/injectionKeys.js
@@ -1 +1 @@
-export const FORM_ITEM_INJECTION_KEY = Symbol();
+export const FORM_ITEM_INJECTION_KEY = Symbol()
diff --git a/frontend/src/components/ui/form/useFormField.js b/frontend/src/components/ui/form/useFormField.js
index f17b0b4..5335ed5 100644
--- a/frontend/src/components/ui/form/useFormField.js
+++ b/frontend/src/components/ui/form/useFormField.js
@@ -3,27 +3,26 @@ import {
   useFieldError,
   useIsFieldDirty,
   useIsFieldTouched,
-  useIsFieldValid,
-} from "vee-validate";
-import { inject } from "vue";
-import { FORM_ITEM_INJECTION_KEY } from "./injectionKeys";
+  useIsFieldValid
+} from 'vee-validate'
+import { inject } from 'vue'
+import { FORM_ITEM_INJECTION_KEY } from './injectionKeys'
 
 export function useFormField() {
-  const fieldContext = inject(FieldContextKey);
-  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY);
+  const fieldContext = inject(FieldContextKey)
+  const fieldItemContext = inject(FORM_ITEM_INJECTION_KEY)
 
-  if (!fieldContext)
-    throw new Error("useFormField should be used within <FormField>");
+  if (!fieldContext) throw new Error('useFormField should be used within <FormField>')
 
-  const { name } = fieldContext;
-  const id = fieldItemContext;
+  const { name } = fieldContext
+  const id = fieldItemContext
 
   const fieldState = {
     valid: useIsFieldValid(name),
     isDirty: useIsFieldDirty(name),
     isTouched: useIsFieldTouched(name),
-    error: useFieldError(name),
-  };
+    error: useFieldError(name)
+  }
 
   return {
     id,
@@ -31,6 +30,6 @@ export function useFormField() {
     formItemId: `${id}-form-item`,
     formDescriptionId: `${id}-form-item-description`,
     formMessageId: `${id}-form-item-message`,
-    ...fieldState,
-  };
+    ...fieldState
+  }
 }
diff --git a/frontend/src/components/ui/input/Input.vue b/frontend/src/components/ui/input/Input.vue
index fa84341..9c8555b 100644
--- a/frontend/src/components/ui/input/Input.vue
+++ b/frontend/src/components/ui/input/Input.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { useVModel } from "@vueuse/core";
-import { cn } from "@/lib/utils";
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   defaultValue: { type: [String, Number], required: false },
   modelValue: { type: [String, Number], required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue'])
 
-const modelValue = useVModel(props, "modelValue", emits, {
+const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
-  defaultValue: props.defaultValue,
-});
+  defaultValue: props.defaultValue
+})
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
     :class="
       cn(
         'flex h-9 w-full rounded-md border border-input bg-transparent px-3 py-1 text-sm shadow-sm transition-colors file:border-0 file:bg-transparent file:text-sm file:font-medium placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
+        props.class
       )
     "
   />
diff --git a/frontend/src/components/ui/input/index.js b/frontend/src/components/ui/input/index.js
index 110f046..a691dd6 100644
--- a/frontend/src/components/ui/input/index.js
+++ b/frontend/src/components/ui/input/index.js
@@ -1 +1 @@
-export { default as Input } from "./Input.vue";
+export { default as Input } from './Input.vue'
diff --git a/frontend/src/components/ui/label/Label.vue b/frontend/src/components/ui/label/Label.vue
index 96333cb..7844895 100644
--- a/frontend/src/components/ui/label/Label.vue
+++ b/frontend/src/components/ui/label/Label.vue
@@ -1,20 +1,20 @@
 <script setup>
-import { computed } from "vue";
-import { Label } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { Label } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   for: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
@@ -23,7 +23,7 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'text-sm font-medium leading-none peer-disabled:cursor-not-allowed peer-disabled:opacity-70',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/label/index.js b/frontend/src/components/ui/label/index.js
index 38eaa35..572c2f0 100644
--- a/frontend/src/components/ui/label/index.js
+++ b/frontend/src/components/ui/label/index.js
@@ -1 +1 @@
-export { default as Label } from "./Label.vue";
+export { default as Label } from './Label.vue'
diff --git a/frontend/src/components/ui/loader/Loader.vue b/frontend/src/components/ui/loader/Loader.vue
index 69dbc11..fe14fe7 100644
--- a/frontend/src/components/ui/loader/Loader.vue
+++ b/frontend/src/components/ui/loader/Loader.vue
@@ -1,7 +1,6 @@
 <script setup lang="ts">
 import { LoaderCircle } from 'lucide-vue-next'
 
-
 defineProps({
   loading: {
     type: Boolean,
@@ -11,11 +10,11 @@ defineProps({
     type: String,
     default: 'Loading'
   }
-});
+})
 </script>
 
 <template>
   <div v-if="loading" class="flex">
     <LoaderCircle class="animate-spin size-6 mr-2" /> {{ text }}
   </div>
-</template>
\ No newline at end of file
+</template>
diff --git a/frontend/src/components/ui/loader/index.js b/frontend/src/components/ui/loader/index.js
index d752d52..fa2140d 100644
--- a/frontend/src/components/ui/loader/index.js
+++ b/frontend/src/components/ui/loader/index.js
@@ -1 +1 @@
-export { default as Loader } from "./Loader.vue";
\ No newline at end of file
+export { default as Loader } from './Loader.vue'
diff --git a/frontend/src/components/ui/popover/Popover.vue b/frontend/src/components/ui/popover/Popover.vue
index d7dd97f..1ada689 100644
--- a/frontend/src/components/ui/popover/Popover.vue
+++ b/frontend/src/components/ui/popover/Popover.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { PopoverRoot, useForwardPropsEmits } from "radix-vue";
+import { PopoverRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
   open: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  modal: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/popover/PopoverContent.vue b/frontend/src/components/ui/popover/PopoverContent.vue
index 5c966ff..e39b410 100644
--- a/frontend/src/components/ui/popover/PopoverContent.vue
+++ b/frontend/src/components/ui/popover/PopoverContent.vue
@@ -1,18 +1,18 @@
 <script setup>
-import { computed } from "vue";
-import { PopoverContent, PopoverPortal, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { PopoverContent, PopoverPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 defineOptions({
-  inheritAttrs: false,
-});
+  inheritAttrs: false
+})
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
   trapFocus: { type: Boolean, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false, default: 4 },
-  align: { type: null, required: false, default: "center" },
+  align: { type: null, required: false, default: 'center' },
   alignOffset: { type: Number, required: false },
   avoidCollisions: { type: Boolean, required: false },
   collisionBoundary: { type: null, required: false },
@@ -25,24 +25,24 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   disableOutsidePointerEvents: { type: Boolean, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'openAutoFocus',
+  'closeAutoFocus'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -52,7 +52,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
       :class="
         cn(
           'z-50 w-72 rounded-md border bg-popover p-4 text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
-          props.class,
+          props.class
         )
       "
     >
diff --git a/frontend/src/components/ui/popover/PopoverTrigger.vue b/frontend/src/components/ui/popover/PopoverTrigger.vue
index 55e138e..48a3e28 100644
--- a/frontend/src/components/ui/popover/PopoverTrigger.vue
+++ b/frontend/src/components/ui/popover/PopoverTrigger.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { PopoverTrigger } from "radix-vue";
+import { PopoverTrigger } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/popover/index.js b/frontend/src/components/ui/popover/index.js
index 50388e5..87f034a 100644
--- a/frontend/src/components/ui/popover/index.js
+++ b/frontend/src/components/ui/popover/index.js
@@ -1,4 +1,4 @@
-export { PopoverAnchor } from "radix-vue";
-export { default as Popover } from "./Popover.vue";
-export { default as PopoverTrigger } from "./PopoverTrigger.vue";
-export { default as PopoverContent } from "./PopoverContent.vue";
+export { PopoverAnchor } from 'radix-vue'
+export { default as Popover } from './Popover.vue'
+export { default as PopoverTrigger } from './PopoverTrigger.vue'
+export { default as PopoverContent } from './PopoverContent.vue'
diff --git a/frontend/src/components/ui/radio-group/RadioGroup.vue b/frontend/src/components/ui/radio-group/RadioGroup.vue
index 252ef5f..ec2868d 100644
--- a/frontend/src/components/ui/radio-group/RadioGroup.vue
+++ b/frontend/src/components/ui/radio-group/RadioGroup.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { RadioGroupRoot, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { RadioGroupRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   modelValue: { type: String, required: false },
@@ -14,17 +14,17 @@ const props = defineProps({
   loop: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['update:modelValue'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/radio-group/RadioGroupItem.vue b/frontend/src/components/ui/radio-group/RadioGroupItem.vue
index 63874ed..64b434e 100644
--- a/frontend/src/components/ui/radio-group/RadioGroupItem.vue
+++ b/frontend/src/components/ui/radio-group/RadioGroupItem.vue
@@ -1,12 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import {
-  RadioGroupIndicator,
-  RadioGroupItem,
-  useForwardProps,
-} from "radix-vue";
-import { CheckIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { RadioGroupIndicator, RadioGroupItem, useForwardProps } from 'radix-vue'
+import { CheckIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   id: { type: String, required: false },
@@ -16,26 +12,27 @@ const props = defineProps({
   name: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <RadioGroupItem
     v-bind="forwardedProps"
     :class="
-cn(
-  'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-  props.class
-)"
+      cn(
+        'aspect-square h-4 w-4 rounded-full border border-primary text-primary shadow focus:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
+        props.class
+      )
+    "
   >
     <RadioGroupIndicator class="flex items-center justify-center">
       <CheckIcon class="h-3.5 w-3.5 fill-primary" />
diff --git a/frontend/src/components/ui/radio-group/index.js b/frontend/src/components/ui/radio-group/index.js
index 1387e43..fa1da9c 100644
--- a/frontend/src/components/ui/radio-group/index.js
+++ b/frontend/src/components/ui/radio-group/index.js
@@ -1,2 +1,2 @@
-export { default as RadioGroup } from "./RadioGroup.vue";
-export { default as RadioGroupItem } from "./RadioGroupItem.vue";
+export { default as RadioGroup } from './RadioGroup.vue'
+export { default as RadioGroupItem } from './RadioGroupItem.vue'
diff --git a/frontend/src/components/ui/resizable/ResizableHandle.vue b/frontend/src/components/ui/resizable/ResizableHandle.vue
index 06b5527..ef77b4b 100644
--- a/frontend/src/components/ui/resizable/ResizableHandle.vue
+++ b/frontend/src/components/ui/resizable/ResizableHandle.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import { SplitterResizeHandle, useForwardPropsEmits } from "radix-vue";
-import { DragHandleDots2Icon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SplitterResizeHandle, useForwardPropsEmits } from 'radix-vue'
+import { DragHandleDots2Icon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   id: { type: String, required: false },
@@ -12,16 +12,16 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  withHandle: { type: Boolean, required: false },
-});
-const emits = defineEmits(["dragging"]);
+  withHandle: { type: Boolean, required: false }
+})
+const emits = defineEmits(['dragging'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, ...delegated } = props
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -35,9 +35,7 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     "
   >
     <template v-if="props.withHandle">
-      <div
-        class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border"
-      >
+      <div class="z-10 flex h-4 w-3 items-center justify-center rounded-sm border bg-border">
         <DragHandleDots2Icon class="h-2.5 w-2.5" />
       </div>
     </template>
diff --git a/frontend/src/components/ui/resizable/ResizablePanelGroup.vue b/frontend/src/components/ui/resizable/ResizablePanelGroup.vue
index 869483a..d42a385 100644
--- a/frontend/src/components/ui/resizable/ResizablePanelGroup.vue
+++ b/frontend/src/components/ui/resizable/ResizablePanelGroup.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { SplitterGroup, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SplitterGroup, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   id: { type: [String, null], required: false },
@@ -11,27 +11,22 @@ const props = defineProps({
   storage: { type: Object, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["layout"]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['layout'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, ...delegated } = props
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
   <SplitterGroup
     v-bind="forwarded"
-    :class="
-      cn(
-        'flex h-full w-full data-[panel-group-direction=vertical]:flex-col',
-        props.class
-      )
-    "
+    :class="cn('flex h-full w-full data-[panel-group-direction=vertical]:flex-col', props.class)"
   >
     <slot />
   </SplitterGroup>
diff --git a/frontend/src/components/ui/resizable/index.js b/frontend/src/components/ui/resizable/index.js
index 40acf38..22a0a8a 100644
--- a/frontend/src/components/ui/resizable/index.js
+++ b/frontend/src/components/ui/resizable/index.js
@@ -1,3 +1,3 @@
-export { default as ResizablePanelGroup } from "./ResizablePanelGroup.vue";
-export { default as ResizableHandle } from "./ResizableHandle.vue";
-export { SplitterPanel as ResizablePanel } from "radix-vue";
+export { default as ResizablePanelGroup } from './ResizablePanelGroup.vue'
+export { default as ResizableHandle } from './ResizableHandle.vue'
+export { SplitterPanel as ResizablePanel } from 'radix-vue'
diff --git a/frontend/src/components/ui/scroll-area/ScrollArea.vue b/frontend/src/components/ui/scroll-area/ScrollArea.vue
index 0610efb..5280bb3 100644
--- a/frontend/src/components/ui/scroll-area/ScrollArea.vue
+++ b/frontend/src/components/ui/scroll-area/ScrollArea.vue
@@ -1,12 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import {
-  ScrollAreaCorner,
-  ScrollAreaRoot,
-  ScrollAreaViewport,
-} from "radix-vue";
-import ScrollBar from "./ScrollBar.vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ScrollAreaCorner, ScrollAreaRoot, ScrollAreaViewport } from 'radix-vue'
+import ScrollBar from './ScrollBar.vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   type: { type: String, required: false },
@@ -14,21 +10,18 @@ const props = defineProps({
   scrollHideDelay: { type: Number, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-  <ScrollAreaRoot
-    v-bind="delegatedProps"
-    :class="cn('relative overflow-hidden', props.class)"
-  >
+  <ScrollAreaRoot v-bind="delegatedProps" :class="cn('relative overflow-hidden', props.class)">
     <ScrollAreaViewport class="h-full w-full rounded-[inherit]">
       <slot />
     </ScrollAreaViewport>
diff --git a/frontend/src/components/ui/scroll-area/ScrollBar.vue b/frontend/src/components/ui/scroll-area/ScrollBar.vue
index 7430e30..8e1e246 100644
--- a/frontend/src/components/ui/scroll-area/ScrollBar.vue
+++ b/frontend/src/components/ui/scroll-area/ScrollBar.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { ScrollAreaScrollbar, ScrollAreaThumb } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { ScrollAreaScrollbar, ScrollAreaThumb } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  orientation: { type: String, required: false, default: "vertical" },
+  orientation: { type: String, required: false, default: 'vertical' },
   forceMount: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
@@ -24,10 +24,8 @@ const delegatedProps = computed(() => {
     :class="
       cn(
         'flex touch-none select-none transition-colors',
-        orientation === 'vertical' &&
-          'h-full w-2.5 border-l border-l-transparent p-px',
-        orientation === 'horizontal' &&
-          'h-2.5 flex-col border-t border-t-transparent p-px',
+        orientation === 'vertical' && 'h-full w-2.5 border-l border-l-transparent p-px',
+        orientation === 'horizontal' && 'h-2.5 flex-col border-t border-t-transparent p-px',
         props.class
       )
     "
diff --git a/frontend/src/components/ui/scroll-area/index.js b/frontend/src/components/ui/scroll-area/index.js
index cd655e0..2bd4fae 100644
--- a/frontend/src/components/ui/scroll-area/index.js
+++ b/frontend/src/components/ui/scroll-area/index.js
@@ -1,2 +1,2 @@
-export { default as ScrollArea } from "./ScrollArea.vue";
-export { default as ScrollBar } from "./ScrollBar.vue";
+export { default as ScrollArea } from './ScrollArea.vue'
+export { default as ScrollBar } from './ScrollBar.vue'
diff --git a/frontend/src/components/ui/select/Select.vue b/frontend/src/components/ui/select/Select.vue
index 3772a61..0a7b02c 100644
--- a/frontend/src/components/ui/select/Select.vue
+++ b/frontend/src/components/ui/select/Select.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { SelectRoot, useForwardPropsEmits } from "radix-vue";
+import { SelectRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   open: { type: Boolean, required: false },
@@ -10,11 +10,11 @@ const props = defineProps({
   name: { type: String, required: false },
   autocomplete: { type: String, required: false },
   disabled: { type: Boolean, required: false },
-  required: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:modelValue", "update:open"]);
+  required: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:modelValue', 'update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/select/SelectContent.vue b/frontend/src/components/ui/select/SelectContent.vue
index 502c732..c9466d8 100644
--- a/frontend/src/components/ui/select/SelectContent.vue
+++ b/frontend/src/components/ui/select/SelectContent.vue
@@ -1,21 +1,16 @@
 <script setup>
-import { computed } from "vue";
-import {
-  SelectContent,
-  SelectPortal,
-  SelectViewport,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { SelectScrollDownButton, SelectScrollUpButton } from ".";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SelectContent, SelectPortal, SelectViewport, useForwardPropsEmits } from 'radix-vue'
+import { SelectScrollDownButton, SelectScrollUpButton } from '.'
+import { cn } from '@/lib/utils'
 
 defineOptions({
-  inheritAttrs: false,
-});
+  inheritAttrs: false
+})
 
 const props = defineProps({
   forceMount: { type: Boolean, required: false },
-  position: { type: String, required: false, default: "popper" },
+  position: { type: String, required: false, default: 'popper' },
   bodyLock: { type: Boolean, required: false },
   side: { type: null, required: false },
   sideOffset: { type: Number, required: false },
@@ -31,21 +26,17 @@ const props = defineProps({
   prioritizePosition: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits([
-  "closeAutoFocus",
-  "escapeKeyDown",
-  "pointerDownOutside",
-]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['closeAutoFocus', 'escapeKeyDown', 'pointerDownOutside'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/select/SelectGroup.vue b/frontend/src/components/ui/select/SelectGroup.vue
index 21de3f9..8060d26 100644
--- a/frontend/src/components/ui/select/SelectGroup.vue
+++ b/frontend/src/components/ui/select/SelectGroup.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from "vue";
-import { SelectGroup } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SelectGroup } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/select/SelectItemText.vue b/frontend/src/components/ui/select/SelectItemText.vue
index c1f2dad..46a4aa0 100644
--- a/frontend/src/components/ui/select/SelectItemText.vue
+++ b/frontend/src/components/ui/select/SelectItemText.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { SelectItemText } from "radix-vue";
+import { SelectItemText } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/select/SelectLabel.vue b/frontend/src/components/ui/select/SelectLabel.vue
index 787cc6a..c5f1945 100644
--- a/frontend/src/components/ui/select/SelectLabel.vue
+++ b/frontend/src/components/ui/select/SelectLabel.vue
@@ -1,13 +1,13 @@
 <script setup>
-import { SelectLabel } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { SelectLabel } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   for: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/select/SelectScrollDownButton.vue b/frontend/src/components/ui/select/SelectScrollDownButton.vue
index 4b7a388..c03727d 100644
--- a/frontend/src/components/ui/select/SelectScrollDownButton.vue
+++ b/frontend/src/components/ui/select/SelectScrollDownButton.vue
@@ -1,30 +1,28 @@
 <script setup>
-import { computed } from "vue";
-import { SelectScrollDownButton, useForwardProps } from "radix-vue";
-import { ChevronDownIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SelectScrollDownButton, useForwardProps } from 'radix-vue'
+import { ChevronDownIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectScrollDownButton
     v-bind="forwardedProps"
-    :class="
-      cn('flex cursor-default items-center justify-center py-1', props.class)
-    "
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
       <ChevronDownIcon />
diff --git a/frontend/src/components/ui/select/SelectScrollUpButton.vue b/frontend/src/components/ui/select/SelectScrollUpButton.vue
index 826005d..9f38a49 100644
--- a/frontend/src/components/ui/select/SelectScrollUpButton.vue
+++ b/frontend/src/components/ui/select/SelectScrollUpButton.vue
@@ -1,30 +1,28 @@
 <script setup>
-import { computed } from "vue";
-import { SelectScrollUpButton, useForwardProps } from "radix-vue";
-import { ChevronUpIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SelectScrollUpButton, useForwardProps } from 'radix-vue'
+import { ChevronUpIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <SelectScrollUpButton
     v-bind="forwardedProps"
-    :class="
-      cn('flex cursor-default items-center justify-center py-1', props.class)
-    "
+    :class="cn('flex cursor-default items-center justify-center py-1', props.class)"
   >
     <slot>
       <ChevronUpIcon />
diff --git a/frontend/src/components/ui/select/SelectSeparator.vue b/frontend/src/components/ui/select/SelectSeparator.vue
index 12afc18..c88fb91 100644
--- a/frontend/src/components/ui/select/SelectSeparator.vue
+++ b/frontend/src/components/ui/select/SelectSeparator.vue
@@ -1,24 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { SelectSeparator } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SelectSeparator } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
-  <SelectSeparator
-    v-bind="delegatedProps"
-    :class="cn('-mx-1 my-1 h-px bg-muted', props.class)"
-  />
+  <SelectSeparator v-bind="delegatedProps" :class="cn('-mx-1 my-1 h-px bg-muted', props.class)" />
 </template>
diff --git a/frontend/src/components/ui/select/SelectTag.vue b/frontend/src/components/ui/select/SelectTag.vue
index 46f48b4..b2da286 100644
--- a/frontend/src/components/ui/select/SelectTag.vue
+++ b/frontend/src/components/ui/select/SelectTag.vue
@@ -1,92 +1,107 @@
 <template>
-    <div ref="dropdownRef">
-        <TagsInput v-model="selectedItems" class="px-0 gap-0 shadow-sm">
-            <div class="flex gap-2 flex-wrap items-center px-3">
-                <TagsInputItem v-for="item in selectedItems" :key="item" :value="item">
-                    <TagsInputItemText>{{ item }}</TagsInputItemText>
-                    <TagsInputItemDelete />
-                </TagsInputItem>
-            </div>
+  <div ref="dropdownRef">
+    <TagsInput v-model="selectedItems" class="px-0 gap-0 shadow-sm">
+      <div class="flex gap-2 flex-wrap items-center px-3">
+        <TagsInputItem v-for="item in selectedItems" :key="item" :value="item">
+          <TagsInputItemText>{{ item }}</TagsInputItemText>
+          <TagsInputItemDelete />
+        </TagsInputItem>
+      </div>
 
-            <ComboboxRoot v-model:open="isOpen" class="w-full">
-                <ComboboxAnchor as-child>
-                    <ComboboxInput :placeholder="placeHolder" as-child>
-                        <TagsInputInput class="w-full px-3" :class="selectedItems.length > 0 ? 'mt-2' : ''"
-                            @keydown.enter.prevent />
-                    </ComboboxInput>
-                </ComboboxAnchor>
+      <ComboboxRoot v-model:open="isOpen" class="w-full">
+        <ComboboxAnchor as-child>
+          <ComboboxInput :placeholder="placeHolder" as-child>
+            <TagsInputInput
+              class="w-full px-3"
+              :class="selectedItems.length > 0 ? 'mt-2' : ''"
+              @keydown.enter.prevent
+            />
+          </ComboboxInput>
+        </ComboboxAnchor>
 
-                <ComboboxPortal>
-                    <CommandList position="popper"
-                        class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2">
-                        <CommandEmpty />
-                        <CommandGroup>
-                            <CommandItem v-for="item in filteredItems" :key="item" :value="item"
-                                @select.prevent="selectItem(item)">
-                                {{ item }}
-                            </CommandItem>
-                        </CommandGroup>
-                    </CommandList>
-                </ComboboxPortal>
-            </ComboboxRoot>
-        </TagsInput>
-    </div>
+        <ComboboxPortal>
+          <CommandList
+            position="popper"
+            class="w-[--radix-popper-anchor-width] rounded-md mt-2 border bg-popover text-popover-foreground shadow-md outline-none data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2"
+          >
+            <CommandEmpty />
+            <CommandGroup>
+              <CommandItem
+                v-for="item in filteredItems"
+                :key="item"
+                :value="item"
+                @select.prevent="selectItem(item)"
+              >
+                {{ item }}
+              </CommandItem>
+            </CommandGroup>
+          </CommandList>
+        </ComboboxPortal>
+      </ComboboxRoot>
+    </TagsInput>
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, onMounted } from 'vue';
-import { onClickOutside } from '@vueuse/core';
-import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue';
-import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command';
-import { TagsInput, TagsInputInput, TagsInputItem, TagsInputItemDelete, TagsInputItemText } from '@/components/ui/tags-input';
+import { ref, computed, onMounted } from 'vue'
+import { onClickOutside } from '@vueuse/core'
+import { ComboboxAnchor, ComboboxInput, ComboboxPortal, ComboboxRoot } from 'radix-vue'
+import { CommandEmpty, CommandGroup, CommandItem, CommandList } from '@/components/ui/command'
+import {
+  TagsInput,
+  TagsInputInput,
+  TagsInputItem,
+  TagsInputItemDelete,
+  TagsInputItemText
+} from '@/components/ui/tags-input'
 
 const props = defineProps({
-    items: {
-        type: Array,
-        required: true,
-        default: () => []
-    },
-    placeHolder: {
-        type: String,
-        required: false,
-        default: () => ''
-    },
-    initialValue: {
-        type: Array,
-        default: () => []
-    }
-});
+  items: {
+    type: Array,
+    required: true,
+    default: () => []
+  },
+  placeHolder: {
+    type: String,
+    required: false,
+    default: () => ''
+  },
+  initialValue: {
+    type: Array,
+    default: () => []
+  }
+})
 
-const selectedItems = defineModel({ default: [] });
-const isOpen = ref(false);
-const searchTerm = ref('');
-const dropdownRef = ref(null);
+const selectedItems = defineModel({ default: [] })
+const isOpen = ref(false)
+const searchTerm = ref('')
+const dropdownRef = ref(null)
 
 onClickOutside(dropdownRef, () => {
-    isOpen.value = false;
-});
+  isOpen.value = false
+})
 
 onMounted(() => {
-    selectedItems.value = props.initialValue
-});
+  selectedItems.value = props.initialValue
+})
 
 const filteredItems = computed(() => {
-    if (searchTerm.value) {
-        return props.items.filter(
-            item =>
-                item.toLowerCase().includes(searchTerm.value.toLowerCase()) &&
-                !selectedItems.value.includes(item)
-        );
-    }
-    return props.items.filter(item => !selectedItems.value.includes(item));
-});
+  if (searchTerm.value) {
+    return props.items.filter(
+      (item) =>
+        item.toLowerCase().includes(searchTerm.value.toLowerCase()) &&
+        !selectedItems.value.includes(item)
+    )
+  }
+  return props.items.filter((item) => !selectedItems.value.includes(item))
+})
 
-function selectItem (item) {
-    if (!selectedItems.value.includes(item)) {
-        selectedItems.value.push(item);
-    }
-    if (filteredItems.value.length === 0) {
-        isOpen.value = false;
-    }
+function selectItem(item) {
+  if (!selectedItems.value.includes(item)) {
+    selectedItems.value.push(item)
+  }
+  if (filteredItems.value.length === 0) {
+    isOpen.value = false
+  }
 }
 </script>
diff --git a/frontend/src/components/ui/select/SelectTrigger.vue b/frontend/src/components/ui/select/SelectTrigger.vue
index 6443e01..2ea182f 100644
--- a/frontend/src/components/ui/select/SelectTrigger.vue
+++ b/frontend/src/components/ui/select/SelectTrigger.vue
@@ -1,23 +1,23 @@
 <script setup>
-import { computed } from "vue";
-import { SelectIcon, SelectTrigger, useForwardProps } from "radix-vue";
-import { CaretSortIcon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SelectIcon, SelectTrigger, useForwardProps } from 'radix-vue'
+import { CaretSortIcon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   disabled: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/select/SelectValue.vue b/frontend/src/components/ui/select/SelectValue.vue
index 52c5d7d..06b7b97 100644
--- a/frontend/src/components/ui/select/SelectValue.vue
+++ b/frontend/src/components/ui/select/SelectValue.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { SelectValue } from "radix-vue";
+import { SelectValue } from 'radix-vue'
 
 const props = defineProps({
   placeholder: { type: String, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/select/index.js b/frontend/src/components/ui/select/index.js
index 7b1fbc0..cc85cc8 100644
--- a/frontend/src/components/ui/select/index.js
+++ b/frontend/src/components/ui/select/index.js
@@ -1,12 +1,12 @@
-export { default as Select } from "./Select.vue";
-export { default as SelectValue } from "./SelectValue.vue";
-export { default as SelectTrigger } from "./SelectTrigger.vue";
-export { default as SelectContent } from "./SelectContent.vue";
-export { default as SelectGroup } from "./SelectGroup.vue";
-export { default as SelectItem } from "./SelectItem.vue";
-export { default as SelectItemText } from "./SelectItemText.vue";
-export { default as SelectLabel } from "./SelectLabel.vue";
-export { default as SelectSeparator } from "./SelectSeparator.vue";
-export { default as SelectScrollUpButton } from "./SelectScrollUpButton.vue";
-export { default as SelectScrollDownButton } from "./SelectScrollDownButton.vue";
-export { default as SelectTag } from './SelectTag.vue'
\ No newline at end of file
+export { default as Select } from './Select.vue'
+export { default as SelectValue } from './SelectValue.vue'
+export { default as SelectTrigger } from './SelectTrigger.vue'
+export { default as SelectContent } from './SelectContent.vue'
+export { default as SelectGroup } from './SelectGroup.vue'
+export { default as SelectItem } from './SelectItem.vue'
+export { default as SelectItemText } from './SelectItemText.vue'
+export { default as SelectLabel } from './SelectLabel.vue'
+export { default as SelectSeparator } from './SelectSeparator.vue'
+export { default as SelectScrollUpButton } from './SelectScrollUpButton.vue'
+export { default as SelectScrollDownButton } from './SelectScrollDownButton.vue'
+export { default as SelectTag } from './SelectTag.vue'
diff --git a/frontend/src/components/ui/separator/Separator.vue b/frontend/src/components/ui/separator/Separator.vue
index ed7376d..9851910 100644
--- a/frontend/src/components/ui/separator/Separator.vue
+++ b/frontend/src/components/ui/separator/Separator.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { Separator } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { Separator } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   orientation: { type: String, required: false },
   decorative: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/separator/index.js b/frontend/src/components/ui/separator/index.js
index aae7f1a..2287bcb 100644
--- a/frontend/src/components/ui/separator/index.js
+++ b/frontend/src/components/ui/separator/index.js
@@ -1 +1 @@
-export { default as Separator } from "./Separator.vue";
+export { default as Separator } from './Separator.vue'
diff --git a/frontend/src/components/ui/sheet/Sheet.vue b/frontend/src/components/ui/sheet/Sheet.vue
index 53e2911..1cce970 100644
--- a/frontend/src/components/ui/sheet/Sheet.vue
+++ b/frontend/src/components/ui/sheet/Sheet.vue
@@ -1,14 +1,14 @@
 <script setup>
-import { DialogRoot, useForwardPropsEmits } from "radix-vue";
+import { DialogRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   open: { type: Boolean, required: false },
   defaultOpen: { type: Boolean, required: false },
-  modal: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  modal: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetClose.vue b/frontend/src/components/ui/sheet/SheetClose.vue
index c6120c8..15a475e 100644
--- a/frontend/src/components/ui/sheet/SheetClose.vue
+++ b/frontend/src/components/ui/sheet/SheetClose.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DialogClose } from "radix-vue";
+import { DialogClose } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetContent.vue b/frontend/src/components/ui/sheet/SheetContent.vue
index 14062ad..dba88cc 100644
--- a/frontend/src/components/ui/sheet/SheetContent.vue
+++ b/frontend/src/components/ui/sheet/SheetContent.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from "vue";
+import { computed } from 'vue'
 import {
   DialogClose,
   DialogContent,
   DialogOverlay,
   DialogPortal,
-  useForwardPropsEmits,
-} from "radix-vue";
-import { Cross2Icon } from "@radix-icons/vue";
-import { sheetVariants } from ".";
-import { cn } from "@/lib/utils";
+  useForwardPropsEmits
+} from 'radix-vue'
+import { Cross2Icon } from '@radix-icons/vue'
+import { sheetVariants } from '.'
+import { cn } from '@/lib/utils'
 
 defineOptions({
-  inheritAttrs: false,
-});
+  inheritAttrs: false
+})
 
 const props = defineProps({
   class: { type: null, required: false },
@@ -22,25 +22,25 @@ const props = defineProps({
   trapFocus: { type: Boolean, required: false },
   disableOutsidePointerEvents: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 
 const emits = defineEmits([
-  "escapeKeyDown",
-  "pointerDownOutside",
-  "focusOutside",
-  "interactOutside",
-  "openAutoFocus",
-  "closeAutoFocus",
-]);
+  'escapeKeyDown',
+  'pointerDownOutside',
+  'focusOutside',
+  'interactOutside',
+  'openAutoFocus',
+  'closeAutoFocus'
+])
 
 const delegatedProps = computed(() => {
-  const { class: _, side, ...delegated } = props;
+  const { class: _, side, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetDescription.vue b/frontend/src/components/ui/sheet/SheetDescription.vue
index e7a5ca9..31fe47e 100644
--- a/frontend/src/components/ui/sheet/SheetDescription.vue
+++ b/frontend/src/components/ui/sheet/SheetDescription.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from "vue";
-import { DialogDescription } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DialogDescription } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetFooter.vue b/frontend/src/components/ui/sheet/SheetFooter.vue
index f623c10..8b69675 100644
--- a/frontend/src/components/ui/sheet/SheetFooter.vue
+++ b/frontend/src/components/ui/sheet/SheetFooter.vue
@@ -1,20 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <div
-    :class="
-      cn(
-        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
-        props.class,
-      )
-    "
-  >
+  <div :class="cn('flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/sheet/SheetHeader.vue b/frontend/src/components/ui/sheet/SheetHeader.vue
index b9bd423..0cf8b8c 100644
--- a/frontend/src/components/ui/sheet/SheetHeader.vue
+++ b/frontend/src/components/ui/sheet/SheetHeader.vue
@@ -1,15 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <div
-    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
-  >
+  <div :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)">
     <slot />
   </div>
 </template>
diff --git a/frontend/src/components/ui/sheet/SheetTitle.vue b/frontend/src/components/ui/sheet/SheetTitle.vue
index af04573..13ce61c 100644
--- a/frontend/src/components/ui/sheet/SheetTitle.vue
+++ b/frontend/src/components/ui/sheet/SheetTitle.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { computed } from "vue";
-import { DialogTitle } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { DialogTitle } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/SheetTrigger.vue b/frontend/src/components/ui/sheet/SheetTrigger.vue
index 4878e62..ccb596c 100644
--- a/frontend/src/components/ui/sheet/SheetTrigger.vue
+++ b/frontend/src/components/ui/sheet/SheetTrigger.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { DialogTrigger } from "radix-vue";
+import { DialogTrigger } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/sheet/index.js b/frontend/src/components/ui/sheet/index.js
index 648e327..e8f1989 100644
--- a/frontend/src/components/ui/sheet/index.js
+++ b/frontend/src/components/ui/sheet/index.js
@@ -1,29 +1,29 @@
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority'
 
-export { default as Sheet } from "./Sheet.vue";
-export { default as SheetTrigger } from "./SheetTrigger.vue";
-export { default as SheetClose } from "./SheetClose.vue";
-export { default as SheetContent } from "./SheetContent.vue";
-export { default as SheetHeader } from "./SheetHeader.vue";
-export { default as SheetTitle } from "./SheetTitle.vue";
-export { default as SheetDescription } from "./SheetDescription.vue";
-export { default as SheetFooter } from "./SheetFooter.vue";
+export { default as Sheet } from './Sheet.vue'
+export { default as SheetTrigger } from './SheetTrigger.vue'
+export { default as SheetClose } from './SheetClose.vue'
+export { default as SheetContent } from './SheetContent.vue'
+export { default as SheetHeader } from './SheetHeader.vue'
+export { default as SheetTitle } from './SheetTitle.vue'
+export { default as SheetDescription } from './SheetDescription.vue'
+export { default as SheetFooter } from './SheetFooter.vue'
 
 export const sheetVariants = cva(
-  "fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500",
+  'fixed z-50 gap-4 bg-background p-6 shadow-lg transition ease-in-out data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:duration-300 data-[state=open]:duration-500',
   {
     variants: {
       side: {
-        top: "inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top",
+        top: 'inset-x-0 top-0 border-b data-[state=closed]:slide-out-to-top data-[state=open]:slide-in-from-top',
         bottom:
-          "inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom",
-        left: "inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm",
+          'inset-x-0 bottom-0 border-t data-[state=closed]:slide-out-to-bottom data-[state=open]:slide-in-from-bottom',
+        left: 'inset-y-0 left-0 h-full w-3/4 border-r data-[state=closed]:slide-out-to-left data-[state=open]:slide-in-from-left sm:max-w-sm',
         right:
-          "inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm",
-      },
+          'inset-y-0 right-0 h-full w-3/4 border-l data-[state=closed]:slide-out-to-right data-[state=open]:slide-in-from-right sm:max-w-sm'
+      }
     },
     defaultVariants: {
-      side: "right",
-    },
-  },
-);
+      side: 'right'
+    }
+  }
+)
diff --git a/frontend/src/components/ui/skeleton/Skeleton.vue b/frontend/src/components/ui/skeleton/Skeleton.vue
index 3396b3b..30ac5ec 100644
--- a/frontend/src/components/ui/skeleton/Skeleton.vue
+++ b/frontend/src/components/ui/skeleton/Skeleton.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/skeleton/index.js b/frontend/src/components/ui/skeleton/index.js
index 72cb1d9..be21fad 100644
--- a/frontend/src/components/ui/skeleton/index.js
+++ b/frontend/src/components/ui/skeleton/index.js
@@ -1 +1 @@
-export { default as Skeleton } from "./Skeleton.vue";
+export { default as Skeleton } from './Skeleton.vue'
diff --git a/frontend/src/components/ui/spinner/Spinner.vue b/frontend/src/components/ui/spinner/Spinner.vue
index 6b4cf9f..7e5b1b5 100644
--- a/frontend/src/components/ui/spinner/Spinner.vue
+++ b/frontend/src/components/ui/spinner/Spinner.vue
@@ -1,29 +1,36 @@
 <template>
-    <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
-        <svg :class="spinnerClass" aria-hidden="true" viewBox="0 0 100 101" fill="none"
-            xmlns="http://www.w3.org/2000/svg">
-            <path
-                d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
-                fill="currentColor" />
-            <path
-                d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
-                fill="currentFill" />
-        </svg>
-        <span class="sr-only">Loading...</span>
-    </div>
+  <div role="status" class="absolute -translate-x-1/2 -translate-y-1/2 top-2/4 left-1/2">
+    <svg
+      :class="spinnerClass"
+      aria-hidden="true"
+      viewBox="0 0 100 101"
+      fill="none"
+      xmlns="http://www.w3.org/2000/svg"
+    >
+      <path
+        d="M100 50.5908C100 78.2051 77.6142 100.591 50 100.591C22.3858 100.591 0 78.2051 0 50.5908C0 22.9766 22.3858 0.59082 50 0.59082C77.6142 0.59082 100 22.9766 100 50.5908ZM9.08144 50.5908C9.08144 73.1895 27.4013 91.5094 50 91.5094C72.5987 91.5094 90.9186 73.1895 90.9186 50.5908C90.9186 27.9921 72.5987 9.67226 50 9.67226C27.4013 9.67226 9.08144 27.9921 9.08144 50.5908Z"
+        fill="currentColor"
+      />
+      <path
+        d="M93.9676 39.0409C96.393 38.4038 97.8624 35.9116 97.0079 33.5539C95.2932 28.8227 92.871 24.3692 89.8167 20.348C85.8452 15.1192 80.8826 10.7238 75.2124 7.41289C69.5422 4.10194 63.2754 1.94025 56.7698 1.05124C51.7666 0.367541 46.6976 0.446843 41.7345 1.27873C39.2613 1.69328 37.813 4.19778 38.4501 6.62326C39.0873 9.04874 41.5694 10.4717 44.0505 10.1071C47.8511 9.54855 51.7191 9.52689 55.5402 10.0491C60.8642 10.7766 65.9928 12.5457 70.6331 15.2552C75.2735 17.9648 79.3347 21.5619 82.5849 25.841C84.9175 28.9121 86.7997 32.2913 88.1811 35.8758C89.083 38.2158 91.5421 39.6781 93.9676 39.0409Z"
+        fill="currentFill"
+      />
+    </svg>
+    <span class="sr-only">Loading...</span>
+  </div>
 </template>
 
 <script setup>
 import { computed } from 'vue'
 const props = defineProps({
-    color: {
-        type: String,
-        default: 'text-gray-200'
-    },
-    backgroundFill: {
-        type: String,
-        default: 'fill-blue-600'
-    }
+  color: {
+    type: String,
+    default: 'text-gray-200'
+  },
+  backgroundFill: {
+    type: String,
+    default: 'fill-blue-600'
+  }
 })
 
 const spinnerClass = computed(() => `w-8 h-8 animate-spin ${props.color} ${props.backgroundFill}`)
diff --git a/frontend/src/components/ui/spinner/index.js b/frontend/src/components/ui/spinner/index.js
index 8a95e7a..712ee0e 100644
--- a/frontend/src/components/ui/spinner/index.js
+++ b/frontend/src/components/ui/spinner/index.js
@@ -1 +1 @@
-export { default as Spinner } from "./Spinner.vue";
+export { default as Spinner } from './Spinner.vue'
diff --git a/frontend/src/components/ui/stepper/Stepper.vue b/frontend/src/components/ui/stepper/Stepper.vue
index b0fa9e9..fc242a1 100644
--- a/frontend/src/components/ui/stepper/Stepper.vue
+++ b/frontend/src/components/ui/stepper/Stepper.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import { StepperRoot, useForwardPropsEmits } from "radix-vue";
+import { computed } from 'vue'
+import { StepperRoot, useForwardPropsEmits } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   defaultValue: { type: Number, required: false },
@@ -12,25 +12,21 @@ const props = defineProps({
   linear: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['update:modelValue'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <StepperRoot
-    v-slot="slotProps"
-    :class="cn('flex gap-2', props.class)"
-    v-bind="forwarded"
-  >
+  <StepperRoot v-slot="slotProps" :class="cn('flex gap-2', props.class)" v-bind="forwarded">
     <slot v-bind="slotProps" />
   </StepperRoot>
 </template>
diff --git a/frontend/src/components/ui/stepper/StepperDescription.vue b/frontend/src/components/ui/stepper/StepperDescription.vue
index 944d58b..c4d8952 100644
--- a/frontend/src/components/ui/stepper/StepperDescription.vue
+++ b/frontend/src/components/ui/stepper/StepperDescription.vue
@@ -1,22 +1,22 @@
 <script setup>
-import { computed } from "vue";
-import { StepperDescription, useForwardProps } from "radix-vue";
+import { computed } from 'vue'
+import { StepperDescription, useForwardProps } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardProps(delegatedProps);
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/stepper/StepperIndicator.vue b/frontend/src/components/ui/stepper/StepperIndicator.vue
index 45f3d71..ce279d4 100644
--- a/frontend/src/components/ui/stepper/StepperIndicator.vue
+++ b/frontend/src/components/ui/stepper/StepperIndicator.vue
@@ -1,22 +1,22 @@
 <script setup>
-import { computed } from "vue";
-import { StepperIndicator, useForwardProps } from "radix-vue";
+import { computed } from 'vue'
+import { StepperIndicator, useForwardProps } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardProps(delegatedProps);
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -31,7 +31,7 @@ const forwarded = useForwardProps(delegatedProps);
         'group-data-[state=active]:bg-primary group-data-[state=active]:text-primary-foreground',
         // Completed
         'group-data-[state=completed]:bg-accent group-data-[state=completed]:text-accent-foreground',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/stepper/StepperItem.vue b/frontend/src/components/ui/stepper/StepperItem.vue
index d155072..cbd2ab5 100644
--- a/frontend/src/components/ui/stepper/StepperItem.vue
+++ b/frontend/src/components/ui/stepper/StepperItem.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import { StepperItem, useForwardProps } from "radix-vue";
+import { computed } from 'vue'
+import { StepperItem, useForwardProps } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   step: { type: Number, required: true },
@@ -10,28 +10,23 @@ const props = defineProps({
   completed: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardProps(delegatedProps);
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <StepperItem
     v-slot="slotProps"
     v-bind="forwarded"
-    :class="
-      cn(
-        'flex items-center gap-2 group data-[disabled]:pointer-events-none',
-        props.class,
-      )
-    "
+    :class="cn('flex items-center gap-2 group data-[disabled]:pointer-events-none', props.class)"
   >
     <slot v-bind="slotProps" />
   </StepperItem>
diff --git a/frontend/src/components/ui/stepper/StepperSeparator.vue b/frontend/src/components/ui/stepper/StepperSeparator.vue
index 3806bdd..c7b22ce 100644
--- a/frontend/src/components/ui/stepper/StepperSeparator.vue
+++ b/frontend/src/components/ui/stepper/StepperSeparator.vue
@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { StepperSeparator, useForwardProps } from "radix-vue";
+import { computed } from 'vue'
+import { StepperSeparator, useForwardProps } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   orientation: { type: String, required: false },
   decorative: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardProps(delegatedProps);
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -31,7 +31,7 @@ const forwarded = useForwardProps(delegatedProps);
         'group-data-[disabled]:bg-muted group-data-[disabled]:opacity-50',
         // Completed
         'group-data-[state=completed]:bg-accent-foreground',
-        props.class,
+        props.class
       )
     "
   />
diff --git a/frontend/src/components/ui/stepper/StepperTitle.vue b/frontend/src/components/ui/stepper/StepperTitle.vue
index 2192f98..80d4af7 100644
--- a/frontend/src/components/ui/stepper/StepperTitle.vue
+++ b/frontend/src/components/ui/stepper/StepperTitle.vue
@@ -1,22 +1,22 @@
 <script setup>
-import { computed } from "vue";
-import { StepperTitle, useForwardProps } from "radix-vue";
+import { computed } from 'vue'
+import { StepperTitle, useForwardProps } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardProps(delegatedProps);
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/stepper/StepperTrigger.vue b/frontend/src/components/ui/stepper/StepperTrigger.vue
index ec68a3e..0f9e4b8 100644
--- a/frontend/src/components/ui/stepper/StepperTrigger.vue
+++ b/frontend/src/components/ui/stepper/StepperTrigger.vue
@@ -1,33 +1,28 @@
 <script setup>
-import { computed } from "vue";
-import { StepperTrigger, useForwardProps } from "radix-vue";
+import { computed } from 'vue'
+import { StepperTrigger, useForwardProps } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardProps(delegatedProps);
+const forwarded = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <StepperTrigger
     v-bind="forwarded"
-    :class="
-      cn(
-        'p-1 flex flex-col items-center text-center gap-1 rounded-md',
-        props.class,
-      )
-    "
+    :class="cn('p-1 flex flex-col items-center text-center gap-1 rounded-md', props.class)"
   >
     <slot />
   </StepperTrigger>
diff --git a/frontend/src/components/ui/stepper/index.js b/frontend/src/components/ui/stepper/index.js
index 7711c96..6bb2d60 100644
--- a/frontend/src/components/ui/stepper/index.js
+++ b/frontend/src/components/ui/stepper/index.js
@@ -1,7 +1,7 @@
-export { default as Stepper } from "./Stepper.vue";
-export { default as StepperItem } from "./StepperItem.vue";
-export { default as StepperIndicator } from "./StepperIndicator.vue";
-export { default as StepperTrigger } from "./StepperTrigger.vue";
-export { default as StepperTitle } from "./StepperTitle.vue";
-export { default as StepperDescription } from "./StepperDescription.vue";
-export { default as StepperSeparator } from "./StepperSeparator.vue";
+export { default as Stepper } from './Stepper.vue'
+export { default as StepperItem } from './StepperItem.vue'
+export { default as StepperIndicator } from './StepperIndicator.vue'
+export { default as StepperTrigger } from './StepperTrigger.vue'
+export { default as StepperTitle } from './StepperTitle.vue'
+export { default as StepperDescription } from './StepperDescription.vue'
+export { default as StepperSeparator } from './StepperSeparator.vue'
diff --git a/frontend/src/components/ui/switch/Switch.vue b/frontend/src/components/ui/switch/Switch.vue
index 2954386..766c14b 100644
--- a/frontend/src/components/ui/switch/Switch.vue
+++ b/frontend/src/components/ui/switch/Switch.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { SwitchRoot, SwitchThumb, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   defaultChecked: { type: Boolean, required: false },
@@ -13,18 +13,18 @@ const props = defineProps({
   value: { type: String, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const emits = defineEmits(["update:checked"]);
+const emits = defineEmits(['update:checked'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
@@ -33,14 +33,14 @@ const forwarded = useForwardPropsEmits(delegatedProps, emits);
     :class="
       cn(
         'peer inline-flex h-5 w-9 shrink-0 cursor-pointer items-center rounded-full border-2 border-transparent shadow-sm transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 focus-visible:ring-offset-background disabled:cursor-not-allowed disabled:opacity-50 data-[state=checked]:bg-primary data-[state=unchecked]:bg-input',
-        props.class,
+        props.class
       )
     "
   >
     <SwitchThumb
       :class="
         cn(
-          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0',
+          'pointer-events-none block h-4 w-4 rounded-full bg-background shadow-lg ring-0 transition-transform data-[state=checked]:translate-x-4 data-[state=unchecked]:translate-x-0'
         )
       "
     />
diff --git a/frontend/src/components/ui/switch/index.js b/frontend/src/components/ui/switch/index.js
index c986f8a..87b4b17 100644
--- a/frontend/src/components/ui/switch/index.js
+++ b/frontend/src/components/ui/switch/index.js
@@ -1 +1 @@
-export { default as Switch } from "./Switch.vue";
+export { default as Switch } from './Switch.vue'
diff --git a/frontend/src/components/ui/table/Table.vue b/frontend/src/components/ui/table/Table.vue
index 7b7540f..5239ca5 100644
--- a/frontend/src/components/ui/table/Table.vue
+++ b/frontend/src/components/ui/table/Table.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/table/TableBody.vue b/frontend/src/components/ui/table/TableBody.vue
index fa451e1..e5b1081 100644
--- a/frontend/src/components/ui/table/TableBody.vue
+++ b/frontend/src/components/ui/table/TableBody.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/table/TableCaption.vue b/frontend/src/components/ui/table/TableCaption.vue
index f6d4028..352def5 100644
--- a/frontend/src/components/ui/table/TableCaption.vue
+++ b/frontend/src/components/ui/table/TableCaption.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/table/TableCell.vue b/frontend/src/components/ui/table/TableCell.vue
index e9dab9c..6ce3bf3 100644
--- a/frontend/src/components/ui/table/TableCell.vue
+++ b/frontend/src/components/ui/table/TableCell.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
@@ -11,7 +11,7 @@ const props = defineProps({
     :class="
       cn(
         'p-2 align-middle [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/table/TableEmpty.vue b/frontend/src/components/ui/table/TableEmpty.vue
index 4809f85..1279d50 100644
--- a/frontend/src/components/ui/table/TableEmpty.vue
+++ b/frontend/src/components/ui/table/TableEmpty.vue
@@ -1,27 +1,27 @@
 <script setup>
-import { computed } from "vue";
-import TableRow from "./TableRow.vue";
-import TableCell from "./TableCell.vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import TableRow from './TableRow.vue'
+import TableCell from './TableCell.vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   class: { type: null, required: false },
-  colspan: { type: Number, required: false, default: 1 },
-});
+  colspan: { type: Number, required: false, default: 1 }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
   <TableRow>
-    <TableCell :class="cn(
-      'p-4 whitespace-nowrap align-middle text-sm text-foreground',
-      props.class
-    )" v-bind="delegatedProps">
+    <TableCell
+      :class="cn('p-4 whitespace-nowrap align-middle text-sm text-foreground', props.class)"
+      v-bind="delegatedProps"
+    >
       <div class="flex items-center justify-center py-10">
         <slot />
       </div>
diff --git a/frontend/src/components/ui/table/TableFooter.vue b/frontend/src/components/ui/table/TableFooter.vue
index 45bc82a..7443366 100644
--- a/frontend/src/components/ui/table/TableFooter.vue
+++ b/frontend/src/components/ui/table/TableFooter.vue
@@ -1,17 +1,13 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
-  <tfoot
-    :class="
-      cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)
-    "
-  >
+  <tfoot :class="cn('border-t bg-muted/50 font-medium [&>tr]:last:border-b-0', props.class)">
     <slot />
   </tfoot>
 </template>
diff --git a/frontend/src/components/ui/table/TableHead.vue b/frontend/src/components/ui/table/TableHead.vue
index 96d8dcc..d6a4c25 100644
--- a/frontend/src/components/ui/table/TableHead.vue
+++ b/frontend/src/components/ui/table/TableHead.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
@@ -11,7 +11,7 @@ const props = defineProps({
     :class="
       cn(
         'h-10 px-2 text-left align-middle font-medium text-muted-foreground [&:has([role=checkbox])]:pr-0 [&>[role=checkbox]]:translate-y-0.5',
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/table/TableHeader.vue b/frontend/src/components/ui/table/TableHeader.vue
index 86901ef..2092480 100644
--- a/frontend/src/components/ui/table/TableHeader.vue
+++ b/frontend/src/components/ui/table/TableHeader.vue
@@ -1,9 +1,9 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/table/TableRow.vue b/frontend/src/components/ui/table/TableRow.vue
index ef64daf..4f6cc88 100644
--- a/frontend/src/components/ui/table/TableRow.vue
+++ b/frontend/src/components/ui/table/TableRow.vue
@@ -1,18 +1,15 @@
 <script setup>
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 </script>
 
 <template>
   <tr
     :class="
-      cn(
-        'border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted',
-        props.class,
-      )
+      cn('border-b transition-colors hover:bg-muted/50 data-[state=selected]:bg-muted', props.class)
     "
   >
     <slot />
diff --git a/frontend/src/components/ui/table/index.js b/frontend/src/components/ui/table/index.js
index a69057f..6fa181b 100644
--- a/frontend/src/components/ui/table/index.js
+++ b/frontend/src/components/ui/table/index.js
@@ -1,9 +1,9 @@
-export { default as Table } from "./Table.vue";
-export { default as TableBody } from "./TableBody.vue";
-export { default as TableCell } from "./TableCell.vue";
-export { default as TableHead } from "./TableHead.vue";
-export { default as TableHeader } from "./TableHeader.vue";
-export { default as TableFooter } from "./TableFooter.vue";
-export { default as TableRow } from "./TableRow.vue";
-export { default as TableCaption } from "./TableCaption.vue";
-export { default as TableEmpty } from "./TableEmpty.vue";
+export { default as Table } from './Table.vue'
+export { default as TableBody } from './TableBody.vue'
+export { default as TableCell } from './TableCell.vue'
+export { default as TableHead } from './TableHead.vue'
+export { default as TableHeader } from './TableHeader.vue'
+export { default as TableFooter } from './TableFooter.vue'
+export { default as TableRow } from './TableRow.vue'
+export { default as TableCaption } from './TableCaption.vue'
+export { default as TableEmpty } from './TableEmpty.vue'
diff --git a/frontend/src/components/ui/tabs/Tabs.vue b/frontend/src/components/ui/tabs/Tabs.vue
index 5700503..96b3eba 100644
--- a/frontend/src/components/ui/tabs/Tabs.vue
+++ b/frontend/src/components/ui/tabs/Tabs.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { TabsRoot, useForwardPropsEmits } from "radix-vue";
+import { TabsRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   defaultValue: { type: null, required: false },
@@ -8,11 +8,11 @@ const props = defineProps({
   activationMode: { type: String, required: false },
   modelValue: { type: null, required: false },
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
+  as: { type: null, required: false }
+})
+const emits = defineEmits(['update:modelValue'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tabs/TabsContent.vue b/frontend/src/components/ui/tabs/TabsContent.vue
index a8571cb..26719b3 100644
--- a/frontend/src/components/ui/tabs/TabsContent.vue
+++ b/frontend/src/components/ui/tabs/TabsContent.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { TabsContent } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TabsContent } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   value: { type: [String, Number], required: true },
   forceMount: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tabs/TabsList.vue b/frontend/src/components/ui/tabs/TabsList.vue
index 0d5dbb6..c8e0616 100644
--- a/frontend/src/components/ui/tabs/TabsList.vue
+++ b/frontend/src/components/ui/tabs/TabsList.vue
@@ -1,20 +1,20 @@
 <script setup>
-import { computed } from "vue";
-import { TabsList } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TabsList } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   loop: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tabs/TabsTrigger.vue b/frontend/src/components/ui/tabs/TabsTrigger.vue
index 1dd1fee..7844d01 100644
--- a/frontend/src/components/ui/tabs/TabsTrigger.vue
+++ b/frontend/src/components/ui/tabs/TabsTrigger.vue
@@ -1,23 +1,23 @@
 <script setup>
-import { computed } from "vue";
-import { TabsTrigger, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TabsTrigger, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   value: { type: [String, Number], required: true },
   disabled: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tabs/index.js b/frontend/src/components/ui/tabs/index.js
index 4a3afb9..fbea0c6 100644
--- a/frontend/src/components/ui/tabs/index.js
+++ b/frontend/src/components/ui/tabs/index.js
@@ -1,4 +1,4 @@
-export { default as Tabs } from "./Tabs.vue";
-export { default as TabsTrigger } from "./TabsTrigger.vue";
-export { default as TabsList } from "./TabsList.vue";
-export { default as TabsContent } from "./TabsContent.vue";
+export { default as Tabs } from './Tabs.vue'
+export { default as TabsTrigger } from './TabsTrigger.vue'
+export { default as TabsList } from './TabsList.vue'
+export { default as TabsContent } from './TabsContent.vue'
diff --git a/frontend/src/components/ui/tags-input/TagsInput.vue b/frontend/src/components/ui/tags-input/TagsInput.vue
index 1087c94..6c6e370 100644
--- a/frontend/src/components/ui/tags-input/TagsInput.vue
+++ b/frontend/src/components/ui/tags-input/TagsInput.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { TagsInputRoot, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TagsInputRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   modelValue: { type: Array, required: false },
@@ -21,17 +21,17 @@ const props = defineProps({
   displayValue: { type: Function, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue", "invalid"]);
+  class: { type: null, required: false }
+})
+const emits = defineEmits(['update:modelValue', 'invalid'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tags-input/TagsInputInput.vue b/frontend/src/components/ui/tags-input/TagsInputInput.vue
index 2d74723..e4686b4 100644
--- a/frontend/src/components/ui/tags-input/TagsInputInput.vue
+++ b/frontend/src/components/ui/tags-input/TagsInputInput.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed } from "vue";
-import { TagsInputInput, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TagsInputInput, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   placeholder: { type: String, required: false },
@@ -9,26 +9,21 @@ const props = defineProps({
   maxLength: { type: Number, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
   <TagsInputInput
     v-bind="forwardedProps"
-    :class="
-      cn(
-        'text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1',
-        props.class
-      )
-    "
+    :class="cn('text-sm min-h-5 focus:outline-none flex-1 bg-transparent px-1', props.class)"
   />
 </template>
diff --git a/frontend/src/components/ui/tags-input/TagsInputItem.vue b/frontend/src/components/ui/tags-input/TagsInputItem.vue
index e992ce4..fbd7b4e 100644
--- a/frontend/src/components/ui/tags-input/TagsInputItem.vue
+++ b/frontend/src/components/ui/tags-input/TagsInputItem.vue
@@ -1,24 +1,24 @@
 <script setup>
-import { computed } from "vue";
-import { TagsInputItem, useForwardProps } from "radix-vue";
+import { computed } from 'vue'
+import { TagsInputItem, useForwardProps } from 'radix-vue'
 
-import { cn } from "@/lib/utils";
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   value: { type: [String, Object], required: true },
   disabled: { type: Boolean, required: false },
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tags-input/TagsInputItemDelete.vue b/frontend/src/components/ui/tags-input/TagsInputItemDelete.vue
index 89780eb..94a77f7 100644
--- a/frontend/src/components/ui/tags-input/TagsInputItemDelete.vue
+++ b/frontend/src/components/ui/tags-input/TagsInputItemDelete.vue
@@ -1,22 +1,22 @@
 <script setup>
-import { computed } from "vue";
-import { TagsInputItemDelete, useForwardProps } from "radix-vue";
-import { Cross2Icon } from "@radix-icons/vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TagsInputItemDelete, useForwardProps } from 'radix-vue'
+import { Cross2Icon } from '@radix-icons/vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tags-input/TagsInputItemText.vue b/frontend/src/components/ui/tags-input/TagsInputItemText.vue
index 9810250..1bef695 100644
--- a/frontend/src/components/ui/tags-input/TagsInputItemText.vue
+++ b/frontend/src/components/ui/tags-input/TagsInputItemText.vue
@@ -1,21 +1,21 @@
 <script setup>
-import { computed } from "vue";
-import { TagsInputItemText, useForwardProps } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TagsInputItemText, useForwardProps } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tags-input/index.js b/frontend/src/components/ui/tags-input/index.js
index c65131b..31305f3 100644
--- a/frontend/src/components/ui/tags-input/index.js
+++ b/frontend/src/components/ui/tags-input/index.js
@@ -1,5 +1,5 @@
-export { default as TagsInput } from "./TagsInput.vue";
-export { default as TagsInputInput } from "./TagsInputInput.vue";
-export { default as TagsInputItem } from "./TagsInputItem.vue";
-export { default as TagsInputItemDelete } from "./TagsInputItemDelete.vue";
-export { default as TagsInputItemText } from "./TagsInputItemText.vue";
+export { default as TagsInput } from './TagsInput.vue'
+export { default as TagsInputInput } from './TagsInputInput.vue'
+export { default as TagsInputItem } from './TagsInputItem.vue'
+export { default as TagsInputItemDelete } from './TagsInputItemDelete.vue'
+export { default as TagsInputItemText } from './TagsInputItemText.vue'
diff --git a/frontend/src/components/ui/textarea/Textarea.vue b/frontend/src/components/ui/textarea/Textarea.vue
index 230a5bf..b7e3e45 100644
--- a/frontend/src/components/ui/textarea/Textarea.vue
+++ b/frontend/src/components/ui/textarea/Textarea.vue
@@ -1,19 +1,19 @@
 <script setup>
-import { useVModel } from "@vueuse/core";
-import { cn } from "@/lib/utils";
+import { useVModel } from '@vueuse/core'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   class: { type: null, required: false },
   defaultValue: { type: [String, Number], required: false },
-  modelValue: { type: [String, Number], required: false },
-});
+  modelValue: { type: [String, Number], required: false }
+})
 
-const emits = defineEmits(["update:modelValue"]);
+const emits = defineEmits(['update:modelValue'])
 
-const modelValue = useVModel(props, "modelValue", emits, {
+const modelValue = useVModel(props, 'modelValue', emits, {
   passive: true,
-  defaultValue: props.defaultValue,
-});
+  defaultValue: props.defaultValue
+})
 </script>
 
 <template>
@@ -22,7 +22,7 @@ const modelValue = useVModel(props, "modelValue", emits, {
     :class="
       cn(
         'flex min-h-[60px] w-full rounded-md border border-input bg-transparent px-3 py-2 text-sm shadow-sm placeholder:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:cursor-not-allowed disabled:opacity-50',
-        props.class,
+        props.class
       )
     "
   />
diff --git a/frontend/src/components/ui/textarea/index.js b/frontend/src/components/ui/textarea/index.js
index 178d08c..6a7ab2a 100644
--- a/frontend/src/components/ui/textarea/index.js
+++ b/frontend/src/components/ui/textarea/index.js
@@ -1 +1 @@
-export { default as Textarea } from "./Textarea.vue";
+export { default as Textarea } from './Textarea.vue'
diff --git a/frontend/src/components/ui/toast/ToastAction.vue b/frontend/src/components/ui/toast/ToastAction.vue
index ef139a9..42e4001 100644
--- a/frontend/src/components/ui/toast/ToastAction.vue
+++ b/frontend/src/components/ui/toast/ToastAction.vue
@@ -13,7 +13,15 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastAction v-bind="delegatedProps" :class="cn('inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive', props.class)">
+  <ToastAction
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'inline-flex h-8 shrink-0 items-center justify-center rounded-md border bg-transparent px-3 text-sm font-medium transition-colors hover:bg-secondary focus:outline-none focus:ring-1 focus:ring-ring disabled:pointer-events-none disabled:opacity-50 group-[.destructive]:border-muted/40 group-[.destructive]:hover:border-destructive/30 group-[.destructive]:hover:bg-destructive group-[.destructive]:hover:text-destructive-foreground group-[.destructive]:focus:ring-destructive',
+        props.class
+      )
+    "
+  >
     <slot />
   </ToastAction>
 </template>
diff --git a/frontend/src/components/ui/toast/ToastClose.vue b/frontend/src/components/ui/toast/ToastClose.vue
index 782cf18..5801f5b 100644
--- a/frontend/src/components/ui/toast/ToastClose.vue
+++ b/frontend/src/components/ui/toast/ToastClose.vue
@@ -4,9 +4,11 @@ import { ToastClose, type ToastCloseProps } from 'radix-vue'
 import { Cross2Icon } from '@radix-icons/vue'
 import { cn } from '@/lib/utils'
 
-const props = defineProps<ToastCloseProps & {
-  class?: HTMLAttributes['class']
-}>()
+const props = defineProps<
+  ToastCloseProps & {
+    class?: HTMLAttributes['class']
+  }
+>()
 
 const delegatedProps = computed(() => {
   const { class: _, ...delegated } = props
@@ -16,7 +18,15 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastClose v-bind="delegatedProps" :class="cn('absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600', props.class)">
+  <ToastClose
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'absolute right-1 top-1 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-1 group-hover:opacity-100 group-[.destructive]:text-red-300 group-[.destructive]:hover:text-red-50 group-[.destructive]:focus:ring-red-400 group-[.destructive]:focus:ring-offset-red-600',
+        props.class
+      )
+    "
+  >
     <Cross2Icon class="h-4 w-4" />
   </ToastClose>
 </template>
diff --git a/frontend/src/components/ui/toast/ToastProvider.vue b/frontend/src/components/ui/toast/ToastProvider.vue
index 6cecb2e..340cbd8 100644
--- a/frontend/src/components/ui/toast/ToastProvider.vue
+++ b/frontend/src/components/ui/toast/ToastProvider.vue
@@ -1,7 +1,7 @@
 <script setup lang="ts">
 import { ToastProvider, type ToastProviderProps } from 'radix-vue'
 
-const props =  defineProps<ToastProviderProps>()
+const props = defineProps<ToastProviderProps>()
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/toast/ToastTitle.vue b/frontend/src/components/ui/toast/ToastTitle.vue
index 5737542..f1c8742 100644
--- a/frontend/src/components/ui/toast/ToastTitle.vue
+++ b/frontend/src/components/ui/toast/ToastTitle.vue
@@ -13,7 +13,10 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastTitle v-bind="delegatedProps" :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)">
+  <ToastTitle
+    v-bind="delegatedProps"
+    :class="cn('text-sm font-semibold [&+div]:text-xs', props.class)"
+  >
     <slot />
   </ToastTitle>
 </template>
diff --git a/frontend/src/components/ui/toast/ToastViewport.vue b/frontend/src/components/ui/toast/ToastViewport.vue
index 57deec8..aed0e04 100644
--- a/frontend/src/components/ui/toast/ToastViewport.vue
+++ b/frontend/src/components/ui/toast/ToastViewport.vue
@@ -13,5 +13,13 @@ const delegatedProps = computed(() => {
 </script>
 
 <template>
-  <ToastViewport v-bind="delegatedProps" :class="cn('fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]', props.class)" />
+  <ToastViewport
+    v-bind="delegatedProps"
+    :class="
+      cn(
+        'fixed top-0 z-[100] flex max-h-screen w-full flex-col-reverse p-4 sm:bottom-0 sm:right-0 sm:top-auto sm:flex-col md:max-w-[420px]',
+        props.class
+      )
+    "
+  />
 </template>
diff --git a/frontend/src/components/ui/toast/index.ts b/frontend/src/components/ui/toast/index.ts
index 8d943b7..1fbddda 100644
--- a/frontend/src/components/ui/toast/index.ts
+++ b/frontend/src/components/ui/toast/index.ts
@@ -20,13 +20,13 @@ export const toastVariants = cva(
       variant: {
         default: 'border bg-background text-foreground',
         destructive:
-                    'destructive group border-destructive bg-destructive text-destructive-foreground',
-      },
+          'destructive group border-destructive bg-destructive text-destructive-foreground'
+      }
     },
     defaultVariants: {
-      variant: 'default',
-    },
-  },
+      variant: 'default'
+    }
+  }
 )
 
 type ToastVariants = VariantProps<typeof toastVariants>
diff --git a/frontend/src/components/ui/toast/use-toast.ts b/frontend/src/components/ui/toast/use-toast.ts
index 500e929..f9e000c 100644
--- a/frontend/src/components/ui/toast/use-toast.ts
+++ b/frontend/src/components/ui/toast/use-toast.ts
@@ -5,10 +5,7 @@ import type { ToastProps } from '.'
 const TOAST_LIMIT = 1
 const TOAST_REMOVE_DELAY = 1000000
 
-export type StringOrVNode =
-  | string
-  | VNode
-  | (() => VNode)
+export type StringOrVNode = string | VNode | (() => VNode)
 
 type ToasterToast = ToastProps & {
   id: string
@@ -21,7 +18,7 @@ const actionTypes = {
   ADD_TOAST: 'ADD_TOAST',
   UPDATE_TOAST: 'UPDATE_TOAST',
   DISMISS_TOAST: 'DISMISS_TOAST',
-  REMOVE_TOAST: 'REMOVE_TOAST',
+  REMOVE_TOAST: 'REMOVE_TOAST'
 } as const
 
 let count = 0
@@ -35,21 +32,21 @@ type ActionType = typeof actionTypes
 
 type Action =
   | {
-    type: ActionType['ADD_TOAST']
-    toast: ToasterToast
-  }
+      type: ActionType['ADD_TOAST']
+      toast: ToasterToast
+    }
   | {
-    type: ActionType['UPDATE_TOAST']
-    toast: Partial<ToasterToast>
-  }
+      type: ActionType['UPDATE_TOAST']
+      toast: Partial<ToasterToast>
+    }
   | {
-    type: ActionType['DISMISS_TOAST']
-    toastId?: ToasterToast['id']
-  }
+      type: ActionType['DISMISS_TOAST']
+      toastId?: ToasterToast['id']
+    }
   | {
-    type: ActionType['REMOVE_TOAST']
-    toastId?: ToasterToast['id']
-  }
+      type: ActionType['REMOVE_TOAST']
+      toastId?: ToasterToast['id']
+    }
 
 interface State {
   toasts: ToasterToast[]
@@ -58,14 +55,13 @@ interface State {
 const toastTimeouts = new Map<string, ReturnType<typeof setTimeout>>()
 
 function addToRemoveQueue(toastId: string) {
-  if (toastTimeouts.has(toastId))
-    return
+  if (toastTimeouts.has(toastId)) return
 
   const timeout = setTimeout(() => {
     toastTimeouts.delete(toastId)
     dispatch({
       type: actionTypes.REMOVE_TOAST,
-      toastId,
+      toastId
     })
   }, TOAST_REMOVE_DELAY)
 
@@ -73,7 +69,7 @@ function addToRemoveQueue(toastId: string) {
 }
 
 const state = ref<State>({
-  toasts: [],
+  toasts: []
 })
 
 function dispatch(action: Action) {
@@ -83,8 +79,8 @@ function dispatch(action: Action) {
       break
 
     case actionTypes.UPDATE_TOAST:
-      state.value.toasts = state.value.toasts.map(t =>
-        t.id === action.toast.id ? { ...t, ...action.toast } : t,
+      state.value.toasts = state.value.toasts.map((t) =>
+        t.id === action.toast.id ? { ...t, ...action.toast } : t
       )
       break
 
@@ -93,29 +89,26 @@ function dispatch(action: Action) {
 
       if (toastId) {
         addToRemoveQueue(toastId)
-      }
-      else {
+      } else {
         state.value.toasts.forEach((toast) => {
           addToRemoveQueue(toast.id)
         })
       }
 
-      state.value.toasts = state.value.toasts.map(t =>
+      state.value.toasts = state.value.toasts.map((t) =>
         t.id === toastId || toastId === undefined
           ? {
               ...t,
-              open: false,
+              open: false
             }
-          : t,
+          : t
       )
       break
     }
 
     case actionTypes.REMOVE_TOAST:
-      if (action.toastId === undefined)
-        state.value.toasts = []
-      else
-        state.value.toasts = state.value.toasts.filter(t => t.id !== action.toastId)
+      if (action.toastId === undefined) state.value.toasts = []
+      else state.value.toasts = state.value.toasts.filter((t) => t.id !== action.toastId)
 
       break
   }
@@ -125,7 +118,7 @@ function useToast() {
   return {
     toasts: computed(() => state.value.toasts),
     toast,
-    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId }),
+    dismiss: (toastId?: string) => dispatch({ type: actionTypes.DISMISS_TOAST, toastId })
   }
 }
 
@@ -137,7 +130,7 @@ function toast(props: Toast) {
   const update = (props: ToasterToast) =>
     dispatch({
       type: actionTypes.UPDATE_TOAST,
-      toast: { ...props, id },
+      toast: { ...props, id }
     })
 
   const dismiss = () => dispatch({ type: actionTypes.DISMISS_TOAST, toastId: id })
@@ -149,16 +142,15 @@ function toast(props: Toast) {
       id,
       open: true,
       onOpenChange: (open: boolean) => {
-        if (!open)
-          dismiss()
-      },
-    },
+        if (!open) dismiss()
+      }
+    }
   })
 
   return {
     id,
     dismiss,
-    update,
+    update
   }
 }
 
diff --git a/frontend/src/components/ui/toggle-group/ToggleGroup.vue b/frontend/src/components/ui/toggle-group/ToggleGroup.vue
index 342a76f..db3def0 100644
--- a/frontend/src/components/ui/toggle-group/ToggleGroup.vue
+++ b/frontend/src/components/ui/toggle-group/ToggleGroup.vue
@@ -1,7 +1,7 @@
 <script setup>
-import { computed, provide } from "vue";
-import { ToggleGroupRoot, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed, provide } from 'vue'
+import { ToggleGroupRoot, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   rovingFocus: { type: Boolean, required: false },
@@ -16,21 +16,21 @@ const props = defineProps({
   defaultValue: { type: null, required: false },
   class: { type: null, required: false },
   variant: { type: null, required: false },
-  size: { type: null, required: false },
-});
-const emits = defineEmits(["update:modelValue"]);
+  size: { type: null, required: false }
+})
+const emits = defineEmits(['update:modelValue'])
 
-provide("toggleGroup", {
+provide('toggleGroup', {
   variant: props.variant,
-  size: props.size,
-});
+  size: props.size
+})
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, ...delegated } = props
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/toggle-group/ToggleGroupItem.vue b/frontend/src/components/ui/toggle-group/ToggleGroupItem.vue
index 2516308..a26f1b1 100644
--- a/frontend/src/components/ui/toggle-group/ToggleGroupItem.vue
+++ b/frontend/src/components/ui/toggle-group/ToggleGroupItem.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed, inject } from "vue";
-import { ToggleGroupItem, useForwardProps } from "radix-vue";
-import { toggleVariants } from "@/components/ui/toggle";
-import { cn } from "@/lib/utils";
+import { computed, inject } from 'vue'
+import { ToggleGroupItem, useForwardProps } from 'radix-vue'
+import { toggleVariants } from '@/components/ui/toggle'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   value: { type: String, required: true },
@@ -13,17 +13,17 @@ const props = defineProps({
   as: { type: null, required: false },
   class: { type: null, required: false },
   variant: { type: null, required: false },
-  size: { type: null, required: false },
-});
+  size: { type: null, required: false }
+})
 
-const context = inject("toggleGroup");
+const context = inject('toggleGroup')
 
 const delegatedProps = computed(() => {
-  const { class: _, variant, size, ...delegated } = props;
-  return delegated;
-});
+  const { class: _, variant, size, ...delegated } = props
+  return delegated
+})
 
-const forwardedProps = useForwardProps(delegatedProps);
+const forwardedProps = useForwardProps(delegatedProps)
 </script>
 
 <template>
@@ -33,9 +33,9 @@ const forwardedProps = useForwardProps(delegatedProps);
       cn(
         toggleVariants({
           variant: context?.variant || variant,
-          size: context?.size || size,
+          size: context?.size || size
         }),
-        props.class,
+        props.class
       )
     "
   >
diff --git a/frontend/src/components/ui/toggle-group/index.js b/frontend/src/components/ui/toggle-group/index.js
index c72df1e..9f89ad7 100644
--- a/frontend/src/components/ui/toggle-group/index.js
+++ b/frontend/src/components/ui/toggle-group/index.js
@@ -1,2 +1,2 @@
-export { default as ToggleGroup } from "./ToggleGroup.vue";
-export { default as ToggleGroupItem } from "./ToggleGroupItem.vue";
+export { default as ToggleGroup } from './ToggleGroup.vue'
+export { default as ToggleGroupItem } from './ToggleGroupItem.vue'
diff --git a/frontend/src/components/ui/toggle/Toggle.vue b/frontend/src/components/ui/toggle/Toggle.vue
index fdeccfc..5769294 100644
--- a/frontend/src/components/ui/toggle/Toggle.vue
+++ b/frontend/src/components/ui/toggle/Toggle.vue
@@ -1,8 +1,8 @@
 <script setup>
-import { computed } from "vue";
-import { Toggle, useForwardPropsEmits } from "radix-vue";
-import { toggleVariants } from ".";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { Toggle, useForwardPropsEmits } from 'radix-vue'
+import { toggleVariants } from '.'
+import { cn } from '@/lib/utils'
 
 const props = defineProps({
   defaultValue: { type: Boolean, required: false },
@@ -11,26 +11,23 @@ const props = defineProps({
   asChild: { type: Boolean, required: false },
   as: { type: null, required: false },
   class: { type: null, required: false },
-  variant: { type: null, required: false, default: "default" },
-  size: { type: null, required: false, default: "default" },
-});
+  variant: { type: null, required: false, default: 'default' },
+  size: { type: null, required: false, default: 'default' }
+})
 
-const emits = defineEmits(["update:pressed"]);
+const emits = defineEmits(['update:pressed'])
 
 const delegatedProps = computed(() => {
-  const { class: _, size, variant, ...delegated } = props;
+  const { class: _, size, variant, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
-  <Toggle
-    v-bind="forwarded"
-    :class="cn(toggleVariants({ variant, size }), props.class)"
-  >
+  <Toggle v-bind="forwarded" :class="cn(toggleVariants({ variant, size }), props.class)">
     <slot />
   </Toggle>
 </template>
diff --git a/frontend/src/components/ui/toggle/index.js b/frontend/src/components/ui/toggle/index.js
index 1369528..c2dd401 100644
--- a/frontend/src/components/ui/toggle/index.js
+++ b/frontend/src/components/ui/toggle/index.js
@@ -1,25 +1,25 @@
-import { cva } from "class-variance-authority";
+import { cva } from 'class-variance-authority'
 
-export { default as Toggle } from "./Toggle.vue";
+export { default as Toggle } from './Toggle.vue'
 
 export const toggleVariants = cva(
-  "inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground",
+  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors hover:bg-muted hover:text-muted-foreground focus-visible:outline-none focus-visible:ring-1 focus-visible:ring-ring disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-accent data-[state=on]:text-accent-foreground',
   {
     variants: {
       variant: {
-        default: "bg-transparent",
+        default: 'bg-transparent',
         outline:
-          "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
+          'border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground'
       },
       size: {
-        default: "h-9 px-3",
-        sm: "h-8 px-2",
-        lg: "h-10 px-3",
-      },
+        default: 'h-9 px-3',
+        sm: 'h-8 px-2',
+        lg: 'h-10 px-3'
+      }
     },
     defaultVariants: {
-      variant: "default",
-      size: "default",
-    },
-  },
-);
+      variant: 'default',
+      size: 'default'
+    }
+  }
+)
diff --git a/frontend/src/components/ui/tooltip/Tooltip.vue b/frontend/src/components/ui/tooltip/Tooltip.vue
index a836e2c..b66372f 100644
--- a/frontend/src/components/ui/tooltip/Tooltip.vue
+++ b/frontend/src/components/ui/tooltip/Tooltip.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipRoot, useForwardPropsEmits } from "radix-vue";
+import { TooltipRoot, useForwardPropsEmits } from 'radix-vue'
 
 const props = defineProps({
   defaultOpen: { type: Boolean, required: false },
@@ -8,11 +8,11 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false },
-});
-const emits = defineEmits(["update:open"]);
+  ignoreNonKeyboardFocus: { type: Boolean, required: false }
+})
+const emits = defineEmits(['update:open'])
 
-const forwarded = useForwardPropsEmits(props, emits);
+const forwarded = useForwardPropsEmits(props, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tooltip/TooltipContent.vue b/frontend/src/components/ui/tooltip/TooltipContent.vue
index 7eec6b5..5b09f1e 100644
--- a/frontend/src/components/ui/tooltip/TooltipContent.vue
+++ b/frontend/src/components/ui/tooltip/TooltipContent.vue
@@ -1,11 +1,11 @@
 <script setup>
-import { computed } from "vue";
-import { TooltipContent, TooltipPortal, useForwardPropsEmits } from "radix-vue";
-import { cn } from "@/lib/utils";
+import { computed } from 'vue'
+import { TooltipContent, TooltipPortal, useForwardPropsEmits } from 'radix-vue'
+import { cn } from '@/lib/utils'
 
 defineOptions({
-  inheritAttrs: false,
-});
+  inheritAttrs: false
+})
 
 const props = defineProps({
   ariaLabel: { type: String, required: false },
@@ -21,18 +21,18 @@ const props = defineProps({
   arrowPadding: { type: Number, required: false },
   sticky: { type: String, required: false },
   hideWhenDetached: { type: Boolean, required: false },
-  class: { type: null, required: false },
-});
+  class: { type: null, required: false }
+})
 
-const emits = defineEmits(["escapeKeyDown", "pointerDownOutside"]);
+const emits = defineEmits(['escapeKeyDown', 'pointerDownOutside'])
 
 const delegatedProps = computed(() => {
-  const { class: _, ...delegated } = props;
+  const { class: _, ...delegated } = props
 
-  return delegated;
-});
+  return delegated
+})
 
-const forwarded = useForwardPropsEmits(delegatedProps, emits);
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tooltip/TooltipProvider.vue b/frontend/src/components/ui/tooltip/TooltipProvider.vue
index e2c0a63..2e978bd 100644
--- a/frontend/src/components/ui/tooltip/TooltipProvider.vue
+++ b/frontend/src/components/ui/tooltip/TooltipProvider.vue
@@ -1,5 +1,5 @@
 <script setup>
-import { TooltipProvider } from "radix-vue";
+import { TooltipProvider } from 'radix-vue'
 
 const props = defineProps({
   delayDuration: { type: Number, required: false },
@@ -7,8 +7,8 @@ const props = defineProps({
   disableHoverableContent: { type: Boolean, required: false },
   disableClosingTrigger: { type: Boolean, required: false },
   disabled: { type: Boolean, required: false },
-  ignoreNonKeyboardFocus: { type: Boolean, required: false },
-});
+  ignoreNonKeyboardFocus: { type: Boolean, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tooltip/TooltipTrigger.vue b/frontend/src/components/ui/tooltip/TooltipTrigger.vue
index f01a78d..b05cb99 100644
--- a/frontend/src/components/ui/tooltip/TooltipTrigger.vue
+++ b/frontend/src/components/ui/tooltip/TooltipTrigger.vue
@@ -1,10 +1,10 @@
 <script setup>
-import { TooltipTrigger } from "radix-vue";
+import { TooltipTrigger } from 'radix-vue'
 
 const props = defineProps({
   asChild: { type: Boolean, required: false },
-  as: { type: null, required: false },
-});
+  as: { type: null, required: false }
+})
 </script>
 
 <template>
diff --git a/frontend/src/components/ui/tooltip/index.js b/frontend/src/components/ui/tooltip/index.js
index cf1014d..82049b4 100644
--- a/frontend/src/components/ui/tooltip/index.js
+++ b/frontend/src/components/ui/tooltip/index.js
@@ -1,4 +1,4 @@
-export { default as Tooltip } from "./Tooltip.vue";
-export { default as TooltipContent } from "./TooltipContent.vue";
-export { default as TooltipTrigger } from "./TooltipTrigger.vue";
-export { default as TooltipProvider } from "./TooltipProvider.vue";
+export { default as Tooltip } from './Tooltip.vue'
+export { default as TooltipContent } from './TooltipContent.vue'
+export { default as TooltipTrigger } from './TooltipTrigger.vue'
+export { default as TooltipProvider } from './TooltipProvider.vue'
diff --git a/frontend/src/composables/useEmitter.js b/frontend/src/composables/useEmitter.js
index 4a920af..525d4a7 100644
--- a/frontend/src/composables/useEmitter.js
+++ b/frontend/src/composables/useEmitter.js
@@ -1,6 +1,6 @@
-import { getCurrentInstance } from 'vue';
+import { getCurrentInstance } from 'vue'
 
-export function useEmitter () {
-    const instance = getCurrentInstance();
-    return instance.appContext.config.globalProperties.emitter;
+export function useEmitter() {
+  const instance = getCurrentInstance()
+  return instance.appContext.config.globalProperties.emitter
 }
diff --git a/frontend/src/composables/useTemporaryClass.js b/frontend/src/composables/useTemporaryClass.js
index 0f7edf9..321e518 100644
--- a/frontend/src/composables/useTemporaryClass.js
+++ b/frontend/src/composables/useTemporaryClass.js
@@ -1,29 +1,29 @@
 import { ref, onUnmounted, nextTick } from 'vue'
 
-export function useTemporaryClass (containerID, className, timeMs = 300) {
-    const container = ref(null)
+export function useTemporaryClass(containerID, className, timeMs = 300) {
+  const container = ref(null)
 
-    const applyClass = async () => {
-        await nextTick()
-        container.value = document.getElementById(containerID)
-        if (container.value) {
-            container.value.classList.add(className)
-            setTimeout(() => {
-                container.value?.classList.remove(className)
-            }, timeMs)
-        }
+  const applyClass = async () => {
+    await nextTick()
+    container.value = document.getElementById(containerID)
+    if (container.value) {
+      container.value.classList.add(className)
+      setTimeout(() => {
+        container.value?.classList.remove(className)
+      }, timeMs)
     }
+  }
 
-    applyClass()
+  applyClass()
 
-    onUnmounted(() => {
-        if (container.value) {
-            container.value.classList.remove(className)
-            container.value = null
-        }
-    })
-
-    return {
-        container
+  onUnmounted(() => {
+    if (container.value) {
+      container.value.classList.remove(className)
+      container.value = null
     }
+  })
+
+  return {
+    container
+  }
 }
diff --git a/frontend/src/constants/conversation.js b/frontend/src/constants/conversation.js
index 9dbb770..cb57363 100644
--- a/frontend/src/constants/conversation.js
+++ b/frontend/src/constants/conversation.js
@@ -1,14 +1,13 @@
 export const CONVERSATION_PRE_DEFINED_FILTERS = {
-    ALL: "status_all",
-    STATUS_OPEN: 'status_open',
-    STATUS_PROCESSING: 'status_processing',
-    STATUS_SPAM: 'status_spam',
-    STATUS_RESOLVED: 'status_resolved'
-};
-
+  ALL: 'status_all',
+  STATUS_OPEN: 'status_open',
+  STATUS_PROCESSING: 'status_processing',
+  STATUS_SPAM: 'status_spam',
+  STATUS_RESOLVED: 'status_resolved'
+}
 
 export const CONVERSATION_LIST_TYPE = {
-    ASSIGNED: 'assigned',
-    UNASSIGNED: 'unassigned',
-    ALL: 'all'
-}
\ No newline at end of file
+  ASSIGNED: 'assigned',
+  UNASSIGNED: 'unassigned',
+  ALL: 'all'
+}
diff --git a/frontend/src/lib/utils.js b/frontend/src/lib/utils.js
index 378ccef..9d7d3ea 100644
--- a/frontend/src/lib/utils.js
+++ b/frontend/src/lib/utils.js
@@ -1,6 +1,6 @@
-import { clsx } from "clsx";
-import { twMerge } from "tailwind-merge";
+import { clsx } from 'clsx'
+import { twMerge } from 'tailwind-merge'
 
 export function cn(...inputs) {
-  return twMerge(clsx(inputs));
+  return twMerge(clsx(inputs))
 }
diff --git a/frontend/src/main.js b/frontend/src/main.js
index bd49b5f..d597520 100644
--- a/frontend/src/main.js
+++ b/frontend/src/main.js
@@ -3,57 +3,57 @@ import { createPinia } from 'pinia'
 import { createI18n } from 'vue-i18n'
 import App from './App.vue'
 import router from './router'
-import mitt from 'mitt';
+import mitt from 'mitt'
 import './assets/styles/main.scss'
-import './utils/strings.js';
+import './utils/strings.js'
 import api from './api'
 
-async function initApp () {
-    const emitter = mitt();
+async function initApp() {
+  const emitter = mitt()
 
-    let lang = 'en';
-    const settings = (await api.getSettings('general')).data.data;
+  let lang = 'en'
+  const settings = (await api.getSettings('general')).data.data
 
-    // Set the language
-    lang = settings['app.lang'];
-    const langMessages = await api.getLanguage(lang);
+  // Set the language
+  lang = settings['app.lang']
+  const langMessages = await api.getLanguage(lang)
 
-    // Set the favicon based on settings
-    const faviconUrl = settings['app.favicon_url'] || '/default-favicon.ico';
-    const link = document.querySelector("link[rel~='icon']");
-    if (link) {
-        link.href = faviconUrl;
-    } else {
-        const newLink = document.createElement('link');
-        newLink.rel = 'icon';
-        newLink.href = faviconUrl;
-        document.head.appendChild(newLink);
+  // Set the favicon based on settings
+  const faviconUrl = settings['app.favicon_url'] || '/default-favicon.ico'
+  const link = document.querySelector("link[rel~='icon']")
+  if (link) {
+    link.href = faviconUrl
+  } else {
+    const newLink = document.createElement('link')
+    newLink.rel = 'icon'
+    newLink.href = faviconUrl
+    document.head.appendChild(newLink)
+  }
+
+  // Set the page title based on settings
+  const pageTitle = settings['app.site_name'] || 'Support'
+  document.title = pageTitle
+
+  // Initialize i18n
+  const i18nConfig = {
+    legacy: false,
+    locale: lang,
+    fallbackLocale: 'en',
+    messages: {
+      [lang]: langMessages.data
     }
+  }
+  const i18n = createI18n(i18nConfig)
+  const app = createApp(App)
+  const pinia = createPinia()
 
-    // Set the page title based on settings
-    const pageTitle = settings['app.site_name'] || 'Support';
-    document.title = pageTitle;
-
-    // Initialize i18n
-    const i18nConfig = {
-        legacy: false,
-        locale: lang,
-        fallbackLocale: 'en',
-        messages: {
-            [lang]: langMessages.data
-        }
-    };
-    const i18n = createI18n(i18nConfig);
-    const app = createApp(App);
-    const pinia = createPinia();
-
-    app.config.globalProperties.emitter = emitter;
-    app.use(router);
-    app.use(pinia);
-    app.use(i18n);
-    app.mount('#app');
+  app.config.globalProperties.emitter = emitter
+  app.use(router)
+  app.use(pinia)
+  app.use(i18n)
+  app.mount('#app')
 }
 
 initApp().catch((error) => {
-    console.error("Error initializing app: ", error);
-});
+  console.error('Error initializing app: ', error)
+})
diff --git a/frontend/src/router/index.js b/frontend/src/router/index.js
index e779fe0..77cf9ad 100644
--- a/frontend/src/router/index.js
+++ b/frontend/src/router/index.js
@@ -168,7 +168,7 @@ const routes = [
       {
         path: 'conversations/status',
         component: () => import('@/components/admin/conversation/status/StatusPage.vue')
-      },
+      }
     ]
   },
   // Fallback to dashboard.
diff --git a/frontend/src/stores/agents.js b/frontend/src/stores/agents.js
index 93c2e6b..7b57191 100644
--- a/frontend/src/stores/agents.js
+++ b/frontend/src/stores/agents.js
@@ -1,20 +1,20 @@
 import { defineStore } from 'pinia'
-import { ref } from "vue"
-import api from '@/api';
+import { ref } from 'vue'
+import api from '@/api'
 
 export const useAgents = defineStore('agents', () => {
-    const agents = ref([])
+  const agents = ref([])
 
-    async function fetchAll () {
-        try {
-            const resp = await api.getAgents();
-            agents.value = resp.data.data
-        } catch (error) {
-            // Pass
-        } finally {
-            // Pass
-        }
+  async function fetchAll() {
+    try {
+      const resp = await api.getAgents()
+      agents.value = resp.data.data
+    } catch (error) {
+      // Pass
+    } finally {
+      // Pass
     }
+  }
 
-    return { agents, fetchAll }
-})
\ No newline at end of file
+  return { agents, fetchAll }
+})
diff --git a/frontend/src/stores/canned_responses.js b/frontend/src/stores/canned_responses.js
index 0e81720..6093178 100644
--- a/frontend/src/stores/canned_responses.js
+++ b/frontend/src/stores/canned_responses.js
@@ -1,20 +1,20 @@
 import { defineStore } from 'pinia'
-import { ref } from "vue"
-import api from '@/api';
+import { ref } from 'vue'
+import api from '@/api'
 
 export const useCannedResponses = defineStore('canned_responses', () => {
-    const responses = ref([])
+  const responses = ref([])
 
-    async function fetchAll () {
-        try {
-            const resp = await api.getCannedResponses();
-            responses.value = resp.data.data
-        } catch (error) {
-            // Pass
-        } finally {
-            // Pass
-        }
+  async function fetchAll() {
+    try {
+      const resp = await api.getCannedResponses()
+      responses.value = resp.data.data
+    } catch (error) {
+      // Pass
+    } finally {
+      // Pass
     }
+  }
 
-    return { responses, fetchAll }
-})
\ No newline at end of file
+  return { responses, fetchAll }
+})
diff --git a/frontend/src/stores/conversation.js b/frontend/src/stores/conversation.js
index 16f69c9..f86bbbb 100644
--- a/frontend/src/stores/conversation.js
+++ b/frontend/src/stores/conversation.js
@@ -1,392 +1,414 @@
 import { defineStore } from 'pinia'
-import { computed, reactive, onUnmounted } from "vue"
+import { computed, reactive, onUnmounted } from 'vue'
 import { handleHTTPError } from '@/utils/http'
 import { useToast } from '@/components/ui/toast/use-toast'
 import { CONVERSATION_LIST_TYPE } from '@/constants/conversation'
-import api from '@/api';
-import { useEmitter } from '@/composables/useEmitter';
+import api from '@/api'
+import { useEmitter } from '@/composables/useEmitter'
 
 export const useConversationStore = defineStore('conversation', () => {
-    // List of conversations
-    const conversations = reactive({
-        data: [],
-        loading: false,
-        page: 1,
-        hasMore: true,
-        errorMessage: "",
-    })
+  // List of conversations
+  const conversations = reactive({
+    data: [],
+    loading: false,
+    page: 1,
+    hasMore: true,
+    errorMessage: ''
+  })
 
-    // Currently selected conversation.
-    const conversation = reactive({
-        data: null,
-        participants: {},
-        loading: false,
-        errorMessage: ""
-    })
+  // Currently selected conversation.
+  const conversation = reactive({
+    data: null,
+    participants: {},
+    loading: false,
+    errorMessage: ''
+  })
 
-    // Messages for the selected conversation.
-    const messages = reactive({
-        data: [],
-        loading: false,
-        page: 1,
-        hasMore: true,
-        errorMessage: ""
-    })
+  // Messages for the selected conversation.
+  const messages = reactive({
+    data: [],
+    loading: false,
+    page: 1,
+    hasMore: true,
+    errorMessage: ''
+  })
 
-    // Map to track seen msg UUIDs for deduplication
-    let seenConversationUUIDs = new Map()
-    let seenMessageUUIDs = new Set();
-    let previousConvListType = ""
-    let previousPreDefinedFilter = ""
-    let reRenderInterval = setInterval(() => {
-        conversations.data = [...conversations.data]
-    }, 60000)
-    const { toast } = useToast()
-    const emitter = useEmitter()
+  // Map to track seen msg UUIDs for deduplication
+  let seenConversationUUIDs = new Map()
+  let seenMessageUUIDs = new Set()
+  let previousConvListType = ''
+  let previousPreDefinedFilter = ''
+  let reRenderInterval = setInterval(() => {
+    conversations.data = [...conversations.data]
+  }, 60000)
+  const { toast } = useToast()
+  const emitter = useEmitter()
 
+  // Clear the reRenderInterval when the store is destroyed.
+  onUnmounted(() => {
+    clearInterval(reRenderInterval)
+  })
 
-    // Clear the reRenderInterval when the store is destroyed.
-    onUnmounted(() => {
-        clearInterval(reRenderInterval)
-    })
+  // Computed property to sort conversations by last_message_at
+  const sortedConversations = computed(() => {
+    if (!conversations.data) {
+      return []
+    }
+    return [...conversations.data].sort(
+      (a, b) => new Date(b.last_message_at) - new Date(a.last_message_at)
+    )
+  })
 
-    // Computed property to sort conversations by last_message_at
-    const sortedConversations = computed(() => {
-        if (!conversations.data) {
-            return []
+  // Computed property to sort messages by created_at
+  const sortedMessages = computed(() => {
+    if (!messages.data) {
+      return []
+    }
+    return [...messages.data].sort((a, b) => new Date(a.created_at) - new Date(b.created_at))
+  })
+
+  const getContactFullName = (uuid) => {
+    const conv = conversations.data.find((conv) => conv.uuid === uuid)
+    return conv ? `${conv.first_name} ${conv.last_name}` : ''
+  }
+
+  function markAsRead(uuid) {
+    const index = conversations.data.findIndex((conv) => conv.uuid === uuid)
+    if (index !== -1) {
+      conversations.data[index].unread_message_count = 0
+    }
+  }
+
+  async function fetchConversation(uuid) {
+    conversation.loading = true
+    try {
+      const resp = await api.getConversation(uuid)
+      conversation.data = resp.data.data
+      // mark this conversation as read.
+      markAsRead(uuid)
+      // reset messages state on new conversation fetch.
+      resetMessages()
+    } catch (error) {
+      conversation.errorMessage = handleHTTPError(error).message
+    } finally {
+      conversation.loading = false
+    }
+  }
+
+  async function fetchParticipants(uuid) {
+    try {
+      const resp = await api.getConversationParticipants(uuid)
+      const participants = resp.data.data.reduce((acc, p) => {
+        acc[p.uuid] = p
+        return acc
+      }, {})
+      updateParticipants(participants)
+    } catch (error) {
+      console.error('Error fetching participants:', error)
+    }
+  }
+
+  async function fetchMessages(uuid) {
+    messages.loading = true
+    try {
+      const response = await api.getMessages(uuid, messages.page)
+      const fetchedMessages = response.data?.data || []
+
+      // Filter out messages that have already been seen
+      const newMessages = fetchedMessages.filter((message) => {
+        if (!seenMessageUUIDs.has(message.uuid)) {
+          seenMessageUUIDs.add(message.uuid)
+          return true
         }
-        return [...conversations.data].sort(
-            (a, b) => new Date(b.last_message_at) - new Date(a.last_message_at)
-        );
-    })
+        return false
+      })
 
-    // Computed property to sort messages by created_at
-    const sortedMessages = computed(() => {
-        if (!messages.data) {
-            return [];
-        }
-        return [...messages.data].sort((a, b) => new Date(a.created_at) - new Date(b.created_at));
-    });
-
-    const getContactFullName = (uuid) => {
-        const conv = conversations.data.find(conv => conv.uuid === uuid);
-        return conv ? `${conv.first_name} ${conv.last_name}` : '';
-    }
-
-    function markAsRead (uuid) {
-        const index = conversations.data.findIndex(conv => conv.uuid === uuid);
-        if (index !== -1) {
-            conversations.data[index].unread_message_count = 0
-        }
-    }
-
-    async function fetchConversation (uuid) {
-        conversation.loading = true;
-        try {
-            const resp = await api.getConversation(uuid);
-            conversation.data = resp.data.data
-            // mark this conversation as read.
-            markAsRead(uuid)
-            // reset messages state on new conversation fetch.
-            resetMessages()
-        } catch (error) {
-            conversation.errorMessage = handleHTTPError(error).message;
-        } finally {
-            conversation.loading = false;
-        }
-    }
-
-    async function fetchParticipants (uuid) {
-        try {
-            const resp = await api.getConversationParticipants(uuid);
-            const participants = resp.data.data.reduce((acc, p) => {
-                acc[p.uuid] = p;
-                return acc;
-            }, {});
-            updateParticipants(participants);
-        } catch (error) {
-            console.error("Error fetching participants:", error);
-        }
-    }
-
-    async function fetchMessages (uuid) {
-        messages.loading = true;
-        try {
-            const response = await api.getMessages(uuid, messages.page);
-            const fetchedMessages = response.data?.data || [];
-
-            // Filter out messages that have already been seen
-            const newMessages = fetchedMessages.filter(message => {
-                if (!seenMessageUUIDs.has(message.uuid)) {
-                    seenMessageUUIDs.add(message.uuid);
-                    return true;
-                }
-                return false;
-            });
-
-            if (newMessages.length === 0 && messages.page === 1) {
-                messages.data = []
-                return
-            }
-
-            if (newMessages.length === 0 && messages.page > 1) {
-                messages.hasMore = false;
-            }
-
-            // Add new messages to the messages data
-            messages.data.unshift(...newMessages);
-        } catch (error) {
-            toast({
-                title: 'Could not fetch messages, Please try again.',
-                variant: 'destructive',
-                description: handleHTTPError(error).message,
-            });
-            messages.data = [];
-            messages.hasMore = false;
-        } finally {
-            messages.loading = false;
-        }
-    }
-
-
-    async function fetchNextMessages () {
-        messages.page++;
-        fetchMessages(conversation.data.uuid)
-    }
-
-    async function fetchMessage (uuid) {
-        try {
-            const response = await api.getMessage(uuid);
-            if (response?.data?.data) {
-                const message = response.data.data
-                if (!messages.data.some(m => m.uuid === message.uuid)) {
-                    messages.data.push(message);
-                }
-            }
-        } catch (error) {
-            messages.errorMessage = handleHTTPError(error).message;
-        }
-    }
-
-    function onFilterchange () {
-        conversations.data = null
-        conversations.page = 1
-        conversations.hasMore = true
-        seenConversationUUIDs.clear()
-    }
-
-    async function fetchConversations (type, preDefinedFilter) {
-        conversations.loading = true;
-        conversations.errorMessage = ""
-
-        if (type !== previousConvListType || preDefinedFilter !== previousPreDefinedFilter) {
-            onFilterchange();
-            previousConvListType = type
-            previousPreDefinedFilter = preDefinedFilter
-        }
-
-        try {
-            let response;
-            switch (type) {
-                case CONVERSATION_LIST_TYPE.ASSIGNED:
-                    response = await api.getAssignedConversations(conversations.page, preDefinedFilter);
-                    break;
-                case CONVERSATION_LIST_TYPE.UNASSIGNED:
-                    response = await api.getTeamConversations(conversations.page, preDefinedFilter);
-                    break;
-                case CONVERSATION_LIST_TYPE.ALL:
-                    response = await api.getAllConversations(conversations.page, preDefinedFilter);
-                    break;
-                default:
-                    console.warn(`Invalid type ${type}`);
-                    return;
-            }
-
-            // Merge new conversations if any
-            if (response?.data?.data) {
-                const newConversations = response.data.data.filter(conversation => {
-                    if (!seenConversationUUIDs.has(conversation.uuid)) {
-                        seenConversationUUIDs.set(conversation.uuid, true);
-                        return true;
-                    }
-                    return false;
-                });
-
-                if (!conversations.data) {
-                    conversations.data = [];
-                }
-
-                if (newConversations.length === 0) {
-                    conversations.hasMore = false;
-                }
-
-                conversations.data.push(...newConversations);
-            } else {
-                conversations.hasMore = false;
-            }
-        } catch (error) {
-            conversations.errorMessage = handleHTTPError(error).message;
-            toast({
-                title: 'Could not fetch conversations.',
-                variant: 'destructive',
-                description: handleHTTPError(error).message,
-            });
-        } finally {
-            conversations.loading = false;
-        }
-    }
-
-    // Increments the page and fetches the next set of conversations.
-    function fetchNextConversations (type, preDefinedFilter) {
-        conversations.page++
-        fetchConversations(type, preDefinedFilter)
-    }
-
-    async function updatePriority (v) {
-        try {
-            await api.updatePriority(conversation.data.uuid, { "priority": v });
-        } catch (error) {
-            // Pass.
-        }
-    }
-
-    async function updateStatus (v) {
-        try {
-            await api.updateStatus(conversation.data.uuid, { "status": v });
-        } catch (error) {
-            toast({
-                title: 'Uh oh! Could not update status, Please try again.',
-                variant: 'destructive',
-                description: handleHTTPError(error).message,
-            });
-        }
-    }
-
-    async function upsertTags (v) {
-        try {
-            await api.upsertTags(conversation.data.uuid, v);
-        } catch (error) {
-            toast({
-                title: 'Uh oh! Could not add tags, Please try again.',
-                variant: 'destructive',
-                description: handleHTTPError(error).message,
-            });
-        }
-    }
-
-    async function updateAssignee (type, v) {
-        try {
-            await api.updateAssignee(conversation.data.uuid, type, v)
-        } catch (error) {
-            // Pass.
-        }
-    }
-
-    async function updateAssigneeLastSeen (uuid) {
-        try {
-            await api.updateAssigneeLastSeen(uuid);
-        } catch (error) {
-            // Pass.
-        }
-    }
-
-    function updateParticipants (newParticipants) {
-        conversation.participants = {
-            ...conversation.participants,
-            ...newParticipants
-        };
-    }
-
-    function conversationUUIDExists (uuid) {
-        return conversations.data?.find(c => c.uuid === uuid) ? true : false
-    }
-
-
-    /**** Websocket updates ****/
-
-    // Update the last message for a conversation.
-    function updateConversationLastMessage (message) {
-        const conv = conversations.data.find(c => c.uuid === message.conversation_uuid);
-        if (conv) {
-            conv.last_message = message.content;
-            conv.last_message_at = message.created_at;
-            // Increment unread count only if conversation is not open.
-            if (conv.uuid !== conversation?.data?.uuid) {
-                conv.unread_message_count += 1;
-            }
-        }
-    }
-
-    // Update message in a conversation.
-    function updateConversationMessageList (message) {
-        // Fetch entire message only if the convesation is open and the message is not present in the list.
-        if (conversation?.data?.uuid === message.conversation_uuid) {
-            if (!messages.data.some(msg => msg.uuid === message.uuid)) {
-                fetchParticipants(message.conversation_uuid)
-                fetchMessage(message.uuid)
-                updateAssigneeLastSeen(message.conversation_uuid)
-                if (message.type === "outgoing") {
-                    setTimeout(() => {
-                        emitter.emit('new-outgoing-message', { conversation_uuid: message.conversation_uuid })
-                    }, 50)
-                }
-            }
-        }
-    }
-
-    function addNewConversation (conversation) {
-        if (!conversationUUIDExists(conversation.uuid)) {
-            conversations.data.push(conversation)
-        }
-    }
-
-    function updateMessageProp (message) {
-        // Update prop in list.
-        const existingMessage = messages.data.find(m => m.uuid === message.uuid)
-        if (existingMessage) {
-            existingMessage[message.prop] = message.value
-        }
-    }
-
-    function updateConversationProp (conversation) {
-        // Update prop if conversation is open.
-        if (conversation?.data?.uuid === conversation.uuid) {
-            conversation.data[conversation.prop] = conversation.value
-        }
-
-        // Update prop in list.
-        const existingConversation = conversations?.data?.find(c => c.uuid === conversation.uuid)
-        if (existingConversation) {
-            existingConversation[conversation.prop] = conversation.value
-        }
-    }
-
-    function $reset () {
-        // Reset conversations state
-        conversations.data = []
-        conversations.loading = false
-        conversations.page = 1
-        conversations.hasMore = true
-        conversations.errorMessage = ""
-
-        // Reset conversation state
-        conversation.data = null
-        conversation.participants = {}
-        conversation.loading = false
-        conversation.errorMessage = ""
-
-        // Reset messages state
-        resetMessages()
-    }
-
-    function resetMessages () {
+      if (newMessages.length === 0 && messages.page === 1) {
         messages.data = []
-        messages.loading = false
-        messages.page = 1
-        messages.hasMore = true
-        messages.errorMessage = ""
-        seenMessageUUIDs = new Set()
+        return
+      }
+
+      if (newMessages.length === 0 && messages.page > 1) {
+        messages.hasMore = false
+      }
+
+      // Add new messages to the messages data
+      messages.data.unshift(...newMessages)
+    } catch (error) {
+      toast({
+        title: 'Could not fetch messages, Please try again.',
+        variant: 'destructive',
+        description: handleHTTPError(error).message
+      })
+      messages.data = []
+      messages.hasMore = false
+    } finally {
+      messages.loading = false
+    }
+  }
+
+  async function fetchNextMessages() {
+    messages.page++
+    fetchMessages(conversation.data.uuid)
+  }
+
+  async function fetchMessage(uuid) {
+    try {
+      const response = await api.getMessage(uuid)
+      if (response?.data?.data) {
+        const message = response.data.data
+        if (!messages.data.some((m) => m.uuid === message.uuid)) {
+          messages.data.push(message)
+        }
+      }
+    } catch (error) {
+      messages.errorMessage = handleHTTPError(error).message
+    }
+  }
+
+  function onFilterchange() {
+    conversations.data = null
+    conversations.page = 1
+    conversations.hasMore = true
+    seenConversationUUIDs.clear()
+  }
+
+  async function fetchConversations(type, preDefinedFilter) {
+    conversations.loading = true
+    conversations.errorMessage = ''
+
+    if (type !== previousConvListType || preDefinedFilter !== previousPreDefinedFilter) {
+      onFilterchange()
+      previousConvListType = type
+      previousPreDefinedFilter = preDefinedFilter
     }
 
-    return { conversations, conversation, messages, sortedConversations, sortedMessages, conversationUUIDExists, updateConversationProp, addNewConversation, getContactFullName, fetchParticipants, fetchNextMessages, fetchNextConversations, updateMessageProp, updateAssigneeLastSeen, updateConversationMessageList, fetchConversation, fetchConversations, fetchMessages, upsertTags, updateAssignee, updatePriority, updateStatus, updateConversationLastMessage, $reset };
+    try {
+      let response
+      switch (type) {
+        case CONVERSATION_LIST_TYPE.ASSIGNED:
+          response = await api.getAssignedConversations(conversations.page, preDefinedFilter)
+          break
+        case CONVERSATION_LIST_TYPE.UNASSIGNED:
+          response = await api.getTeamConversations(conversations.page, preDefinedFilter)
+          break
+        case CONVERSATION_LIST_TYPE.ALL:
+          response = await api.getAllConversations(conversations.page, preDefinedFilter)
+          break
+        default:
+          console.warn(`Invalid type ${type}`)
+          return
+      }
+
+      // Merge new conversations if any
+      if (response?.data?.data) {
+        const newConversations = response.data.data.filter((conversation) => {
+          if (!seenConversationUUIDs.has(conversation.uuid)) {
+            seenConversationUUIDs.set(conversation.uuid, true)
+            return true
+          }
+          return false
+        })
+
+        if (!conversations.data) {
+          conversations.data = []
+        }
+
+        if (newConversations.length === 0) {
+          conversations.hasMore = false
+        }
+
+        conversations.data.push(...newConversations)
+      } else {
+        conversations.hasMore = false
+      }
+    } catch (error) {
+      conversations.errorMessage = handleHTTPError(error).message
+      toast({
+        title: 'Could not fetch conversations.',
+        variant: 'destructive',
+        description: handleHTTPError(error).message
+      })
+    } finally {
+      conversations.loading = false
+    }
+  }
+
+  // Increments the page and fetches the next set of conversations.
+  function fetchNextConversations(type, preDefinedFilter) {
+    conversations.page++
+    fetchConversations(type, preDefinedFilter)
+  }
+
+  async function updatePriority(v) {
+    try {
+      await api.updatePriority(conversation.data.uuid, { priority: v })
+    } catch (error) {
+      // Pass.
+    }
+  }
+
+  async function updateStatus(v) {
+    try {
+      await api.updateStatus(conversation.data.uuid, { status: v })
+    } catch (error) {
+      toast({
+        title: 'Uh oh! Could not update status, Please try again.',
+        variant: 'destructive',
+        description: handleHTTPError(error).message
+      })
+    }
+  }
+
+  async function upsertTags(v) {
+    try {
+      await api.upsertTags(conversation.data.uuid, v)
+    } catch (error) {
+      toast({
+        title: 'Uh oh! Could not add tags, Please try again.',
+        variant: 'destructive',
+        description: handleHTTPError(error).message
+      })
+    }
+  }
+
+  async function updateAssignee(type, v) {
+    try {
+      await api.updateAssignee(conversation.data.uuid, type, v)
+    } catch (error) {
+      // Pass.
+    }
+  }
+
+  async function updateAssigneeLastSeen(uuid) {
+    try {
+      await api.updateAssigneeLastSeen(uuid)
+    } catch (error) {
+      // Pass.
+    }
+  }
+
+  function updateParticipants(newParticipants) {
+    conversation.participants = {
+      ...conversation.participants,
+      ...newParticipants
+    }
+  }
+
+  function conversationUUIDExists(uuid) {
+    return conversations.data?.find((c) => c.uuid === uuid) ? true : false
+  }
+
+  /**** Websocket updates ****/
+
+  // Update the last message for a conversation.
+  function updateConversationLastMessage(message) {
+    const conv = conversations.data.find((c) => c.uuid === message.conversation_uuid)
+    if (conv) {
+      conv.last_message = message.content
+      conv.last_message_at = message.created_at
+      // Increment unread count only if conversation is not open.
+      if (conv.uuid !== conversation?.data?.uuid) {
+        conv.unread_message_count += 1
+      }
+    }
+  }
+
+  // Update message in a conversation.
+  function updateConversationMessageList(message) {
+    // Fetch entire message only if the convesation is open and the message is not present in the list.
+    if (conversation?.data?.uuid === message.conversation_uuid) {
+      if (!messages.data.some((msg) => msg.uuid === message.uuid)) {
+        fetchParticipants(message.conversation_uuid)
+        fetchMessage(message.uuid)
+        updateAssigneeLastSeen(message.conversation_uuid)
+        if (message.type === 'outgoing') {
+          setTimeout(() => {
+            emitter.emit('new-outgoing-message', { conversation_uuid: message.conversation_uuid })
+          }, 50)
+        }
+      }
+    }
+  }
+
+  function addNewConversation(conversation) {
+    if (!conversationUUIDExists(conversation.uuid)) {
+      conversations.data.push(conversation)
+    }
+  }
+
+  function updateMessageProp(message) {
+    // Update prop in list.
+    const existingMessage = messages.data.find((m) => m.uuid === message.uuid)
+    if (existingMessage) {
+      existingMessage[message.prop] = message.value
+    }
+  }
+
+  function updateConversationProp(conversation) {
+    // Update prop if conversation is open.
+    if (conversation?.data?.uuid === conversation.uuid) {
+      conversation.data[conversation.prop] = conversation.value
+    }
+
+    // Update prop in list.
+    const existingConversation = conversations?.data?.find((c) => c.uuid === conversation.uuid)
+    if (existingConversation) {
+      existingConversation[conversation.prop] = conversation.value
+    }
+  }
+
+  function $reset() {
+    // Reset conversations state
+    conversations.data = []
+    conversations.loading = false
+    conversations.page = 1
+    conversations.hasMore = true
+    conversations.errorMessage = ''
+
+    // Reset conversation state
+    conversation.data = null
+    conversation.participants = {}
+    conversation.loading = false
+    conversation.errorMessage = ''
+
+    // Reset messages state
+    resetMessages()
+  }
+
+  function resetMessages() {
+    messages.data = []
+    messages.loading = false
+    messages.page = 1
+    messages.hasMore = true
+    messages.errorMessage = ''
+    seenMessageUUIDs = new Set()
+  }
+
+  return {
+    conversations,
+    conversation,
+    messages,
+    sortedConversations,
+    sortedMessages,
+    conversationUUIDExists,
+    updateConversationProp,
+    addNewConversation,
+    getContactFullName,
+    fetchParticipants,
+    fetchNextMessages,
+    fetchNextConversations,
+    updateMessageProp,
+    updateAssigneeLastSeen,
+    updateConversationMessageList,
+    fetchConversation,
+    fetchConversations,
+    fetchMessages,
+    upsertTags,
+    updateAssignee,
+    updatePriority,
+    updateStatus,
+    updateConversationLastMessage,
+    $reset
+  }
 })
diff --git a/frontend/src/stores/user.js b/frontend/src/stores/user.js
index eb854df..6ee35d7 100644
--- a/frontend/src/stores/user.js
+++ b/frontend/src/stores/user.js
@@ -1,78 +1,77 @@
-import { ref, computed } from 'vue';
-import { defineStore } from 'pinia';
-import api from '@/api';
+import { ref, computed } from 'vue'
+import { defineStore } from 'pinia'
+import api from '@/api'
 
 export const useUserStore = defineStore('user', () => {
-    const userAvatar = ref('');
-    const userFirstName = ref('');
-    const userLastName = ref('');
-    const userPermissions = ref([]);
+  const userAvatar = ref('')
+  const userFirstName = ref('')
+  const userLastName = ref('')
+  const userPermissions = ref([])
 
-    // Setters
-    const setAvatar = (avatar) => {
-        userAvatar.value = avatar;
-    };
+  // Setters
+  const setAvatar = (avatar) => {
+    userAvatar.value = avatar
+  }
 
-    const setFirstName = (firstName) => {
-        userFirstName.value = firstName;
-    };
+  const setFirstName = (firstName) => {
+    userFirstName.value = firstName
+  }
 
-    const setLastName = (lastName) => {
-        userLastName.value = lastName;
-    };
+  const setLastName = (lastName) => {
+    userLastName.value = lastName
+  }
 
-    // Computed properties
-    const getInitials = computed(() => {
-        const firstInitial = userFirstName.value.charAt(0).toUpperCase();
-        const lastInitial = userLastName.value.charAt(0).toUpperCase();
-        return `${firstInitial}${lastInitial}`;
-    });
+  // Computed properties
+  const getInitials = computed(() => {
+    const firstInitial = userFirstName.value.charAt(0).toUpperCase()
+    const lastInitial = userLastName.value.charAt(0).toUpperCase()
+    return `${firstInitial}${lastInitial}`
+  })
 
-    const getFullName = computed(() => {
-        return `${userFirstName.value} ${userLastName.value}`;
-    });
+  const getFullName = computed(() => {
+    return `${userFirstName.value} ${userLastName.value}`
+  })
 
-    // Fetch current user data
-    const getCurrentUser = async () => {
-        try {
-            const response = await api.getCurrentUser();
-            const userData = response?.data?.data;
+  // Fetch current user data
+  const getCurrentUser = async () => {
+    try {
+      const response = await api.getCurrentUser()
+      const userData = response?.data?.data
 
-            if (userData) {
-                const { avatar_url, first_name, last_name, permissions } = userData;
-                setAvatar(avatar_url);
-                setFirstName(first_name);
-                setLastName(last_name);
-                userPermissions.value = permissions || [];
-            }
-        } catch (error) {
-            console.error('Error fetching current user:', error);
-        }
-    };
+      if (userData) {
+        const { avatar_url, first_name, last_name, permissions } = userData
+        setAvatar(avatar_url)
+        setFirstName(first_name)
+        setLastName(last_name)
+        userPermissions.value = permissions || []
+      }
+    } catch (error) {
+      console.error('Error fetching current user:', error)
+    }
+  }
 
-    // Check if user has a specific permission
-    const hasPermission = (permission) => {
-        if (!permission)
-            return true
-        return userPermissions.value.includes(permission);
-    };
+  // Check if user has a specific permission
+  const hasPermission = (permission) => {
+    if (!permission) return true
+    return userPermissions.value.includes(permission)
+  }
 
-    return {
-        // State
-        userFirstName,
-        userLastName,
-        userAvatar,
-        userPermissions,
+  return {
+    // State
+    userFirstName,
+    userLastName,
+    userAvatar,
+    userPermissions,
 
-        // Computed
-        getFullName,
-        getInitials,
+    // Computed
+    getFullName,
+    getInitials,
 
-        // Actions
-        setAvatar,
-        setFirstName,
-        setLastName,
-        getCurrentUser,
-        hasPermission,
-    };
-});
+    // Actions
+    setAvatar,
+    setFirstName,
+    setLastName,
+    getCurrentUser,
+    hasPermission
+  }
+})
diff --git a/frontend/src/utils/datetime.js b/frontend/src/utils/datetime.js
index 8c58859..92d713f 100644
--- a/frontend/src/utils/datetime.js
+++ b/frontend/src/utils/datetime.js
@@ -1,25 +1,25 @@
-import { format, differenceInMinutes, differenceInHours, differenceInDays } from 'date-fns';
+import { format, differenceInMinutes, differenceInHours, differenceInDays } from 'date-fns'
 
 export function formatTime(t) {
-    try {
-        const now = new Date();
-        const minutesDifference = differenceInMinutes(now, t);
-        const hoursDifference = differenceInHours(now, t);
-        const daysDifference = differenceInDays(now, t);
+  try {
+    const now = new Date()
+    const minutesDifference = differenceInMinutes(now, t)
+    const hoursDifference = differenceInHours(now, t)
+    const daysDifference = differenceInDays(now, t)
 
-        if (minutesDifference === 0) {
-            return `Just now`;
-        } else if (minutesDifference < 60) {
-            return `${minutesDifference} minutes ago`;
-        } else if (hoursDifference < 24) {
-            return `${hoursDifference} hours ago`;
-        } else if (daysDifference < 7) {
-            return `${daysDifference} days ago`;
-        } else {
-            return format(t, 'MMMM d, yyyy h:mm a');
-        }
-    } catch (error) {
-        console.error("error parsing time", error, "time", t)
-        return ''
+    if (minutesDifference === 0) {
+      return `Just now`
+    } else if (minutesDifference < 60) {
+      return `${minutesDifference} minutes ago`
+    } else if (hoursDifference < 24) {
+      return `${hoursDifference} hours ago`
+    } else if (daysDifference < 7) {
+      return `${daysDifference} days ago`
+    } else {
+      return format(t, 'MMMM d, yyyy h:mm a')
     }
+  } catch (error) {
+    console.error('error parsing time', error, 'time', t)
+    return ''
+  }
 }
diff --git a/frontend/src/utils/file.js b/frontend/src/utils/file.js
index 4eae0b1..fa71556 100644
--- a/frontend/src/utils/file.js
+++ b/frontend/src/utils/file.js
@@ -1,7 +1,15 @@
 export function formatBytes(bytes) {
-    if (bytes < 1024 * 1024) {
-        return (bytes / 1024).toFixed(2) + ' KB';
-    } else {
-        return (bytes / (1024 * 1024)).toFixed(2) + ' MB';
-    }
+  if (bytes < 1024 * 1024) {
+    return (bytes / 1024).toFixed(2) + ' KB'
+  } else {
+    return (bytes / (1024 * 1024)).toFixed(2) + ' MB'
+  }
+}
+
+export function getThumbFilepath(filepath) {
+  const urlParts = filepath.split('/')
+  const filename = urlParts.pop()
+  const thumbFilename = `thumb_${filename}`
+  urlParts.push(thumbFilename)
+  return urlParts.join('/')
 }
diff --git a/frontend/src/utils/http.js b/frontend/src/utils/http.js
index 9e9f865..9989e59 100644
--- a/frontend/src/utils/http.js
+++ b/frontend/src/utils/http.js
@@ -3,30 +3,28 @@
  * @param {any} error - Axios error
  * @returns Readable error object
  */
-function handleHTTPError (error) {
-    let resp = {
-        "status": "error",
-        "message": "Unknown error",
-        "data": null,
-        "status_code": null
+function handleHTTPError(error) {
+  let resp = {
+    status: 'error',
+    message: 'Unknown error',
+    data: null,
+    status_code: null
+  }
+  // Response received from the server.
+  if (error.response && error.response.data) {
+    // Message available in response, override.
+    if (error.response.data.message) {
+      resp.message = error.response.data.message
     }
-    // Response received from the server.
-    if (error.response && error.response.data) {
-        // Message available in response, override.
-        if (error.response.data.message) {
-            resp.message = error.response.data.message
-        }
-        resp.status_code = error.response.status
-    } else if (error.request) {
-        resp.message = "No response from server. Check if you are still connected to internet."
-    } else if (error.message) {
-        resp.message = error.message
-    } else {
-        resp.message = "Error setting up the request"
-    }
-    return resp
+    resp.status_code = error.response.status
+  } else if (error.request) {
+    resp.message = 'No response from server. Check if you are still connected to internet.'
+  } else if (error.message) {
+    resp.message = error.message
+  } else {
+    resp.message = 'Error setting up the request'
+  }
+  return resp
 }
 
-export {
-    handleHTTPError
-}
\ No newline at end of file
+export { handleHTTPError }
diff --git a/frontend/src/utils/strings.js b/frontend/src/utils/strings.js
index b86a916..39d0fe3 100644
--- a/frontend/src/utils/strings.js
+++ b/frontend/src/utils/strings.js
@@ -1,6 +1,9 @@
 // Adds titleCase property to string.
 String.prototype.titleCase = function () {
-    return this.toLowerCase().split(' ').map(function (word) {
-        return word.charAt(0).toUpperCase() + word.slice(1);
-    }).join(' ');
-};
\ No newline at end of file
+  return this.toLowerCase()
+    .split(' ')
+    .map(function (word) {
+      return word.charAt(0).toUpperCase() + word.slice(1)
+    })
+    .join(' ')
+}
diff --git a/frontend/src/utils/validation.js b/frontend/src/utils/validation.js
index b0d35ff..3c921a9 100644
--- a/frontend/src/utils/validation.js
+++ b/frontend/src/utils/validation.js
@@ -1,5 +1,5 @@
 // Function to validate Go-like duration
 export const isGoDuration = (value) => {
-    const regex = /^[0-9]+[smh]$/;
-    return regex.test(value);
-};
+  const regex = /^[0-9]+[smh]$/
+  return regex.test(value)
+}
diff --git a/frontend/src/views/AccountView.vue b/frontend/src/views/AccountView.vue
index e769cbf..5952f07 100644
--- a/frontend/src/views/AccountView.vue
+++ b/frontend/src/views/AccountView.vue
@@ -4,7 +4,7 @@ import ProfileEdit from '@/components/account/ProfileEdit.vue'
 </script>
 
 <template>
-    <Account>
-        <ProfileEdit/>
-    </Account>
+  <Account>
+    <ProfileEdit />
+  </Account>
 </template>
diff --git a/frontend/src/views/ConversationView.vue b/frontend/src/views/ConversationView.vue
index 8756b1e..61928f2 100644
--- a/frontend/src/views/ConversationView.vue
+++ b/frontend/src/views/ConversationView.vue
@@ -10,41 +10,45 @@
       <ConversationPlaceholder v-else></ConversationPlaceholder>
     </ResizablePanel>
     <ResizableHandle />
-    <ResizablePanel :min-size="10" :default-size="16" :max-size="30" v-if="conversationStore.conversation.data">
+    <ResizablePanel
+      :min-size="10"
+      :default-size="16"
+      :max-size="30"
+      v-if="conversationStore.conversation.data"
+    >
       <ConversationSideBar></ConversationSideBar>
     </ResizablePanel>
   </ResizablePanelGroup>
 </template>
 
 <script setup>
-import { onMounted, watch } from "vue"
-import { subscribeConversation } from "@/websocket.js"
+import { onMounted, watch } from 'vue'
+import { subscribeConversation } from '@/websocket.js'
 
-import {
-  ResizableHandle,
-  ResizablePanel,
-  ResizablePanelGroup,
-} from '@/components/ui/resizable'
+import { ResizableHandle, ResizablePanel, ResizablePanelGroup } from '@/components/ui/resizable'
 import ConversationList from '@/components/conversationlist/ConversationList.vue'
-import Conversation from '@/components/conversation/Conversation.vue'
+import Conversation from '@/components/conversation/ConversationPage.vue'
 import ConversationSideBar from '@/components/conversation/ConversationSideBar.vue'
-import ConversationPlaceholder from "@/components/conversation/ConversationPlaceholder.vue"
+import ConversationPlaceholder from '@/components/conversation/ConversationPlaceholder.vue'
 import { useConversationStore } from '@/stores/conversation'
 
 const props = defineProps({
   uuid: String
 })
-const conversationStore = useConversationStore();
+const conversationStore = useConversationStore()
 
 onMounted(() => {
   fetchConversation(props.uuid)
-});
+})
 
-watch(() => props.uuid, (newUUID, oldUUID) => {
-  if (newUUID !== oldUUID) {
-    fetchConversation(newUUID)
+watch(
+  () => props.uuid,
+  (newUUID, oldUUID) => {
+    if (newUUID !== oldUUID) {
+      fetchConversation(newUUID)
+    }
   }
-});
+)
 
 const fetchConversation = (uuid) => {
   if (!uuid) return
@@ -61,5 +65,4 @@ const subscribeCurrentConversation = async (uuid) => {
     subscribeConversation(uuid)
   }
 }
-
 </script>
diff --git a/frontend/src/views/DashboardView.vue b/frontend/src/views/DashboardView.vue
index 7e06da1..a943f54 100644
--- a/frontend/src/views/DashboardView.vue
+++ b/frontend/src/views/DashboardView.vue
@@ -1,185 +1,169 @@
 <template>
-    <div class="page-content w-10/12">
-        <div class="flex flex-col space-y-6">
-            <div>
-                <span class="font-medium text-2xl space-y-1" v-if="userStore.getFullName">
-                    <p>Hi, {{ userStore.getFullName }}</p>
-                    <p class="text-sm-muted">🌤️ {{ format(new Date(), "EEEE, MMMM d, HH:mm a") }}</p>
-                </span>
-            </div>
-            <div>
-                <Select :model-value="filter" @update:model-value="onDashboardFilterChange">
-                    <SelectTrigger class="w-[130px]">
-                        <SelectValue placeholder="Select a filter" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem value="me">
-                                Mine
-                            </SelectItem>
-                            <SelectItem value="all_teams">
-                                All teams
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-            </div>
-        </div>
-        <div class="mt-7">
-            <Card :counts="cardCounts" :labels="agentCountCardsLabels" />
-        </div>
-        <div class="flex my-7 justify-between items-center space-x-5">
-            <div class="dashboard-card p-5">
-                <Select :model-value="lineChartFilter" @update:model-value="onLineChartFilterChange">
-                    <SelectTrigger class="w-[7rem] text-xs">
-                        <SelectValue placeholder="Select a filter" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem value="last_week">
-                                Last week
-                            </SelectItem>
-                            <SelectItem value="last_month">
-                                Last month
-                            </SelectItem>
-                            <SelectItem value="last_year">
-                                Last year
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-                <LineChart :data="chartData.new_conversations"> </LineChart>
-            </div>
-            <div class="dashboard-card p-5">
-                <Select :model-value="barChartFilter" @update:model-value="onBarChartFilterChange">
-                    <SelectTrigger class="w-[7rem] text-xs">
-                        <SelectValue placeholder="Select a filter" />
-                    </SelectTrigger>
-                    <SelectContent>
-                        <SelectGroup>
-                            <SelectItem value="last_week">
-                                Last week
-                            </SelectItem>
-                            <SelectItem value="last_month">
-                                Last month
-                            </SelectItem>
-                            <SelectItem value="last_year">
-                                Last year
-                            </SelectItem>
-                        </SelectGroup>
-                    </SelectContent>
-                </Select>
-                <BarChart :data="chartData.status_summary">
-                </BarChart>
-            </div>
-        </div>
+  <div class="page-content w-10/12">
+    <div class="flex flex-col space-y-6">
+      <div>
+        <span class="font-medium text-2xl space-y-1" v-if="userStore.getFullName">
+          <p>Hi, {{ userStore.getFullName }}</p>
+          <p class="text-sm-muted">🌤️ {{ format(new Date(), 'EEEE, MMMM d, HH:mm a') }}</p>
+        </span>
+      </div>
+      <div>
+        <Select :model-value="filter" @update:model-value="onDashboardFilterChange">
+          <SelectTrigger class="w-[130px]">
+            <SelectValue placeholder="Select a filter" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="me"> Mine </SelectItem>
+              <SelectItem value="all_teams"> All teams </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+      </div>
     </div>
+    <div class="mt-7">
+      <Card :counts="cardCounts" :labels="agentCountCardsLabels" />
+    </div>
+    <div class="flex my-7 justify-between items-center space-x-5">
+      <div class="dashboard-card p-5">
+        <Select :model-value="lineChartFilter" @update:model-value="onLineChartFilterChange">
+          <SelectTrigger class="w-[7rem] text-xs">
+            <SelectValue placeholder="Select a filter" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="last_week"> Last week </SelectItem>
+              <SelectItem value="last_month"> Last month </SelectItem>
+              <SelectItem value="last_year"> Last year </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <LineChart :data="chartData.new_conversations"> </LineChart>
+      </div>
+      <div class="dashboard-card p-5">
+        <Select :model-value="barChartFilter" @update:model-value="onBarChartFilterChange">
+          <SelectTrigger class="w-[7rem] text-xs">
+            <SelectValue placeholder="Select a filter" />
+          </SelectTrigger>
+          <SelectContent>
+            <SelectGroup>
+              <SelectItem value="last_week"> Last week </SelectItem>
+              <SelectItem value="last_month"> Last month </SelectItem>
+              <SelectItem value="last_year"> Last year </SelectItem>
+            </SelectGroup>
+          </SelectContent>
+        </Select>
+        <BarChart :data="chartData.status_summary"> </BarChart>
+      </div>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { onMounted, ref, watch } from 'vue';
+import { onMounted, ref, watch } from 'vue'
 import { useUserStore } from '@/stores/user'
 import { format } from 'date-fns'
-import api from '@/api';
+import api from '@/api'
 import { useToast } from '@/components/ui/toast/use-toast'
 
 import Card from '@/components/dashboard/agent/DashboardCard.vue'
-import LineChart from '@/components/dashboard/agent/DashboardLineChart.vue';
-import BarChart from '@/components/dashboard/agent/DashboardBarChart.vue';
+import LineChart from '@/components/dashboard/agent/DashboardLineChart.vue'
+import BarChart from '@/components/dashboard/agent/DashboardBarChart.vue'
 import {
-    Select,
-    SelectContent,
-    SelectGroup,
-    SelectItem,
-    SelectTrigger,
-    SelectValue,
+  Select,
+  SelectContent,
+  SelectGroup,
+  SelectItem,
+  SelectTrigger,
+  SelectValue
 } from '@/components/ui/select'
 import { useLocalStorage } from '@vueuse/core'
 
-
 const { toast } = useToast()
 const userStore = useUserStore()
 const cardCounts = ref({})
 const chartData = ref({})
-const filter = useLocalStorage('dashboard_filter', 'me');
-const barChartFilter = ref("last_week")
-const lineChartFilter = ref("last_week")
+const filter = useLocalStorage('dashboard_filter', 'me')
+const barChartFilter = ref('last_week')
+const lineChartFilter = ref('last_week')
 const agentCountCardsLabels = {
-    total_count: "Total",
-    resolved_count: "Resolved",
-    unresolved_count: "Unresolved",
-    awaiting_response_count: "Awaiting Response",
-};
+  total_count: 'Total',
+  resolved_count: 'Resolved',
+  unresolved_count: 'Unresolved',
+  awaiting_response_count: 'Awaiting Response'
+}
 
 onMounted(() => {
-    getCardStats()
-    getDashboardCharts()
+  getCardStats()
+  getDashboardCharts()
 })
 
 watch(filter, () => {
-    getDashboardCharts()
-    getCardStats()
+  getDashboardCharts()
+  getCardStats()
 })
 
-
 const onDashboardFilterChange = (v) => {
-    filter.value = v
+  filter.value = v
 }
 
 const onLineChartFilterChange = (v) => {
-    lineChartFilter.value = v
+  lineChartFilter.value = v
 }
 
 const onBarChartFilterChange = (v) => {
-    barChartFilter.value = v
+  barChartFilter.value = v
 }
 
 const getCardStats = () => {
-    let apiCall;
-    switch (filter.value) {
-        case "all_teams":
-            apiCall = api.getGlobalDashboardCounts;
-            break;
-        case "me":
-            apiCall = api.getUserDashboardCounts;
-            break;
-        default:
-            throw new Error("Invalid filter value");
-    }
+  let apiCall
+  switch (filter.value) {
+    case 'all_teams':
+      apiCall = api.getGlobalDashboardCounts
+      break
+    case 'me':
+      apiCall = api.getUserDashboardCounts
+      break
+    default:
+      throw new Error('Invalid filter value')
+  }
 
-    apiCall().then((resp) => {
-        cardCounts.value = resp.data.data;
-    }).catch((err) => {
-        toast({
-            title: 'Something went wrong',
-            description: err.response.data.message,
-            variant: 'destructive',
-        });
-    });
-};
+  apiCall()
+    .then((resp) => {
+      cardCounts.value = resp.data.data
+    })
+    .catch((err) => {
+      toast({
+        title: 'Something went wrong',
+        description: err.response.data.message,
+        variant: 'destructive'
+      })
+    })
+}
 
 const getDashboardCharts = () => {
-    let apiCall;
-    switch (filter.value) {
-        case "all_teams":
-            apiCall = api.getGlobalDashboardCharts;
-            break;
-        case "me":
-            apiCall = api.getUserDashboardCharts;
-            break;
-        default:
-            throw new Error("Invalid filter value");
-    }
-
-    apiCall().then((resp) => {
-        chartData.value = resp.data.data;
-    }).catch((err) => {
-        toast({
-            title: 'Something went wrong',
-            description: err.response.data.message,
-            variant: 'destructive',
-        });
-    });
-};
+  let apiCall
+  switch (filter.value) {
+    case 'all_teams':
+      apiCall = api.getGlobalDashboardCharts
+      break
+    case 'me':
+      apiCall = api.getUserDashboardCharts
+      break
+    default:
+      throw new Error('Invalid filter value')
+  }
 
+  apiCall()
+    .then((resp) => {
+      chartData.value = resp.data.data
+    })
+    .catch((err) => {
+      toast({
+        title: 'Something went wrong',
+        description: err.response.data.message,
+        variant: 'destructive'
+      })
+    })
+}
 </script>
diff --git a/frontend/src/views/UserLoginView.vue b/frontend/src/views/UserLoginView.vue
index 40b2ef7..98ab3ef 100644
--- a/frontend/src/views/UserLoginView.vue
+++ b/frontend/src/views/UserLoginView.vue
@@ -1,122 +1,127 @@
 <template>
-    <div class="relative h-screen" id="login-container">
-        <div class="absolute left-1/2 top-20 transform -translate-x-1/2 w-96 h-1/2 ">
-            <form @submit.prevent="loginAction">
-                <Card>
-                    <CardHeader class="space-y-1">
-                        <CardTitle class="text-2xl text-center">
-                            Login
-                        </CardTitle>
-                    </CardHeader>
-                    <CardContent class="grid gap-4">
-                        <div v-for="oidcProvider in enabledOIDCProviders" :key="oidcProvider.id"
-                            class="grid grid-cols-1 gap-6">
-                            <Button variant="outline" @click.prevent="redirectToOIDC(oidcProvider)">
-                                <img :src="oidcProvider.logo_url" width="15" class="mr-2" />
-                                {{ oidcProvider.name }}
-                            </Button>
-                        </div>
-                        <div class="relative">
-                            <div class="absolute inset-0 flex items-center">
-                                <span class="w-full border-t" />
-                            </div>
-                            <div class="relative flex justify-center text-xs uppercase">
-                                <span class="bg-background px-2 text-muted-foreground">
-                                    Or continue with
-                                </span>
-                            </div>
-                        </div>
-                        <div class="grid gap-2">
-                            <Label for="email">Email</Label>
-                            <Input id="email" type="email" placeholder="Enter your email address"
-                                v-model.trim="loginForm.email" />
-                        </div>
-                        <div class="grid gap-2">
-                            <Label for="password">Password</Label>
-                            <Input id="password" type="password" placeholder="Password" v-model="loginForm.password" />
-                        </div>
-                    </CardContent>
-                    <CardFooter class="flex flex-col gap-5">
-                        <Button class="w-full" @click.prevent="loginAction" :disabled="loading" type="submit">
-                            Login
-                        </Button>
-                        <Error :errorMessage="errorMessage" :border="true"></Error>
-                        <div>
-                            <a href="#" class="text-xs">Forgot Email or Password?</a>
-                        </div>
-                    </CardFooter>
-                </Card>
-            </form>
-        </div>
+  <div class="relative h-screen" id="login-container">
+    <div class="absolute left-1/2 top-20 transform -translate-x-1/2 w-96 h-1/2">
+      <form @submit.prevent="loginAction">
+        <Card>
+          <CardHeader class="space-y-1">
+            <CardTitle class="text-2xl text-center"> Login </CardTitle>
+          </CardHeader>
+          <CardContent class="grid gap-4">
+            <div
+              v-for="oidcProvider in enabledOIDCProviders"
+              :key="oidcProvider.id"
+              class="grid grid-cols-1 gap-6"
+            >
+              <Button variant="outline" @click.prevent="redirectToOIDC(oidcProvider)">
+                <img :src="oidcProvider.logo_url" width="15" class="mr-2" />
+                {{ oidcProvider.name }}
+              </Button>
+            </div>
+            <div class="relative">
+              <div class="absolute inset-0 flex items-center">
+                <span class="w-full border-t" />
+              </div>
+              <div class="relative flex justify-center text-xs uppercase">
+                <span class="bg-background px-2 text-muted-foreground"> Or continue with </span>
+              </div>
+            </div>
+            <div class="grid gap-2">
+              <Label for="email">Email</Label>
+              <Input
+                id="email"
+                type="email"
+                placeholder="Enter your email address"
+                v-model.trim="loginForm.email"
+              />
+            </div>
+            <div class="grid gap-2">
+              <Label for="password">Password</Label>
+              <Input
+                id="password"
+                type="password"
+                placeholder="Password"
+                v-model="loginForm.password"
+              />
+            </div>
+          </CardContent>
+          <CardFooter class="flex flex-col gap-5">
+            <Button class="w-full" @click.prevent="loginAction" :disabled="loading" type="submit">
+              Login
+            </Button>
+            <Error :errorMessage="errorMessage" :border="true"></Error>
+            <div>
+              <a href="#" class="text-xs">Forgot Email or Password?</a>
+            </div>
+          </CardFooter>
+        </Card>
+      </form>
     </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, onMounted, computed } from 'vue';
-import { useRouter } from 'vue-router';
+import { ref, onMounted, computed } from 'vue'
+import { useRouter } from 'vue-router'
 import { handleHTTPError } from '@/utils/http'
 import { useUserStore } from '@/stores/user'
-import api from '@/api';
+import api from '@/api'
 
-import { useTemporaryClass } from '@/composables/useTemporaryClass';
+import { useTemporaryClass } from '@/composables/useTemporaryClass'
 import { Button } from '@/components/ui/button'
 import { Error } from '@/components/ui/error'
-import {
-    Card,
-    CardContent,
-    CardFooter,
-    CardHeader,
-    CardTitle,
-} from '@/components/ui/card'
+import { Card, CardContent, CardFooter, CardHeader, CardTitle } from '@/components/ui/card'
 import { Input } from '@/components/ui/input'
 import { Label } from '@/components/ui/label'
 
-const errorMessage = ref("");
-const loading = ref(false);
-const router = useRouter();
+const errorMessage = ref('')
+const loading = ref(false)
+const router = useRouter()
 const loginForm = ref({
-    email: "",
-    password: ""
+  email: '',
+  password: ''
 })
 
 const userStore = useUserStore()
 const oidcProviders = ref([])
 
 const redirectToOIDC = (provider) => {
-    window.location.href = `/api/oidc/${provider.id}/login`
-};
+  window.location.href = `/api/oidc/${provider.id}/login`
+}
 
 const loginAction = () => {
-    errorMessage.value = ""
-    loading.value = true
-    let loginParams = {
-        "email": loginForm.value.email,
-        "password": loginForm.value.password
-    }
-    api.login(loginParams).then((resp) => {
-        if (resp.data.data) {
-            userStore.$patch((state) => {
-                state.userAvatar = resp.data.data.avatar_url
-                state.userFirstName = resp.data.data.first_name
-                state.userLastName = resp.data.data.last_name
-            })
-            router.push({ name: 'dashboard' });
-        }
-    }).catch((error) => {
-        errorMessage.value = handleHTTPError(error).message
-        useTemporaryClass("login-container", "animate-shake")
-    }).finally(() => {
-        loading.value = false
+  errorMessage.value = ''
+  loading.value = true
+  let loginParams = {
+    email: loginForm.value.email,
+    password: loginForm.value.password
+  }
+  api
+    .login(loginParams)
+    .then((resp) => {
+      if (resp.data.data) {
+        userStore.$patch((state) => {
+          state.userAvatar = resp.data.data.avatar_url
+          state.userFirstName = resp.data.data.first_name
+          state.userLastName = resp.data.data.last_name
+        })
+        router.push({ name: 'dashboard' })
+      }
+    })
+    .catch((error) => {
+      errorMessage.value = handleHTTPError(error).message
+      useTemporaryClass('login-container', 'animate-shake')
+    })
+    .finally(() => {
+      loading.value = false
     })
 }
 
 onMounted(async () => {
-    const resp = await api.getAllOIDC()
-    oidcProviders.value = resp.data.data
+  const resp = await api.getAllOIDC()
+  oidcProviders.value = resp.data.data
 })
 
 const enabledOIDCProviders = computed(() => {
-    return oidcProviders.value.filter(provider => !provider.disabled);
-});
-
+  return oidcProviders.value.filter((provider) => !provider.disabled)
+})
 </script>
diff --git a/frontend/src/websocket.js b/frontend/src/websocket.js
index 3e82621..147a6ff 100644
--- a/frontend/src/websocket.js
+++ b/frontend/src/websocket.js
@@ -7,144 +7,141 @@ let reconnectTimeout
 let isReconnecting = false
 let manualClose = false
 
-export function initWS () {
-    let convStore = useConversationStore()
+export function initWS() {
+  let convStore = useConversationStore()
 
-    // Initialize the WebSocket connection
-    function initializeWebSocket () {
-        socket = new WebSocket('ws://localhost:9009/api/ws')
+  // Initialize the WebSocket connection
+  function initializeWebSocket() {
+    socket = new WebSocket('ws://localhost:9009/api/ws')
 
-        // Connection opened event
-        socket.addEventListener('open', function () {
-            reconnectInterval = 1000
-            if (reconnectTimeout) {
-                clearTimeout(reconnectTimeout);
-                reconnectTimeout = null;
-            }
-        })
+    // Connection opened event
+    socket.addEventListener('open', function () {
+      reconnectInterval = 1000
+      if (reconnectTimeout) {
+        clearTimeout(reconnectTimeout)
+        reconnectTimeout = null
+      }
+    })
 
-        // Listen for messages from the server
-        socket.addEventListener('message', function (e) {
-            if (e.data) {
-                let event = JSON.parse(e.data)
-                switch (event.type) {
-                    case 'new_message': {
-                        const message = event.data;
-                        convStore.updateConversationLastMessage(message);
-                        convStore.updateConversationMessageList(message);
-                        break;
-                    }
-                    case 'message_prop_update': {
-                        convStore.updateMessageProp(event.data);
-                        break;
-                    }
-                    case 'new_conversation': {
-                        convStore.addNewConversation(event.data);
-                        break;
-                    }
-                    case 'conversation_prop_update': {
-                        convStore.updateConversationProp(event.data);
-                        break;
-                    }
-                    default: {
-                        console.warn(`Unknown websocket event ${event.ev}`);
-                    }
-                }
-            }
-        });
-
-
-        // Handle possible errors
-        socket.addEventListener('error', function (event) {
-            console.error('WebSocket error observed:', event)
-        })
-
-        // Handle the connection close event
-        socket.addEventListener('close', function () {
-            if (!manualClose) {
-                reconnect()
-            }
-        })
-    }
-
-
-    // Start the initial WebSocket connection
-    initializeWebSocket()
-
-    // Reconnect logic
-    function reconnect () {
-        if (isReconnecting) return
-        isReconnecting = true
-        reconnectTimeout = setTimeout(() => {
-            initializeWebSocket()
-            reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval)
-            isReconnecting = false
-        }, reconnectInterval)
-    }
-
-    // Detect network status and handle reconnection
-    window.addEventListener('online', () => {
-        if (!isReconnecting && socket.readyState !== WebSocket.OPEN) {
-            reconnectInterval = 1000
-            reconnect()
+    // Listen for messages from the server
+    socket.addEventListener('message', function (e) {
+      if (e.data) {
+        let event = JSON.parse(e.data)
+        switch (event.type) {
+          case 'new_message': {
+            const message = event.data
+            convStore.updateConversationLastMessage(message)
+            convStore.updateConversationMessageList(message)
+            break
+          }
+          case 'message_prop_update': {
+            convStore.updateMessageProp(event.data)
+            break
+          }
+          case 'new_conversation': {
+            convStore.addNewConversation(event.data)
+            break
+          }
+          case 'conversation_prop_update': {
+            convStore.updateConversationProp(event.data)
+            break
+          }
+          default: {
+            console.warn(`Unknown websocket event ${event.ev}`)
+          }
         }
+      }
     })
-}
 
-function waitForWebSocketOpen (socket, callback) {
-    if (socket.readyState === WebSocket.OPEN) {
-        callback()
-    } else {
-        socket.addEventListener('open', function handler () {
-            socket.removeEventListener('open', handler)
-            callback()
-        })
-    }
-}
-
-
-export function sendMessage (message) {
-    waitForWebSocketOpen(socket, () => {
-        socket.send(JSON.stringify(message))
+    // Handle possible errors
+    socket.addEventListener('error', function (event) {
+      console.error('WebSocket error observed:', event)
     })
-}
 
-export function subscribeConversations (type, filter) {
-    let message = {
-        action: 'conversations_sub',
-        type: type,
-        filter: filter
-    }
-
-    waitForWebSocketOpen(socket, () => {
-        socket.send(JSON.stringify(message))
+    // Handle the connection close event
+    socket.addEventListener('close', function () {
+      if (!manualClose) {
+        reconnect()
+      }
     })
+  }
+
+  // Start the initial WebSocket connection
+  initializeWebSocket()
+
+  // Reconnect logic
+  function reconnect() {
+    if (isReconnecting) return
+    isReconnecting = true
+    reconnectTimeout = setTimeout(() => {
+      initializeWebSocket()
+      reconnectInterval = Math.min(reconnectInterval * 2, maxReconnectInterval)
+      isReconnecting = false
+    }, reconnectInterval)
+  }
+
+  // Detect network status and handle reconnection
+  window.addEventListener('online', () => {
+    if (!isReconnecting && socket.readyState !== WebSocket.OPEN) {
+      reconnectInterval = 1000
+      reconnect()
+    }
+  })
 }
 
-export function subscribeConversation (uuid) {
-    if (!uuid) {
-        return
-    }
-    let message = {
-        action: 'conversation_sub',
-        uuid: uuid
-    }
-
-    waitForWebSocketOpen(socket, () => {
-        socket.send(JSON.stringify(message))
+function waitForWebSocketOpen(socket, callback) {
+  if (socket.readyState === WebSocket.OPEN) {
+    callback()
+  } else {
+    socket.addEventListener('open', function handler() {
+      socket.removeEventListener('open', handler)
+      callback()
     })
+  }
 }
 
-export function unsubscribeConversation (uuid) {
-    if (!uuid) {
-        return
-    }
-    let message = {
-        action: 'conversation_unsub',
-        uuid: uuid
-    }
-
-    waitForWebSocketOpen(socket, () => {
-        socket.send(JSON.stringify(message))
-    })
+export function sendMessage(message) {
+  waitForWebSocketOpen(socket, () => {
+    socket.send(JSON.stringify(message))
+  })
+}
+
+export function subscribeConversations(type, filter) {
+  let message = {
+    action: 'conversations_sub',
+    type: type,
+    filter: filter
+  }
+
+  waitForWebSocketOpen(socket, () => {
+    socket.send(JSON.stringify(message))
+  })
+}
+
+export function subscribeConversation(uuid) {
+  if (!uuid) {
+    return
+  }
+  let message = {
+    action: 'conversation_sub',
+    uuid: uuid
+  }
+
+  waitForWebSocketOpen(socket, () => {
+    socket.send(JSON.stringify(message))
+  })
+}
+
+export function unsubscribeConversation(uuid) {
+  if (!uuid) {
+    return
+  }
+  let message = {
+    action: 'conversation_unsub',
+    uuid: uuid
+  }
+
+  waitForWebSocketOpen(socket, () => {
+    socket.send(JSON.stringify(message))
+  })
 }
diff --git a/internal/conversation/conversation.go b/internal/conversation/conversation.go
index c904f1f..73dd0a1 100644
--- a/internal/conversation/conversation.go
+++ b/internal/conversation/conversation.go
@@ -174,6 +174,12 @@ type queries struct {
 	UpdateMessageContent               *sqlx.Stmt `query:"update-message-content"`
 	UpdateMessageStatus                *sqlx.Stmt `query:"update-message-status"`
 	MessageExists                      *sqlx.Stmt `query:"message-exists"`
+
+	// Status
+	GetAllStatuses *sqlx.Stmt `query:"get-all-statuses"`
+
+	// Priority
+	GetAllPriorities *sqlx.Stmt `query:"get-all-priorities"`
 }
 
 // CreateConversation creates a new conversation and returns its ID and UUID.
@@ -444,9 +450,6 @@ func (c *Manager) UpdateAssignee(uuid string, assigneeID int, assigneeType strin
 // UpdateConversationPriority updates the priority of a conversation.
 func (c *Manager) UpdateConversationPriority(uuid string, priority []byte, actor umodels.User) error {
 	var priorityStr = string(priority)
-	if !slices.Contains(models.ValidPriorities, priorityStr) {
-		return envelope.NewError(envelope.GeneralError, "Invalid `priority` value", nil)
-	}
 	if _, err := c.q.UpdateConversationPriority.Exec(uuid, priority); err != nil {
 		c.lo.Error("error updating conversation priority", "error", err)
 		return envelope.NewError(envelope.GeneralError, "Error updating priority", nil)
@@ -460,9 +463,6 @@ func (c *Manager) UpdateConversationPriority(uuid string, priority []byte, actor
 // UpdateConversationStatus updates the status of a conversation.
 func (c *Manager) UpdateConversationStatus(uuid string, status []byte, actor umodels.User) error {
 	var statusStr = string(status)
-	if !slices.Contains(models.ValidStatuses, statusStr) {
-		return envelope.NewError(envelope.GeneralError, "Invalid `status` value", nil)
-	}
 	if _, err := c.q.UpdateConversationStatus.Exec(uuid, status); err != nil {
 		c.lo.Error("error updating conversation status", "error", err)
 		return envelope.NewError(envelope.GeneralError, "Error updating status", nil)
diff --git a/internal/conversation/models/models.go b/internal/conversation/models/models.go
index ef3b3b3..a962c9b 100644
--- a/internal/conversation/models/models.go
+++ b/internal/conversation/models/models.go
@@ -11,26 +11,7 @@ import (
 )
 
 var (
-	StatusOpen       = "Open"
-	StatusResolved   = "Resolved"
-	StatusProcessing = "Processing"
-	StatusSpam       = "Spam"
-
-	PriorityLow    = "Low"
-	PriortiyMedium = "Medium"
-	PriorityHigh   = "High"
-
-	ValidStatuses = []string{
-		StatusOpen,
-		StatusResolved,
-		StatusProcessing,
-		StatusSpam,
-	}
-	ValidPriorities = []string{
-		PriorityLow,
-		PriortiyMedium,
-		PriorityHigh,
-	}
+	StatusOpen       = "Open"	
 
 	ValidFilters = map[string]string{
 		"status_open":       " c.status = 'Open'",
@@ -139,3 +120,15 @@ type IncomingMessage struct {
 	Contact cmodels.Contact
 	InboxID int
 }
+
+type Status struct {
+	ID        int       `db:"id" json:"id"`
+	CreatedAt time.Time `db:"created_at" json:"created_at"`
+	Name      string    `db:"name" json:"name"`
+}
+
+type Priority struct {
+	ID        int       `db:"id" json:"id"`
+	CreatedAt time.Time `db:"created_at" json:"created_at"`
+	Name      string    `db:"name" json:"name"`
+}
diff --git a/internal/conversation/priority.go b/internal/conversation/priority.go
new file mode 100644
index 0000000..43707a1
--- /dev/null
+++ b/internal/conversation/priority.go
@@ -0,0 +1,16 @@
+package conversation
+
+import (
+	"github.com/abhinavxd/artemis/internal/conversation/models"
+	"github.com/abhinavxd/artemis/internal/envelope"
+)
+
+// GetAllPriorities retrieves all priorities.
+func (t *Manager) GetAllPriorities() ([]models.Priority, error) {
+	var priorities []models.Priority
+	if err := t.q.GetAllPriorities.Select(&priorities); err != nil {
+		t.lo.Error("error fetching priorities", "error", err)
+		return nil, envelope.NewError(envelope.GeneralError, "Error fetching priorities", nil)
+	}
+	return priorities, nil
+}
diff --git a/internal/conversation/queries.sql b/internal/conversation/queries.sql
index ebe39db..ffde950 100644
--- a/internal/conversation/queries.sql
+++ b/internal/conversation/queries.sql
@@ -1,8 +1,11 @@
 -- name: insert-conversation
 INSERT INTO conversations
-(reference_number, contact_id, status, inbox_id, meta)
-VALUES($1, $2, $3, $4, $5)
-returning id, uuid;
+(reference_number, contact_id, status_id, inbox_id, meta)
+VALUES($1, $2, 
+    (SELECT id FROM status WHERE name = $3),  
+    $4,
+    $5)
+RETURNING id, uuid;
 
 -- name: get-conversations
 SELECT
@@ -21,16 +24,22 @@ SELECT
         SELECT COUNT(*)
         FROM messages m
         WHERE m.conversation_id = c.id AND m.created_at > c.assignee_last_seen_at
-    ) AS unread_message_count
+    ) AS unread_message_count,
+    s.name as status,
+    p.name as priority
 FROM conversations c
     JOIN contacts ct ON c.contact_id = ct.id
-    JOIN inboxes inb on c.inbox_id = inb.id
+    JOIN inboxes inb ON c.inbox_id = inb.id
+    LEFT JOIN status s ON c.status_id = s.id
+    LEFT JOIN priority p ON c.priority_id = p.id
 WHERE 1=1 %s
 
 -- name: get-conversations-uuids
 SELECT
     c.uuid
 FROM conversations c
+LEFT JOIN status s ON c.status_id = s.id
+LEFT JOIN priority p ON c.priority_id = p.id
 WHERE 1=1 %s
 
 -- name: get-assigned-conversations
@@ -42,8 +51,8 @@ SELECT
     c.updated_at,
     c.closed_at,
     c.resolved_at,
-    c.priority,
-    c.status,
+    p.name as priority,
+    s.name as status,
     c.uuid,
     c.reference_number,
     c.first_reply_at,
@@ -68,6 +77,8 @@ FROM conversations c
 JOIN contacts ct ON c.contact_id = ct.id
 LEFT JOIN users u ON u.id = c.assigned_user_id
 LEFT JOIN teams at ON at.id = c.assigned_team_id
+LEFT JOIN status s ON c.status_id = s.id
+LEFT JOIN priority p ON c.priority_id = p.id
 WHERE c.uuid = $1;
 
 -- name: get-recent-conversations
@@ -76,8 +87,8 @@ SELECT
     c.updated_at,
     c.closed_at,
     c.resolved_at,
-    c.priority,
-    c.status,
+    p.name as priority,
+    s.name as status,
     c.uuid,
     c.reference_number,
     c.first_reply_at,
@@ -98,8 +109,9 @@ FROM conversations c
 JOIN contacts ct ON c.contact_id = ct.id
 LEFT JOIN users u ON u.id = c.assigned_user_id
 LEFT JOIN teams at ON at.id = c.assigned_team_id
-WHERE c.created_at > $1 and c.uuid = 'e2f69c9f-17f5-4d09-9aae-12c2a79046a2';
-
+LEFT JOIN status s ON c.status_id = s.id
+LEFT JOIN priority p ON c.priority_id = p.id
+WHERE c.created_at > $1 AND c.uuid = 'e2f69c9f-17f5-4d09-9aae-12c2a79046a2';
 
 -- name: get-conversation-id
 SELECT id from conversations where uuid = $1;
@@ -122,37 +134,41 @@ WHERE uuid = $1;
 
 -- name: update-conversation-status
 UPDATE conversations
-SET status = $2::text,
-    resolved_at = CASE WHEN $2::text = 'Resolved' THEN CURRENT_TIMESTAMP ELSE NULL END,
-updated_at = now()
+SET status_id = (SELECT id FROM status WHERE name = $2),
+    resolved_at = CASE WHEN $2 = 'Resolved' THEN CURRENT_TIMESTAMP ELSE NULL END,
+    updated_at = now()
 WHERE uuid = $1;
 
 -- name: update-conversation-priority
-UPDATE conversations set priority = $2,
-updated_at = now()
-where uuid = $1;
+UPDATE conversations 
+SET priority_id = (SELECT id FROM priority WHERE name = $2),
+    updated_at = now()
+WHERE uuid = $1;
 
 -- name: update-conversation-assignee-last-seen
-UPDATE conversations set assignee_last_seen_at = now(),
-updated_at = now()
-where uuid = $1;
+UPDATE conversations 
+SET assignee_last_seen_at = now(),
+    updated_at = now()
+WHERE uuid = $1;
 
 -- name: update-conversation-meta
-UPDATE conversations set meta = meta || $3 where CASE WHEN $1 > 0 then id = $1 else uuid = $2 end;
+UPDATE conversations 
+SET meta = meta || $3 
+WHERE CASE WHEN $1 > 0 THEN id = $1 ELSE uuid = $2 END;
 
 -- name: get-conversation-participants
-select users.uuid as uuid, first_name, last_name, avatar_url from conversation_participants
-inner join users on users.id = conversation_participants.user_id
-where conversation_id =
+SELECT users.uuid as uuid, first_name, last_name, avatar_url 
+FROM conversation_participants
+INNER JOIN users ON users.id = conversation_participants.user_id
+WHERE conversation_id =
 (
-    select id from conversations where uuid = $1
+    SELECT id FROM conversations WHERE uuid = $1
 );
 
 -- name: insert-conversation-participant
 INSERT INTO conversation_participants
 (user_id, conversation_id)
-VALUES($1, (select id from conversations where uuid = $2));
-
+VALUES($1, (SELECT id FROM conversations WHERE uuid = $2));
 
 -- name: get-unassigned-conversations
 SELECT
@@ -172,20 +188,26 @@ SELECT
         SELECT COUNT(*)
         FROM messages m
         WHERE m.conversation_id = c.id AND m.created_at > c.assignee_last_seen_at
-    ) AS unread_message_count
+    ) AS unread_message_count,
+    s.name as status,
+    p.name as priority
 FROM conversations c
     JOIN contacts ct ON c.contact_id = ct.id
-    JOIN inboxes inb on c.inbox_id = inb.id where assigned_user_id is NULL and assigned_team_id is not null;
+    JOIN inboxes inb ON c.inbox_id = inb.id 
+    LEFT JOIN status s ON c.status_id = s.id
+    LEFT JOIN priority p ON c.priority_id = p.id
+WHERE assigned_user_id IS NULL AND assigned_team_id IS NOT NULL;
 
 -- name: get-dashboard-counts
 SELECT json_build_object(
-    'resolved_count', COUNT(CASE WHEN status IN ('Resolved') THEN 1 END),
-    'unresolved_count', COUNT(CASE WHEN status NOT IN ('Resolved', 'Closed') THEN 1 END),
+    'resolved_count', COUNT(CASE WHEN s.name = 'Resolved' THEN 1 END),
+    'unresolved_count', COUNT(CASE WHEN s.name NOT IN ('Resolved', 'Closed') THEN 1 END),
     'awaiting_response_count', COUNT(CASE WHEN first_reply_at IS NULL THEN 1 END),
     'total_count', COUNT(*)
 )
-FROM conversations
-WHERE 1=1 %s;
+FROM conversations c
+LEFT JOIN status s ON c.status_id = s.id
+WHERE 1=1 %s
 
 -- name: get-dashboard-charts
 WITH new_conversations AS (
@@ -207,15 +229,17 @@ status_summary AS (
     SELECT json_agg(row_to_json(agg)) AS data
     FROM (
         SELECT 
-            status,
-            COUNT(*) FILTER (WHERE priority = 'Low') AS "Low",
-            COUNT(*) FILTER (WHERE priority = 'Medium') AS "Medium",
-            COUNT(*) FILTER (WHERE priority = 'High') AS "High"
+            s.name as status,
+            COUNT(*) FILTER (WHERE p.name = 'Low') AS "Low",
+            COUNT(*) FILTER (WHERE p.name = 'Medium') AS "Medium",
+            COUNT(*) FILTER (WHERE p.name = 'High') AS "High"
         FROM 
-            conversations
+            conversations c
+        LEFT join status s on s.id = c.status_id
+        LEFT join priority p on p.id = c.priority_id
         WHERE 1=1 %s
         GROUP BY 
-            status
+            s.name
     ) agg
 )
 SELECT json_build_object(
@@ -234,23 +258,25 @@ INSERT INTO conversation_tags (conversation_id, tag_id)
 VALUES(
     (
         SELECT id
-        from conversations
-        where uuid = $1
+        FROM conversations
+        WHERE uuid = $1
     ),
     $2
-) ON CONFLICT DO NOTHING
+) ON CONFLICT DO NOTHING;
 
 -- name: delete-conversation-tags
 DELETE FROM conversation_tags
 WHERE conversation_id = (
     SELECT id
-    from conversations
-    where uuid = $1
+    FROM conversations
+    WHERE uuid = $1
 ) AND tag_id NOT IN (SELECT unnest($2::int[]));
 
-
 -- name: get-to-address
-SELECT cm.source_id from conversations c inner join contact_methods cm on cm.contact_id = c.contact_id where c.id = $1 and cm.source = $2;
+SELECT cm.source_id 
+FROM conversations c 
+INNER JOIN contact_methods cm ON cm.contact_id = c.contact_id 
+WHERE c.id = $1 AND cm.source = $2;
 
 -- name: get-conversation-uuid-from-message-uuid
 SELECT c.uuid AS conversation_uuid
@@ -356,7 +382,7 @@ FROM messages m
 LEFT JOIN attachments a ON a.message_id = m.id
 LEFT JOIN users u on u.id = m.sender_id
 WHERE m.conversation_id = (SELECT id FROM conversation_id) ORDER BY m.created_at DESC
-%s;
+%s
 
 -- name: insert-message
 WITH conversation_id AS (
@@ -407,3 +433,11 @@ where id = $2;
 
 -- name: update-message-status
 update messages set status = $1 where uuid = $2;
+
+-- Status queries.
+-- name: get-all-statuses
+SELECT * from status;
+
+-- Priority queries.
+-- name: get-all-priorities
+SELECT * from priority;
\ No newline at end of file
diff --git a/internal/conversation/status.go b/internal/conversation/status.go
new file mode 100644
index 0000000..993f99b
--- /dev/null
+++ b/internal/conversation/status.go
@@ -0,0 +1,16 @@
+package conversation
+
+import (
+	"github.com/abhinavxd/artemis/internal/conversation/models"
+	"github.com/abhinavxd/artemis/internal/envelope"
+)
+
+// GetAllStatuses retrieves all statuses.
+func (t *Manager) GetAllStatuses() ([]models.Status, error) {
+	var statuses []models.Status
+	if err := t.q.GetAllStatuses.Select(&statuses); err != nil {
+		t.lo.Error("error fetching statuses", "error", err)
+		return nil, envelope.NewError(envelope.GeneralError, "Error fetching statuses", nil)
+	}
+	return statuses, nil
+}
diff --git a/internal/media/media.go b/internal/media/media.go
index 165c120..c487646 100644
--- a/internal/media/media.go
+++ b/internal/media/media.go
@@ -177,6 +177,7 @@ func (m *Manager) DeleteMediaAndStore(name string) error {
 // This function should be run as a goroutine to avoid blocking. It uses a ticker to
 // trigger the deletion process every 12 hours.
 func (m *Manager) CleanMedia(ctx context.Context) {
+	m.deleteUnlinkedMedia()
 	ticker := time.NewTicker(12 * time.Hour)
 	defer ticker.Stop()
 	for {
@@ -203,7 +204,7 @@ func (m *Manager) deleteUnlinkedMedia() {
 	for _, id := range unlinkedMedia {
 		_, err := m.queries.DeleteMedia.Exec(id)
 		if err != nil {
-			m.lo.Error("error deleting unlinked media", "ID", id, "error", err)
+			m.lo.Error("error deleting unlinked media", "id", id, "error", err)
 		}
 	}
 }
diff --git a/internal/media/queries.sql b/internal/media/queries.sql
index 1e6ed9d..91b4b3a 100644
--- a/internal/media/queries.sql
+++ b/internal/media/queries.sql
@@ -31,4 +31,4 @@ WHERE (
         model_type IS NULL
         OR model_id IS NULL
     )
-    AND created_at > $1;
\ No newline at end of file
+    AND created_at < $1;
\ No newline at end of file
diff --git a/schema.sql b/schema.sql
new file mode 100644
index 0000000..41eb7af
--- /dev/null
+++ b/schema.sql
@@ -0,0 +1,442 @@
+-- public.attachments definition
+
+-- Drop table
+
+-- DROP TABLE public.attachments;
+
+CREATE TABLE public.attachments (
+	id int8 DEFAULT nextval('media_id_seq'::regclass) NOT NULL,
+	"uuid" uuid DEFAULT gen_random_uuid() NULL,
+	created_at timestamp DEFAULT now() NULL,
+	store varchar(10) DEFAULT ''::text NOT NULL,
+	filename varchar(140) NOT NULL,
+	content_type varchar(140) NOT NULL,
+	message_id int8 NULL,
+	"size" varchar(10) NULL,
+	content_disposition varchar(50) NULL,
+	CONSTRAINT media_pkey PRIMARY KEY (id)
+);
+
+
+-- public.automation_rules definition
+
+-- Drop table
+
+-- DROP TABLE public.automation_rules;
+
+CREATE TABLE public.automation_rules (
+	id int4 DEFAULT nextval('rules_id_seq'::regclass) NOT NULL,
+	"name" varchar(255) NOT NULL,
+	description text NULL,
+	created_at timestamp DEFAULT now() NOT NULL,
+	"type" varchar NOT NULL,
+	rules jsonb NULL,
+	updated_at timestamp DEFAULT now() NOT NULL,
+	disabled bool DEFAULT false NOT NULL,
+	CONSTRAINT rules_pkey PRIMARY KEY (id)
+);
+
+
+-- public.canned_responses definition
+
+-- Drop table
+
+-- DROP TABLE public.canned_responses;
+
+CREATE TABLE public.canned_responses (
+	id serial4 NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	title text NOT NULL,
+	"content" text NOT NULL,
+	CONSTRAINT canned_responses_pkey PRIMARY KEY (id)
+);
+
+
+-- public.contacts definition
+
+-- Drop table
+
+-- DROP TABLE public.contacts;
+
+CREATE TABLE public.contacts (
+	id bigserial NOT NULL,
+	created_at timestamptz DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamptz DEFAULT CURRENT_TIMESTAMP NULL,
+	"uuid" uuid DEFAULT gen_random_uuid() NOT NULL,
+	first_name text NULL,
+	last_name text NULL,
+	email varchar NULL,
+	phone_number text NULL,
+	avatar_url text NULL,
+	inbox_id int4 NULL,
+	source_id text NULL,
+	CONSTRAINT contacts_pkey PRIMARY KEY (id)
+);
+
+
+-- public.conversation_participants definition
+
+-- Drop table
+
+-- DROP TABLE public.conversation_participants;
+
+CREATE TABLE public.conversation_participants (
+	id bigserial NOT NULL,
+	created_at timestamptz DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamptz DEFAULT CURRENT_TIMESTAMP NULL,
+	user_id int8 NULL,
+	conversation_id int8 NULL,
+	CONSTRAINT conversation_participants_pkey PRIMARY KEY (id),
+	CONSTRAINT conversation_participants_unique UNIQUE (conversation_id, user_id)
+);
+
+
+-- public.file_upload_providers definition
+
+-- Drop table
+
+-- DROP TABLE public.file_upload_providers;
+
+CREATE TABLE public.file_upload_providers (
+	id serial4 NOT NULL,
+	provider_name text NOT NULL,
+	region text NULL,
+	access_key text NULL,
+	access_secret text NULL,
+	bucket_name text NULL,
+	bucket_type text NULL,
+	bucket_path text NULL,
+	upload_expiry interval NULL,
+	s3_backend_url text NULL,
+	custom_public_url text NULL,
+	upload_path text NULL,
+	upload_uri text NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	CONSTRAINT file_upload_providers_pkey PRIMARY KEY (id)
+);
+
+
+-- public.inboxes definition
+
+-- Drop table
+
+-- DROP TABLE public.inboxes;
+
+CREATE TABLE public.inboxes (
+	id serial4 NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	channel public."channels" NOT NULL,
+	disabled bool DEFAULT false NOT NULL,
+	config jsonb DEFAULT '{}'::jsonb NOT NULL,
+	"name" varchar(140) NOT NULL,
+	"from" varchar(200) NULL,
+	assign_to_team int4 NULL,
+	soft_delete bool DEFAULT false NOT NULL,
+	CONSTRAINT inboxes_pkey PRIMARY KEY (id)
+);
+
+
+-- public.media definition
+
+-- Drop table
+
+-- DROP TABLE public.media;
+
+CREATE TABLE public.media (
+	id serial4 NOT NULL,
+	created_at timestamp DEFAULT now() NOT NULL,
+	"uuid" uuid DEFAULT gen_random_uuid() NOT NULL,
+	store public."media_store" NOT NULL,
+	filename text NOT NULL,
+	content_type text NOT NULL,
+	model_id int4 NULL,
+	model_type text NULL,
+	"size" int4 NULL,
+	meta jsonb DEFAULT '{}'::jsonb NOT NULL,
+	CONSTRAINT media_pkey1 PRIMARY KEY (id)
+);
+
+
+-- public.oidc definition
+
+-- Drop table
+
+-- DROP TABLE public.oidc;
+
+CREATE TABLE public.oidc (
+	id int4 DEFAULT nextval('social_login_id_seq'::regclass) NOT NULL,
+	provider_url text NOT NULL,
+	client_id text NOT NULL,
+	client_secret text NOT NULL,
+	disabled bool DEFAULT false NOT NULL,
+	created_at timestamp DEFAULT now() NOT NULL,
+	updated_at timestamp DEFAULT now() NOT NULL,
+	provider varchar NULL,
+	"name" text NULL,
+	CONSTRAINT social_login_pkey PRIMARY KEY (id)
+);
+
+
+-- public.priority definition
+
+-- Drop table
+
+-- DROP TABLE public.priority;
+
+CREATE TABLE public.priority (
+	id serial4 NOT NULL,
+	"name" text NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	CONSTRAINT priority_pkey PRIMARY KEY (id),
+	CONSTRAINT priority_priority_name_key UNIQUE (name)
+);
+
+
+-- public.roles definition
+
+-- Drop table
+
+-- DROP TABLE public.roles;
+
+CREATE TABLE public.roles (
+	id serial4 NOT NULL,
+	permissions _text DEFAULT '{}'::text[] NOT NULL,
+	"name" text NULL,
+	description text NULL,
+	created_at timestamptz DEFAULT now() NULL,
+	updated_at timestamptz DEFAULT now() NULL,
+	CONSTRAINT roles_pkey PRIMARY KEY (id)
+);
+
+
+-- public.settings definition
+
+-- Drop table
+
+-- DROP TABLE public.settings;
+
+CREATE TABLE public.settings (
+	"key" text NOT NULL,
+	value jsonb DEFAULT '{}'::jsonb NOT NULL,
+	updated_at timestamptz DEFAULT now() NULL,
+	CONSTRAINT settings_key_key UNIQUE (key)
+);
+CREATE INDEX idx_settings_key ON public.settings USING btree (key);
+
+
+-- public.status definition
+
+-- Drop table
+
+-- DROP TABLE public.status;
+
+CREATE TABLE public.status (
+	id serial4 NOT NULL,
+	"name" text NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	CONSTRAINT status_pkey PRIMARY KEY (id),
+	CONSTRAINT status_status_name_key UNIQUE (name)
+);
+
+
+-- public.tags definition
+
+-- Drop table
+
+-- DROP TABLE public.tags;
+
+CREATE TABLE public.tags (
+	id bigserial NOT NULL,
+	"name" text NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	CONSTRAINT tags_pkey PRIMARY KEY (id),
+	CONSTRAINT tags_tag_name_key UNIQUE (name)
+);
+
+
+-- public.team_members definition
+
+-- Drop table
+
+-- DROP TABLE public.team_members;
+
+CREATE TABLE public.team_members (
+	id serial4 NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	team_id int4 NOT NULL,
+	user_id int4 NOT NULL,
+	CONSTRAINT team_members_pkey PRIMARY KEY (id),
+	CONSTRAINT unique_team_user UNIQUE (team_id, user_id)
+);
+
+
+-- public.teams definition
+
+-- Drop table
+
+-- DROP TABLE public.teams;
+
+CREATE TABLE public.teams (
+	id serial4 NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	"name" varchar(140) NOT NULL,
+	disabled bool DEFAULT false NOT NULL,
+	auto_assign_conversations bool DEFAULT false NOT NULL,
+	CONSTRAINT teams_pkey PRIMARY KEY (id),
+	CONSTRAINT teams_unique UNIQUE (name)
+);
+
+
+-- public.templates definition
+
+-- Drop table
+
+-- DROP TABLE public.templates;
+
+CREATE TABLE public.templates (
+	id serial4 NOT NULL,
+	body text NOT NULL,
+	is_default bool DEFAULT false NOT NULL,
+	created_at timestamptz DEFAULT now() NULL,
+	updated_at timestamptz DEFAULT now() NULL,
+	"name" text NULL,
+	CONSTRAINT email_templates_pkey PRIMARY KEY (id)
+);
+CREATE UNIQUE INDEX email_templates_is_default_idx ON public.templates USING btree (is_default) WHERE (is_default = true);
+
+
+-- public.uploads definition
+
+-- Drop table
+
+-- DROP TABLE public.uploads;
+
+CREATE TABLE public.uploads (
+	id uuid DEFAULT gen_random_uuid() NOT NULL,
+	filename text NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	CONSTRAINT uploads_pkey PRIMARY KEY (id)
+);
+
+
+-- public.users definition
+
+-- Drop table
+
+-- DROP TABLE public.users;
+
+CREATE TABLE public.users (
+	id int4 DEFAULT nextval('agents_id_seq'::regclass) NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	email varchar(255) NOT NULL,
+	"uuid" uuid DEFAULT gen_random_uuid() NOT NULL,
+	first_name varchar(100) NOT NULL,
+	last_name varchar(100) NULL,
+	"password" varchar(150) NULL,
+	disabled bool DEFAULT false NOT NULL,
+	avatar_url text NULL,
+	roles _text DEFAULT '{}'::text[] NOT NULL,
+	CONSTRAINT agents_pkey PRIMARY KEY (id),
+	CONSTRAINT users_email_unique UNIQUE (email)
+);
+
+
+-- public.contact_methods definition
+
+-- Drop table
+
+-- DROP TABLE public.contact_methods;
+
+CREATE TABLE public.contact_methods (
+	id bigserial NOT NULL,
+	contact_id int8 NOT NULL,
+	"source" text NOT NULL,
+	source_id text NOT NULL,
+	inbox_id int4 NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	CONSTRAINT contact_methods_pkey PRIMARY KEY (id),
+	CONSTRAINT unique_contact_method UNIQUE (source, source_id),
+	CONSTRAINT fk_contact FOREIGN KEY (contact_id) REFERENCES public.contacts(id) ON DELETE CASCADE
+);
+
+
+-- public.conversations definition
+
+-- Drop table
+
+-- DROP TABLE public.conversations;
+
+CREATE TABLE public.conversations (
+	id bigserial NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	updated_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	"uuid" uuid DEFAULT gen_random_uuid() NOT NULL,
+	reference_number text NOT NULL,
+	closed_at timestamp NULL,
+	contact_id int8 NOT NULL,
+	assigned_user_id int8 NULL,
+	assigned_team_id int8 NULL,
+	resolved_at timestamp NULL,
+	inbox_id int4 NOT NULL,
+	meta jsonb DEFAULT '{}'::json NOT NULL,
+	assignee_last_seen_at timestamptz DEFAULT CURRENT_TIMESTAMP NULL,
+	first_reply_at timestamp NULL,
+	status_id int8 DEFAULT 1 NOT NULL,
+	priority_id int8 NULL,
+	CONSTRAINT messages_pkey PRIMARY KEY (id),
+	CONSTRAINT conversations_status_id_fkey FOREIGN KEY (status_id) REFERENCES public.status(id)
+);
+
+
+-- public.messages definition
+
+-- Drop table
+
+-- DROP TABLE public.messages;
+
+CREATE TABLE public.messages (
+	id bigserial NOT NULL,
+	updated_at timestamptz DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	"uuid" uuid DEFAULT gen_random_uuid() NOT NULL,
+	"type" text NOT NULL,
+	status text NULL,
+	conversation_id bigserial NOT NULL,
+	"content" text NULL,
+	sender_id int4 NULL,
+	private bool NULL,
+	content_type varchar(50) DEFAULT false NOT NULL,
+	source_id text NULL,
+	meta jsonb DEFAULT '{}'::jsonb NULL,
+	inbox_id int4 NULL,
+	sender_type varchar NULL,
+	created_at timestamptz DEFAULT CURRENT_TIMESTAMP NOT NULL,
+	CONSTRAINT messages__pkey PRIMARY KEY (id),
+	CONSTRAINT messages_unique UNIQUE (source_id),
+	CONSTRAINT fk_conversation_id FOREIGN KEY (conversation_id) REFERENCES public.conversations(id)
+);
+
+
+-- public.conversation_tags definition
+
+-- Drop table
+
+-- DROP TABLE public.conversation_tags;
+
+CREATE TABLE public.conversation_tags (
+	id bigserial NOT NULL,
+	conversation_id int8 DEFAULT nextval('conversation_tags_converastion_id_seq'::regclass) NOT NULL,
+	tag_id bigserial NOT NULL,
+	created_at timestamp DEFAULT CURRENT_TIMESTAMP NULL,
+	CONSTRAINT conversation_tags_unique UNIQUE (conversation_id, tag_id),
+	CONSTRAINT message_tags_pkey PRIMARY KEY (id),
+	CONSTRAINT message_tags_conversation_id_fkey FOREIGN KEY (conversation_id) REFERENCES public.conversations(id),
+	CONSTRAINT message_tags_tag_id_fkey FOREIGN KEY (tag_id) REFERENCES public.tags(id)
+);
\ No newline at end of file