diff --git a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[id]/ClientPage.tsx b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[id]/ClientPage.tsx
index 3d74b6a38f..b40d43ab67 100644
--- a/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[id]/ClientPage.tsx
+++ b/clients/apps/web/src/app/(main)/dashboard/[organization]/(header)/customers/[id]/ClientPage.tsx
@@ -1,6 +1,7 @@
 'use client'
 
 import { CustomerContextView } from '@/components/Customer/CustomerContextView'
+import { CustomerUsageView } from '@/components/Customer/CustomerUsageView'
 import { DashboardBody } from '@/components/Layout/DashboardLayout'
 import MetricChart from '@/components/Metrics/MetricChart'
 import { InlineModal } from '@/components/Modal/InlineModal'
@@ -8,6 +9,7 @@ import { useModal } from '@/components/Modal/useModal'
 import AmountLabel from '@/components/Shared/AmountLabel'
 import { SubscriptionModal } from '@/components/Subscriptions/SubscriptionModal'
 import { SubscriptionStatusLabel } from '@/components/Subscriptions/utils'
+import { usePostHog } from '@/hooks/posthog'
 import { useListSubscriptions, useMetrics } from '@/hooks/queries'
 import { useOrders } from '@/hooks/queries/orders'
 import { Customer, Organization } from '@polar-sh/api'
@@ -15,6 +17,12 @@ import Button from '@polar-sh/ui/components/atoms/Button'
 import { DataTable } from '@polar-sh/ui/components/atoms/DataTable'
 import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
 import ShadowBox from '@polar-sh/ui/components/atoms/ShadowBox'
+import {
+  Tabs,
+  TabsContent,
+  TabsList,
+  TabsTrigger,
+} from '@polar-sh/ui/components/atoms/Tabs'
 import { RowSelectionState } from '@tanstack/react-table'
 import Link from 'next/link'
 import React, { useEffect, useState } from 'react'
@@ -77,6 +85,8 @@ const ClientPage: React.FC<ClientPageProps> = ({ organization, customer }) => {
     }
   }, [selectedSubscription, showSubscriptionModal, hideSubscriptionModal])
 
+  const { isFeatureEnabled } = usePostHog()
+
   return (
     <DashboardBody
       title={
@@ -88,154 +98,166 @@ const ClientPage: React.FC<ClientPageProps> = ({ organization, customer }) => {
         </div>
       }
       contextView={<CustomerContextView customer={customer} />}
-      className="gap-12"
     >
-      {metrics.data?.metrics && (
-        <div className="dark:border-polar-700 rounded-4xl flex flex-col gap-4 border border-gray-200 p-12">
-          <div className="flex flex-row items-center justify-between gap-4">
-            <div className="flex flex-col">
-              <h3 className="text-xl">Revenue</h3>
-              <span className="dark:text-polar-500 text-gray-500">
-                Since Customer first was seen
-              </span>
+      <Tabs defaultValue="overview" className="flex flex-col">
+        <TabsList className="mb-8">
+          <TabsTrigger value="overview">Overview</TabsTrigger>
+          {isFeatureEnabled('usage_based_billing') && (
+            <TabsTrigger value="usage">Usage</TabsTrigger>
+          )}
+        </TabsList>
+        <TabsContent value="overview" className="flex flex-col gap-y-12">
+          {metrics.data?.metrics && (
+            <div className="dark:border-polar-700 rounded-4xl flex flex-col gap-4 border border-gray-200 p-12">
+              <div className="flex flex-row items-center justify-between gap-4">
+                <div className="flex flex-col gap-1">
+                  <h3 className="text-xl">Revenue</h3>
+                  <span className="dark:text-polar-500 text-gray-500">
+                    Since Customer first was seen
+                  </span>
+                </div>
+                <h3 className="text-xl">
+                  <AmountLabel
+                    amount={
+                      metrics.data.periods[metrics.data.periods.length - 1]
+                        .cumulative_revenue
+                    }
+                    currency="USD"
+                  />
+                </h3>
+              </div>
+              <MetricChart
+                data={metrics.data.periods}
+                metric={metrics.data.metrics.revenue}
+                interval="month"
+                height={300}
+              />
             </div>
-            <h3 className="text-xl">
-              <AmountLabel
-                amount={
-                  metrics.data.periods[metrics.data.periods.length - 1]
-                    .cumulative_revenue
-                }
-                currency="USD"
+          )}
+          <ShadowBox className="dark:divide-polar-700 flex flex-col divide-y divide-gray-200 border-gray-200 bg-gray-100 bg-transparent p-0">
+            <div className="flex flex-col gap-4 p-12">
+              <h3 className="text-lg">Subscriptions</h3>
+              <DataTable
+                data={subscriptions?.items ?? []}
+                columns={[
+                  {
+                    header: 'Product Name',
+                    accessorKey: 'product.name',
+                    cell: ({ row: { original } }) => (
+                      <span>{original.product.name}</span>
+                    ),
+                  },
+                  {
+                    header: 'Status',
+                    accessorKey: 'status',
+                    cell: ({ row: { original } }) => (
+                      <SubscriptionStatusLabel
+                        className="text-xs"
+                        subscription={original}
+                      />
+                    ),
+                  },
+                  {
+                    header: 'Amount',
+                    accessorKey: 'amount',
+                    cell: ({ row: { original } }) =>
+                      original.amount && original.currency ? (
+                        <AmountLabel
+                          amount={original.amount}
+                          currency={original.currency}
+                          interval={original.recurring_interval}
+                        />
+                      ) : (
+                        <span>—</span>
+                      ),
+                  },
+                ]}
+                isLoading={subscriptionsLoading}
+                className="text-sm"
+                onRowSelectionChange={(row) => {
+                  setSelectedSubscriptionState(row)
+                }}
+                rowSelection={selectedSubscriptionState}
+                getRowId={(row) => row.id.toString()}
+                enableRowSelection
               />
-            </h3>
-          </div>
-          <MetricChart
-            data={metrics.data.periods}
-            metric={metrics.data.metrics.revenue}
-            interval="month"
-            height={300}
-          />
-        </div>
-      )}
-      <ShadowBox className="dark:divide-polar-700 flex flex-col divide-y divide-gray-200 border-gray-200 bg-gray-100 bg-transparent p-0">
-        <div className="flex flex-col gap-4 p-12">
-          <h3 className="text-lg">Subscriptions</h3>
-          <DataTable
-            data={subscriptions?.items ?? []}
-            columns={[
-              {
-                header: 'Product Name',
-                accessorKey: 'product.name',
-                cell: ({ row: { original } }) => (
-                  <span>{original.product.name}</span>
-                ),
-              },
-              {
-                header: 'Status',
-                accessorKey: 'status',
-                cell: ({ row: { original } }) => (
-                  <SubscriptionStatusLabel
-                    className="text-xs"
-                    subscription={original}
+              <InlineModal
+                modalContent={
+                  <SubscriptionModal
+                    organization={organization}
+                    subscription={selectedSubscription}
                   />
-                ),
-              },
-              {
-                header: 'Amount',
-                accessorKey: 'amount',
-                cell: ({ row: { original } }) =>
-                  original.amount && original.currency ? (
-                    <AmountLabel
-                      amount={original.amount}
-                      currency={original.currency}
-                      interval={original.recurring_interval}
-                    />
-                  ) : (
-                    <span>—</span>
-                  ),
-              },
-            ]}
-            isLoading={subscriptionsLoading}
-            className="text-sm"
-            onRowSelectionChange={(row) => {
-              setSelectedSubscriptionState(row)
-            }}
-            rowSelection={selectedSubscriptionState}
-            getRowId={(row) => row.id.toString()}
-            enableRowSelection
-          />
-          <InlineModal
-            modalContent={
-              <SubscriptionModal
-                organization={organization}
-                subscription={selectedSubscription}
+                }
+                isShown={isSubscriptionModalShown}
+                hide={() => {
+                  setSelectedSubscriptionState({})
+                  hideSubscriptionModal()
+                }}
               />
-            }
-            isShown={isSubscriptionModalShown}
-            hide={() => {
-              setSelectedSubscriptionState({})
-              hideSubscriptionModal()
-            }}
-          />
-        </div>
-        <div className="flex flex-col gap-4 p-12">
-          <h3 className="text-lg">Orders</h3>
+            </div>
+            <div className="flex flex-col gap-4 p-12">
+              <h3 className="text-lg">Orders</h3>
 
-          <DataTable
-            data={orders?.items ?? []}
-            columns={[
-              {
-                header: 'Product Name',
-                accessorKey: 'product.name',
-                cell: ({ row: { original } }) => (
-                  <Link
-                    href={`/dashboard/${organization?.slug}/sales/${original.id}`}
-                    key={original.id}
-                  >
-                    <span>{original.product.name}</span>
-                  </Link>
-                ),
-              },
-              {
-                header: 'Created At',
-                accessorKey: 'created_at',
-                cell: ({ row: { original } }) => (
-                  <span className="dark:text-polar-500 text-xs text-gray-500">
-                    <FormattedDateTime datetime={original.created_at} />
-                  </span>
-                ),
-              },
-              {
-                header: 'Amount',
-                accessorKey: 'amount',
-                cell: ({ row: { original } }) => (
-                  <AmountLabel
-                    amount={original.amount}
-                    currency={original.currency}
-                  />
-                ),
-              },
-              {
-                header: '',
-                accessorKey: 'action',
-                cell: ({ row: { original } }) => (
-                  <div className="flex justify-end">
-                    <Link
-                      href={`/dashboard/${organization.slug}/sales/${original.id}`}
-                    >
-                      <Button variant="secondary" size="sm">
-                        View
-                      </Button>
-                    </Link>
-                  </div>
-                ),
-              },
-            ]}
-            isLoading={ordersLoading}
-            className="text-sm"
-          />
-        </div>
-      </ShadowBox>
+              <DataTable
+                data={orders?.items ?? []}
+                columns={[
+                  {
+                    header: 'Product Name',
+                    accessorKey: 'product.name',
+                    cell: ({ row: { original } }) => (
+                      <Link
+                        href={`/dashboard/${organization?.slug}/sales/${original.id}`}
+                        key={original.id}
+                      >
+                        <span>{original.product.name}</span>
+                      </Link>
+                    ),
+                  },
+                  {
+                    header: 'Created At',
+                    accessorKey: 'created_at',
+                    cell: ({ row: { original } }) => (
+                      <span className="dark:text-polar-500 text-xs text-gray-500">
+                        <FormattedDateTime datetime={original.created_at} />
+                      </span>
+                    ),
+                  },
+                  {
+                    header: 'Amount',
+                    accessorKey: 'amount',
+                    cell: ({ row: { original } }) => (
+                      <AmountLabel
+                        amount={original.amount}
+                        currency={original.currency}
+                      />
+                    ),
+                  },
+                  {
+                    header: '',
+                    accessorKey: 'action',
+                    cell: ({ row: { original } }) => (
+                      <div className="flex justify-end">
+                        <Link
+                          href={`/dashboard/${organization.slug}/sales/${original.id}`}
+                        >
+                          <Button variant="secondary" size="sm">
+                            View
+                          </Button>
+                        </Link>
+                      </div>
+                    ),
+                  },
+                ]}
+                isLoading={ordersLoading}
+                className="text-sm"
+              />
+            </div>
+          </ShadowBox>
+        </TabsContent>
+        {isFeatureEnabled('usage_based_billing') && (
+          <CustomerUsageView customer={customer} />
+        )}
+      </Tabs>
     </DashboardBody>
   )
 }
diff --git a/clients/apps/web/src/components/Benefit/BenefitForm.tsx b/clients/apps/web/src/components/Benefit/BenefitForm.tsx
index a609806aec..3d5cf159bd 100644
--- a/clients/apps/web/src/components/Benefit/BenefitForm.tsx
+++ b/clients/apps/web/src/components/Benefit/BenefitForm.tsx
@@ -1,3 +1,4 @@
+import { usePostHog } from '@/hooks/posthog'
 import { useDiscordGuild } from '@/hooks/queries'
 import { getBotDiscordAuthorizeURL } from '@/utils/auth'
 import {
@@ -35,6 +36,7 @@ import { useFormContext } from 'react-hook-form'
 import { DownloadablesBenefitForm } from './Downloadables/BenefitForm'
 import { GitHubRepositoryBenefitForm } from './GitHubRepositoryBenefitForm'
 import { LicenseKeysBenefitForm } from './LicenseKeys/BenefitForm'
+import { UsageBenefitForm } from './Usage/UsageBenefitForm'
 import { benefitsDisplayNames } from './utils'
 
 export const NewBenefitForm = ({
@@ -62,7 +64,7 @@ export const UpdateBenefitForm = ({
 
 interface BenefitFormProps {
   organization: Organization
-  type: BenefitType
+  type: BenefitType | 'usage'
   update?: boolean
 }
 
@@ -108,6 +110,7 @@ export const BenefitForm = ({
       />
 
       {!update ? <BenefitTypeSelect /> : null}
+      {type === 'usage' && <UsageBenefitForm update={update} />}
       {type === 'custom' && <CustomBenefitForm update={update} />}
       {type === 'ads' && <AdsBenefitForm />}
       {type === 'discord' && <DiscordBenefitForm />}
@@ -333,6 +336,9 @@ export const DiscordBenefitForm = () => {
 
 const BenefitTypeSelect = ({}) => {
   const { control } = useFormContext<BenefitCustomCreate>()
+
+  const { isFeatureEnabled } = usePostHog()
+
   return (
     <FormField
       control={control}
@@ -355,6 +361,11 @@ const BenefitTypeSelect = ({}) => {
                       {benefitsDisplayNames[value]}
                     </SelectItem>
                   ))}
+                  {isFeatureEnabled('usage_benefits') && (
+                    <SelectItem key="usage" value="usage">
+                      Usage
+                    </SelectItem>
+                  )}
                 </SelectContent>
               </Select>
             </FormControl>
diff --git a/clients/apps/web/src/components/Benefit/Usage/UsageBenefitForm.tsx b/clients/apps/web/src/components/Benefit/Usage/UsageBenefitForm.tsx
new file mode 100644
index 0000000000..1fd67e9576
--- /dev/null
+++ b/clients/apps/web/src/components/Benefit/Usage/UsageBenefitForm.tsx
@@ -0,0 +1,155 @@
+'use client'
+
+import { useMeters } from '@/hooks/queries/meters'
+import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'
+import Input from '@polar-sh/ui/components/atoms/Input'
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+} from '@polar-sh/ui/components/atoms/Select'
+import { Tabs, TabsList, TabsTrigger } from '@polar-sh/ui/components/atoms/Tabs'
+import {
+  FormControl,
+  FormDescription,
+  FormField,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@polar-sh/ui/components/ui/form'
+import { useContext } from 'react'
+import { useFormContext } from 'react-hook-form'
+
+interface UsageBenefitCreate {
+  properties: {
+    meterId: string
+    credits: number
+    aggregation: 'sum' | 'count'
+    overage:
+      | {
+          enabled: boolean
+          price: {
+            currency: 'USD'
+            amount: number
+          }
+        }
+      | undefined
+  }
+}
+
+export const UsageBenefitForm = ({ update: _ }: { update: boolean }) => {
+  const { control, watch } = useFormContext<UsageBenefitCreate>()
+
+  const { organization } = useContext(MaintainerOrganizationContext)
+  const { data: meters } = useMeters(organization.id)
+
+  const meterId = watch('properties.meterId', undefined)
+  const meter = meters?.items.find((meter) => meter.id === meterId)
+
+  const aggregationType = watch('properties.aggregation', 'sum')
+
+  return (
+    <>
+      <FormField
+        control={control}
+        name="properties.meterId"
+        rules={{
+          required: true,
+        }}
+        render={({ field }) => {
+          return (
+            <FormItem className="flex flex-col gap-y-2">
+              <div className="flex flex-col gap-y-2">
+                <FormLabel>Meter</FormLabel>
+                <FormDescription>
+                  Meter which will be used to track usage
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Select {...field} onValueChange={field.onChange}>
+                  <SelectTrigger>
+                    {meter?.name ?? <span>Select Meter</span>}
+                  </SelectTrigger>
+                  <SelectContent>
+                    {meters?.items.map((meter) => (
+                      <SelectItem key={meter.id} value={meter.id}>
+                        {meter.name}
+                      </SelectItem>
+                    ))}
+                  </SelectContent>
+                </Select>
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )
+        }}
+      />
+
+      <FormField
+        control={control}
+        name="properties.credits"
+        rules={{
+          min: 0,
+          required: true,
+        }}
+        render={({ field }) => {
+          return (
+            <FormItem className="flex flex-col gap-y-2">
+              <div className="flex flex-col gap-y-2">
+                <FormLabel>Credits</FormLabel>
+                <FormDescription>
+                  A preset amount of units that will be deducted from the total
+                  usage every period
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Input {...field} placeholder="500" />
+              </FormControl>
+              <FormMessage />
+            </FormItem>
+          )
+        }}
+      />
+
+      <FormField
+        control={control}
+        name="properties.aggregation"
+        rules={{
+          required: true,
+        }}
+        render={({ field }) => {
+          const triggerClassName =
+            'dark:data-[state=active]:bg-polar-900 data-[state=active]:bg-white w-full'
+
+          return (
+            <FormItem className="flex flex-col gap-y-2">
+              <div className="flex flex-col gap-y-2">
+                <FormLabel>Aggregation Type</FormLabel>
+                <FormDescription>
+                  Aggregation type to use when calculating usage
+                </FormDescription>
+              </div>
+              <FormControl>
+                <Tabs
+                  {...field}
+                  onValueChange={field.onChange}
+                  value={aggregationType}
+                >
+                  <TabsList className="dark:bg-polar-800 w-full rounded-full bg-gray-100">
+                    <TabsTrigger className={triggerClassName} value="sum">
+                      Sum
+                    </TabsTrigger>
+                    <TabsTrigger className={triggerClassName} value="count">
+                      Count
+                    </TabsTrigger>
+                  </TabsList>
+                </Tabs>
+              </FormControl>
+            </FormItem>
+          )
+        }}
+      />
+    </>
+  )
+}
diff --git a/clients/apps/web/src/components/Benefit/utils.tsx b/clients/apps/web/src/components/Benefit/utils.tsx
index 04739fe301..6b9b9e01d9 100644
--- a/clients/apps/web/src/components/Benefit/utils.tsx
+++ b/clients/apps/web/src/components/Benefit/utils.tsx
@@ -40,8 +40,10 @@ export const resolveBenefitIcon = (
   return resolveBenefitCategoryIcon(benefit?.type, fontSize, className)
 }
 
-export const resolveBenefitTypeDisplayName = (type: BenefitType) => {
+export const resolveBenefitTypeDisplayName = (type: BenefitType | 'usage') => {
   switch (type) {
+    case 'usage':
+      return 'Usage'
     case BenefitType.ADS:
       return 'Advertisement Spot'
     case BenefitType.DISCORD:
@@ -84,7 +86,8 @@ export const DiscordIcon = ({
 
 export const benefitsDisplayNames: {
   [key in BenefitType]: string
-} = {
+} & { usage: string } = {
+  usage: 'Usage',
   [BenefitType.LICENSE_KEYS]: 'License Keys',
   [BenefitType.GITHUB_REPOSITORY]: 'GitHub Repository Access',
   [BenefitType.DISCORD]: 'Discord Invite',
diff --git a/clients/apps/web/src/components/Customer/CreateCustomerModal.tsx b/clients/apps/web/src/components/Customer/CreateCustomerModal.tsx
index 1852b38f1a..3eca997527 100644
--- a/clients/apps/web/src/components/Customer/CreateCustomerModal.tsx
+++ b/clients/apps/web/src/components/Customer/CreateCustomerModal.tsx
@@ -19,6 +19,11 @@ import {
 } from '@polar-sh/ui/components/ui/form'
 import { useForm } from 'react-hook-form'
 import { toast } from '../Toast/use-toast'
+import { CustomerMetadataForm } from './CustomerMetadataForm'
+
+export type CustomerCreateForm = Omit<CustomerCreate, 'metadata'> & {
+  metadata: { key: string; value: string | number | boolean }[]
+}
 
 export const CreateCustomerModal = ({
   organization,
@@ -27,17 +32,25 @@ export const CreateCustomerModal = ({
   organization: Organization
   onClose: () => void
 }) => {
-  const form = useForm<CustomerCreate>({
+  const form = useForm<CustomerCreateForm>({
     defaultValues: {
       organization_id: organization.id,
-      metadata: {},
+      metadata: [],
     },
   })
   const createCustomer = useCreateCustomer(organization.id)
 
-  const handleCreateCustomer = (customerCreate: CustomerCreate) => {
+  const handleCreateCustomer = (customerCreate: CustomerCreateForm) => {
+    const data = {
+      ...customerCreate,
+      metadata: customerCreate.metadata?.reduce(
+        (acc, { key, value }) => ({ ...acc, [key]: value }),
+        {},
+      ),
+    }
+
     createCustomer
-      .mutateAsync(customerCreate)
+      .mutateAsync(data)
       .then(async (customer) => {
         toast({
           title: 'Customer Created',
@@ -113,6 +126,11 @@ export const CreateCustomerModal = ({
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="metadata"
+              render={() => <CustomerMetadataForm />}
+            />
           </div>
           <Button type="submit" className="self-start">
             Create Customer
diff --git a/clients/apps/web/src/components/Customer/CustomerContextView.tsx b/clients/apps/web/src/components/Customer/CustomerContextView.tsx
index 0cafe8d4b1..64c48e365a 100644
--- a/clients/apps/web/src/components/Customer/CustomerContextView.tsx
+++ b/clients/apps/web/src/components/Customer/CustomerContextView.tsx
@@ -2,6 +2,7 @@ import { useMetrics } from '@/hooks/queries/metrics'
 import { MaintainerOrganizationContext } from '@/providers/maintainerOrganization'
 import { api } from '@/utils/api'
 import { CONFIG } from '@/utils/config'
+import { AddOutlined } from '@mui/icons-material'
 import { Customer, CustomerSession } from '@polar-sh/api'
 import Avatar from '@polar-sh/ui/components/atoms/Avatar'
 import Button from '@polar-sh/ui/components/atoms/Button'
@@ -12,6 +13,7 @@ import { PropsWithChildren, useCallback, useContext, useState } from 'react'
 import { InlineModal } from '../Modal/InlineModal'
 import { useModal } from '../Modal/useModal'
 import AmountLabel from '../Shared/AmountLabel'
+import { DetailRow } from '../Shared/DetailRow'
 import { toast } from '../Toast/use-toast'
 import { EditCustomerModal } from './EditCustomerModal'
 
@@ -149,6 +151,22 @@ export const CustomerContextView = ({ customer }: CustomerContextViewProps) => {
           </p>
         )}
       </div>
+      <div className="flex flex-col gap-4">
+        <div className="flex flex-row items-center justify-between gap-2">
+          <h3 className="text-lg">Metadata</h3>
+          <Button className="h-8 w-8" variant="secondary" onClick={showModal}>
+            <AddOutlined />
+          </Button>
+        </div>
+        {Object.entries(customer.metadata).map(([key, value]) => (
+          <DetailRow
+            key={key}
+            label={key}
+            value={value}
+            valueClassName="dark:bg-polar-800 bg-gray-100"
+          />
+        ))}
+      </div>
       <InlineModal
         isShown={isModalShown}
         hide={hideModal}
diff --git a/clients/apps/web/src/components/Customer/CustomerMetadataForm.tsx b/clients/apps/web/src/components/Customer/CustomerMetadataForm.tsx
new file mode 100644
index 0000000000..db44cdd143
--- /dev/null
+++ b/clients/apps/web/src/components/Customer/CustomerMetadataForm.tsx
@@ -0,0 +1,94 @@
+import { FormField } from '@polar-sh/ui/components/ui/form'
+
+import { ClearOutlined } from '@mui/icons-material'
+import Button from '@polar-sh/ui/components/atoms/Button'
+import Input from '@polar-sh/ui/components/atoms/Input'
+import {
+  FormControl,
+  FormItem,
+  FormLabel,
+  FormMessage,
+} from '@polar-sh/ui/components/ui/form'
+import { useFieldArray, useFormContext } from 'react-hook-form'
+import { CustomerCreateForm } from './CreateCustomerModal'
+import { CustomerUpdateForm } from './EditCustomerModal'
+
+export const CustomerMetadataForm = () => {
+  const { control } = useFormContext<CustomerCreateForm | CustomerUpdateForm>()
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'metadata',
+    rules: {
+      maxLength: 50,
+    },
+  })
+
+  return (
+    <FormItem>
+      <div className="flex flex-row items-center justify-between gap-2 py-2">
+        <FormLabel>Metadata</FormLabel>
+        <Button
+          size="sm"
+          variant="secondary"
+          className="self-start"
+          type="button"
+          onClick={() => {
+            append({ key: '', value: '' })
+          }}
+        >
+          Add Metadata
+        </Button>
+      </div>
+      <div className="flex flex-col gap-2">
+        {fields.map((field, index) => (
+          <div key={field.id} className="flex flex-row items-center gap-2">
+            <FormField
+              control={control}
+              name={`metadata.${index}.key`}
+              render={({ field }) => (
+                <>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value || ''}
+                      placeholder="Key"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </>
+              )}
+            />
+            <FormField
+              control={control}
+              name={`metadata.${index}.value`}
+              render={({ field }) => (
+                <>
+                  <FormControl>
+                    <Input
+                      {...field}
+                      value={field.value.toString() || ''}
+                      placeholder="Value"
+                    />
+                  </FormControl>
+                  <FormMessage />
+                </>
+              )}
+            />
+            <Button
+              className={
+                'border-none bg-transparent text-[16px] opacity-50 transition-opacity hover:opacity-100 dark:bg-transparent'
+              }
+              size="icon"
+              variant="secondary"
+              type="button"
+              onClick={() => remove(index)}
+            >
+              <ClearOutlined fontSize="inherit" />
+            </Button>
+          </div>
+        ))}
+      </div>
+    </FormItem>
+  )
+}
diff --git a/clients/apps/web/src/components/Customer/CustomerUsageView.tsx b/clients/apps/web/src/components/Customer/CustomerUsageView.tsx
new file mode 100644
index 0000000000..4c16925d55
--- /dev/null
+++ b/clients/apps/web/src/components/Customer/CustomerUsageView.tsx
@@ -0,0 +1,106 @@
+import { Interval, MetricType } from '@polar-sh/api'
+
+import { Meter, MeterEvent } from '@/app/api/meters/data'
+import { MeterChart } from '@/components/Meter/MeterChart'
+import { useMeterEvents, useMeters } from '@/hooks/queries/meters'
+import { Customer } from '@polar-sh/api'
+import Button from '@polar-sh/ui/components/atoms/Button'
+import ShadowBox from '@polar-sh/ui/components/atoms/ShadowBox'
+import { Status } from '@polar-sh/ui/components/atoms/Status'
+import { TabsContent } from '@polar-sh/ui/components/atoms/Tabs'
+import { twMerge } from 'tailwind-merge'
+import AmountLabel from '../Shared/AmountLabel'
+
+export const CustomerUsageView = ({ customer }: { customer: Customer }) => {
+  const { data: meters } = useMeters(customer.organization_id)
+
+  console.log(meters)
+
+  return (
+    <TabsContent value="usage" className="flex flex-col gap-y-12">
+      <div className="flex flex-col gap-y-8">
+        {meters?.items.map((meter) => (
+          <CustomerMeter key={meter.id} meter={meter} />
+        ))}
+      </div>
+    </TabsContent>
+  )
+}
+
+const CustomerMeter = ({ meter }: { meter: Meter }) => {
+  const { data: meterEvents } = useMeterEvents(meter?.slug)
+
+  const mockedMeterData = Array.from({ length: 7 }, (_, i) => {
+    const date = new Date()
+    date.setDate(date.getDate() - i)
+    return {
+      timestamp: date,
+      usage:
+        meterEvents?.items
+          .filter((event: MeterEvent) => {
+            const eventDate = new Date(event.created_at)
+            return eventDate.toDateString() === date.toDateString()
+          })
+          .reduce(
+            (total: number, event: MeterEvent) => total + event.value,
+            0,
+          ) ?? 0,
+    }
+  }).reverse()
+
+  if (!meter) return null
+
+  return (
+    <ShadowBox className="flex flex-row gap-x-8 p-4">
+      <div className="dark:bg-polar-800 flex w-full max-w-xs flex-col justify-between gap-y-6 rounded-3xl bg-white p-8">
+        <div className="flex flex-col gap-y-4">
+          <div className="flex flex-row items-center gap-x-4">
+            <h2 className="text-xl">{meter.name}</h2>
+            <Status
+              className={twMerge(
+                'w-fit capitalize',
+                meter?.status === 'active'
+                  ? 'bg-emerald-100 text-emerald-500 dark:bg-emerald-950'
+                  : 'bg-red-100 text-red-500 dark:bg-red-950',
+              )}
+              status={meter?.status}
+            />
+          </div>
+          <div className="flex flex-col gap-y-1">
+            <span className="dark:text-polar-500 text-sm text-gray-500">
+              Last 7 Days
+            </span>
+            <h3 className="text-xl">{meter.value}</h3>
+          </div>
+          <div className="flex flex-col gap-y-1">
+            <span className="dark:text-polar-500 text-sm text-gray-500">
+              Credits Remaining
+            </span>
+            <h3 className="text-xl">{Math.max(0, 100 - meter.value)}</h3>
+          </div>
+          <div className="flex flex-col gap-y-1">
+            <span className="dark:text-polar-500 text-sm text-gray-500">
+              Overage
+            </span>
+            <h3 className="text-xl">
+              <AmountLabel amount={0} currency="USD" />
+            </h3>
+          </div>
+        </div>
+        <div className="flex flex-row items-center gap-x-2">
+          <Button>View Events</Button>
+          <Button variant="ghost">Revoke Access</Button>
+        </div>
+      </div>
+      <MeterChart
+        data={mockedMeterData}
+        interval={Interval.DAY}
+        metric={{
+          display_name: 'Usage',
+          slug: 'usage',
+          type: MetricType.SCALAR,
+        }}
+      />
+    </ShadowBox>
+  )
+}
diff --git a/clients/apps/web/src/components/Customer/EditCustomerModal.tsx b/clients/apps/web/src/components/Customer/EditCustomerModal.tsx
index 4e0777dc51..c56d83d9ad 100644
--- a/clients/apps/web/src/components/Customer/EditCustomerModal.tsx
+++ b/clients/apps/web/src/components/Customer/EditCustomerModal.tsx
@@ -12,6 +12,11 @@ import {
 } from '@polar-sh/ui/components/ui/form'
 import { useForm } from 'react-hook-form'
 import { toast } from '../Toast/use-toast'
+import { CustomerMetadataForm } from './CustomerMetadataForm'
+
+export type CustomerUpdateForm = Omit<CustomerUpdate, 'metadata'> & {
+  metadata: { key: string; value: string | number | boolean }[]
+}
 
 export const EditCustomerModal = ({
   customer,
@@ -20,10 +25,14 @@ export const EditCustomerModal = ({
   customer: Customer
   onClose: () => void
 }) => {
-  const form = useForm<CustomerUpdate>({
+  const form = useForm<CustomerUpdateForm>({
     defaultValues: {
       name: customer.name || '',
       email: customer.email || '',
+      metadata: Object.entries(customer.metadata).map(([key, value]) => ({
+        key,
+        value,
+      })),
     },
   })
 
@@ -32,9 +41,17 @@ export const EditCustomerModal = ({
     customer.organization_id,
   )
 
-  const handleUpdateCustomer = (customerUpdate: CustomerUpdate) => {
+  const handleUpdateCustomer = (customerUpdate: CustomerUpdateForm) => {
+    const data = {
+      ...customerUpdate,
+      metadata: customerUpdate.metadata?.reduce(
+        (acc, { key, value }) => ({ ...acc, [key]: value }),
+        {},
+      ),
+    }
+
     updateCustomer
-      .mutateAsync(customerUpdate)
+      .mutateAsync(data)
       .then(async (customer) => {
         toast({
           title: 'Customer Updated',
@@ -95,6 +112,11 @@ export const EditCustomerModal = ({
                 </FormItem>
               )}
             />
+            <FormField
+              control={form.control}
+              name="metadata"
+              render={() => <CustomerMetadataForm />}
+            />
           </div>
           <Button type="submit" className="self-start">
             Save Customer
diff --git a/clients/apps/web/src/components/Meter/MeterDetails.tsx b/clients/apps/web/src/components/Meter/MeterDetails.tsx
index c11d16e272..6747507c53 100644
--- a/clients/apps/web/src/components/Meter/MeterDetails.tsx
+++ b/clients/apps/web/src/components/Meter/MeterDetails.tsx
@@ -2,41 +2,14 @@
 
 import { Meter } from '@/app/api/meters/data'
 import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
-import { twMerge } from 'tailwind-merge'
 import CopyToClipboardButton from '../CopyToClipboardButton/CopyToClipboardButton'
+import { DetailRow } from '../Shared/DetailRow'
 import { toast } from '../Toast/use-toast'
 
-export const MeterDetail = ({
-  label,
-  value,
-  valueClassName = '',
-  action,
-}: {
-  label: string
-  value: React.ReactNode
-  action?: React.ReactNode
-  valueClassName?: string
-}) => {
-  return (
-    <div className="flex flex-row items-baseline justify-between gap-x-4 text-sm">
-      <h3 className="dark:text-polar-500 flex-1 text-gray-500">{label}</h3>
-      <span
-        className={twMerge(
-          'dark:hover:bg-polar-800 group flex flex-1 flex-row items-center justify-between gap-x-2 rounded-md px-2.5 py-1 transition-colors duration-75 hover:bg-gray-100',
-          valueClassName,
-        )}
-      >
-        {value}
-        <span className="opacity-0 group-hover:opacity-100">{action}</span>
-      </span>
-    </div>
-  )
-}
-
 export const MeterDetails = ({ meter }: { meter: Meter }) => {
   return (
     <div className="flex flex-col">
-      <MeterDetail
+      <DetailRow
         label="ID"
         value={meter.id}
         action={
@@ -51,7 +24,7 @@ export const MeterDetails = ({ meter }: { meter: Meter }) => {
           />
         }
       />
-      <MeterDetail
+      <DetailRow
         label="Name"
         value={meter.name}
         action={
@@ -66,7 +39,7 @@ export const MeterDetails = ({ meter }: { meter: Meter }) => {
           />
         }
       />
-      <MeterDetail
+      <DetailRow
         label="Slug"
         value={meter.slug}
         action={
@@ -81,16 +54,16 @@ export const MeterDetails = ({ meter }: { meter: Meter }) => {
           />
         }
       />
-      <MeterDetail
+      <DetailRow
         label="Aggregation Type"
         value={meter.aggregation_type}
         valueClassName="capitalize"
       />
-      <MeterDetail
+      <DetailRow
         label="Created At"
         value={<FormattedDateTime datetime={meter.created_at} />}
       />
-      <MeterDetail
+      <DetailRow
         label="Updated At"
         value={<FormattedDateTime datetime={meter.updated_at} />}
       />
diff --git a/clients/apps/web/src/components/Shared/AmountLabel.tsx b/clients/apps/web/src/components/Shared/AmountLabel.tsx
index b5037d07af..2edb10a19b 100644
--- a/clients/apps/web/src/components/Shared/AmountLabel.tsx
+++ b/clients/apps/web/src/components/Shared/AmountLabel.tsx
@@ -6,12 +6,14 @@ interface AmountLabelProps {
   amount: number
   currency: string
   interval?: SubscriptionRecurringInterval
+  minimumFractionDigits?: number
 }
 
 const AmountLabel: React.FC<AmountLabelProps> = ({
   amount,
   currency,
   interval,
+  minimumFractionDigits = 0,
 }) => {
   const intervalDisplay = useMemo(() => {
     if (!interval) {
@@ -29,7 +31,7 @@ const AmountLabel: React.FC<AmountLabelProps> = ({
 
   return (
     <div className="flex flex-row items-baseline">
-      {formatCurrencyAndAmount(amount, currency, 0)}
+      {formatCurrencyAndAmount(amount, currency, minimumFractionDigits)}
       <span className="text-[0.5em]">{intervalDisplay}</span>
     </div>
   )
diff --git a/clients/apps/web/src/components/Shared/DetailRow.tsx b/clients/apps/web/src/components/Shared/DetailRow.tsx
new file mode 100644
index 0000000000..d8dde250b5
--- /dev/null
+++ b/clients/apps/web/src/components/Shared/DetailRow.tsx
@@ -0,0 +1,30 @@
+import { twMerge } from 'tailwind-merge'
+
+export interface DetailRowProps {
+  label: string
+  value: React.ReactNode
+  action?: React.ReactNode
+  valueClassName?: string
+}
+
+export const DetailRow = ({
+  label,
+  value,
+  valueClassName = '',
+  action,
+}: DetailRowProps) => {
+  return (
+    <div className="flex flex-row items-baseline justify-between gap-x-4 text-sm">
+      <h3 className="dark:text-polar-500 flex-1 text-gray-500">{label}</h3>
+      <span
+        className={twMerge(
+          'dark:hover:bg-polar-800 group flex flex-1 flex-row items-center justify-between gap-x-2 rounded-md px-2.5 py-1 transition-colors duration-75 hover:bg-gray-100',
+          valueClassName,
+        )}
+      >
+        {value}
+        <span className="opacity-0 group-hover:opacity-100">{action}</span>
+      </span>
+    </div>
+  )
+}