diff --git a/app/routes/admin/edit/checkout.tsx b/app/routes/admin/edit/checkout.tsx
index b0be5e0..0c1ed0d 100644
--- a/app/routes/admin/edit/checkout.tsx
+++ b/app/routes/admin/edit/checkout.tsx
@@ -29,7 +29,12 @@ export default function EditContainerRoute() {
           <ListGroup>
             {loaderData.checkouts.map((checkout) => (
               <ListGroup.Item key={checkout.id}>
-                <b>{checkout.id}</b> {checkout.container.drink.name} - {containerTypeToString(checkout.container.type)} - {volume(checkout.container.volume)} - {timeAgo(new Date(checkout.checkoutAt))} - {checkout.inventoryAfter} left
+                <b className="me-1">{checkout.id}</b> 
+                {checkout.container.drink.name} 
+                <Badge bg="secondary" className="ms-1">{containerTypeToString(checkout.container.type)}</Badge> 
+                <Badge bg="secondary" className="ms-1">{volume(checkout.container.volume)}</Badge> 
+                <Badge bg="secondary" className="ms-1">{timeAgo(new Date(checkout.checkoutAt))} - {checkout.checkoutAt.slice(0,-5)}</Badge> 
+                <Badge bg="secondary" className="ms-1">{checkout.inventoryAfter} left</Badge> 
                 <div className="float-end">
                   <LinkContainer to={"" + checkout.id}>
                     <Button variant="primary" className="mx-3">
diff --git a/app/routes/admin/new/checkout.tsx b/app/routes/admin/new/checkout.tsx
index c6aa9cd..72fdeb1 100644
--- a/app/routes/admin/new/checkout.tsx
+++ b/app/routes/admin/new/checkout.tsx
@@ -18,7 +18,7 @@ export const action = async ({
 
   const containerId = Number(form.get("container"));
   const inventoryAfter = Number(form.get("inventoryAfter"));
-  const checkoutAt = new Date(form.get("checkoutAt")!.toString());
+  const checkoutAt = String(form.get("checkoutAt")) + ":00.000z" || Date.now().toString();
 
   try{
     const checkout = await dbe.history.create({ data: {