diff --git a/biome.json b/biome.json
index 5546d99..13eef74 100644
--- a/biome.json
+++ b/biome.json
@@ -20,6 +20,7 @@
 	},
 	"javascript": {
 		"formatter": {
+			"jsxQuoteStyle": "single",
 			"quoteStyle": "single"
 		}
 	}
diff --git a/client/src/App.tsx b/client/src/App.tsx
index 1ecdbcf..e4c527f 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -9,7 +9,7 @@ function App() {
 		<>
 			<AuthProvider>
 				<LinksProvider>
-					<ThemeProvider defaultTheme="dark" storageKey="vite-ui-theme">
+					<ThemeProvider defaultTheme='dark' storageKey='vite-ui-theme'>
 						<Routes />
 					</ThemeProvider>
 				</LinksProvider>
diff --git a/client/src/components/Navbar.tsx b/client/src/components/Navbar.tsx
index 85d43c4..42b6d50 100644
--- a/client/src/components/Navbar.tsx
+++ b/client/src/components/Navbar.tsx
@@ -1,28 +1,28 @@
 export default function Navbar() {
 	return (
 		<>
-			<nav className="p-4 border-b-2 border-blue-500">
-				<div className="container mx-auto flex justify-between items-center">
-					<div className="text-slate-950 text-2xl font-bold">
+			<nav className='p-4 border-b-2 border-blue-500'>
+				<div className='container mx-auto flex justify-between items-center'>
+					<div className='text-slate-950 text-2xl font-bold'>
 						<img
-							className="w-20"
-							src="/public/logotypeLinx.png"
-							alt="Logotype Linx"
+							className='w-20'
+							src='/public/logotypeLinx.png'
+							alt='Logotype Linx'
 						/>
 					</div>
-					<ul className="flex space-x-4">
+					<ul className='flex space-x-4'>
 						<li>
-							<a href="#product" className="text-slate-950 hover:text-blue-700">
+							<a href='#product' className='text-slate-950 hover:text-blue-700'>
 								Product
 							</a>
 						</li>
 						<li>
-							<a href="#login" className="text-slate-950 hover:text-blue-700">
+							<a href='#login' className='text-slate-950 hover:text-blue-700'>
 								Login
 							</a>
 						</li>
 						<li>
-							<a href="#signup" className="text-slate-950 hover:text-blue-700">
+							<a href='#signup' className='text-slate-950 hover:text-blue-700'>
 								Sign Up
 							</a>
 						</li>
diff --git a/client/src/components/data-table.tsx b/client/src/components/data-table.tsx
index 121fc56..aab117b 100644
--- a/client/src/components/data-table.tsx
+++ b/client/src/components/data-table.tsx
@@ -66,9 +66,9 @@ export function DataTable<TData, TValue>({
 	});
 
 	return (
-		<div className="space-y-4">
+		<div className='space-y-4'>
 			<DataTableToolbar table={table} />
-			<div className="rounded-md border">
+			<div className='rounded-md border'>
 				<Table>
 					<TableHeader>
 						{table.getHeaderGroups().map((headerGroup) => (
@@ -109,7 +109,7 @@ export function DataTable<TData, TValue>({
 							<TableRow>
 								<TableCell
 									colSpan={columns.length}
-									className="h-24 text-center"
+									className='h-24 text-center'
 								>
 									No results.
 								</TableCell>
diff --git a/client/src/components/datagrids/links/links-columns.tsx b/client/src/components/datagrids/links/links-columns.tsx
index e396e72..2f84b6b 100644
--- a/client/src/components/datagrids/links/links-columns.tsx
+++ b/client/src/components/datagrids/links/links-columns.tsx
@@ -20,16 +20,16 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 					(table.getIsSomePageRowsSelected() && 'indeterminate')
 				}
 				onCheckedChange={(value) => table.toggleAllPageRowsSelected(!!value)}
-				aria-label="Select all"
-				className="translate-y-[2px]"
+				aria-label='Select all'
+				className='translate-y-[2px]'
 			/>
 		),
 		cell: ({ row }) => (
 			<Checkbox
 				checked={row.getIsSelected()}
 				onCheckedChange={(value) => row.toggleSelected(!!value)}
-				aria-label="Select row"
-				className="translate-y-[2px]"
+				aria-label='Select row'
+				className='translate-y-[2px]'
 			/>
 		),
 		enableSorting: false,
@@ -38,14 +38,14 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 	{
 		accessorKey: 'shorter_name',
 		header: ({ column }) => (
-			<DataTableColumnHeader column={column} title="Shorter Name" />
+			<DataTableColumnHeader column={column} title='Shorter Name' />
 		),
 		cell: ({ row }) => {
 			const { toast } = useToast();
 			return (
-				<div className="flex items-center space-x-2">
+				<div className='flex items-center space-x-2'>
 					<Clipboard
-						className="w-4"
+						className='w-4'
 						onClick={() => {
 							copyTextToClipboard(row.original.shorter_name);
 							toast({ title: 'Copied to clipboard' });
@@ -53,7 +53,7 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 					/>
 					<span
 						title={row.original.shorter_name}
-						className="max-w-[500px] truncate font-medium"
+						className='max-w-[500px] truncate font-medium'
 					>
 						{row.original.shorter_name}
 					</span>
@@ -64,16 +64,16 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 	{
 		accessorKey: 'shorter_url',
 		header: ({ column }) => (
-			<DataTableColumnHeader column={column} title="Shorter URL" />
+			<DataTableColumnHeader column={column} title='Shorter URL' />
 		),
 		cell: ({ row }) => {
 			const { toast } = useToast();
 
 			const shorter_url = `${import.meta.env.VITE_API_URL}/${row.original.shorter_name}`;
 			return (
-				<div className="flex items-center space-x-2">
+				<div className='flex items-center space-x-2'>
 					<Clipboard
-						className="w-4"
+						className='w-4'
 						onClick={() => {
 							copyTextToClipboard(shorter_url);
 							toast({ title: 'Copied to clipboard' });
@@ -81,9 +81,9 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 					/>
 					<span
 						title={row.original.shorter_name}
-						className="max-w-[500px] truncate font-medium"
+						className='max-w-[500px] truncate font-medium'
 					>
-						<a className="underline text-blue-500" href={shorter_url}>
+						<a className='underline text-blue-500' href={shorter_url}>
 							{shorter_url}
 						</a>
 					</span>
@@ -94,13 +94,13 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 	{
 		accessorKey: 'url',
 		header: ({ column }) => (
-			<DataTableColumnHeader column={column} title="Destination URL" />
+			<DataTableColumnHeader column={column} title='Destination URL' />
 		),
 		cell: ({ row }) => {
 			return (
-				<div className="flex space-x-2">
-					<span className="max-w-[500px] truncate font-medium">
-						<a className="underline text-blue-500" href={row.original.url}>
+				<div className='flex space-x-2'>
+					<span className='max-w-[500px] truncate font-medium'>
+						<a className='underline text-blue-500' href={row.original.url}>
 							{row.original.url}
 						</a>
 					</span>
@@ -111,12 +111,12 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 	{
 		accessorKey: 'created_at',
 		header: ({ column }) => (
-			<DataTableColumnHeader column={column} title="Created at" />
+			<DataTableColumnHeader column={column} title='Created at' />
 		),
 		cell: ({ row }) => {
 			return (
-				<div className="flex space-x-2">
-					<span className="max-w-[500px] truncate font-medium">
+				<div className='flex space-x-2'>
+					<span className='max-w-[500px] truncate font-medium'>
 						{row.original.created_at.toLocaleString([], {
 							month: '2-digit',
 							day: '2-digit',
@@ -133,12 +133,12 @@ export const linksColumns: ColumnDef<z.infer<typeof LinkSchema>>[] = [
 	{
 		accessorKey: 'updated_at',
 		header: ({ column }) => (
-			<DataTableColumnHeader column={column} title="Update date" />
+			<DataTableColumnHeader column={column} title='Update date' />
 		),
 		cell: ({ row }) => {
 			return (
-				<div className="flex space-x-2">
-					<span className="max-w-[500px] truncate font-medium">
+				<div className='flex space-x-2'>
+					<span className='max-w-[500px] truncate font-medium'>
 						{row.original.updated_at.toLocaleString([], {
 							month: '2-digit',
 							day: '2-digit',
diff --git a/client/src/components/datagrids/links/links-table-column-header.tsx b/client/src/components/datagrids/links/links-table-column-header.tsx
index e1f2c0a..3e58c0b 100644
--- a/client/src/components/datagrids/links/links-table-column-header.tsx
+++ b/client/src/components/datagrids/links/links-table-column-header.tsx
@@ -36,32 +36,32 @@ export function DataTableColumnHeader<TData, TValue>({
 			<DropdownMenu>
 				<DropdownMenuTrigger asChild>
 					<Button
-						variant="ghost"
-						size="sm"
-						className="-ml-3 h-8 data-[state=open]:bg-accent"
+						variant='ghost'
+						size='sm'
+						className='-ml-3 h-8 data-[state=open]:bg-accent'
 					>
 						<span>{title}</span>
 						{column.getIsSorted() === 'desc' ? (
-							<ArrowDownIcon className="ml-2 h-4 w-4" />
+							<ArrowDownIcon className='ml-2 h-4 w-4' />
 						) : column.getIsSorted() === 'asc' ? (
-							<ArrowUpIcon className="ml-2 h-4 w-4" />
+							<ArrowUpIcon className='ml-2 h-4 w-4' />
 						) : (
-							<CaretSortIcon className="ml-2 h-4 w-4" />
+							<CaretSortIcon className='ml-2 h-4 w-4' />
 						)}
 					</Button>
 				</DropdownMenuTrigger>
-				<DropdownMenuContent align="start">
+				<DropdownMenuContent align='start'>
 					<DropdownMenuItem onClick={() => column.toggleSorting(false)}>
-						<ArrowUpIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+						<ArrowUpIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
 						Asc
 					</DropdownMenuItem>
 					<DropdownMenuItem onClick={() => column.toggleSorting(true)}>
-						<ArrowDownIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+						<ArrowDownIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
 						Desc
 					</DropdownMenuItem>
 					<DropdownMenuSeparator />
 					<DropdownMenuItem onClick={() => column.toggleVisibility(false)}>
-						<EyeNoneIcon className="mr-2 h-3.5 w-3.5 text-muted-foreground/70" />
+						<EyeNoneIcon className='mr-2 h-3.5 w-3.5 text-muted-foreground/70' />
 						Hide
 					</DropdownMenuItem>
 				</DropdownMenuContent>
diff --git a/client/src/components/datagrids/links/links-table-faceted-filter.tsx b/client/src/components/datagrids/links/links-table-faceted-filter.tsx
index 12e2b89..22ca44a 100644
--- a/client/src/components/datagrids/links/links-table-faceted-filter.tsx
+++ b/client/src/components/datagrids/links/links-table-faceted-filter.tsx
@@ -38,23 +38,23 @@ export function DataTableFacetedFilter<TData, TValue>({
 	return (
 		<Popover>
 			<PopoverTrigger asChild>
-				<Button variant="outline" size="sm" className="h-8 border-dashed">
-					<PlusCircledIcon className="mr-2 h-4 w-4" />
+				<Button variant='outline' size='sm' className='h-8 border-dashed'>
+					<PlusCircledIcon className='mr-2 h-4 w-4' />
 					{title}
 					{selectedValues?.size > 0 && (
 						<>
-							<Separator orientation="vertical" className="mx-2 h-4" />
+							<Separator orientation='vertical' className='mx-2 h-4' />
 							<Badge
-								variant="secondary"
-								className="rounded-sm px-1 font-normal lg:hidden"
+								variant='secondary'
+								className='rounded-sm px-1 font-normal lg:hidden'
 							>
 								{selectedValues.size}
 							</Badge>
-							<div className="hidden space-x-1 lg:flex">
+							<div className='hidden space-x-1 lg:flex'>
 								{selectedValues.size > 2 ? (
 									<Badge
-										variant="secondary"
-										className="rounded-sm px-1 font-normal"
+										variant='secondary'
+										className='rounded-sm px-1 font-normal'
 									>
 										{selectedValues.size} selected
 									</Badge>
@@ -63,9 +63,9 @@ export function DataTableFacetedFilter<TData, TValue>({
 										.filter((option) => selectedValues.has(option.value))
 										.map((option) => (
 											<Badge
-												variant="secondary"
+												variant='secondary'
 												key={option.value}
-												className="rounded-sm px-1 font-normal"
+												className='rounded-sm px-1 font-normal'
 											>
 												{option.label}
 											</Badge>
@@ -76,7 +76,7 @@ export function DataTableFacetedFilter<TData, TValue>({
 					)}
 				</Button>
 			</PopoverTrigger>
-			<PopoverContent className="w-[200px] p-0" align="start">
+			<PopoverContent className='w-[200px] p-0' align='start'>
 				<Command>
 					<CommandInput placeholder={title} />
 					<CommandList>
@@ -110,11 +110,11 @@ export function DataTableFacetedFilter<TData, TValue>({
 											<CheckIcon className={cn('h-4 w-4')} />
 										</div>
 										{option.icon && (
-											<option.icon className="mr-2 h-4 w-4 text-muted-foreground" />
+											<option.icon className='mr-2 h-4 w-4 text-muted-foreground' />
 										)}
 										<span>{option.label}</span>
 										{facets?.get(option.value) && (
-											<span className="ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs">
+											<span className='ml-auto flex h-4 w-4 items-center justify-center font-mono text-xs'>
 												{facets.get(option.value)}
 											</span>
 										)}
@@ -128,7 +128,7 @@ export function DataTableFacetedFilter<TData, TValue>({
 								<CommandGroup>
 									<CommandItem
 										onSelect={() => column?.setFilterValue(undefined)}
-										className="justify-center text-center"
+										className='justify-center text-center'
 									>
 										Clear filters
 									</CommandItem>
diff --git a/client/src/components/datagrids/links/links-table-pagination.tsx b/client/src/components/datagrids/links/links-table-pagination.tsx
index 8a9feb9..463df21 100644
--- a/client/src/components/datagrids/links/links-table-pagination.tsx
+++ b/client/src/components/datagrids/links/links-table-pagination.tsx
@@ -23,24 +23,24 @@ export function DataTablePagination<TData>({
 	table,
 }: DataTablePaginationProps<TData>) {
 	return (
-		<div className="flex items-center justify-between px-2">
-			<div className="flex-1 text-sm text-muted-foreground">
+		<div className='flex items-center justify-between px-2'>
+			<div className='flex-1 text-sm text-muted-foreground'>
 				{table.getFilteredSelectedRowModel().rows.length} of{' '}
 				{table.getFilteredRowModel().rows.length} row(s) selected.
 			</div>
-			<div className="flex items-center space-x-6 lg:space-x-8">
-				<div className="flex items-center space-x-2">
-					<p className="text-sm font-medium">Rows per page</p>
+			<div className='flex items-center space-x-6 lg:space-x-8'>
+				<div className='flex items-center space-x-2'>
+					<p className='text-sm font-medium'>Rows per page</p>
 					<Select
 						value={`${table.getState().pagination.pageSize}`}
 						onValueChange={(value) => {
 							table.setPageSize(Number(value));
 						}}
 					>
-						<SelectTrigger className="h-8 w-[70px]">
+						<SelectTrigger className='h-8 w-[70px]'>
 							<SelectValue placeholder={table.getState().pagination.pageSize} />
 						</SelectTrigger>
-						<SelectContent side="top">
+						<SelectContent side='top'>
 							{[10, 20, 30, 40, 50].map((pageSize) => (
 								<SelectItem key={pageSize} value={`${pageSize}`}>
 									{pageSize}
@@ -49,46 +49,46 @@ export function DataTablePagination<TData>({
 						</SelectContent>
 					</Select>
 				</div>
-				<div className="flex w-[100px] items-center justify-center text-sm font-medium">
+				<div className='flex w-[100px] items-center justify-center text-sm font-medium'>
 					Page {table.getState().pagination.pageIndex + 1} of{' '}
 					{table.getPageCount()}
 				</div>
-				<div className="flex items-center space-x-2">
+				<div className='flex items-center space-x-2'>
 					<Button
-						variant="outline"
-						className="hidden h-8 w-8 p-0 lg:flex"
+						variant='outline'
+						className='hidden h-8 w-8 p-0 lg:flex'
 						onClick={() => table.setPageIndex(0)}
 						disabled={!table.getCanPreviousPage()}
 					>
-						<span className="sr-only">Go to first page</span>
-						<DoubleArrowLeftIcon className="h-4 w-4" />
+						<span className='sr-only'>Go to first page</span>
+						<DoubleArrowLeftIcon className='h-4 w-4' />
 					</Button>
 					<Button
-						variant="outline"
-						className="h-8 w-8 p-0"
+						variant='outline'
+						className='h-8 w-8 p-0'
 						onClick={() => table.previousPage()}
 						disabled={!table.getCanPreviousPage()}
 					>
-						<span className="sr-only">Go to previous page</span>
-						<ChevronLeftIcon className="h-4 w-4" />
+						<span className='sr-only'>Go to previous page</span>
+						<ChevronLeftIcon className='h-4 w-4' />
 					</Button>
 					<Button
-						variant="outline"
-						className="h-8 w-8 p-0"
+						variant='outline'
+						className='h-8 w-8 p-0'
 						onClick={() => table.nextPage()}
 						disabled={!table.getCanNextPage()}
 					>
-						<span className="sr-only">Go to next page</span>
-						<ChevronRightIcon className="h-4 w-4" />
+						<span className='sr-only'>Go to next page</span>
+						<ChevronRightIcon className='h-4 w-4' />
 					</Button>
 					<Button
-						variant="outline"
-						className="hidden h-8 w-8 p-0 lg:flex"
+						variant='outline'
+						className='hidden h-8 w-8 p-0 lg:flex'
 						onClick={() => table.setPageIndex(table.getPageCount() - 1)}
 						disabled={!table.getCanNextPage()}
 					>
-						<span className="sr-only">Go to last page</span>
-						<DoubleArrowRightIcon className="h-4 w-4" />
+						<span className='sr-only'>Go to last page</span>
+						<DoubleArrowRightIcon className='h-4 w-4' />
 					</Button>
 				</div>
 			</div>
diff --git a/client/src/components/datagrids/links/links-table-toolbar.tsx b/client/src/components/datagrids/links/links-table-toolbar.tsx
index c4a9ee3..e6171cf 100644
--- a/client/src/components/datagrids/links/links-table-toolbar.tsx
+++ b/client/src/components/datagrids/links/links-table-toolbar.tsx
@@ -16,17 +16,17 @@ export function DataTableToolbar<TData>({
 	const isFiltered = table.getState().columnFilters.length > 0;
 
 	return (
-		<div className="flex items-center justify-between">
-			<div className="flex flex-1 items-center space-x-2">
+		<div className='flex items-center justify-between'>
+			<div className='flex flex-1 items-center space-x-2'>
 				<Input
-					placeholder="Filter links.."
+					placeholder='Filter links..'
 					value={
 						(table.getColumn('shorter_name')?.getFilterValue() as string) ?? ''
 					}
 					onChange={(event) =>
 						table.getColumn('shorter_name')?.setFilterValue(event.target.value)
 					}
-					className="h-8 w-[150px] lg:w-[250px]"
+					className='h-8 w-[150px] lg:w-[250px]'
 				/>
 				{/* 
         todo: for enums of data
@@ -40,12 +40,12 @@ export function DataTableToolbar<TData>({
 
 				{isFiltered && (
 					<Button
-						variant="ghost"
+						variant='ghost'
 						onClick={() => table.resetColumnFilters()}
-						className="h-8 px-2 lg:px-3"
+						className='h-8 px-2 lg:px-3'
 					>
 						Reset
-						<Cross2Icon className="ml-2 h-4 w-4" />
+						<Cross2Icon className='ml-2 h-4 w-4' />
 					</Button>
 				)}
 			</div>
diff --git a/client/src/components/datagrids/links/links-table-view-options.tsx b/client/src/components/datagrids/links/links-table-view-options.tsx
index 7f738fa..4295732 100644
--- a/client/src/components/datagrids/links/links-table-view-options.tsx
+++ b/client/src/components/datagrids/links/links-table-view-options.tsx
@@ -22,15 +22,15 @@ export function DataTableViewOptions<TData>({
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
 				<Button
-					variant="outline"
-					size="sm"
-					className="ml-auto hidden h-8 lg:flex"
+					variant='outline'
+					size='sm'
+					className='ml-auto hidden h-8 lg:flex'
 				>
-					<MixerHorizontalIcon className="mr-2 h-4 w-4" />
+					<MixerHorizontalIcon className='mr-2 h-4 w-4' />
 					View
 				</Button>
 			</DropdownMenuTrigger>
-			<DropdownMenuContent align="end" className="w-[150px]">
+			<DropdownMenuContent align='end' className='w-[150px]'>
 				<DropdownMenuLabel>Toggle columns</DropdownMenuLabel>
 				<DropdownMenuSeparator />
 				{table
@@ -43,7 +43,7 @@ export function DataTableViewOptions<TData>({
 						return (
 							<DropdownMenuCheckboxItem
 								key={column.id}
-								className="capitalize"
+								className='capitalize'
 								checked={column.getIsVisible()}
 								onCheckedChange={(value) => column.toggleVisibility(!!value)}
 							>
diff --git a/client/src/components/datagrids/links/linkx-table-row-actions.tsx b/client/src/components/datagrids/links/linkx-table-row-actions.tsx
index 809444a..2af3eb0 100644
--- a/client/src/components/datagrids/links/linkx-table-row-actions.tsx
+++ b/client/src/components/datagrids/links/linkx-table-row-actions.tsx
@@ -36,14 +36,14 @@ export function DataTableRowActions<TData>({
 				<DropdownMenu>
 					<DropdownMenuTrigger asChild>
 						<Button
-							variant="ghost"
-							className="flex h-8 w-8 p-0 data-[state=open]:bg-muted"
+							variant='ghost'
+							className='flex h-8 w-8 p-0 data-[state=open]:bg-muted'
 						>
-							<DotsHorizontalIcon className="h-4 w-4" />
-							<span className="sr-only">Open menu</span>
+							<DotsHorizontalIcon className='h-4 w-4' />
+							<span className='sr-only'>Open menu</span>
 						</Button>
 					</DropdownMenuTrigger>
-					<DropdownMenuContent align="end" className="w-[160px]">
+					<DropdownMenuContent align='end' className='w-[160px]'>
 						<DialogTrigger asChild>
 							<DropdownMenuItem>Edit</DropdownMenuItem>
 						</DialogTrigger>
diff --git a/client/src/components/datagrids/links/modal-create.tsx b/client/src/components/datagrids/links/modal-create.tsx
index 4beaa89..b212c4b 100644
--- a/client/src/components/datagrids/links/modal-create.tsx
+++ b/client/src/components/datagrids/links/modal-create.tsx
@@ -36,12 +36,12 @@ export function LinkModalCreate() {
 	return (
 		<Dialog open={isOpen} onOpenChange={setIsOpen}>
 			<DialogTrigger asChild>
-				<Button className="ml-2 h-8 px-2 lg:px-3">
-					<Link1Icon className="mr-2 h-4 w-4" />
+				<Button className='ml-2 h-8 px-2 lg:px-3'>
+					<Link1Icon className='mr-2 h-4 w-4' />
 					Create
 				</Button>
 			</DialogTrigger>
-			<DialogContent className="sm:max-w-[425px]">
+			<DialogContent className='sm:max-w-[425px]'>
 				<DialogHeader>
 					<DialogTitle>Create link</DialogTitle>
 					<DialogDescription>
@@ -49,25 +49,25 @@ export function LinkModalCreate() {
 					</DialogDescription>
 				</DialogHeader>
 				<div>
-					<form id="create-link" className="space-y-4" onSubmit={handleSubmit}>
+					<form id='create-link' className='space-y-4' onSubmit={handleSubmit}>
 						<TextField
-							label="Shorter Name"
-							type="text"
-							id="shorter_name"
-							name="shorter_name"
-							placeholder="linx-short-url"
-							autoComplete="off"
+							label='Shorter Name'
+							type='text'
+							id='shorter_name'
+							name='shorter_name'
+							placeholder='linx-short-url'
+							autoComplete='off'
 							value={values.shorter_name}
 							error={errors.shorter_name}
 							onChange={handleChange}
 							required
 						/>
 						<TextField
-							label="Redirect URL"
-							type="url"
-							id="url"
-							name="url"
-							placeholder="https://example.com/longlonglonglonglonglongurl"
+							label='Redirect URL'
+							type='url'
+							id='url'
+							name='url'
+							placeholder='https://example.com/longlonglonglonglonglongurl'
 							value={values.url}
 							error={errors.url}
 							onChange={handleChange}
@@ -76,7 +76,7 @@ export function LinkModalCreate() {
 					</form>
 				</div>
 				<DialogFooter>
-					<Button form="create-link" type="submit">
+					<Button form='create-link' type='submit'>
 						Create Link
 					</Button>
 				</DialogFooter>
diff --git a/client/src/components/datagrids/links/modal-edit.tsx b/client/src/components/datagrids/links/modal-edit.tsx
index 8739484..e0fae18 100644
--- a/client/src/components/datagrids/links/modal-edit.tsx
+++ b/client/src/components/datagrids/links/modal-edit.tsx
@@ -32,30 +32,30 @@ export function LinkDialogEdit({
 		},
 	});
 	return (
-		<DialogContent className="sm:max-w-[425px]">
+		<DialogContent className='sm:max-w-[425px]'>
 			<DialogHeader>
 				<DialogTitle>Edit link</DialogTitle>
 			</DialogHeader>
 			<div>
-				<form id="edit-link" className="space-y-4" onSubmit={handleSubmit}>
+				<form id='edit-link' className='space-y-4' onSubmit={handleSubmit}>
 					<TextField
-						label="Shorter Name"
-						type="text"
-						id="shorter_name"
-						name="shorter_name"
-						placeholder="linx-short-url"
-						autoComplete="off"
+						label='Shorter Name'
+						type='text'
+						id='shorter_name'
+						name='shorter_name'
+						placeholder='linx-short-url'
+						autoComplete='off'
 						value={values.shorter_name}
 						error={errors.shorter_name}
 						onChange={handleChange}
 						required
 					/>
 					<TextField
-						label="Redirect URL"
-						type="url"
-						id="url"
-						name="url"
-						placeholder="https://example.com/longlonglonglonglonglongurl"
+						label='Redirect URL'
+						type='url'
+						id='url'
+						name='url'
+						placeholder='https://example.com/longlonglonglonglonglongurl'
 						value={values.url}
 						error={errors.url}
 						onChange={handleChange}
@@ -64,7 +64,7 @@ export function LinkDialogEdit({
 				</form>
 			</div>
 			<DialogFooter>
-				<Button form="edit-link" type="submit">
+				<Button form='edit-link' type='submit'>
 					Edit Link
 				</Button>
 			</DialogFooter>
diff --git a/client/src/components/text-field.tsx b/client/src/components/text-field.tsx
index e068851..d5d9903 100644
--- a/client/src/components/text-field.tsx
+++ b/client/src/components/text-field.tsx
@@ -27,7 +27,7 @@ function TextField({
 				{...props}
 			/>
 			{error && (
-				<p className="mt-2 text-sm text-red-600 dark:text-red-500">{error}</p>
+				<p className='mt-2 text-sm text-red-600 dark:text-red-500'>{error}</p>
 			)}
 		</div>
 	);
diff --git a/client/src/components/ui/checkbox.tsx b/client/src/components/ui/checkbox.tsx
index c748dcb..0acce1c 100644
--- a/client/src/components/ui/checkbox.tsx
+++ b/client/src/components/ui/checkbox.tsx
@@ -19,7 +19,7 @@ const Checkbox = React.forwardRef<
 		<CheckboxPrimitive.Indicator
 			className={cn('flex items-center justify-center text-current')}
 		>
-			<Check className="h-4 w-4" />
+			<Check className='h-4 w-4' />
 		</CheckboxPrimitive.Indicator>
 	</CheckboxPrimitive.Root>
 ));
diff --git a/client/src/components/ui/command.tsx b/client/src/components/ui/command.tsx
index c52d4ec..a9b7dfc 100644
--- a/client/src/components/ui/command.tsx
+++ b/client/src/components/ui/command.tsx
@@ -26,8 +26,8 @@ interface CommandDialogProps extends DialogProps {}
 const CommandDialog = ({ children, ...props }: CommandDialogProps) => {
 	return (
 		<Dialog {...props}>
-			<DialogContent className="overflow-hidden p-0 shadow-lg">
-				<Command className="[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5">
+			<DialogContent className='overflow-hidden p-0 shadow-lg'>
+				<Command className='[&_[cmdk-group-heading]]:px-2 [&_[cmdk-group-heading]]:font-medium [&_[cmdk-group-heading]]:text-muted-foreground [&_[cmdk-group]:not([hidden])_~[cmdk-group]]:pt-0 [&_[cmdk-group]]:px-2 [&_[cmdk-input-wrapper]_svg]:h-5 [&_[cmdk-input-wrapper]_svg]:w-5 [&_[cmdk-input]]:h-12 [&_[cmdk-item]]:px-2 [&_[cmdk-item]]:py-3 [&_[cmdk-item]_svg]:h-5 [&_[cmdk-item]_svg]:w-5'>
 					{children}
 				</Command>
 			</DialogContent>
@@ -39,8 +39,8 @@ const CommandInput = React.forwardRef<
 	React.ElementRef<typeof CommandPrimitive.Input>,
 	React.ComponentPropsWithoutRef<typeof CommandPrimitive.Input>
 >(({ className, ...props }, ref) => (
-	<div className="flex items-center border-b px-3" cmdk-input-wrapper="">
-		<Search className="mr-2 h-4 w-4 shrink-0 opacity-50" />
+	<div className='flex items-center border-b px-3' cmdk-input-wrapper=''>
+		<Search className='mr-2 h-4 w-4 shrink-0 opacity-50' />
 		<CommandPrimitive.Input
 			ref={ref}
 			className={cn(
@@ -73,7 +73,7 @@ const CommandEmpty = React.forwardRef<
 >((props, ref) => (
 	<CommandPrimitive.Empty
 		ref={ref}
-		className="py-6 text-center text-sm"
+		className='py-6 text-center text-sm'
 		{...props}
 	/>
 ));
diff --git a/client/src/components/ui/dialog.tsx b/client/src/components/ui/dialog.tsx
index a698fe0..b335c8f 100644
--- a/client/src/components/ui/dialog.tsx
+++ b/client/src/components/ui/dialog.tsx
@@ -42,9 +42,9 @@ const DialogContent = React.forwardRef<
 			{...props}
 		>
 			{children}
-			<DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground">
-				<X className="h-4 w-4" />
-				<span className="sr-only">Close</span>
+			<DialogPrimitive.Close className='absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none data-[state=open]:bg-accent data-[state=open]:text-muted-foreground'>
+				<X className='h-4 w-4' />
+				<span className='sr-only'>Close</span>
 			</DialogPrimitive.Close>
 		</DialogPrimitive.Content>
 	</DialogPortal>
diff --git a/client/src/components/ui/dropdown-menu.tsx b/client/src/components/ui/dropdown-menu.tsx
index 7903b06..60475aa 100644
--- a/client/src/components/ui/dropdown-menu.tsx
+++ b/client/src/components/ui/dropdown-menu.tsx
@@ -32,7 +32,7 @@ const DropdownMenuSubTrigger = React.forwardRef<
 		{...props}
 	>
 		{children}
-		<ChevronRight className="ml-auto h-4 w-4" />
+		<ChevronRight className='ml-auto h-4 w-4' />
 	</DropdownMenuPrimitive.SubTrigger>
 ));
 DropdownMenuSubTrigger.displayName =
@@ -103,9 +103,9 @@ const DropdownMenuCheckboxItem = React.forwardRef<
 		checked={checked}
 		{...props}
 	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
 			<DropdownMenuPrimitive.ItemIndicator>
-				<Check className="h-4 w-4" />
+				<Check className='h-4 w-4' />
 			</DropdownMenuPrimitive.ItemIndicator>
 		</span>
 		{children}
@@ -126,9 +126,9 @@ const DropdownMenuRadioItem = React.forwardRef<
 		)}
 		{...props}
 	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
 			<DropdownMenuPrimitive.ItemIndicator>
-				<Circle className="h-2 w-2 fill-current" />
+				<Circle className='h-2 w-2 fill-current' />
 			</DropdownMenuPrimitive.ItemIndicator>
 		</span>
 		{children}
diff --git a/client/src/components/ui/select.tsx b/client/src/components/ui/select.tsx
index 7a3cc16..6b0d999 100644
--- a/client/src/components/ui/select.tsx
+++ b/client/src/components/ui/select.tsx
@@ -24,7 +24,7 @@ const SelectTrigger = React.forwardRef<
 	>
 		{children}
 		<SelectPrimitive.Icon asChild>
-			<ChevronDown className="h-4 w-4 opacity-50" />
+			<ChevronDown className='h-4 w-4 opacity-50' />
 		</SelectPrimitive.Icon>
 	</SelectPrimitive.Trigger>
 ));
@@ -42,7 +42,7 @@ const SelectScrollUpButton = React.forwardRef<
 		)}
 		{...props}
 	>
-		<ChevronUp className="h-4 w-4" />
+		<ChevronUp className='h-4 w-4' />
 	</SelectPrimitive.ScrollUpButton>
 ));
 SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
@@ -59,7 +59,7 @@ const SelectScrollDownButton = React.forwardRef<
 		)}
 		{...props}
 	>
-		<ChevronDown className="h-4 w-4" />
+		<ChevronDown className='h-4 w-4' />
 	</SelectPrimitive.ScrollDownButton>
 ));
 SelectScrollDownButton.displayName =
@@ -121,9 +121,9 @@ const SelectItem = React.forwardRef<
 		)}
 		{...props}
 	>
-		<span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+		<span className='absolute left-2 flex h-3.5 w-3.5 items-center justify-center'>
 			<SelectPrimitive.ItemIndicator>
-				<Check className="h-4 w-4" />
+				<Check className='h-4 w-4' />
 			</SelectPrimitive.ItemIndicator>
 		</span>
 
diff --git a/client/src/components/ui/table.tsx b/client/src/components/ui/table.tsx
index f374103..8c1e753 100644
--- a/client/src/components/ui/table.tsx
+++ b/client/src/components/ui/table.tsx
@@ -6,7 +6,7 @@ const Table = React.forwardRef<
 	HTMLTableElement,
 	React.HTMLAttributes<HTMLTableElement>
 >(({ className, ...props }, ref) => (
-	<div className="relative w-full overflow-auto">
+	<div className='relative w-full overflow-auto'>
 		<table
 			ref={ref}
 			className={cn('w-full caption-bottom text-sm', className)}
diff --git a/client/src/components/ui/toast.tsx b/client/src/components/ui/toast.tsx
index 33f554d..c31c322 100644
--- a/client/src/components/ui/toast.tsx
+++ b/client/src/components/ui/toast.tsx
@@ -78,10 +78,10 @@ const ToastClose = React.forwardRef<
 			'absolute right-2 top-2 rounded-md p-1 text-foreground/50 opacity-0 transition-opacity hover:text-foreground focus:opacity-100 focus:outline-none focus:ring-2 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',
 			className,
 		)}
-		toast-close=""
+		toast-close=''
 		{...props}
 	>
-		<X className="h-4 w-4" />
+		<X className='h-4 w-4' />
 	</ToastPrimitives.Close>
 ));
 ToastClose.displayName = ToastPrimitives.Close.displayName;
diff --git a/client/src/components/ui/toaster.tsx b/client/src/components/ui/toaster.tsx
index 9b41c0b..c527898 100644
--- a/client/src/components/ui/toaster.tsx
+++ b/client/src/components/ui/toaster.tsx
@@ -15,7 +15,7 @@ export function Toaster() {
 		<ToastProvider>
 			{toasts.map(({ id, title, description, action, ...props }) => (
 				<Toast key={id} {...props}>
-					<div className="grid gap-1">
+					<div className='grid gap-1'>
 						{title && <ToastTitle>{title}</ToastTitle>}
 						{description && <ToastDescription>{description}</ToastDescription>}
 					</div>
diff --git a/client/src/components/user-nav.tsx b/client/src/components/user-nav.tsx
index be836c7..ab3de98 100644
--- a/client/src/components/user-nav.tsx
+++ b/client/src/components/user-nav.tsx
@@ -16,19 +16,19 @@ export function UserNav() {
 	return (
 		<DropdownMenu>
 			<DropdownMenuTrigger asChild>
-				<Button variant="ghost" className="relative h-8 w-8 rounded-full">
-					<Avatar className="h-8 w-8 flex items-center justify-center">
+				<Button variant='ghost' className='relative h-8 w-8 rounded-full'>
+					<Avatar className='h-8 w-8 flex items-center justify-center'>
 						<AvatarFallback>{`${user?.first_name.at(0)}${user?.last_name.at(0)}`}</AvatarFallback>
 					</Avatar>
 				</Button>
 			</DropdownMenuTrigger>
-			<DropdownMenuContent className="w-56" align="end" forceMount>
-				<DropdownMenuLabel className="font-normal">
-					<div className="flex flex-col space-y-1">
-						<p className="text-sm font-medium leading-none">
+			<DropdownMenuContent className='w-56' align='end' forceMount>
+				<DropdownMenuLabel className='font-normal'>
+					<div className='flex flex-col space-y-1'>
+						<p className='text-sm font-medium leading-none'>
 							{user?.first_name} {user?.last_name}
 						</p>
-						<p className="text-xs leading-none text-muted-foreground">
+						<p className='text-xs leading-none text-muted-foreground'>
 							{user?.email}
 						</p>
 					</div>
diff --git a/client/src/pages/(app)/Home.tsx b/client/src/pages/(app)/Home.tsx
index e8df0db..94e67d4 100644
--- a/client/src/pages/(app)/Home.tsx
+++ b/client/src/pages/(app)/Home.tsx
@@ -10,20 +10,20 @@ export default function HomeApp() {
 	return (
 		<>
 			{/* todo: move into a layout */}
-			<div className="border-b">
-				<div className="flex h-16 items-center px-8">
+			<div className='border-b'>
+				<div className='flex h-16 items-center px-8'>
 					<h2>Linx</h2>
-					<MainNav className="mx-6" />
-					<div className="ml-auto flex items-center space-x-4">
+					<MainNav className='mx-6' />
+					<div className='ml-auto flex items-center space-x-4'>
 						<UserNav />
 					</div>
 				</div>
 			</div>
 			{/* todo: end to move into a layout */}
-			<div className="h-full flex-1 flex-col space-y-8 p-8 md:flex">
-				<div className="flex items-center justify-between space-y-2">
+			<div className='h-full flex-1 flex-col space-y-8 p-8 md:flex'>
+				<div className='flex items-center justify-between space-y-2'>
 					<div>
-						<h2 className="text-2xl font-bold tracking-tight">Welcome back!</h2>
+						<h2 className='text-2xl font-bold tracking-tight'>Welcome back!</h2>
 					</div>
 				</div>
 				<DataTable data={links} columns={linksColumns} />
diff --git a/client/src/pages/(auth)/Login.tsx b/client/src/pages/(auth)/Login.tsx
index c28a8f3..9566849 100644
--- a/client/src/pages/(auth)/Login.tsx
+++ b/client/src/pages/(auth)/Login.tsx
@@ -32,25 +32,25 @@ export default function Login() {
 
 	return (
 		<div className="min-h-screen relative flex justify-center items-center bg-no-repeat bg-cover bg-slate-800 bg-[url('https://images.unsplash.com/photo-1720712738661-9c0dcb92f06d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')]">
-			<div className="absolute bg-black rounded-[50%] w-full h-full blur-[23rem]" />
-			<div className="flex justify-center items-center z-20">
-				<div className="w-full">
-					<h1 className="text-6xl text-center font-bold text-white mb-16">
+			<div className='absolute bg-black rounded-[50%] w-full h-full blur-[23rem]' />
+			<div className='flex justify-center items-center z-20'>
+				<div className='w-full'>
+					<h1 className='text-6xl text-center font-bold text-white mb-16'>
 						Linx
 					</h1>
 
-					<Card className="w-96">
+					<Card className='w-96'>
 						<CardHeader>
 							<CardTitle>Login</CardTitle>
 						</CardHeader>
 						<CardContent>
-							<form className="space-y-4" onSubmit={handleSubmit}>
+							<form className='space-y-4' onSubmit={handleSubmit}>
 								<TextField
-									type="email"
-									placeholder="example@email.com"
-									className="w-full"
-									name="email"
-									label="Email Address"
+									type='email'
+									placeholder='example@email.com'
+									className='w-full'
+									name='email'
+									label='Email Address'
 									value={values.email}
 									onChange={handleChange}
 									error={errors.email}
@@ -58,25 +58,25 @@ export default function Login() {
 								/>
 
 								<TextField
-									className="w-full"
-									name="password"
-									type="password"
-									label="Password"
-									placeholder="* * * * * * *"
+									className='w-full'
+									name='password'
+									type='password'
+									label='Password'
+									placeholder='* * * * * * *'
 									value={values.password}
 									error={errors.password}
 									onChange={handleChange}
 									required
 								/>
-								<Button type="submit" className="w-full mt-4">
+								<Button type='submit' className='w-full mt-4'>
 									Log in
 								</Button>
 							</form>
 						</CardContent>
 					</Card>
-					<div className="text-center w-full text-white mt-3">
+					<div className='text-center w-full text-white mt-3'>
 						{'Do you not have an account? '}
-						<a className="underline" href="/signup">
+						<a className='underline' href='/signup'>
 							Sign Up
 						</a>
 					</div>
diff --git a/client/src/pages/(auth)/Signup.tsx b/client/src/pages/(auth)/Signup.tsx
index 15cb662..3b214ea 100644
--- a/client/src/pages/(auth)/Signup.tsx
+++ b/client/src/pages/(auth)/Signup.tsx
@@ -31,35 +31,35 @@ export default function Signup() {
 
 	return (
 		<div className="min-h-screen relative flex justify-center items-center bg-no-repeat bg-cover bg-slate-800 bg-[url('https://images.unsplash.com/photo-1720712738661-9c0dcb92f06d?q=80&w=2070&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D')]">
-			<div className="absolute bg-black rounded-[50%] w-full h-full blur-[23rem]" />
-			<div className="flex justify-center items-center z-20">
-				<div className="w-full">
-					<h1 className="text-6xl text-center font-bold text-white mb-16">
+			<div className='absolute bg-black rounded-[50%] w-full h-full blur-[23rem]' />
+			<div className='flex justify-center items-center z-20'>
+				<div className='w-full'>
+					<h1 className='text-6xl text-center font-bold text-white mb-16'>
 						Linx
 					</h1>
 
-					<Card className="w-96">
+					<Card className='w-96'>
 						<CardHeader>
 							<CardTitle>Sign up</CardTitle>
 						</CardHeader>
 						<CardContent>
-							<form className="space-y-4" onSubmit={handleSubmit}>
-								<div className="flex justify-center w-full items-center space-x-3">
+							<form className='space-y-4' onSubmit={handleSubmit}>
+								<div className='flex justify-center w-full items-center space-x-3'>
 									<TextField
-										className="w-full"
-										name="first_name"
-										placeholder="John"
-										label="First Name"
+										className='w-full'
+										name='first_name'
+										placeholder='John'
+										label='First Name'
 										value={values.first_name}
 										error={errors.first_name}
 										onChange={handleChange}
 										required
 									/>
 									<TextField
-										className="w-full"
-										name="last_name"
-										placeholder="Doe"
-										label="Last Name"
+										className='w-full'
+										name='last_name'
+										placeholder='Doe'
+										label='Last Name'
 										value={values.last_name}
 										error={errors.last_name}
 										onChange={handleChange}
@@ -67,37 +67,37 @@ export default function Signup() {
 									/>
 								</div>
 								<TextField
-									type="email"
-									placeholder="example@email.com"
-									className="w-full"
-									name="email"
-									label="Email"
+									type='email'
+									placeholder='example@email.com'
+									className='w-full'
+									name='email'
+									label='Email'
 									value={values.email}
 									error={errors.email}
 									onChange={handleChange}
 									required
 								/>
 								<TextField
-									label="Password"
-									className="w-full"
-									name="password"
-									type="password"
-									placeholder="* * * * * * *"
+									label='Password'
+									className='w-full'
+									name='password'
+									type='password'
+									placeholder='* * * * * * *'
 									value={values.password}
 									error={errors.password}
 									onChange={handleChange}
 									required
 								/>
-								<Button type="submit" className="w-full mt-4">
+								<Button type='submit' className='w-full mt-4'>
 									Sign up
 								</Button>
 							</form>
 						</CardContent>
 					</Card>
 
-					<div className="text-center w-full text-white mt-3">
+					<div className='text-center w-full text-white mt-3'>
 						{'Do you have an account? '}
-						<a className="underline" href="/login">
+						<a className='underline' href='/login'>
 							Log In
 						</a>
 					</div>