diff --git a/clients/apps/web/src/components/Customer/CustomerUsageView.tsx b/clients/apps/web/src/components/Customer/CustomerUsageView.tsx
index 4792356057..0bef504afd 100644
--- a/clients/apps/web/src/components/Customer/CustomerUsageView.tsx
+++ b/clients/apps/web/src/components/Customer/CustomerUsageView.tsx
@@ -1,13 +1,6 @@
-import { Meter, MeterEvent } from '@/app/api/meters/data'
-import { MeterChart } from '@/components/Meter/MeterChart'
-import { useMeterEvents, useMeters } from '@/hooks/queries/meters'
-import { Customer, MetricType, TimeInterval } 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 { useMeters } from '@/hooks/queries/meters'
+import { Customer, Meter } from '@polar-sh/api'
 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)
@@ -24,79 +17,73 @@ export const CustomerUsageView = ({ customer }: { customer: Customer }) => {
 }
 
 const CustomerMeter = ({ meter }: { meter: Meter }) => {
-  const { data: meterEvents } = useMeterEvents(meter?.slug)
+  // const { data } = useMeterEvents(meter.id)
+  // const meterEvents = useMemo(() => {
+  //   if (!data) return []
+  //   return data.pages.flatMap((page) => page.items)
+  // }, [data])
 
-  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()
+  // const mockedMeterData = Array.from({ length: 7 }, (_, i) => {
+  //   const date = new Date()
+  //   date.setDate(date.getDate() - i)
+  //   return {
+  //     timestamp: date,
+  //     usage:
+  //       meterEvents
+  //         .filter((event) => {
+  //           const eventDate = new Date(event.timestamp)
+  //           return eventDate.toDateString() === date.toDateString()
+  //         })
+  //         .reduce((total: number, event) => 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={TimeInterval.DAY}
-        metric={{
-          display_name: 'Usage',
-          slug: 'usage',
-          type: MetricType.SCALAR,
-        }}
-      />
-    </ShadowBox>
-  )
+  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>
+  //         </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={TimeInterval.DAY}
+  //       metric={{
+  //         display_name: 'Usage',
+  //         slug: 'usage',
+  //         type: MetricType.SCALAR,
+  //       }}
+  //     />
+  //   </ShadowBox>
+  // )
 }
diff --git a/clients/apps/web/src/components/Meter/MeterContextView.tsx b/clients/apps/web/src/components/Meter/MeterContextView.tsx
index 51031cb52a..e23db8faf4 100644
--- a/clients/apps/web/src/components/Meter/MeterContextView.tsx
+++ b/clients/apps/web/src/components/Meter/MeterContextView.tsx
@@ -1,6 +1,6 @@
-import { Meter } from '@/app/api/meters/data'
 import { MeterDetails } from '@/components/Meter/MeterDetails'
 import { AddOutlined } from '@mui/icons-material'
+import { Meter } from '@polar-sh/api'
 import Button from '@polar-sh/ui/components/atoms/Button'
 import { List, ListItem } from '@polar-sh/ui/components/atoms/List'
 import { useTheme } from 'next-themes'
@@ -48,6 +48,7 @@ export interface MeterContextViewProps {
 
 export const MeterContextView = ({ meter }: MeterContextViewProps) => {
   const { resolvedTheme } = useTheme()
+  const value = 4342
 
   return (
     <div className="flex flex-col gap-y-8 overflow-y-auto px-8 py-12">
@@ -100,13 +101,13 @@ export const MeterContextView = ({ meter }: MeterContextViewProps) => {
                     className="absolute left-0 top-0 h-full w-full -rotate-90"
                     viewBox="0 0 36 36"
                   >
-                    {(meter.value / alert.threshold) * 100 >= 100 && (
+                    {(value / alert.threshold) * 100 >= 100 && (
                       <circle
                         cx="18"
                         cy="18"
                         r="1"
                         fill={
-                          (meter.value / alert.threshold) * 100 >= 100
+                          (value / alert.threshold) * 100 >= 100
                             ? 'rgb(52, 211, 153)'
                             : 'rgb(96, 165, 250)'
                         }
@@ -129,11 +130,11 @@ export const MeterContextView = ({ meter }: MeterContextViewProps) => {
                       cy="18"
                       r="8"
                       stroke={
-                        (meter.value / alert.threshold) * 100 >= 100
+                        (value / alert.threshold) * 100 >= 100
                           ? 'rgb(52, 211, 153)'
                           : 'rgb(96, 165, 250)'
                       }
-                      strokeDasharray={`${Math.round((meter.value / alert.threshold) * 100)}, 100`}
+                      strokeDasharray={`${Math.round((value / alert.threshold) * 100)}, 100`}
                       strokeWidth="3"
                       fill="none"
                     />
diff --git a/clients/apps/web/src/components/Meter/MeterDetails.tsx b/clients/apps/web/src/components/Meter/MeterDetails.tsx
index 0e15f426d1..edc5edcc5f 100644
--- a/clients/apps/web/src/components/Meter/MeterDetails.tsx
+++ b/clients/apps/web/src/components/Meter/MeterDetails.tsx
@@ -1,6 +1,6 @@
 'use client'
 
-import { Meter } from '@/app/api/meters/data'
+import { Meter } from '@polar-sh/api'
 import FormattedDateTime from '@polar-sh/ui/components/atoms/FormattedDateTime'
 import CopyToClipboardButton from '../CopyToClipboardButton/CopyToClipboardButton'
 import { DetailRow } from '../Shared/DetailRow'
diff --git a/clients/apps/web/src/components/Meter/MeterGetStarted.tsx b/clients/apps/web/src/components/Meter/MeterGetStarted.tsx
index 8f8ddebc36..4abecd5389 100644
--- a/clients/apps/web/src/components/Meter/MeterGetStarted.tsx
+++ b/clients/apps/web/src/components/Meter/MeterGetStarted.tsx
@@ -1,4 +1,4 @@
-import { Meter } from '@/app/api/meters/data'
+import { Meter } from '@polar-sh/api'
 import {
   SyntaxHighlighterClient,
   SyntaxHighlighterProvider,
@@ -8,7 +8,7 @@ export interface MeterGetStartedProps {
   meter: Meter
 }
 
-export const MeterGetStarted = ({ meter }: MeterGetStartedProps) => {
+export const MeterGetStarted = ({}: MeterGetStartedProps) => {
   return (
     <div className="dark:bg-polar-800 dark:border-polar-700 flex flex-col gap-y-4 rounded-2xl border border-gray-200 bg-gray-100 p-6">
       <div className="flex flex-col gap-y-2">
@@ -20,17 +20,7 @@ export const MeterGetStarted = ({ meter }: MeterGetStartedProps) => {
       </div>
       <pre className="dark:bg-polar-900 rounded-lg bg-white p-4 font-mono text-sm">
         <SyntaxHighlighterProvider>
-          <SyntaxHighlighterClient
-            lang="typescript"
-            code={`import { Usage } from "@polar-sh/nextjs";
-              
-export const POST = Usage()
-  .model(openai("gpt-4o-mini"))
-  .customer(async (req) => req.headers.get("X-Polar-Customer-Id") ?? "")
-  .increment("${meter.slug}", (ctx) => ctx.usage.promptTokens)
-  .handler(async (req, res, model) => /** Handle request and model as usual */);
-`}
-          />
+          <SyntaxHighlighterClient lang="typescript" code={`TBD`} />
         </SyntaxHighlighterProvider>
       </pre>
     </div>