diff --git a/src/components/base-modal.tsx b/src/components/base-modal.tsx
index f6cf682..2a1cb03 100644
--- a/src/components/base-modal.tsx
+++ b/src/components/base-modal.tsx
@@ -11,40 +11,40 @@ const BaseModal: React.FC<BaseModalProps> = ({
   isOpen,
   onClose,
   title,
-  children,
+  children
 }) => {
   if (!isOpen) return null;
 
   return (
     <div className="fixed inset-0 z-50 overflow-y-auto">
-      <div className="flex items-end justify-center min-h-screen pt-4 px-4 pb-20 text-center sm:block sm:p-0">
+      <div className="flex min-h-screen items-end justify-center px-4 pb-20 pt-4 text-center sm:block sm:p-0">
         <div className="fixed inset-0 transition-opacity" aria-hidden="true">
           <div className="absolute inset-0 bg-gray-500 opacity-75"></div>
         </div>
 
         <span
-          className="hidden sm:inline-block sm:align-middle sm:h-screen"
+          className="hidden sm:inline-block sm:h-screen sm:align-middle"
           aria-hidden="true"
         >
           &#8203;
         </span>
 
-        <div className="inline-block align-bottom bg-white rounded-lg text-left overflow-hidden shadow-xl transform transition-all sm:my-8 sm:align-middle sm:max-w-lg sm:w-full">
-          <div className="bg-white px-4 pt-5 pb-4 sm:p-6 sm:pb-4">
+        <div className="inline-block transform overflow-hidden rounded-lg bg-white text-left align-bottom shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:align-middle">
+          <div className="bg-white px-4 pb-4 pt-5 sm:p-6 sm:pb-4">
             <div className="sm:flex sm:items-start">
-              <div className="mt-3 text-center sm:mt-0 sm:ml-4 sm:text-left w-full">
-                <h3 className="text-lg leading-6 font-medium text-gray-900">
+              <div className="mt-3 w-full text-center sm:ml-4 sm:mt-0 sm:text-left">
+                <h3 className="text-lg font-medium leading-6 text-gray-900">
                   {title}
                 </h3>
                 <div className="mt-2">{children}</div>
               </div>
             </div>
           </div>
-          <div className="bg-gray-50 px-4 py-3 sm:px-6 sm:flex sm:flex-row-reverse">
+          <div className="bg-gray-50 px-4 py-3 sm:flex sm:flex-row-reverse sm:px-6">
             <Button
               variant="secondary"
               onClick={onClose}
-              className="w-full sm:w-auto sm:ml-3"
+              className="w-full sm:ml-3 sm:w-auto"
             >
               Close
             </Button>
diff --git a/src/components/invite-modal.tsx b/src/components/invite-modal.tsx
index f6c07f9..e857e77 100644
--- a/src/components/invite-modal.tsx
+++ b/src/components/invite-modal.tsx
@@ -24,7 +24,7 @@ export const shareInventory = (
 const InviteModal: React.FC<InviteModalProps> = ({
   isOpen,
   onClose,
-  selectedInventory,
+  selectedInventory
 }) => {
   const [selectedPermission, setSelectedPermission] = useState<
     "reader" | "writer" | "admin"
@@ -57,7 +57,7 @@ const InviteModal: React.FC<InviteModalProps> = ({
           </label>
           <select
             id="inventory"
-            className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
           >
             <option key={selectedInventory?.id} value={selectedInventory?.id}>
               {selectedInventory?.name}
@@ -73,7 +73,7 @@ const InviteModal: React.FC<InviteModalProps> = ({
           </label>
           <select
             id="permission"
-            className="mt-1 block w-full pl-3 pr-10 py-2 text-base border-gray-300 focus:outline-none focus:ring-indigo-500 focus:border-indigo-500 sm:text-sm rounded-md"
+            className="mt-1 block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
             value={selectedPermission}
             onChange={(e) =>
               setSelectedPermission(
@@ -86,14 +86,14 @@ const InviteModal: React.FC<InviteModalProps> = ({
           </select>
         </div>
         <div>
-          <h3 className="text-lg font-medium mb-2">Existing Shared Users</h3>
-          <div className="max-h-40 overflow-y-auto bg-gray-100 rounded-md p-2">
+          <h3 className="mb-2 text-lg font-medium">Existing Shared Users</h3>
+          <div className="max-h-40 overflow-y-auto rounded-md bg-gray-100 p-2">
             {invitedMembers?.length > 0 ? (
-              <ul className="list-disc list-inside">
+              <ul className="list-inside list-disc">
                 {invitedMembers.map((user) => (
                   <li
                     key={user?.id}
-                    className="text-sm flex justify-between items-center"
+                    className="flex items-center justify-between text-sm"
                   >
                     <span>{user?.profile?.name}</span>
                     <button
@@ -103,7 +103,7 @@ const InviteModal: React.FC<InviteModalProps> = ({
                           .castAs(Group)
                           ._raw.removeMember(user?._raw);
                       }}
-                      className="ml-4 bg-red-500 text-white px-2 py-1 rounded text-xs hover:bg-red-600"
+                      className="ml-4 rounded bg-red-500 px-2 py-1 text-xs text-white hover:bg-red-600"
                     >
                       Remove
                     </button>
@@ -132,13 +132,13 @@ const InviteModal: React.FC<InviteModalProps> = ({
               <input
                 type="text"
                 id="inviteLink"
-                className="flex-1 min-w-0 block w-full px-3 py-2 rounded-none rounded-l-md text-sm border-gray-300 focus:ring-indigo-500 focus:border-indigo-500"
+                className="block w-full min-w-0 flex-1 rounded-none rounded-l-md border-gray-300 px-3 py-2 text-sm focus:border-indigo-500 focus:ring-indigo-500"
                 value={inviteLink}
                 readOnly
               />
               <Button
                 type="button"
-                className="inline-flex items-center px-3 rounded-r-md border border-l-0 border-gray-300 text-gray-500 text-sm"
+                className="inline-flex items-center rounded-r-md border border-l-0 border-gray-300 px-3 text-sm text-gray-500"
                 onClick={() => navigator.clipboard.writeText(inviteLink)}
               >
                 Copy
diff --git a/src/components/new-item-modal.tsx b/src/components/new-item-modal.tsx
index 68ab388..af12287 100644
--- a/src/components/new-item-modal.tsx
+++ b/src/components/new-item-modal.tsx
@@ -96,8 +96,7 @@ const NewItemModal: React.FC<NewItemModalProps> = ({
             </Alert>
           )}
         </div>
-        
-        
+
         <div>
           <label
             htmlFor="inventory"
diff --git a/src/components/things/data-table.tsx b/src/components/things/data-table.tsx
index e586a27..8004897 100644
--- a/src/components/things/data-table.tsx
+++ b/src/components/things/data-table.tsx
@@ -2,8 +2,8 @@ import {
   ColumnDef,
   flexRender,
   getCoreRowModel,
-  useReactTable,
-} from "@tanstack/react-table"
+  useReactTable
+} from "@tanstack/react-table";
 
 import {
   Table,
@@ -11,23 +11,23 @@ import {
   TableCell,
   TableHead,
   TableHeader,
-  TableRow,
-} from "@/components/ui/table"
+  TableRow
+} from "@/components/ui/table";
 
 interface DataTableProps<TData, TValue> {
-  columns: ColumnDef<TData, TValue>[]
-  data: TData[]
+  columns: ColumnDef<TData, TValue>[];
+  data: TData[];
 }
 
 export function DataTable<TData, TValue>({
   columns,
-  data,
+  data
 }: DataTableProps<TData, TValue>) {
   const table = useReactTable({
     data,
     columns,
-    getCoreRowModel: getCoreRowModel(),
-  })
+    getCoreRowModel: getCoreRowModel()
+  });
 
   return (
     <div className="rounded-md border">
@@ -45,7 +45,7 @@ export function DataTable<TData, TValue>({
                           header.getContext()
                         )}
                   </TableHead>
-                )
+                );
               })}
             </TableRow>
           ))}
@@ -74,5 +74,5 @@ export function DataTable<TData, TValue>({
         </TableBody>
       </Table>
     </div>
-  )
+  );
 }
diff --git a/src/components/ui/alert-dialog.tsx b/src/components/ui/alert-dialog.tsx
index fa2b442..5def117 100644
--- a/src/components/ui/alert-dialog.tsx
+++ b/src/components/ui/alert-dialog.tsx
@@ -1,14 +1,14 @@
-import * as React from "react"
-import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog"
+import * as React from "react";
+import * as AlertDialogPrimitive from "@radix-ui/react-alert-dialog";
 
-import { cn } from "@/lib/utils"
-import { buttonVariants } from "@/components/ui/button"
+import { cn } from "@/lib/utils";
+import { buttonVariants } from "@/components/ui/button";
 
-const AlertDialog = AlertDialogPrimitive.Root
+const AlertDialog = AlertDialogPrimitive.Root;
 
-const AlertDialogTrigger = AlertDialogPrimitive.Trigger
+const AlertDialogTrigger = AlertDialogPrimitive.Trigger;
 
-const AlertDialogPortal = AlertDialogPrimitive.Portal
+const AlertDialogPortal = AlertDialogPrimitive.Portal;
 
 const AlertDialogOverlay = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Overlay>,
@@ -22,8 +22,8 @@ const AlertDialogOverlay = React.forwardRef<
     {...props}
     ref={ref}
   />
-))
-AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName
+));
+AlertDialogOverlay.displayName = AlertDialogPrimitive.Overlay.displayName;
 
 const AlertDialogContent = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Content>,
@@ -40,8 +40,8 @@ const AlertDialogContent = React.forwardRef<
       {...props}
     />
   </AlertDialogPortal>
-))
-AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName
+));
+AlertDialogContent.displayName = AlertDialogPrimitive.Content.displayName;
 
 const AlertDialogHeader = ({
   className,
@@ -54,8 +54,8 @@ const AlertDialogHeader = ({
     )}
     {...props}
   />
-)
-AlertDialogHeader.displayName = "AlertDialogHeader"
+);
+AlertDialogHeader.displayName = "AlertDialogHeader";
 
 const AlertDialogFooter = ({
   className,
@@ -68,8 +68,8 @@ const AlertDialogFooter = ({
     )}
     {...props}
   />
-)
-AlertDialogFooter.displayName = "AlertDialogFooter"
+);
+AlertDialogFooter.displayName = "AlertDialogFooter";
 
 const AlertDialogTitle = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Title>,
@@ -80,8 +80,8 @@ const AlertDialogTitle = React.forwardRef<
     className={cn("text-lg font-semibold", className)}
     {...props}
   />
-))
-AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName
+));
+AlertDialogTitle.displayName = AlertDialogPrimitive.Title.displayName;
 
 const AlertDialogDescription = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Description>,
@@ -92,9 +92,9 @@ const AlertDialogDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
+));
 AlertDialogDescription.displayName =
-  AlertDialogPrimitive.Description.displayName
+  AlertDialogPrimitive.Description.displayName;
 
 const AlertDialogAction = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Action>,
@@ -105,8 +105,8 @@ const AlertDialogAction = React.forwardRef<
     className={cn(buttonVariants(), className)}
     {...props}
   />
-))
-AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName
+));
+AlertDialogAction.displayName = AlertDialogPrimitive.Action.displayName;
 
 const AlertDialogCancel = React.forwardRef<
   React.ElementRef<typeof AlertDialogPrimitive.Cancel>,
@@ -121,8 +121,8 @@ const AlertDialogCancel = React.forwardRef<
     )}
     {...props}
   />
-))
-AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName
+));
+AlertDialogCancel.displayName = AlertDialogPrimitive.Cancel.displayName;
 
 export {
   AlertDialog,
@@ -135,5 +135,5 @@ export {
   AlertDialogTitle,
   AlertDialogDescription,
   AlertDialogAction,
-  AlertDialogCancel,
-}
+  AlertDialogCancel
+};
diff --git a/src/components/ui/alert.tsx b/src/components/ui/alert.tsx
index 5afd41d..f07f719 100644
--- a/src/components/ui/alert.tsx
+++ b/src/components/ui/alert.tsx
@@ -1,7 +1,7 @@
-import * as React from "react"
-import { cva, type VariantProps } from "class-variance-authority"
+import * as React from "react";
+import { cva, type VariantProps } from "class-variance-authority";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 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",
@@ -10,14 +10,14 @@ const alertVariants = cva(
       variant: {
         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"
+    }
   }
-)
+);
 
 const Alert = React.forwardRef<
   HTMLDivElement,
@@ -29,8 +29,8 @@ const Alert = React.forwardRef<
     className={cn(alertVariants({ variant }), className)}
     {...props}
   />
-))
-Alert.displayName = "Alert"
+));
+Alert.displayName = "Alert";
 
 const AlertTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -41,8 +41,8 @@ const AlertTitle = React.forwardRef<
     className={cn("mb-1 font-medium leading-none tracking-tight", className)}
     {...props}
   />
-))
-AlertTitle.displayName = "AlertTitle"
+));
+AlertTitle.displayName = "AlertTitle";
 
 const AlertDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -53,7 +53,7 @@ const AlertDescription = React.forwardRef<
     className={cn("text-sm [&_p]:leading-relaxed", className)}
     {...props}
   />
-))
-AlertDescription.displayName = "AlertDescription"
+));
+AlertDescription.displayName = "AlertDescription";
 
-export { Alert, AlertTitle, AlertDescription }
+export { Alert, AlertTitle, AlertDescription };
diff --git a/src/components/ui/card.tsx b/src/components/ui/card.tsx
index 77e9fb7..d0c5b41 100644
--- a/src/components/ui/card.tsx
+++ b/src/components/ui/card.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Card = React.forwardRef<
   HTMLDivElement,
@@ -14,8 +14,8 @@ const Card = React.forwardRef<
     )}
     {...props}
   />
-))
-Card.displayName = "Card"
+));
+Card.displayName = "Card";
 
 const CardHeader = React.forwardRef<
   HTMLDivElement,
@@ -26,8 +26,8 @@ const CardHeader = React.forwardRef<
     className={cn("flex flex-col space-y-1.5 p-6", className)}
     {...props}
   />
-))
-CardHeader.displayName = "CardHeader"
+));
+CardHeader.displayName = "CardHeader";
 
 const CardTitle = React.forwardRef<
   HTMLParagraphElement,
@@ -38,8 +38,8 @@ const CardTitle = React.forwardRef<
     className={cn("font-semibold leading-none tracking-tight", className)}
     {...props}
   />
-))
-CardTitle.displayName = "CardTitle"
+));
+CardTitle.displayName = "CardTitle";
 
 const CardDescription = React.forwardRef<
   HTMLParagraphElement,
@@ -50,16 +50,16 @@ const CardDescription = React.forwardRef<
     className={cn("text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-CardDescription.displayName = "CardDescription"
+));
+CardDescription.displayName = "CardDescription";
 
 const CardContent = React.forwardRef<
   HTMLDivElement,
   React.HTMLAttributes<HTMLDivElement>
 >(({ className, ...props }, ref) => (
   <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
-))
-CardContent.displayName = "CardContent"
+));
+CardContent.displayName = "CardContent";
 
 const CardFooter = React.forwardRef<
   HTMLDivElement,
@@ -70,7 +70,14 @@ const CardFooter = React.forwardRef<
     className={cn("flex items-center p-6 pt-0", className)}
     {...props}
   />
-))
-CardFooter.displayName = "CardFooter"
+));
+CardFooter.displayName = "CardFooter";
 
-export { Card, CardHeader, CardFooter, CardTitle, CardDescription, CardContent }
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent
+};
diff --git a/src/components/ui/table.tsx b/src/components/ui/table.tsx
index c0df655..10ed42d 100644
--- a/src/components/ui/table.tsx
+++ b/src/components/ui/table.tsx
@@ -1,6 +1,6 @@
-import * as React from "react"
+import * as React from "react";
 
-import { cn } from "@/lib/utils"
+import { cn } from "@/lib/utils";
 
 const Table = React.forwardRef<
   HTMLTableElement,
@@ -13,16 +13,16 @@ const Table = React.forwardRef<
       {...props}
     />
   </div>
-))
-Table.displayName = "Table"
+));
+Table.displayName = "Table";
 
 const TableHeader = React.forwardRef<
   HTMLTableSectionElement,
   React.HTMLAttributes<HTMLTableSectionElement>
 >(({ className, ...props }, ref) => (
   <thead ref={ref} className={cn("[&_tr]:border-b", className)} {...props} />
-))
-TableHeader.displayName = "TableHeader"
+));
+TableHeader.displayName = "TableHeader";
 
 const TableBody = React.forwardRef<
   HTMLTableSectionElement,
@@ -33,8 +33,8 @@ const TableBody = React.forwardRef<
     className={cn("[&_tr:last-child]:border-0", className)}
     {...props}
   />
-))
-TableBody.displayName = "TableBody"
+));
+TableBody.displayName = "TableBody";
 
 const TableFooter = React.forwardRef<
   HTMLTableSectionElement,
@@ -48,8 +48,8 @@ const TableFooter = React.forwardRef<
     )}
     {...props}
   />
-))
-TableFooter.displayName = "TableFooter"
+));
+TableFooter.displayName = "TableFooter";
 
 const TableRow = React.forwardRef<
   HTMLTableRowElement,
@@ -63,8 +63,8 @@ const TableRow = React.forwardRef<
     )}
     {...props}
   />
-))
-TableRow.displayName = "TableRow"
+));
+TableRow.displayName = "TableRow";
 
 const TableHead = React.forwardRef<
   HTMLTableCellElement,
@@ -78,8 +78,8 @@ const TableHead = React.forwardRef<
     )}
     {...props}
   />
-))
-TableHead.displayName = "TableHead"
+));
+TableHead.displayName = "TableHead";
 
 const TableCell = React.forwardRef<
   HTMLTableCellElement,
@@ -93,8 +93,8 @@ const TableCell = React.forwardRef<
     )}
     {...props}
   />
-))
-TableCell.displayName = "TableCell"
+));
+TableCell.displayName = "TableCell";
 
 const TableCaption = React.forwardRef<
   HTMLTableCaptionElement,
@@ -105,8 +105,8 @@ const TableCaption = React.forwardRef<
     className={cn("mt-4 text-sm text-muted-foreground", className)}
     {...props}
   />
-))
-TableCaption.displayName = "TableCaption"
+));
+TableCaption.displayName = "TableCaption";
 
 export {
   Table,
@@ -116,5 +116,5 @@ export {
   TableHead,
   TableRow,
   TableCell,
-  TableCaption,
-}
+  TableCaption
+};
diff --git a/src/lib/inventory.ts b/src/lib/inventory.ts
index 8425299..8e5604c 100644
--- a/src/lib/inventory.ts
+++ b/src/lib/inventory.ts
@@ -1,29 +1,37 @@
 import { ThingFormValues } from "@/components/new-item-modal";
 import { CoMapInit, Group } from "jazz-tools";
 import { useCoState } from "./providers/jazz";
-import { Inventory, InventoryList, Thing, ThingList, UserAccount } from "./schema";
+import {
+  Inventory,
+  InventoryList,
+  Thing,
+  ThingList,
+  UserAccount
+} from "./schema";
 
 export const getThings = (me: UserAccount) => {
-  return me.root?.inventories?.flatMap(
-    (inventory) =>
-      inventory?.things?.filter(
-        (thing): thing is Exclude<typeof thing, null> => !!thing
-      ) || []
-  ) || [];
-}
+  return (
+    me.root?.inventories?.flatMap(
+      (inventory) =>
+        inventory?.things?.filter(
+          (thing): thing is Exclude<typeof thing, null> => !!thing
+        ) || []
+    ) || []
+  );
+};
 
 export const getThingsByInventory = (me: UserAccount, inventory: Inventory) => {
   const things = getThings(me);
   return inventory
-  ? things?.filter(
-      (item) => item?.inventory?.id === inventory.id && !item.deleted
-    )
-  : things?.filter((item) => !item?.deleted);
-}
+    ? things?.filter(
+        (item) => item?.inventory?.id === inventory.id && !item.deleted
+      )
+    : things?.filter((item) => !item?.deleted);
+};
 
 export const createItem = (item: CoMapInit<Thing>): Thing => {
   const thing = Thing.create(item, {
-    owner: item.inventory!._owner,
+    owner: item.inventory!._owner
   });
   thing.inventory?.things?.push(thing);
   return thing;
@@ -35,21 +43,18 @@ export const updateItem = (item: Thing, values: ThingFormValues): Thing => {
 };
 
 export const deleteItem = (item: Thing) => {
-  const found = item.inventory?.things?.findIndex(
-    (it) => {
-      return it?.id === item.id
-    }
-  );
-  if (found !== undefined && found > -1) item.inventory?.things?.splice(found, 1);
-}
+  const found = item.inventory?.things?.findIndex((it) => {
+    return it?.id === item.id;
+  });
+  if (found !== undefined && found > -1)
+    item.inventory?.things?.splice(found, 1);
+};
 
 export const getInventories = (me: UserAccount) => {
-  return useCoState(
-    InventoryList,
-    me.root?._refs.inventories?.id,
-    [{ things: [{}] }]
-  );
-}
+  return useCoState(InventoryList, me.root?._refs.inventories?.id, [
+    { things: [{}] }
+  ]);
+};
 
 export const createInventory = (
   inventoryName: string,
@@ -73,4 +78,4 @@ export const deleteInventory = (
   );
   if (inventoryIndex !== undefined && inventoryIndex > -1)
     me.root?.inventories?.splice(inventoryIndex, 1);
-}
+};
diff --git a/src/lib/schema.ts b/src/lib/schema.ts
index 468d9ff..77ddb12 100644
--- a/src/lib/schema.ts
+++ b/src/lib/schema.ts
@@ -7,14 +7,14 @@ export class Thing extends CoMap {
   deleted = co.boolean;
 }
 
-export class ThingList extends CoList.Of(co.ref(Thing)) { }
+export class ThingList extends CoList.Of(co.ref(Thing)) {}
 
 export class Inventory extends CoMap {
   name = co.string;
   things = co.ref(ThingList);
 }
 
-export class InventoryList extends CoList.Of(co.ref(Inventory)) { }
+export class InventoryList extends CoList.Of(co.ref(Inventory)) {}
 
 export class UserAccountRoot extends CoMap {
   inventories = co.ref(InventoryList);
@@ -32,7 +32,7 @@ export class UserAccount extends Account {
       const firstInventory = Inventory.create(
         {
           name: "Default",
-          things: ThingList.create([], { owner: group }),
+          things: ThingList.create([], { owner: group })
         },
         { owner: group }
       );
@@ -43,7 +43,7 @@ export class UserAccount extends Account {
             data: "random data",
             type: "string",
             inventory: firstInventory,
-            deleted: false,
+            deleted: false
           },
           { owner: group }
         )
@@ -52,8 +52,8 @@ export class UserAccount extends Account {
       this.root = UserAccountRoot.create(
         {
           inventories: InventoryList.create([firstInventory], {
-            owner: this,
-          }),
+            owner: this
+          })
         },
         { owner: this }
       );
diff --git a/src/routes/index.tsx b/src/routes/index.tsx
index 219be09..7bfe0cc 100644
--- a/src/routes/index.tsx
+++ b/src/routes/index.tsx
@@ -3,7 +3,15 @@ import NewItemModal, { ThingFormValues } from "@/components/new-item-modal";
 import { columns } from "@/components/things/columns";
 import { DataTable } from "@/components/things/data-table";
 import { Button } from "@/components/ui/button";
-import { createInventory, createItem, deleteInventory, getInventories, getThings, getThingsByInventory, updateItem } from "@/lib/inventory";
+import {
+  createInventory,
+  createItem,
+  deleteInventory,
+  getInventories,
+  getThings,
+  getThingsByInventory,
+  updateItem
+} from "@/lib/inventory";
 import { useAccount, useCoState } from "@/lib/providers/jazz";
 import {
   Inventory,
@@ -42,7 +50,6 @@ export default function HomePage() {
     // eslint-disable-next-line react-hooks/exhaustive-deps
   }, []);
 
-
   const inventories = getInventories(me);
 
   const [selectedInventory, setSelectedInventory] = useState<