diff --git a/packages/www/components/UsageSummary/index.tsx b/packages/www/components/UsageSummary/index.tsx
index df81d43b0..5b62253f2 100644
--- a/packages/www/components/UsageSummary/index.tsx
+++ b/packages/www/components/UsageSummary/index.tsx
@@ -18,11 +18,7 @@ import { useApi } from "hooks";
 import { products } from "@livepeer.studio/api/src/config";
 import { QuestionMarkCircledIcon as Help } from "@radix-ui/react-icons";
 import { useJune, events } from "hooks/use-june";
-
-const StyledUpcomingIcon = styled(UpcomingIcon, {
-  mr: "$2",
-  color: "$gray",
-});
+import { Card, CardContent, CardHeader, CardTitle } from "components/ui/card";
 
 export interface OverUsageBill {
   transcodingBill: OverUsageItem;
@@ -37,40 +33,23 @@ export interface OverUsageItem {
 
 export const UsageCard = ({ title, usage, limit, loading = false }) => {
   return (
-    <Box
-      css={{
-        px: "$5",
-        py: "$4",
-        boxShadow: "0 0 0 1px $colors$neutral6",
-        borderRadius: "$1",
-        backgroundColor: "$neutral2",
-        color: "$hiContrast",
-        mb: "$6",
-        minHeight: 92,
-      }}>
+    <Card>
       {loading ? (
-        <Box
-          css={{
-            display: "flex",
-            fd: "column",
-            gap: "$3",
-          }}>
-          <Skeleton variant="heading" css={{ width: "25%" }} />
-          <Skeleton variant="title" css={{ width: "50%", mr: "$3" }} />
-        </Box>
+        <div className="flex flex-col gap-3">
+          <Skeleton variant="heading" className="w-1/4" />
+          <Skeleton variant="title" className="w-1/2 mr-4" />
+        </div>
       ) : (
         <>
-          <Flex align="center">
-            <Box css={{ mb: "$2", mr: "$3", color: "$hiContrast" }}>
-              {title}
-            </Box>
-          </Flex>
-          <Flex align="center" css={{ fontSize: "$6" }}>
-            <Box css={{ fontWeight: 700 }}>{usage}</Box>
-          </Flex>
+          <CardHeader>
+            <CardTitle className="text-lg  ">{title}</CardTitle>
+          </CardHeader>
+          <CardContent className="-mt-3 font-medium">
+            <p>{usage} minutes</p>
+          </CardContent>
         </>
       )}
-    </Box>
+    </Card>
   );
 };
 
@@ -87,7 +66,7 @@ const UsageSummary = () => {
   const [subscription, setSubscription] = useState(null);
   const [invoices, setInvoices] = useState(null);
   const [overUsageBill, setOverUsageBill] = useState<OverUsageBill | null>(
-    null,
+    null
   );
   const [upcomingInvoiceTotal, setUpcomingInvoiceTotal] = useState(0);
   const [upcomingInvoice, setUpcomingInvoice] = useState<any>(null);
@@ -134,7 +113,7 @@ const UsageSummary = () => {
       doGetUsage(
         subscription?.current_period_start,
         subscription?.current_period_end,
-        subscription?.status,
+        subscription?.status
       );
     };
 
@@ -160,7 +139,7 @@ const UsageSummary = () => {
         TotalUsageMins: Math.max(usage?.TotalUsageMins - limits.transcoding, 0),
         DeliveryUsageMins: Math.max(
           usage?.DeliveryUsageMins - limits.streaming,
-          0,
+          0
         ),
         StorageUsageMins: Math.max(usage?.StorageUsageMins - limits.storage, 0),
       };
@@ -176,8 +155,8 @@ const UsageSummary = () => {
           units: overusage.TotalUsageMins,
           total: Number(
             (overusage.TotalUsageMins * payAsYouGoData.usage[0].price).toFixed(
-              2,
-            ),
+              2
+            )
           ),
         },
         deliveryBill: {
@@ -185,7 +164,7 @@ const UsageSummary = () => {
           total: Number(
             (
               overusage.DeliveryUsageMins * payAsYouGoData.usage[1].price
-            ).toFixed(2),
+            ).toFixed(2)
           ),
         },
         storageBill: {
@@ -193,7 +172,7 @@ const UsageSummary = () => {
           total: Number(
             (
               overusage.StorageUsageMins * payAsYouGoData.usage[2].price
-            ).toFixed(2),
+            ).toFixed(2)
           ),
         },
       };
@@ -263,14 +242,14 @@ const UsageSummary = () => {
           {subscription && (
             <Flex>
               {new Date(
-                subscription.current_period_start * 1000,
+                subscription.current_period_start * 1000
               ).toLocaleDateString("en-US", {
                 month: "short",
                 day: "numeric",
               })}{" "}
               to{" "}
               {new Date(
-                subscription.current_period_end * 1000,
+                subscription.current_period_end * 1000
               ).toLocaleDateString("en-US", {
                 month: "short",
                 day: "numeric",
diff --git a/packages/www/components/ui/card.tsx b/packages/www/components/ui/card.tsx
new file mode 100644
index 000000000..3c0ac8edd
--- /dev/null
+++ b/packages/www/components/ui/card.tsx
@@ -0,0 +1,82 @@
+import * as React from "react";
+
+import { cn } from "lib/cn";
+
+const Card = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn(
+      "rounded-lg border border-border  text-card-foreground shadow-sm",
+      className
+    )}
+    {...props}
+  />
+));
+Card.displayName = "Card";
+
+const CardHeader = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex flex-col space-y-1.5 p-6", className)}
+    {...props}
+  />
+));
+CardHeader.displayName = "CardHeader";
+
+const CardTitle = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLHeadingElement>
+>(({ className, ...props }, ref) => (
+  <h3
+    ref={ref}
+    className={cn(
+      "text-xl font-semibold leading-none tracking-tight",
+      className
+    )}
+    {...props}
+  />
+));
+CardTitle.displayName = "CardTitle";
+
+const CardDescription = React.forwardRef<
+  HTMLParagraphElement,
+  React.HTMLAttributes<HTMLParagraphElement>
+>(({ className, ...props }, ref) => (
+  <p ref={ref} className={cn("text-sm text-muted", className)} {...props} />
+));
+CardDescription.displayName = "CardDescription";
+
+const CardContent = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div ref={ref} className={cn("p-6 pt-0", className)} {...props} />
+));
+CardContent.displayName = "CardContent";
+
+const CardFooter = React.forwardRef<
+  HTMLDivElement,
+  React.HTMLAttributes<HTMLDivElement>
+>(({ className, ...props }, ref) => (
+  <div
+    ref={ref}
+    className={cn("flex items-center p-6 pt-0", className)}
+    {...props}
+  />
+));
+CardFooter.displayName = "CardFooter";
+
+export {
+  Card,
+  CardHeader,
+  CardFooter,
+  CardTitle,
+  CardDescription,
+  CardContent,
+};
diff --git a/packages/www/components/ui/chart.tsx b/packages/www/components/ui/chart.tsx
new file mode 100644
index 000000000..1ae71984e
--- /dev/null
+++ b/packages/www/components/ui/chart.tsx
@@ -0,0 +1,370 @@
+import * as React from "react";
+import * as RechartsPrimitive from "recharts";
+
+import { cn } from "lib/cn";
+import { Payload } from "recharts/types/component/DefaultLegendContent";
+
+// Format: { THEME_NAME: CSS_SELECTOR }
+const THEMES = { light: "", dark: ".dark" } as const;
+
+export type ChartConfig = {
+  [k in string]: {
+    label?: React.ReactNode;
+    icon?: React.ComponentType;
+  } & (
+    | { color?: string; theme?: never }
+    | { color?: never; theme: Record<keyof typeof THEMES, string> }
+  );
+};
+
+type ChartContextProps = {
+  config: ChartConfig;
+};
+
+const ChartContext = React.createContext<ChartContextProps | null>(null);
+
+function useChart() {
+  const context = React.useContext(ChartContext);
+
+  if (!context) {
+    throw new Error("useChart must be used within a <ChartContainer />");
+  }
+
+  return context;
+}
+
+const ChartContainer = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> & {
+    config: ChartConfig;
+    children: React.ComponentProps<
+      typeof RechartsPrimitive.ResponsiveContainer
+    >["children"];
+  }
+>(({ id, className, children, config, ...props }, ref) => {
+  const uniqueId = React.useId();
+  const chartId = `chart-${id || uniqueId.replace(/:/g, "")}`;
+
+  return (
+    <ChartContext.Provider value={{ config }}>
+      <div
+        data-chart={chartId}
+        ref={ref}
+        className={cn(
+          "flex aspect-video justify-center text-xs [&_.recharts-cartesian-axis-tick_text]:fill-muted-foreground [&_.recharts-cartesian-grid_line]:stroke-border/50 [&_.recharts-curve.recharts-tooltip-cursor]:stroke-border [&_.recharts-dot[stroke='#fff']]:stroke-transparent [&_.recharts-layer]:outline-none [&_.recharts-polar-grid_[stroke='#ccc']]:stroke-border [&_.recharts-radial-bar-background-sector]:fill-muted [&_.recharts-rectangle.recharts-tooltip-cursor]:fill-muted [&_.recharts-reference-line-line]:stroke-border [&_.recharts-sector[stroke='#fff']]:stroke-transparent [&_.recharts-sector]:outline-none [&_.recharts-surface]:outline-none",
+          className
+        )}
+        {...props}>
+        <ChartStyle id={chartId} config={config} />
+        <RechartsPrimitive.ResponsiveContainer>
+          {children}
+        </RechartsPrimitive.ResponsiveContainer>
+      </div>
+    </ChartContext.Provider>
+  );
+});
+ChartContainer.displayName = "Chart";
+
+const ChartStyle = ({ id, config }: { id: string; config: ChartConfig }) => {
+  const colorConfig = Object.entries(config).filter(
+    ([_, config]) => config.theme || config.color
+  );
+
+  if (!colorConfig.length) {
+    return null;
+  }
+
+  return (
+    <style
+      dangerouslySetInnerHTML={{
+        __html: Object.entries(THEMES)
+          .map(
+            ([theme, prefix]) => `
+${prefix} [data-chart=${id}] {
+${colorConfig
+  .map(([key, itemConfig]) => {
+    const color =
+      itemConfig.theme?.[theme as keyof typeof itemConfig.theme] ||
+      itemConfig.color;
+    return color ? `  --color-${key}: ${color};` : null;
+  })
+  .join("\n")}
+}
+`
+          )
+          .join("\n"),
+      }}
+    />
+  );
+};
+
+const ChartTooltip = RechartsPrimitive.Tooltip;
+
+const ChartTooltipContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<typeof RechartsPrimitive.Tooltip> &
+    React.ComponentProps<"div"> & {
+      hideLabel?: boolean;
+      hideIndicator?: boolean;
+      indicator?: "line" | "dot" | "dashed";
+      nameKey?: string;
+      labelKey?: string;
+    }
+>(
+  (
+    {
+      active,
+      payload,
+      className,
+      indicator = "dot",
+      hideLabel = false,
+      hideIndicator = false,
+      label,
+      labelFormatter,
+      labelClassName,
+      formatter,
+      color,
+      nameKey,
+      labelKey,
+    },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    const tooltipLabel = React.useMemo(() => {
+      if (hideLabel || !payload?.length) {
+        return null;
+      }
+
+      const [item] = payload;
+      const key = `${labelKey || item.dataKey || item.name || "value"}`;
+      const itemConfig = getPayloadConfigFromPayload(config, item, key);
+      const value =
+        !labelKey && typeof label === "string"
+          ? config[label as keyof typeof config]?.label || label
+          : itemConfig?.label;
+
+      if (labelFormatter) {
+        return (
+          <div className={cn("font-medium", labelClassName)}>
+            {labelFormatter(value, payload)}
+          </div>
+        );
+      }
+
+      if (!value) {
+        return null;
+      }
+
+      return <div className={cn("font-medium", labelClassName)}>{value}</div>;
+    }, [
+      label,
+      labelFormatter,
+      payload,
+      hideLabel,
+      labelClassName,
+      config,
+      labelKey,
+    ]);
+
+    if (!active || !payload?.length) {
+      return null;
+    }
+
+    const nestLabel = payload.length === 1 && indicator !== "dot";
+    const formatValue = (value) => {
+      if (value >= 1000) {
+        let formattedValue = (value / 1000).toFixed(1);
+        if (formattedValue.endsWith(".0")) {
+          formattedValue = formattedValue.slice(0, -2);
+        }
+        return `${formattedValue}k minutes`;
+      }
+      return `${value} minutes`;
+    };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "grid min-w-[8rem] items-start gap-1.5 rounded-lg border border-border/50 bg-background px-2.5 py-1.5 text-xs shadow-xl",
+          className
+        )}>
+        {!nestLabel ? tooltipLabel : null}
+        <div className="grid gap-1.5">
+          {payload.map((item, index) => {
+            const key = `${nameKey || item.name || item.dataKey || "value"}`;
+            const itemConfig = getPayloadConfigFromPayload(config, item, key);
+            const indicatorColor = color || item.payload.fill || item.color;
+
+            return (
+              <div
+                key={item.dataKey}
+                className={cn(
+                  "flex w-full items-stretch gap-2 [&>svg]:h-2.5 [&>svg]:w-2.5 [&>svg]:text-muted-foreground",
+                  indicator === "dot" && "items-center"
+                )}>
+                {formatter && item?.value !== undefined && item.name ? (
+                  formatter(item.value, item.name, item, index, item.payload)
+                ) : (
+                  <>
+                    {itemConfig?.icon ? (
+                      <itemConfig.icon />
+                    ) : (
+                      !hideIndicator && (
+                        <div
+                          className={cn(
+                            "shrink-0 rounded-[2px] border-[--color-border] bg-[--color-bg]",
+                            {
+                              "h-2.5 w-2.5": indicator === "dot",
+                              "w-1": indicator === "line",
+                              "w-0 border-[1.5px] border-dashed bg-transparent":
+                                indicator === "dashed",
+                              "my-0.5": nestLabel && indicator === "dashed",
+                            }
+                          )}
+                          style={
+                            {
+                              "--color-bg": indicatorColor,
+                              "--color-border": indicatorColor,
+                            } as React.CSSProperties
+                          }
+                        />
+                      )
+                    )}
+                    <div
+                      className={cn(
+                        "flex flex-1 justify-between leading-none",
+                        nestLabel ? "items-end" : "items-center"
+                      )}>
+                      {item.value && (
+                        <span className="font-mono font-medium tabular-nums text-foreground">
+                          {formatValue(item.value)}
+                        </span>
+                      )}
+                    </div>
+                  </>
+                )}
+              </div>
+            );
+          })}
+        </div>
+      </div>
+    );
+  }
+);
+ChartTooltipContent.displayName = "ChartTooltip";
+
+const ChartLegend = RechartsPrimitive.Legend;
+
+const ChartLegendContent = React.forwardRef<
+  HTMLDivElement,
+  React.ComponentProps<"div"> &
+    Pick<RechartsPrimitive.LegendProps, "payload" | "verticalAlign"> & {
+      hideIcon?: boolean;
+      nameKey?: string;
+    }
+>(
+  (
+    { className, hideIcon = false, payload, verticalAlign = "bottom", nameKey },
+    ref
+  ) => {
+    const { config } = useChart();
+
+    if (!payload?.length) {
+      return null;
+    }
+
+    type ExtendedPayload = Payload & { dataKey: string };
+
+    return (
+      <div
+        ref={ref}
+        className={cn(
+          "flex items-center justify-center gap-4",
+          verticalAlign === "top" ? "pb-3" : "pt-3",
+          className
+        )}>
+        {payload.map((item: ExtendedPayload) => {
+          const key = `${nameKey || item.dataKey || "value"}`;
+          const itemConfig = getPayloadConfigFromPayload(config, item, key);
+
+          return (
+            <div
+              key={item.value}
+              className={cn(
+                "flex items-center gap-1.5 [&>svg]:h-3 [&>svg]:w-3 [&>svg]:text-muted-foreground"
+              )}>
+              {itemConfig?.icon && !hideIcon ? (
+                <itemConfig.icon />
+              ) : (
+                <div
+                  className="h-2 w-2 shrink-0 rounded-[2px]"
+                  style={{
+                    backgroundColor: item.color,
+                  }}
+                />
+              )}
+              {itemConfig?.label}
+            </div>
+          );
+        })}
+      </div>
+    );
+  }
+);
+ChartLegendContent.displayName = "ChartLegend";
+
+// Helper to extract item config from a payload.
+function getPayloadConfigFromPayload(
+  config: ChartConfig,
+  payload: unknown,
+  key: string
+) {
+  if (typeof payload !== "object" || payload === null) {
+    return undefined;
+  }
+
+  if (
+    typeof payload === "object" &&
+    payload !== null &&
+    "payload" in payload &&
+    typeof (payload as any).payload === "object" &&
+    (payload as any).payload !== null
+  ) {
+    const payloadPayload = (payload as any).payload;
+    let configLabelKey: string = key;
+
+    if (
+      key in payload &&
+      typeof payload[key as keyof typeof payload] === "string"
+    ) {
+      configLabelKey =
+        typeof payload[key as keyof typeof payload] === "string"
+          ? (payload[key as keyof typeof payload] as string)
+          : key;
+    } else if (
+      key in payloadPayload &&
+      typeof payloadPayload[key as keyof typeof payloadPayload] === "string"
+    ) {
+      configLabelKey = payloadPayload[
+        key as keyof typeof payloadPayload
+      ] as string;
+    }
+
+    return configLabelKey in config
+      ? config[configLabelKey]
+      : config[key as keyof typeof config];
+  }
+
+  return undefined;
+}
+
+export {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+  ChartLegend,
+  ChartLegendContent,
+  ChartStyle,
+};
diff --git a/packages/www/components/ui/select.tsx b/packages/www/components/ui/select.tsx
new file mode 100644
index 000000000..e97e51ed1
--- /dev/null
+++ b/packages/www/components/ui/select.tsx
@@ -0,0 +1,152 @@
+import * as React from "react";
+import * as SelectPrimitive from "@radix-ui/react-select";
+import { Check, ChevronDown, ChevronUp } from "lucide-react";
+
+import { cn } from "lib/cn";
+
+const Select = SelectPrimitive.Root;
+
+const SelectGroup = SelectPrimitive.Group;
+
+const SelectValue = SelectPrimitive.Value;
+
+const SelectTrigger = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Trigger>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Trigger
+    ref={ref}
+    className={cn(
+      "flex h-10 w-full items-center justify-between rounded-md border border-border bg-background px-3 py-2 text-sm ring-offset-background placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:cursor-not-allowed disabled:opacity-50 [&>span]:line-clamp-1",
+      className
+    )}
+    {...props}>
+    {children}
+    <SelectPrimitive.Icon asChild>
+      <ChevronDown className="h-4 w-4 opacity-50" />
+    </SelectPrimitive.Icon>
+  </SelectPrimitive.Trigger>
+));
+SelectTrigger.displayName = SelectPrimitive.Trigger.displayName;
+
+const SelectScrollUpButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollUpButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollUpButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollUpButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}>
+    <ChevronUp className="h-4 w-4" />
+  </SelectPrimitive.ScrollUpButton>
+));
+SelectScrollUpButton.displayName = SelectPrimitive.ScrollUpButton.displayName;
+
+const SelectScrollDownButton = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.ScrollDownButton>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.ScrollDownButton>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.ScrollDownButton
+    ref={ref}
+    className={cn(
+      "flex cursor-default items-center justify-center py-1",
+      className
+    )}
+    {...props}>
+    <ChevronDown className="h-4 w-4" />
+  </SelectPrimitive.ScrollDownButton>
+));
+SelectScrollDownButton.displayName =
+  SelectPrimitive.ScrollDownButton.displayName;
+
+const SelectContent = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Content>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Content>
+>(({ className, children, position = "popper", ...props }, ref) => (
+  <SelectPrimitive.Portal>
+    <SelectPrimitive.Content
+      ref={ref}
+      className={cn(
+        "relative z-50 max-h-96 min-w-[8rem] overflow-hidden rounded-md border border-border bg-background text-popover-foreground shadow-md data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2",
+        position === "popper" &&
+          "data-[side=bottom]:translate-y-1 data-[side=left]:-translate-x-1 data-[side=right]:translate-x-1 data-[side=top]:-translate-y-1",
+        className
+      )}
+      position={position}
+      {...props}>
+      <SelectScrollUpButton />
+      <SelectPrimitive.Viewport
+        className={cn(
+          "p-1",
+          position === "popper" &&
+            "h-[var(--radix-select-trigger-height)] w-full min-w-[var(--radix-select-trigger-width)]"
+        )}>
+        {children}
+      </SelectPrimitive.Viewport>
+      <SelectScrollDownButton />
+    </SelectPrimitive.Content>
+  </SelectPrimitive.Portal>
+));
+SelectContent.displayName = SelectPrimitive.Content.displayName;
+
+const SelectLabel = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Label>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Label>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Label
+    ref={ref}
+    className={cn("py-1.5 pl-8 pr-2 text-sm font-semibold", className)}
+    {...props}
+  />
+));
+SelectLabel.displayName = SelectPrimitive.Label.displayName;
+
+const SelectItem = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Item>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Item>
+>(({ className, children, ...props }, ref) => (
+  <SelectPrimitive.Item
+    ref={ref}
+    className={cn(
+      "relative flex w-full cursor-default select-none items-center rounded-sm py-1.5 pl-8 pr-2 text-sm outline-none focus:bg-accent focus:text-accent-foreground data-[disabled]:pointer-events-none data-[disabled]:opacity-50",
+      className
+    )}
+    {...props}>
+    <span className="absolute left-2 flex h-3.5 w-3.5 items-center justify-center">
+      <SelectPrimitive.ItemIndicator>
+        <Check className="h-4 w-4" />
+      </SelectPrimitive.ItemIndicator>
+    </span>
+
+    <SelectPrimitive.ItemText>{children}</SelectPrimitive.ItemText>
+  </SelectPrimitive.Item>
+));
+SelectItem.displayName = SelectPrimitive.Item.displayName;
+
+const SelectSeparator = React.forwardRef<
+  React.ElementRef<typeof SelectPrimitive.Separator>,
+  React.ComponentPropsWithoutRef<typeof SelectPrimitive.Separator>
+>(({ className, ...props }, ref) => (
+  <SelectPrimitive.Separator
+    ref={ref}
+    className={cn("-mx-1 my-1 h-px bg-muted", className)}
+    {...props}
+  />
+));
+SelectSeparator.displayName = SelectPrimitive.Separator.displayName;
+
+export {
+  Select,
+  SelectGroup,
+  SelectValue,
+  SelectTrigger,
+  SelectContent,
+  SelectLabel,
+  SelectItem,
+  SelectSeparator,
+  SelectScrollUpButton,
+  SelectScrollDownButton,
+};
diff --git a/packages/www/css/tailwind.css b/packages/www/css/tailwind.css
index fd0529a1e..45f768f3c 100644
--- a/packages/www/css/tailwind.css
+++ b/packages/www/css/tailwind.css
@@ -4,7 +4,7 @@
 
 @layer base {
   :root {
-    --color-border: 240 5% 80%;
+    --color-border: 240 5% 90%;
     --color-background: 0 0% 98%;
     --color-foreground: 0 0% 10%;
     --color-muted: 249 4% 44%;
diff --git a/packages/www/package.json b/packages/www/package.json
index 3b41dd718..fab52eda3 100644
--- a/packages/www/package.json
+++ b/packages/www/package.json
@@ -32,6 +32,7 @@
     "@radix-ui/react-accordion": "^0.1.7-rc.7",
     "@radix-ui/react-collapsible": "^0.1.6",
     "@radix-ui/react-icons": "^1.1.1",
+    "@radix-ui/react-select": "^2.1.1",
     "@radix-ui/react-switch": "^0.0.13",
     "@radix-ui/themes": "^1.1.2",
     "@segment/snippet": "^4.9.0",
diff --git a/packages/www/pages/settings/usage/index.tsx b/packages/www/pages/settings/usage/index.tsx
index df592e019..e049de225 100644
--- a/packages/www/pages/settings/usage/index.tsx
+++ b/packages/www/pages/settings/usage/index.tsx
@@ -1,43 +1,34 @@
 import Layout from "layouts/dashboard";
 import { useApi, useLoggedIn } from "hooks";
-import {
-  Box,
-  Heading,
-  Flex,
-  Text,
-  Link as A,
-  Select,
-  Grid,
-  Tooltip as LPTooltip,
-} from "@livepeer/design-system";
-import { useEffect, useState, useCallback, useMemo } from "react";
+import { Box, Tooltip as LPTooltip } from "@livepeer/design-system";
+import { useEffect, useState } from "react";
 import { DashboardUsage as Content } from "content";
-import React, { PureComponent } from "react";
-import {
-  BarChart,
-  Bar,
-  ResponsiveContainer,
-  LineChart,
-  Line,
-  XAxis,
-  YAxis,
-  Tooltip,
-  Legend,
-} from "recharts";
+import { BarChart, Bar, XAxis, CartesianGrid, AreaChart, Area } from "recharts";
 import { UsageCard } from "components/UsageSummary";
 import { QuestionMarkCircledIcon as Help } from "@radix-ui/react-icons";
+import {
+  Card,
+  CardTitle,
+  CardHeader,
+  CardDescription,
+  CardContent,
+} from "components/ui/card";
+import {
+  ChartContainer,
+  ChartTooltip,
+  ChartTooltipContent,
+} from "components/ui/chart";
+import {
+  Select,
+  SelectContent,
+  SelectItem,
+  SelectTrigger,
+  SelectValue,
+} from "components/ui/select";
 
 const Usage = () => {
   useLoggedIn();
-  const {
-    user,
-    getUsage,
-    getBillingUsage,
-    getSubscription,
-    getInvoices,
-    getUserProduct,
-  } = useApi();
-  const [_usage, setUsage] = useState(null);
+  const { user, getUsage, getBillingUsage, getSubscription } = useApi();
   const [billingUsage, setBillingUsage] = useState<any>({
     TotalUsageMins: 0,
     DeliveryUsageMins: 0,
@@ -49,116 +40,92 @@ const Usage = () => {
   const [to, setTo] = useState(0);
   const [usageData, setUsageData] = useState([]);
 
-  const doSetTimeStep = async (ts: string) => {
-    setTimestep(ts);
-    const [
-      res,
-      usage = {
-        TotalUsageMins: 0,
-        DeliveryUsageMins: 0,
-        StorageUsageMins: 0,
-      },
-    ] = await getBillingUsage(from, to, null, ts);
-    if (res.status == 200 && Array.isArray(usage)) {
-      const now = new Date();
-      const currentMonth = now.toLocaleString("default", { month: "short" });
-      let dayCounter = 1;
+  const updateUsageData = async (fromTime, toTime, ts) => {
+    const [res, usage = []] = await getBillingUsage(fromTime, toTime, null, ts);
+    if (res.status === 200 && Array.isArray(usage)) {
+      const formattedUsage = formatUsageData(usage);
+      setUsageData(formattedUsage);
+    }
+  };
 
-      for (let i = 0; i < usage.length; i++) {
-        const item = usage[i];
-        if (ts == "day") {
-          item.name = `${currentMonth} ${dayCounter}`;
-          dayCounter++;
-        } else {
-          item.name = "";
+  const updateBillingUsage = async (fromTime, toTime) => {
+    const [res, usage] = await getBillingUsage(fromTime, toTime);
+    if (res.status === 200) {
+      setBillingUsage(
+        usage || {
+          TotalUsageMins: 0,
+          DeliveryUsageMins: 0,
+          StorageUsageMins: 0,
         }
-      }
-
-      setUsageData(usage);
-      console.log(usage);
+      );
     }
   };
 
-  const doSetFrom = async (from: number) => {
-    setFrom(from);
+  const handleTimeStepChange = async (ts: string) => {
+    setTimestep(ts);
+    await updateUsageData(from, to, ts);
   };
 
-  const doSetTo = async (to: number) => {
-    setTo(to);
+  const handleDateChange = async (fromTime: number, toTime: number) => {
+    setFrom(fromTime);
+    setTo(toTime);
+    await updateBillingUsage(fromTime, toTime);
+    await updateUsageData(fromTime, toTime, timestep);
   };
 
   useEffect(() => {
-    const doGetUsage = async (fromTime, toTime, userId) => {
-      const [res, usage] = await getUsage(fromTime, toTime, userId);
-      if (res.status == 200) {
-        setUsage(usage);
-      }
-    };
-
-    const doGetBillingUsage = async (
-      fromTime: any,
-      toTime: any,
-      status: any,
-    ) => {
-      fromTime = fromTime * 1000;
-      toTime = toTime * 1000;
-
-      // if subscription is cancelled, get current month data
-      if (status === "canceled") {
-        const now = new Date();
-        fromTime = new Date(now.getFullYear(), now.getMonth(), 1).getTime();
-        toTime = now.getTime();
-      }
-
-      let [res, usage] = await getBillingUsage(fromTime, toTime);
-
-      if (res.status == 200) {
-        if (!usage) {
-          usage = {
-            TotalUsageMins: 0,
-            DeliveryUsageMins: 0,
-            StorageUsageMins: 0,
-          };
-        }
-        setBillingUsage(usage);
-      }
-
-      const [res2, usageByDay] = await getBillingUsage(
-        fromTime,
-        toTime,
-        null,
-        timestep,
+    const fetchInitialData = async () => {
+      const [res, subscription] = await getSubscription(
+        user.stripeCustomerSubscriptionId
       );
-      if (res2.status == 200 && Array.isArray(usageByDay)) {
-        setUsageData(usageByDay);
-      }
-    };
-
-    const getSubscriptionAndUsage = async (subscriptionId) => {
-      const [res, subscription] = await getSubscription(subscriptionId);
-      if (res.status == 200) {
+      if (res.status === 200 && subscription) {
         setSubscription(subscription);
+        const { current_period_start, current_period_end } = subscription ?? {};
+        setFrom((current_period_start as number) ?? 0);
+        setTo((current_period_end as number) ?? 0);
+        await updateBillingUsage(
+          (current_period_start as number) ?? 0,
+          (current_period_end as number) ?? 0
+        );
+        await updateUsageData(
+          (current_period_start as number) ?? 0,
+          (current_period_end as number) ?? 0,
+          timestep
+        );
       }
-      doGetUsage(
-        subscription?.current_period_start,
-        subscription?.current_period_end,
-        user.id,
-      );
-      doGetBillingUsage(
-        subscription?.current_period_start,
-        subscription?.current_period_end,
-        subscription?.status,
-      );
     };
 
     if (user) {
-      getSubscriptionAndUsage(user.stripeCustomerSubscriptionId);
+      fetchInitialData();
     }
   }, [user]);
 
   if (!user) {
     return <Layout />;
   }
+
+  const formatUsageData = (usage) => {
+    const TotalUsageMins = [];
+    const DeliveryUsageMins = [];
+    const StorageUsageMins = [];
+
+    usage.forEach((item) => {
+      const date = new Date(item.TimeInterval).toLocaleDateString("en-US", {
+        month: "short",
+        day: "numeric",
+      });
+      TotalUsageMins.push({ name: date, value: item.TotalUsageMins });
+      DeliveryUsageMins.push({ name: date, value: item.DeliveryUsageMins });
+      StorageUsageMins.push({ name: date, value: item.StorageUsageMins });
+    });
+
+    return [
+      { name: "Transcoding usage minutes", data: TotalUsageMins },
+      { name: "Delivery usage minutes", data: DeliveryUsageMins },
+      { name: "Storage usage minutes", data: StorageUsageMins },
+    ];
+  };
+
   return (
     <Layout
       id="settings/usage"
@@ -166,92 +133,54 @@ const Usage = () => {
       {...Content.metaData}>
       <Box css={{ p: "$6" }}>
         <Box css={{ mb: "$7" }}>
-          <Flex
-            justify="between"
-            align="end"
-            css={{
-              borderBottom: "1px solid",
-              borderColor: "$neutral6",
-              pb: "$4",
-              mb: "$5",
-              width: "100%",
-            }}>
-            <Heading size="2">
-              <Flex>
-                <Box
-                  css={{
-                    mr: "$3",
-                    fontWeight: 600,
-                    letterSpacing: "0",
-                  }}>
-                  Usage
-                </Box>
-              </Flex>
-            </Heading>
-            <Flex css={{ fontSize: "$3", color: "$hiContrast" }}>
+          <div className="flex  justify-between border-b border-border pb-4 mb-5 w-[100%]">
+            <h2 className="flex items-center text-2xl font-semibold leading-none tracking-tight">
+              Usage
+            </h2>
+            <div className="flex">
               Current billing period (
               {subscription && (
-                <Flex>
+                <div>
                   {new Date(
-                    subscription.current_period_start * 1000,
+                    subscription.current_period_start * 1000
                   ).toLocaleDateString("en-US", {
                     month: "short",
                     day: "numeric",
                   })}{" "}
                   to{" "}
                   {new Date(
-                    subscription.current_period_end * 1000,
+                    subscription.current_period_end * 1000
                   ).toLocaleDateString("en-US", {
                     month: "short",
                     day: "numeric",
                   })}{" "}
-                </Flex>
+                </div>
               )}
               )
-            </Flex>
-          </Flex>
+            </div>
+          </div>
         </Box>
-
-        <Box css={{ mb: "$9" }}>
-          <Flex
-            justify="between"
-            align="end"
-            css={{
-              mb: "$4",
-              width: "100%",
-            }}>
-            <Heading size="1">
-              <Flex align="center">
-                <Box
-                  css={{
-                    mr: "$3",
-                    fontWeight: 600,
-                    letterSpacing: "0",
-                  }}>
-                  Summary
-                </Box>
-                <Flex align="center">
-                  <LPTooltip
-                    multiline
-                    //@ts-ignore
-                    content={
-                      <Box>
-                        Usage minutes may take up to an hour to be reflected.
-                      </Box>
-                    }>
-                    <Help />
-                  </LPTooltip>
-                </Flex>
-              </Flex>
-            </Heading>
-          </Flex>
-          <Grid gap="4" columns="3">
+        <div className="mb-7 flex flex-col space-y-4 ">
+          <h2 className="flex items-center text-xl font-semibold leading-none tracking-tight">
+            Summary
+            <span className="ml-2">
+              <LPTooltip
+                multiline
+                content={
+                  <p>Usage minutes may take up to an hour to be reflected.</p>
+                }>
+                <Help />
+              </LPTooltip>
+            </span>
+          </h2>
+          <div className="grid grid-cols-3 gap-4">
             <UsageCard
               title="Transcoding minutes"
               loading={!billingUsage}
               usage={
-                billingUsage &&
-                billingUsage.TotalUsageMins.toFixed(2).toLocaleString()
+                (billingUsage &&
+                  billingUsage?.TotalUsageMins?.toFixed(2).toLocaleString()) ||
+                0
               }
               limit={false}
             />
@@ -259,8 +188,11 @@ const Usage = () => {
               title="Delivery minutes"
               loading={!billingUsage}
               usage={
-                billingUsage &&
-                billingUsage.DeliveryUsageMins.toFixed(2).toLocaleString()
+                (billingUsage &&
+                  billingUsage?.DeliveryUsageMins?.toFixed(
+                    2
+                  ).toLocaleString()) ||
+                0
               }
               limit={false}
             />
@@ -268,81 +200,76 @@ const Usage = () => {
               title="Storage minutes"
               loading={!billingUsage}
               usage={
-                billingUsage &&
-                billingUsage.StorageUsageMins.toFixed(2).toLocaleString()
+                (billingUsage &&
+                  billingUsage?.StorageUsageMins?.toFixed(
+                    2
+                  ).toLocaleString()) ||
+                0
               }
               limit={false}
             />
-          </Grid>
-        </Box>
-        <Flex
-          justify="between"
-          align="end"
-          css={{
-            mb: "$4",
-            width: "100%",
-          }}>
-          <Heading size="1">
-            <Flex align="center">
-              <Box
-                css={{
-                  mr: "$3",
-                  fontWeight: 600,
-                  letterSpacing: "0",
-                  display: "",
-                }}>
-                Charts
-              </Box>
-            </Flex>
-          </Heading>
-        </Flex>
-        <Box css={{ mb: "$4", display: "" }}>
+          </div>
+        </div>
+
+        <div className="flex justify-between items-center mb-4">
+          <h2 className="flex items-center text-xl font-semibold leading-none tracking-tight">
+            Charts
+          </h2>
           <Select
-            css={{ fontSize: "$3", px: "$2", mb: "$4" }}
-            defaultValue="day"
-            onChange={(e) => doSetTimeStep(e.target.value)}>
-            <option value="hour">Hourly</option>
-            <option value="day">Daily</option>
+            onValueChange={(value) => handleTimeStepChange(value)}
+            defaultValue={timestep}>
+            <SelectTrigger className="w-[180px]">
+              <SelectValue placeholder="Time step" />
+            </SelectTrigger>
+            <SelectContent>
+              <SelectItem value="day">Daily</SelectItem>
+              <SelectItem value="hour">Hourly</SelectItem>
+            </SelectContent>
           </Select>
-        </Box>
-        <Box css={{ mb: "$4", display: "" }}>
-          <ResponsiveContainer width="100%" height={300}>
-            <BarChart width={150} height={40} data={usageData}>
-              <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip />
-              <Legend />
-              <Bar dataKey="TotalUsageMins" fill="#30a46c" />
-            </BarChart>
-          </ResponsiveContainer>
-        </Box>
-        <Box css={{ mb: "$4", display: "" }}>
-          <ResponsiveContainer width="100%" height={300}>
-            <BarChart width={150} height={40} data={usageData}>
-              <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip />
-              <Legend />
-              <Bar dataKey="DeliveryUsageMins" fill="#30a46c" />
-            </BarChart>
-          </ResponsiveContainer>
-        </Box>
-        <Box css={{ mb: "$4", display: "" }}>
-          <ResponsiveContainer width="100%" height={300}>
-            <LineChart width={150} height={40} data={usageData}>
-              <XAxis dataKey="name" />
-              <YAxis />
-              <Tooltip />
-              <Legend />
-              <Line
-                type="monotone"
-                dataKey="StorageUsageMins"
-                stroke="#30a46c"
-                strokeWidth={2}
-              />
-            </LineChart>
-          </ResponsiveContainer>
-        </Box>
+        </div>
+        <div className="grid grid-cols-2 gap-4">
+          {usageData.map((usageType, index) => (
+            <Card className={`w-full `} key={usageType.name}>
+              <CardHeader>
+                <CardTitle className="capitalize">{usageType.name}</CardTitle>
+                <CardDescription className="normal-case">{`${
+                  usageType.name
+                } ${new Date(from * 1000).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })} to ${new Date(to * 1000).toLocaleDateString("en-US", {
+                  month: "short",
+                  day: "numeric",
+                })}`}</CardDescription>
+              </CardHeader>
+              <CardContent>
+                <ChartContainer
+                  config={{
+                    desktop: {
+                      label: "Desktop",
+                      color: "#fff",
+                    },
+                  }}
+                  className="w-full">
+                  <BarChart data={usageType.data}>
+                    <CartesianGrid vertical={false} />
+                    <XAxis
+                      dataKey="name"
+                      tickLine={false}
+                      tickMargin={10}
+                      axisLine={false}
+                    />
+                    <ChartTooltip
+                      cursor={false}
+                      content={<ChartTooltipContent hideLabel />}
+                    />
+                    <Bar dataKey="value" fill="#3B8F68" radius={8} />
+                  </BarChart>
+                </ChartContainer>
+              </CardContent>
+            </Card>
+          ))}
+        </div>
       </Box>
     </Layout>
   );