diff --git a/apps/dashboard/.env-example b/apps/dashboard/.env-example
index 8b6e917cec..bd1af14435 100644
--- a/apps/dashboard/.env-example
+++ b/apps/dashboard/.env-example
@@ -81,4 +81,7 @@ AZURE_DOCUMENT_INTELLIGENCE_KEY=
 NEXT_PUBLIC_GOOGLE_API_KEY=
 
 # VatCheckAPI
-VATCHECKAPI_API_KEY=
\ No newline at end of file
+VATCHECKAPI_API_KEY=
+
+# Invoice
+INVOICE_JWT_SECRET=secret
diff --git a/apps/dashboard/src/actions/create-customer-action.ts b/apps/dashboard/src/actions/create-customer-action.ts
index abba7c2e4d..ebb5df7b0d 100644
--- a/apps/dashboard/src/actions/create-customer-action.ts
+++ b/apps/dashboard/src/actions/create-customer-action.ts
@@ -1,6 +1,7 @@
 "use server";
 
 import { LogEvents } from "@midday/events/events";
+import { generateToken } from "@midday/invoice/token";
 import { revalidateTag } from "next/cache";
 import { authActionClient } from "./safe-action";
 import { createCustomerSchema } from "./schema";
@@ -15,10 +16,13 @@ export const createCustomerAction = authActionClient
     },
   })
   .action(async ({ parsedInput: input, ctx: { user, supabase } }) => {
+    const token = await generateToken(user.id);
+
     const { data } = await supabase
       .from("customers")
       .insert({
         ...input,
+        token,
         team_id: user.team_id,
       })
       .select("id, name")
diff --git a/apps/dashboard/src/actions/invoice/delete-invoice-action.ts b/apps/dashboard/src/actions/invoice/delete-invoice-action.ts
index 5ae908b7c2..19c1a98502 100644
--- a/apps/dashboard/src/actions/invoice/delete-invoice-action.ts
+++ b/apps/dashboard/src/actions/invoice/delete-invoice-action.ts
@@ -21,7 +21,7 @@ export const deleteInvoiceAction = authActionClient
 
     revalidateTag(`invoices_${teamId}`);
     revalidateTag(`invoice_summary_${teamId}`);
-    revalidateTag(`invoice_number_count_${teamId}`);
+    revalidateTag(`invoice_number_${teamId}`);
 
     return data;
   });
diff --git a/apps/dashboard/src/actions/invoice/draft-invoice-action.ts b/apps/dashboard/src/actions/invoice/draft-invoice-action.ts
index 99d1690fed..a490c545da 100644
--- a/apps/dashboard/src/actions/invoice/draft-invoice-action.ts
+++ b/apps/dashboard/src/actions/invoice/draft-invoice-action.ts
@@ -1,6 +1,7 @@
 "use server";
 
 import { authActionClient } from "@/actions/safe-action";
+import { generateToken } from "@midday/invoice/token";
 import { revalidateTag } from "next/cache";
 import { draftInvoiceSchema } from "./schema";
 
@@ -16,6 +17,10 @@ export const draftInvoiceAction = authActionClient
     }) => {
       const teamId = user.team_id;
 
+      // Generate token if customer_id is not provided because it's a new invoice
+      // We use upsert so we don't have to check if the invoice already exists
+      const token = !input.customer_id && (await generateToken(id));
+
       const { payment_details, from_details, ...restTemplate } = template;
 
       const { data } = await supabase
@@ -28,6 +33,7 @@ export const draftInvoiceAction = authActionClient
             payment_details,
             from_details,
             template: restTemplate,
+            token,
             ...input,
           },
           {
@@ -40,7 +46,7 @@ export const draftInvoiceAction = authActionClient
 
       revalidateTag(`invoice_summary_${teamId}`);
       revalidateTag(`invoices_${teamId}`);
-      revalidateTag(`invoice_number_count_${teamId}`);
+      revalidateTag(`invoice_number_${teamId}`);
 
       return data;
     },
diff --git a/apps/dashboard/src/actions/invoice/schema.ts b/apps/dashboard/src/actions/invoice/schema.ts
index a061d4070a..7bca7ba1bd 100644
--- a/apps/dashboard/src/actions/invoice/schema.ts
+++ b/apps/dashboard/src/actions/invoice/schema.ts
@@ -48,6 +48,7 @@ export const draftInvoiceSchema = z.object({
   from_details: z.any().optional(),
   customer_details: z.any().optional(),
   customer_id: z.string().uuid().optional(),
+  customer_name: z.string().optional(),
   payment_details: z.any().optional(),
   note_details: z.any().optional(),
   due_date: z.coerce.date(),
@@ -99,6 +100,7 @@ export const invoiceFormSchema = z.object({
   from_details: z.any(),
   customer_details: z.any(),
   customer_id: z.string().uuid(),
+  customer_name: z.string().optional(),
   payment_details: z.any(),
   note_details: z.any().optional(),
   due_date: z.coerce.date(),
diff --git a/apps/dashboard/src/actions/invoice/update-invoice-action.ts b/apps/dashboard/src/actions/invoice/update-invoice-action.ts
index cf55e4dcab..1ce78798af 100644
--- a/apps/dashboard/src/actions/invoice/update-invoice-action.ts
+++ b/apps/dashboard/src/actions/invoice/update-invoice-action.ts
@@ -22,7 +22,7 @@ export const updateInvoiceAction = authActionClient
 
       revalidateTag(`invoice_summary_${teamId}`);
       revalidateTag(`invoices_${teamId}`);
-      revalidateTag(`invoice_number_count_${teamId}`);
+      revalidateTag(`invoice_number_${teamId}`);
 
       return data;
     },
diff --git a/apps/dashboard/src/app/[locale]/(app)/preview/invoice/[id]/page.tsx b/apps/dashboard/src/app/[locale]/(app)/preview/invoice/[id]/page.tsx
deleted file mode 100644
index 31dda26b52..0000000000
--- a/apps/dashboard/src/app/[locale]/(app)/preview/invoice/[id]/page.tsx
+++ /dev/null
@@ -1,10 +0,0 @@
-import Template from "@/components/invoice/template";
-import { getInvoiceQuery } from "@midday/supabase/queries";
-import { createClient } from "@midday/supabase/server";
-
-export default async function Page({ params }: { params: { id: string } }) {
-  const supabase = createClient();
-  const { data } = await getInvoiceQuery(supabase, params.id);
-
-  return <Template invoice={data} />;
-}
diff --git a/apps/dashboard/src/app/[locale]/(public)/i/[token]/page.tsx b/apps/dashboard/src/app/[locale]/(public)/i/[token]/page.tsx
new file mode 100644
index 0000000000..5ded860d98
--- /dev/null
+++ b/apps/dashboard/src/app/[locale]/(public)/i/[token]/page.tsx
@@ -0,0 +1,61 @@
+import { verify } from "@midday/invoice/token";
+import { getInvoiceQuery } from "@midday/supabase/queries";
+import { createClient } from "@midday/supabase/server";
+import type { Metadata } from "next";
+import { notFound } from "next/navigation";
+
+export async function generateMetadata({
+  params,
+}: { params: { token: string } }): Promise<Metadata> {
+  const supabase = createClient({ admin: true });
+
+  try {
+    const { id } = await verify(params.token);
+    const { data: invoice } = await getInvoiceQuery(supabase, id);
+
+    if (!invoice) {
+      return {
+        title: "Invoice Not Found",
+        robots: {
+          index: false,
+          follow: false,
+        },
+      };
+    }
+
+    return {
+      title: `Invoice ${invoice.invoice_number} | ${invoice.team?.name}`,
+      description: `Invoice for ${invoice.customer?.name || "Customer"}`,
+      robots: {
+        index: false,
+        follow: false,
+      },
+    };
+  } catch (error) {
+    return {
+      title: "Invalid Invoice",
+      robots: {
+        index: false,
+        follow: false,
+      },
+    };
+  }
+}
+
+export default async function Page({ params }: { params: { token: string } }) {
+  const supabase = createClient({ admin: true });
+
+  try {
+    const { id } = await verify(params.token);
+    console.log("katt", id);
+    const { data: invoice } = await getInvoiceQuery(supabase, id);
+
+    if (!invoice) {
+      notFound();
+    }
+
+    return <div>Invoice: {invoice.invoice_number}</div>;
+  } catch (error) {
+    notFound();
+  }
+}
diff --git a/apps/dashboard/src/app/[locale]/not-found.tsx b/apps/dashboard/src/app/[locale]/not-found.tsx
new file mode 100644
index 0000000000..53af03322c
--- /dev/null
+++ b/apps/dashboard/src/app/[locale]/not-found.tsx
@@ -0,0 +1,23 @@
+import Image from "next/image";
+import Link from "next/link";
+import appIcon from "public/appicon.png";
+
+export default function NotFound() {
+  return (
+    <div className="h-screen flex flex-col items-center justify-center text-center text-sm text-[#606060]">
+      <Image
+        src={appIcon}
+        width={80}
+        height={80}
+        alt="Midday"
+        quality={100}
+        className="mb-10"
+      />
+      <h2 className="text-xl font-semibold mb-2">Not Found</h2>
+      <p className="mb-4">Could not find requested resource</p>
+      <Link href="/" className="underline">
+        Return Home
+      </Link>
+    </div>
+  );
+}
diff --git a/apps/dashboard/src/components/copy-input.tsx b/apps/dashboard/src/components/copy-input.tsx
index 5d41a0f8c3..d8459fbbfb 100644
--- a/apps/dashboard/src/components/copy-input.tsx
+++ b/apps/dashboard/src/components/copy-input.tsx
@@ -31,10 +31,10 @@ export function CopyInput({ value, className }: Props) {
       onClick={handleClipboard}
       className={cn(
         "flex items-center relative w-full border py-2 px-4 cursor-pointer",
-        className
+        className,
       )}
     >
-      <div className="pr-7 text-[#878787] text-sm">{value}</div>
+      <div className="pr-7 text-[#878787] text-sm truncate">{value}</div>
       <motion.div
         className="absolute right-4 top-2.5"
         initial={{ opacity: 1, scale: 1 }}
diff --git a/apps/dashboard/src/components/invoice-details.tsx b/apps/dashboard/src/components/invoice-details.tsx
index 7b31d1fabe..ff019261a7 100644
--- a/apps/dashboard/src/components/invoice-details.tsx
+++ b/apps/dashboard/src/components/invoice-details.tsx
@@ -31,7 +31,7 @@ export function InvoiceDetails({
   invoice_date,
   invoice_number,
   template,
-  short_id,
+  token,
 }: Props) {
   return (
     <div>
@@ -122,28 +122,30 @@ export function InvoiceDetails({
         </div>
       </div>
 
-      <div className="mt-6 flex flex-col space-y-2 border-t border-border pt-6">
-        <span className="text-sm text-[#606060]">Invoice link</span>
-        <div className="flex space-x-2">
-          <CopyInput value={`https://app.midday.ai/c/jnsf234/i/${short_id}`} />
+      {customer && (
+        <div className="mt-6 flex flex-col space-y-2 border-t border-border pt-6">
+          <span className="text-sm text-[#606060]">Invoice link</span>
+          <div className="flex space-x-2">
+            <CopyInput value={`https://app.midday.ai/i/${token}`} />
 
-          {status !== "draft" && (
-            <a
-              href={`/api/download/invoice?id=${id}&size=${template?.size}`}
-              download
-            >
-              <Button
-                variant="secondary"
-                className="size-[40px] hover:bg-secondary"
+            {status !== "draft" && (
+              <a
+                href={`/api/download/invoice?id=${id}&size=${template?.size}`}
+                download
               >
-                <div>
-                  <Icons.Download className="size-4" />
-                </div>
-              </Button>
-            </a>
-          )}
+                <Button
+                  variant="secondary"
+                  className="size-[40px] hover:bg-secondary"
+                >
+                  <div>
+                    <Icons.Download className="size-4" />
+                  </div>
+                </Button>
+              </a>
+            )}
+          </div>
         </div>
-      </div>
+      )}
 
       <Accordion type="single" collapsible className="mt-6">
         <AccordionItem value="note">
diff --git a/apps/dashboard/src/components/invoice/customer-details.tsx b/apps/dashboard/src/components/invoice/customer-details.tsx
index 591f6e5597..28ca7fc7a7 100644
--- a/apps/dashboard/src/components/invoice/customer-details.tsx
+++ b/apps/dashboard/src/components/invoice/customer-details.tsx
@@ -16,6 +16,7 @@ export interface Customer {
   phone?: string;
   address_line_1?: string;
   address_line_2?: string;
+  token: string;
   city?: string;
   state?: string;
   zip?: string;
diff --git a/apps/dashboard/src/components/invoice/form.tsx b/apps/dashboard/src/components/invoice/form.tsx
index 11e0bca652..b5c6b54f87 100644
--- a/apps/dashboard/src/components/invoice/form.tsx
+++ b/apps/dashboard/src/components/invoice/form.tsx
@@ -10,6 +10,7 @@ import { useAction } from "next-safe-action/hooks";
 import Link from "next/link";
 import { useEffect, useState } from "react";
 import { useFormContext, useWatch } from "react-hook-form";
+import type { Invoice } from "../tables/invoices/columns";
 import { CreateButton } from "./create-button";
 import { type Customer, CustomerDetails } from "./customer-details";
 import { FromDetails } from "./from-details";
@@ -27,7 +28,8 @@ type Props = {
 };
 
 export function Form({ teamId, customers }: Props) {
-  const { selectedCustomerId, invoiceId } = useInvoiceParams();
+  const { selectedCustomerId } = useInvoiceParams();
+  const [data, setData] = useState<Invoice | undefined>();
   const [lastUpdated, setLastUpdated] = useState<Date | undefined>();
   const [lastEditedText, setLastEditedText] = useState("");
 
@@ -37,7 +39,10 @@ export function Form({ teamId, customers }: Props) {
 
   const draftInvoice = useAction(draftInvoiceAction, {
     onSuccess: ({ data }) => {
-      setLastUpdated(new Date());
+      if (data) {
+        setData(data);
+        setLastUpdated(new Date());
+      }
     },
   });
 
@@ -47,6 +52,7 @@ export function Form({ teamId, customers }: Props) {
     name: [
       "template",
       "customer_id",
+      "customer_name",
       "line_items",
       "amount",
       "vat",
@@ -71,8 +77,11 @@ export function Form({ teamId, customers }: Props) {
   }, [debouncedValues, isDirty]);
 
   useEffect(() => {
+    const customer = customers.find((c) => c.id === selectedCustomerId);
+
     if (selectedCustomerId) {
-      form.setValue("customer_id", selectedCustomerId);
+      form.setValue("customer_id", customer?.id);
+      form.setValue("customer_name", customer?.name);
     }
   }, [selectedCustomerId]);
 
@@ -140,14 +149,16 @@ export function Form({ teamId, customers }: Props) {
       <div className="absolute bottom-14 w-full h-9">
         <div className="flex justify-between items-center mt-auto">
           <div className="flex space-x-2 items-center">
-            <Link
-              href={`/preview/invoice/${invoiceId}`}
-              className="text-xs text-[#808080] flex items-center gap-1"
-              target="_blank"
-            >
-              <Icons.ExternalLink className="size-3" />
-              <span>Preview invoice</span>
-            </Link>
+            {data && (
+              <Link
+                href={`/i/${data.token}`}
+                className="text-xs text-[#808080] flex items-center gap-1"
+                target="_blank"
+              >
+                <Icons.ExternalLink className="size-3" />
+                <span>Preview invoice</span>
+              </Link>
+            )}
 
             {lastEditedText && (
               <motion.div
diff --git a/apps/dashboard/src/components/invoice/settings-menu.tsx b/apps/dashboard/src/components/invoice/settings-menu.tsx
index 775c54ad46..cdf7f82c66 100644
--- a/apps/dashboard/src/components/invoice/settings-menu.tsx
+++ b/apps/dashboard/src/components/invoice/settings-menu.tsx
@@ -95,15 +95,18 @@ export function SettingsMenu() {
                     key={optionIndex.toString()}
                     className="text-xs"
                     checked={watch(watchKey) === option.value}
-                    onCheckedChange={() => {
-                      setValue(watchKey, option.value, {
-                        shouldValidate: true,
-                      });
+                    onCheckedChange={(checked) => {
+                      if (checked) {
+                        setValue(watchKey, option.value, {
+                          shouldValidate: true,
+                        });
 
-                      updateInvoiceTemplate.execute({
-                        [item.key]: option.value,
-                      });
+                        updateInvoiceTemplate.execute({
+                          [item.key]: option.value,
+                        });
+                      }
                     }}
+                    onSelect={(event) => event.preventDefault()}
                   >
                     {watchKey === "template.date_format"
                       ? format(new Date(), option.value as string)
diff --git a/apps/dashboard/src/components/sheets/customer-create-sheet.tsx b/apps/dashboard/src/components/sheets/customer-create-sheet.tsx
index bc454ebd54..9b2ebe8d42 100644
--- a/apps/dashboard/src/components/sheets/customer-create-sheet.tsx
+++ b/apps/dashboard/src/components/sheets/customer-create-sheet.tsx
@@ -14,7 +14,7 @@ export function CustomerCreateSheet() {
 
   return (
     <Sheet open={isOpen} onOpenChange={() => setParams(null)}>
-      <SheetContent style={{ maxWidth: 610 }} stack>
+      <SheetContent stack>
         <SheetHeader className="mb-6 flex justify-between items-center flex-row">
           <h2 className="text-xl">Create Customer</h2>
           <Button
diff --git a/apps/dashboard/src/components/sheets/invoice-create-sheet.server.tsx b/apps/dashboard/src/components/sheets/invoice-create-sheet.server.tsx
index f562ddc102..16cc42e42d 100644
--- a/apps/dashboard/src/components/sheets/invoice-create-sheet.server.tsx
+++ b/apps/dashboard/src/components/sheets/invoice-create-sheet.server.tsx
@@ -1,22 +1,18 @@
-import { generateInvoiceNumber } from "@/utils/invoice";
 import {
   getCustomers,
-  getInvoiceNumberCount,
+  getInvoiceNumber,
   getInvoiceTemplates,
 } from "@midday/supabase/cached-queries";
 import { FormContext } from "../invoice/form-context";
 import { InvoiceCreateSheet } from "./invoice-create-sheet";
 
 export async function InvoiceCreateSheetServer({ teamId }: { teamId: string }) {
-  const [
-    { data: templatesData },
-    { data: customersData },
-    { count: invoiceNumberCount },
-  ] = await Promise.all([
-    getInvoiceTemplates(),
-    getCustomers(),
-    getInvoiceNumberCount(),
-  ]);
+  const [{ data: templatesData }, { data: customersData }, invoiceNumber] =
+    await Promise.all([
+      getInvoiceTemplates(),
+      getCustomers(),
+      getInvoiceNumber(),
+    ]);
 
   // Filter out null values
   const template = templatesData
@@ -26,10 +22,7 @@ export async function InvoiceCreateSheetServer({ teamId }: { teamId: string }) {
     : {};
 
   return (
-    <FormContext
-      template={template}
-      invoiceNumber={generateInvoiceNumber(invoiceNumberCount)}
-    >
+    <FormContext template={template} invoiceNumber={invoiceNumber}>
       <InvoiceCreateSheet teamId={teamId} customers={customersData} />
     </FormContext>
   );
diff --git a/apps/dashboard/src/components/tables/invoices/columns.tsx b/apps/dashboard/src/components/tables/invoices/columns.tsx
index 7076a10c7e..ec317e29bf 100644
--- a/apps/dashboard/src/components/tables/invoices/columns.tsx
+++ b/apps/dashboard/src/components/tables/invoices/columns.tsx
@@ -1,6 +1,7 @@
 "use client";
 
 import type { InvoiceTemplate } from "@/actions/invoice/schema";
+import { updateInvoiceAction } from "@/actions/invoice/update-invoice-action";
 import { FormatAmount } from "@/components/format-amount";
 import { InvoiceStatus } from "@/components/invoice-status";
 import { useInvoiceParams } from "@/hooks/use-invoice-params";
@@ -20,11 +21,11 @@ import { TooltipProvider } from "@midday/ui/tooltip";
 import { DotsHorizontalIcon } from "@radix-ui/react-icons";
 import type { ColumnDef } from "@tanstack/react-table";
 import { formatDistanceToNow } from "date-fns";
+import { useAction } from "next-safe-action/hooks";
 import * as React from "react";
 
 export type Invoice = {
   id: string;
-  short_id: string;
   due_date: string;
   invoice_date?: string;
   paid_at?: string;
@@ -37,11 +38,14 @@ export type Invoice = {
   updated_at?: string;
   viewed_at?: string;
   template: InvoiceTemplate;
+  token: string;
   customer?: {
     id: string;
     name: string;
     website: string;
   };
+  // Used when relation is deleted
+  customer_name?: string;
 };
 
 export const columns: ColumnDef<Invoice>[] = [
@@ -78,6 +82,7 @@ export const columns: ColumnDef<Invoice>[] = [
     accessorKey: "customer",
     cell: ({ row }) => {
       const customer = row.original.customer;
+      const name = customer?.name || row.original.customer_name;
       const viewAt = row.original.viewed_at;
       const hasNewMessages = false;
 
@@ -87,14 +92,14 @@ export const columns: ColumnDef<Invoice>[] = [
             {customer?.website && (
               <AvatarImage
                 src={`https://img.logo.dev/${customer?.website}?token=pk_X-1ZO13GSgeOoUrIuJ6GMQ&size=60`}
-                alt={`${customer?.name} logo`}
+                alt={`${name} logo`}
               />
             )}
             <AvatarFallback className="text-[9px] font-medium">
-              {customer?.name?.[0]}
+              {name?.[0]}
             </AvatarFallback>
           </Avatar>
-          <span className="truncate">{customer?.name}</span>
+          <span className="truncate">{name}</span>
 
           {viewAt && (
             <TooltipProvider delayDuration={0}>
@@ -157,6 +162,7 @@ export const columns: ColumnDef<Invoice>[] = [
       const status = row.getValue("status");
       const hasNewMessages = status === "overdue";
       const { setParams } = useInvoiceParams();
+      const updateInvoice = useAction(updateInvoiceAction);
 
       return (
         <div>
@@ -202,8 +208,12 @@ export const columns: ColumnDef<Invoice>[] = [
 
               {(status === "overdue" || status === "unpaid") && (
                 <DropdownMenuItem
-                  // Cancel
-                  // onClick={() => deleteInvoice.execute({ id: row.original.id })}
+                  onClick={() =>
+                    updateInvoice.execute({
+                      id: row.original.id,
+                      status: "canceled",
+                    })
+                  }
                   className="text-[#FF3638]"
                 >
                   Cancel
diff --git a/apps/dashboard/src/middleware.ts b/apps/dashboard/src/middleware.ts
index b714e06bda..33d31b0fc3 100644
--- a/apps/dashboard/src/middleware.ts
+++ b/apps/dashboard/src/middleware.ts
@@ -33,7 +33,8 @@ export async function middleware(request: NextRequest) {
   if (
     !session &&
     newUrl.pathname !== "/login" &&
-    !newUrl.pathname.includes("/report")
+    !newUrl.pathname.includes("/report") &&
+    !newUrl.pathname.includes("/i/")
   ) {
     const encodedSearchParams = `${newUrl.pathname.substring(1)}${
       newUrl.search
diff --git a/packages/invoice/package.json b/packages/invoice/package.json
index 1b6abbadd9..fc4591e165 100644
--- a/packages/invoice/package.json
+++ b/packages/invoice/package.json
@@ -8,9 +8,15 @@
     "format": "biome format --write .",
     "typecheck": "tsc --noEmit"
   },
+  "exports": {
+    ".": "./src/index.tsx",
+    "./token": "./src/token/index.ts",
+    "./number": "./src/utils/number.ts"
+  },
   "dependencies": {
     "@react-pdf/renderer": "^4.0.0",
     "date-fns": "^4.1.0",
+    "jose": "^5.9.6",
     "qrcode": "^1.5.4"
   }
 }
diff --git a/packages/invoice/src/token/index.ts b/packages/invoice/src/token/index.ts
new file mode 100644
index 0000000000..50399db906
--- /dev/null
+++ b/packages/invoice/src/token/index.ts
@@ -0,0 +1,17 @@
+import * as jose from "jose";
+
+export async function verify(token: string) {
+  const secret = new TextEncoder().encode(process.env.INVOICE_JWT_SECRET);
+  const { payload } = await jose.jwtVerify(token, secret);
+
+  return payload;
+}
+
+export async function generateToken(id: string) {
+  const secret = new TextEncoder().encode(process.env.INVOICE_JWT_SECRET);
+  const token = await new jose.SignJWT({ id })
+    .setProtectedHeader({ alg: "HS256" })
+    .sign(secret);
+
+  return token;
+}
diff --git a/apps/dashboard/src/utils/invoice.test.ts b/packages/invoice/src/utils/number.test.ts
similarity index 95%
rename from apps/dashboard/src/utils/invoice.test.ts
rename to packages/invoice/src/utils/number.test.ts
index 8c09126361..41da13bf33 100644
--- a/apps/dashboard/src/utils/invoice.test.ts
+++ b/packages/invoice/src/utils/number.test.ts
@@ -1,5 +1,5 @@
 import { describe, expect, it, test } from "bun:test";
-import { generateInvoiceNumber } from "./invoice";
+import { generateInvoiceNumber } from "./number";
 
 describe("Generate invoice number", () => {
   it("should generate correct invoice number for count less than 10", () => {
diff --git a/apps/dashboard/src/utils/invoice.ts b/packages/invoice/src/utils/number.ts
similarity index 100%
rename from apps/dashboard/src/utils/invoice.ts
rename to packages/invoice/src/utils/number.ts
diff --git a/packages/supabase/src/queries/cached-queries.ts b/packages/supabase/src/queries/cached-queries.ts
index 3ae58b486f..f4b7cc5615 100644
--- a/packages/supabase/src/queries/cached-queries.ts
+++ b/packages/supabase/src/queries/cached-queries.ts
@@ -22,7 +22,7 @@ import {
   getCategoriesQuery,
   getCustomersQuery,
   getExpensesQuery,
-  getInvoiceNumberCountQuery,
+  getInvoiceNumberQuery,
   getInvoiceSummaryQuery,
   getInvoiceTemplatesQuery,
   getInvoicesQuery,
@@ -559,7 +559,7 @@ export const getInvoiceTemplates = async () => {
   )();
 };
 
-export const getInvoiceNumberCount = async () => {
+export const getInvoiceNumber = async () => {
   const supabase = createClient();
   const user = await getUser();
   const teamId = user?.data?.team_id;
@@ -570,11 +570,11 @@ export const getInvoiceNumberCount = async () => {
 
   return unstable_cache(
     async () => {
-      return getInvoiceNumberCountQuery(supabase, teamId);
+      return getInvoiceNumberQuery(supabase, teamId);
     },
-    ["invoice_number_count", teamId],
+    ["invoice_number", teamId],
     {
-      tags: [`invoice_number_count_${teamId}`],
+      tags: [`invoice_number_${teamId}`],
       revalidate: 3600,
     },
   )();
diff --git a/packages/supabase/src/queries/index.ts b/packages/supabase/src/queries/index.ts
index 6e79d8c0c3..4fe6459328 100644
--- a/packages/supabase/src/queries/index.ts
+++ b/packages/supabase/src/queries/index.ts
@@ -1,4 +1,5 @@
 import { UTCDate } from "@date-fns/utc";
+import { generateInvoiceNumber } from "@midday/invoice/number";
 import {
   addDays,
   endOfMonth,
@@ -1144,7 +1145,7 @@ export async function getInvoicesQuery(
   const query = supabase
     .from("invoices")
     .select(
-      "id, short_id, invoice_number, due_date, invoice_date, paid_at, updated_at, viewed_at, amount, template, currency, status, vat, tax, customer:customer_id(id, name, website)",
+      "id, invoice_number, token, due_date, invoice_date, paid_at, updated_at, viewed_at, amount, template, currency, status, vat, tax, customer:customer_id(id, name, website), customer_name",
       { count: "exact" },
     )
     .eq("team_id", teamId);
@@ -1231,6 +1232,7 @@ export async function getCustomersQuery(supabase: Client, teamId: string) {
     .from("customers")
     .select("*")
     .eq("team_id", teamId)
+    .order("created_at", { ascending: false })
     .limit(100);
 }
 
@@ -1249,18 +1251,39 @@ export async function getInvoiceTemplatesQuery(
     .single();
 }
 
-export async function getInvoiceNumberCountQuery(
-  supabase: Client,
-  teamId: string,
-) {
-  return supabase
+export async function getInvoiceNumberQuery(supabase: Client, teamId: string) {
+  const { count } = await supabase
     .from("invoices")
     .select("id", { count: "exact" })
     .eq("team_id", teamId);
+
+  let nextNumber = generateInvoiceNumber(count || 0);
+  let isUnique = false;
+
+  while (!isUnique) {
+    const { data } = await supabase
+      .from("invoices")
+      .select("invoice_number")
+      .eq("team_id", teamId)
+      .eq("invoice_number", nextNumber)
+      .maybeSingle();
+
+    if (!data) {
+      isUnique = true;
+    } else {
+      nextNumber = generateInvoiceNumber((count || 0) + 1);
+    }
+  }
+
+  return nextNumber;
 }
 
-export async function getInvoiceQuery(supabase: Client, invoiceId: string) {
-  return supabase.from("invoices").select("*").eq("id", invoiceId).single();
+export async function getInvoiceQuery(supabase: Client, id: string) {
+  return supabase
+    .from("invoices")
+    .select("*, customer:customer_id(name), team:team_id(name)")
+    .eq("id", id)
+    .single();
 }
 
 type SearchInvoiceNumberParams = {
diff --git a/packages/supabase/src/types/db.ts b/packages/supabase/src/types/db.ts
index bb5a60d7d3..c3161705ff 100644
--- a/packages/supabase/src/types/db.ts
+++ b/packages/supabase/src/types/db.ts
@@ -207,6 +207,7 @@ export type Database = {
           phone: string | null
           state: string | null
           team_id: string
+          token: string
           vat_number: string | null
           website: string | null
           zip: string | null
@@ -225,6 +226,7 @@ export type Database = {
           phone?: string | null
           state?: string | null
           team_id?: string
+          token?: string
           vat_number?: string | null
           website?: string | null
           zip?: string | null
@@ -243,6 +245,7 @@ export type Database = {
           phone?: string | null
           state?: string | null
           team_id?: string
+          token?: string
           vat_number?: string | null
           website?: string | null
           zip?: string | null
@@ -450,11 +453,14 @@ export type Database = {
           created_at: string
           currency: string | null
           customer_label: string | null
+          date_format: string | null
           description_label: string | null
           due_date_label: string | null
           from_details: Json | null
           from_label: string | null
           id: string
+          include_tax: boolean | null
+          include_vat: boolean | null
           invoice_no_label: string | null
           issue_date_label: string | null
           logo_url: string | null
@@ -463,7 +469,9 @@ export type Database = {
           payment_details_label: string | null
           price_label: string | null
           quantity_label: string | null
+          size: Database["public"]["Enums"]["invoice_size"] | null
           tax_label: string | null
+          tax_rate: number | null
           team_id: string
           total_label: string | null
           vat_label: string | null
@@ -472,11 +480,14 @@ export type Database = {
           created_at?: string
           currency?: string | null
           customer_label?: string | null
+          date_format?: string | null
           description_label?: string | null
           due_date_label?: string | null
           from_details?: Json | null
           from_label?: string | null
           id?: string
+          include_tax?: boolean | null
+          include_vat?: boolean | null
           invoice_no_label?: string | null
           issue_date_label?: string | null
           logo_url?: string | null
@@ -485,7 +496,9 @@ export type Database = {
           payment_details_label?: string | null
           price_label?: string | null
           quantity_label?: string | null
+          size?: Database["public"]["Enums"]["invoice_size"] | null
           tax_label?: string | null
+          tax_rate?: number | null
           team_id: string
           total_label?: string | null
           vat_label?: string | null
@@ -494,11 +507,14 @@ export type Database = {
           created_at?: string
           currency?: string | null
           customer_label?: string | null
+          date_format?: string | null
           description_label?: string | null
           due_date_label?: string | null
           from_details?: Json | null
           from_label?: string | null
           id?: string
+          include_tax?: boolean | null
+          include_vat?: boolean | null
           invoice_no_label?: string | null
           issue_date_label?: string | null
           logo_url?: string | null
@@ -507,7 +523,9 @@ export type Database = {
           payment_details_label?: string | null
           price_label?: string | null
           quantity_label?: string | null
+          size?: Database["public"]["Enums"]["invoice_size"] | null
           tax_label?: string | null
+          tax_rate?: number | null
           team_id?: string
           total_label?: string | null
           vat_label?: string | null
@@ -525,25 +543,32 @@ export type Database = {
       invoices: {
         Row: {
           amount: number | null
+          base_amount: number | null
+          base_currency: string | null
           company_datails: Json | null
           created_at: string
           currency: string | null
-          customer_datails: Json | null
+          customer_details: Json | null
           customer_id: string | null
           due_date: string | null
+          from_details: Json | null
           fts: unknown | null
           id: string
           internal_note: string | null
           invoice_date: string | null
           invoice_number: string | null
+          issue_date: string | null
           line_items: Json | null
           note: string | null
+          note_details: Json | null
           paid_at: string | null
           path_tokens: string[] | null
-          payment_datails: Json | null
+          payment_details: Json | null
+          short_id: string
           status: Database["public"]["Enums"]["invoice_status"]
           tax: number | null
           team_id: string
+          template: Json | null
           updated_at: string | null
           url: string | null
           vat: number | null
@@ -551,25 +576,32 @@ export type Database = {
         }
         Insert: {
           amount?: number | null
+          base_amount?: number | null
+          base_currency?: string | null
           company_datails?: Json | null
           created_at?: string
           currency?: string | null
-          customer_datails?: Json | null
+          customer_details?: Json | null
           customer_id?: string | null
           due_date?: string | null
+          from_details?: Json | null
           fts?: unknown | null
           id?: string
           internal_note?: string | null
           invoice_date?: string | null
           invoice_number?: string | null
+          issue_date?: string | null
           line_items?: Json | null
           note?: string | null
+          note_details?: Json | null
           paid_at?: string | null
           path_tokens?: string[] | null
-          payment_datails?: Json | null
+          payment_details?: Json | null
+          short_id?: string
           status?: Database["public"]["Enums"]["invoice_status"]
           tax?: number | null
           team_id: string
+          template?: Json | null
           updated_at?: string | null
           url?: string | null
           vat?: number | null
@@ -577,25 +609,32 @@ export type Database = {
         }
         Update: {
           amount?: number | null
+          base_amount?: number | null
+          base_currency?: string | null
           company_datails?: Json | null
           created_at?: string
           currency?: string | null
-          customer_datails?: Json | null
+          customer_details?: Json | null
           customer_id?: string | null
           due_date?: string | null
+          from_details?: Json | null
           fts?: unknown | null
           id?: string
           internal_note?: string | null
           invoice_date?: string | null
           invoice_number?: string | null
+          issue_date?: string | null
           line_items?: Json | null
           note?: string | null
+          note_details?: Json | null
           paid_at?: string | null
           path_tokens?: string[] | null
-          payment_datails?: Json | null
+          payment_details?: Json | null
+          short_id?: string
           status?: Database["public"]["Enums"]["invoice_status"]
           tax?: number | null
           team_id?: string
+          template?: Json | null
           updated_at?: string | null
           url?: string | null
           vat?: number | null
@@ -2015,6 +2054,7 @@ export type Database = {
       connection_status: "disconnected" | "connected" | "unknown"
       inbox_status: "processing" | "pending" | "archived" | "new" | "deleted"
       inbox_type: "invoice" | "expense"
+      invoice_size: "a4" | "letter"
       invoice_status: "draft" | "overdue" | "paid" | "unpaid" | "canceled"
       reportTypes: "profit" | "revenue" | "burn_rate" | "expense"
       teamRoles: "owner" | "member"
diff --git a/packages/ui/src/components/sheet.tsx b/packages/ui/src/components/sheet.tsx
index be22379c38..d6ad2c467c 100644
--- a/packages/ui/src/components/sheet.tsx
+++ b/packages/ui/src/components/sheet.tsx
@@ -58,11 +58,11 @@ const SheetContent = React.forwardRef<
   SheetContentProps
 >(({ side = "right", stack = false, className, children, ...props }, ref) => (
   <SheetPortal>
-    {!stack && <SheetOverlay />}
+    <SheetOverlay />
     <SheetPrimitive.Content
       onOpenAutoFocus={(e) => e.preventDefault()}
       ref={ref}
-      className={cn("md:p-4", stack && "md:m-2", sheetVariants({ side }))}
+      className={cn("md:p-4", sheetVariants({ side }))}
       aria-describedby={props["aria-describedby"] || undefined}
       {...props}
     >