diff --git a/packages/client/modules/userDashboard/components/InvoiceRow/InvoiceRow.tsx b/packages/client/modules/userDashboard/components/InvoiceRow/InvoiceRow.tsx
index 6651c90663a..4148969d317 100644
--- a/packages/client/modules/userDashboard/components/InvoiceRow/InvoiceRow.tsx
+++ b/packages/client/modules/userDashboard/components/InvoiceRow/InvoiceRow.tsx
@@ -9,7 +9,6 @@ import RowInfo from '../../../../components/Row/RowInfo'
 import RowInfoHeading from '../../../../components/Row/RowInfoHeading'
 import {PALETTE} from '../../../../styles/paletteV3'
 import makeDateString from '../../../../utils/makeDateString'
-import makeMonthDateString from '../../../../utils/makeMonthDateString'
 import invoiceLineFormat from '../../../invoice/helpers/invoiceLineFormat'
 
 const InvoiceAmount = styled('span')({
@@ -105,7 +104,9 @@ const InvoiceRow = (props: Props) => {
         <InvoiceInfo>
           <InfoRow>
             <InvoiceTitle>
-              {makeMonthDateString(endAt)} to {makeMonthDateString(nextPeriodEnd)}
+              {status === 'UPCOMING'
+                ? `Due on ${makeDateString(endAt)}`
+                : `${makeDateString(endAt)} to ${makeDateString(nextPeriodEnd)}`}
             </InvoiceTitle>
             <InfoRowRight>
               <InvoiceAmount>
diff --git a/packages/client/utils/makeMonthDateString.ts b/packages/client/utils/makeMonthDateString.ts
deleted file mode 100644
index fd242ebffcc..00000000000
--- a/packages/client/utils/makeMonthDateString.ts
+++ /dev/null
@@ -1,10 +0,0 @@
-import ensureDate from './ensureDate'
-
-export default function makeMonthDateString(datetime: Date | string | null) {
-  const timestamp = ensureDate(datetime)
-  return timestamp.toLocaleDateString('en-US', {
-    year: 'numeric',
-    month: 'long',
-    day: 'numeric'
-  })
-}
diff --git a/packages/server/graphql/queries/helpers/makeUpcomingInvoice.ts b/packages/server/graphql/queries/helpers/makeUpcomingInvoice.ts
index ce6b3949afa..55c0051c6f1 100644
--- a/packages/server/graphql/queries/helpers/makeUpcomingInvoice.ts
+++ b/packages/server/graphql/queries/helpers/makeUpcomingInvoice.ts
@@ -4,12 +4,14 @@ import {fromEpochSeconds} from '../../../utils/epochTime'
 import getUpcomingInvoiceId from '../../../utils/getUpcomingInvoiceId'
 import {getStripeManager} from '../../../utils/stripe'
 import StripeManager from '../../../utils/stripe/StripeManager'
+import Invoice from '../../../database/types/Invoice'
+import Organization from '../../../database/types/Organization'
 
 export default async function makeUpcomingInvoice(
-  orgId: string,
+  org: Organization,
   quantity: number,
   stripeId?: string | null
-) {
+): Promise<Invoice | undefined> {
   if (!stripeId) return undefined
   const manager = getStripeManager()
   let stripeInvoice: Stripe.Invoice
@@ -41,6 +43,10 @@ export default async function makeUpcomingInvoice(
     stripeInvoice = await manager.retrieveUpcomingInvoice(stripeId)
   }
 
+  const {id: orgId, tier, name: orgName, picture} = org
+  const unitPrice = subscription?.plan?.amount ?? 0
+  const amount = unitPrice * quantity
+
   return {
     id: getUpcomingInvoiceId(orgId),
     amountDue: stripeInvoice.amount_due,
@@ -51,6 +57,22 @@ export default async function makeUpcomingInvoice(
     orgId,
     startAt: fromEpochSeconds(stripeInvoice.period_start),
     startingBalance: stripeInvoice.starting_balance,
-    status: 'UPCOMING'
+    status: 'UPCOMING',
+    createdAt: fromEpochSeconds(stripeInvoice.period_start),
+    billingLeaderEmails: [],
+    lines: [],
+    orgName,
+    tier,
+    paidAt: null,
+    picture: picture ?? null,
+    nextPeriodCharges: {
+      amount,
+      quantity,
+      nextPeriodEnd: fromEpochSeconds(
+        stripeInvoice.period_end - stripeInvoice.period_start + stripeInvoice.period_end
+      ),
+      unitPrice,
+      interval: subscription?.plan?.interval ?? 'month'
+    }
   }
 }
diff --git a/packages/server/graphql/queries/invoices.ts b/packages/server/graphql/queries/invoices.ts
index c4ec9526185..9454ec627c7 100644
--- a/packages/server/graphql/queries/invoices.ts
+++ b/packages/server/graphql/queries/invoices.ts
@@ -64,9 +64,10 @@ export default {
         .count()
         .run()
     ])
+    const org = await dataLoader.get('organizations').load(orgId)
     const upcomingInvoice = after
       ? undefined
-      : await makeUpcomingInvoice(orgId, orgUserCount, stripeId)
+      : await makeUpcomingInvoice(org, orgUserCount, stripeId)
     const extraInvoices: Invoice[] = tooManyInvoices || []
     const paginatedInvoices = after ? extraInvoices.slice(1) : extraInvoices
     const allInvoices = upcomingInvoice