diff --git a/src/modules/garden/components/plant-list.tsx b/src/modules/garden/components/plant-list.tsx
index 8054fc5..503776f 100644
--- a/src/modules/garden/components/plant-list.tsx
+++ b/src/modules/garden/components/plant-list.tsx
@@ -1,4 +1,6 @@
 import Link from "next/link";
+
+import { Badge } from "@/components/ui/badge";
 import type { PlantListItemDto } from "../server/queries";
 
 type Props = {
@@ -13,12 +15,6 @@ function daysAgo(isoString: string): string {
   return `${days}d ago`;
 }
 
-function healthBadgeClass(status: string): string {
-  if (status === "healthy") return "badge-success";
-  if (status === "sick") return "badge-danger";
-  return "badge-warning";
-}
-
 export function PlantList({ plants }: Props) {
   if (plants.length === 0) {
     return (
@@ -82,9 +78,17 @@ export function PlantList({ plants }: Props) {
                   <div className="flex-1 min-w-0">
                     <p className="font-medium text-sm truncate">{plant.name}</p>
                     <div className="flex items-center gap-2 mt-0.5 flex-wrap">
-                      <span className={`text-xs badge ${healthBadgeClass(plant.healthStatus)}`}>
+                      <Badge
+                        variant={
+                          plant.healthStatus === "healthy"
+                            ? "default"
+                            : plant.healthStatus === "sick"
+                              ? "destructive"
+                              : "secondary"
+                        }
+                      >
                         {plant.healthStatus}
-                      </span>
+                      </Badge>
                       {plant.lastWateredAt && (
                         <span className="text-xs text-[var(--ink-mute)]">
                           Watered {daysAgo(plant.lastWateredAt)}