diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-content-view.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-content-view.tsx
new file mode 100644
index 000000000..e14e89a96
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-content-view.tsx
@@ -0,0 +1,161 @@
+import { AnimatePresence } from "framer-motion";
+import { useRouter } from "next-nprogress-bar";
+
+import {
+  Table,
+  TableBody,
+  TableHead,
+  TableHeader,
+  TableRow,
+} from "~/components/ui/table";
+import { useProductModal } from "~/hooks/admin-product/use-product.modal";
+import { useProducts } from "~/hooks/admin-product/use-products.persistence";
+import { cn } from "~/lib/utils";
+import { ProductTableProperties } from "~/types/admin-product.types";
+import { ProductGridCard } from "./product-grid-card";
+import { ProductListRow } from "./product-list-row";
+import { ProductNotFound } from "./product-not-found";
+
+type Properties = {
+  subset: ProductTableProperties[];
+  filteredProducts: ProductTableProperties[];
+  searchTerm: string;
+  view: "grid" | "list";
+};
+
+export const ProductContentView = ({
+  subset,
+  filteredProducts,
+  searchTerm,
+  view = "grid",
+}: Properties) => {
+  const { products } = useProducts();
+  const {
+    updateOpen,
+    updateProductId,
+    product_id,
+    isActionModal,
+    setIsActionModal,
+    setIsDelete,
+  } = useProductModal();
+  const router = useRouter();
+
+  if (!products) return;
+
+  const handleOpenActionModal = (product_id: string) => {
+    updateProductId(product_id);
+    setIsActionModal(!isActionModal);
+  };
+
+  const handleOpenDetail = (product_id: string) => {
+    setIsActionModal(false);
+    updateProductId(product_id);
+    updateOpen(true);
+  };
+  const handleDeleteAction = (id: string) => {
+    setIsActionModal(false);
+    updateProductId(id);
+    setIsDelete(true);
+  };
+  const handleEditAction = (id: string) => {
+    setIsActionModal(false);
+    router.push(`/dashboard/products/${id}`);
+  };
+
+  return (
+    <AnimatePresence>
+      {view === "list" && (
+        <div className="show_scrollbar rounded-xl border border-gray-300 bg-[#F1F5F9] pt-1 sm:pt-4">
+          <Table
+            divClassName={cn(
+              "relative h-full min-h-[400px] xl:min-h-[600px] bg-white",
+            )}
+          >
+            <TableHeader>
+              <TableRow className="bg-[#F1F5F9]">
+                <TableHead className="w-[100px]x overflow-x-auto text-center text-xs min-[380px]:text-sm md:w-[200px] md:text-base lg:w-[200px]">
+                  Product Name
+                </TableHead>
+                <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
+                  Product ID
+                </TableHead>
+                <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
+                  Category
+                </TableHead>
+                <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
+                  Price
+                </TableHead>
+                <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
+                  Status
+                </TableHead>
+                <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
+                  Actions
+                </TableHead>
+              </TableRow>
+            </TableHeader>
+            <TableBody>
+              {filteredProducts.length > 0 &&
+                subset.length > 0 &&
+                subset.map((product, index) => (
+                  <ProductListRow
+                    key={product.product_id}
+                    id={product.product_id}
+                    selectedId={product_id}
+                    searchTerm={searchTerm}
+                    price={product.price}
+                    description={product.description}
+                    title={product.name}
+                    category={product.category}
+                    imgSrc={product.image}
+                    status={product.status}
+                    isBottomRow={
+                      index === subset.length - 1 || index === subset.length - 2
+                    }
+                    isActionModal={isActionModal}
+                    onOpenDetails={() => handleOpenDetail(product.product_id)}
+                    onEdit={() => handleEditAction(product.product_id)}
+                    onDelete={() => handleDeleteAction(product.product_id)}
+                    onOpenActionModal={() =>
+                      handleOpenActionModal(product.product_id)
+                    }
+                    onCloseActionModal={() => setIsActionModal(false)}
+                  />
+                ))}
+            </TableBody>
+            {filteredProducts.length === 0 && searchTerm.length > 1 && (
+              <ProductNotFound term={searchTerm} />
+            )}
+          </Table>
+        </div>
+      )}
+      {view === "grid" && (
+        <div className="flex h-full flex-col justify-center">
+          <div className="grid w-full grid-cols-[repeat(auto-fit,minmax(var(--min),1fr))] gap-x-[8.91px] gap-y-[26px] [--min:185px] sm:gap-y-8 sm:[--min:240px] md:gap-x-[36px]">
+            {filteredProducts.length > 0 &&
+              subset.length > 0 &&
+              subset.map((product) => (
+                <ProductGridCard
+                  key={product.product_id}
+                  id={product.product_id}
+                  // selectedId={product_id}
+                  searchTerm={searchTerm}
+                  price={product.price}
+                  description={product.description}
+                  title={product.name}
+                  category={product.category}
+                  imgSrc={product.image}
+                  status={product.status}
+                  onSelect={() => ({})}
+                  onEdit={() => handleEditAction(product.product_id)}
+                  onDelete={() => handleDeleteAction(product.product_id)}
+                />
+              ))}
+          </div>
+          {filteredProducts.length === 0 && searchTerm.length > 1 && (
+            <ProductNotFound term={searchTerm} />
+          )}
+        </div>
+      )}
+    </AnimatePresence>
+  );
+};
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx
index 9b190c91b..d3f450d1a 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-content.tsx
@@ -5,22 +5,12 @@ import { useEffect, useMemo, useState } from "react";
 
 import LoadingSpinner from "~/components/miscellaneous/loading-spinner";
 import ProductCardSkeleton from "~/components/skeleton/product.skeleton";
-
-import "~/components/ui/table";
-
-import {
-  Table,
-  TableBody,
-  TableHead,
-  TableHeader,
-  TableRow,
-} from "~/components/ui/table";
 import { useProductModal } from "~/hooks/admin-product/use-product.modal";
 import { useProductsFilters } from "~/hooks/admin-product/use-products.-filters.persistence";
 import { useProducts } from "~/hooks/admin-product/use-products.persistence";
 import { cn } from "~/lib/utils";
 import { ProductTableProperties } from "~/types/admin-product.types";
-import ProductBodyShadcn from "./product-body-shadcn";
+import { ProductContentView } from "./product-content-view";
 
 const Pagination = dynamic(() => import("react-paginate"), {
   ssr: false,
@@ -108,60 +98,17 @@ const ProductContent = ({
     <div className="relative flex w-full flex-col overflow-hidden pb-10">
       <div
         className={cn(
-          "show_scrollbar rounded-xl border border-gray-300 bg-[#F1F5F9] pt-1 sm:pt-4",
           isOpen
             ? "max-w-full lg:max-w-[600px] min-[1090px]:max-w-[650px] min-[1150px]:max-w-[750px] min-[1200px]:max-w-[800px] xl:max-w-[820px] min-[1300px]:max-w-full"
             : "max- w-full",
         )}
       >
-        <AnimatePresence>
-          {view === "list" && (
-            <Table
-              divClassName={cn(
-                "relative h-full min-h-[400px] xl:min-h-[600px] bg-white",
-              )}
-            >
-              <TableHeader>
-                <TableRow className="bg-[#F1F5F9]">
-                  <TableHead className="w-[100px]x overflow-x-auto text-center text-xs min-[380px]:text-sm md:w-[200px] md:text-base lg:w-[200px]">
-                    Product Name
-                  </TableHead>
-                  <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
-                    Product ID
-                  </TableHead>
-                  <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
-                    Category
-                  </TableHead>
-                  <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
-                    Price
-                  </TableHead>
-                  <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
-                    Status
-                  </TableHead>
-                  <TableHead className="whitespace-nowrap text-xs min-[380px]:text-sm md:text-base">
-                    Actions
-                  </TableHead>
-                </TableRow>
-              </TableHeader>
-              <TableBody className="w-full">
-                <ProductBodyShadcn
-                  subset={subset}
-                  filteredProducts={filteredProducts}
-                  searchTerm={searchTerm}
-                />
-              </TableBody>
-              {filteredProducts.length === 0 && searchTerm.length > 1 && (
-                <div className="absolute top-1/2 flex w-full items-center justify-center">
-                  <p className="w-full text-center">
-                    No product found for &quot;
-                    <span className="font-bold">{searchTerm}</span>
-                    &quot;
-                  </p>
-                </div>
-              )}
-            </Table>
-          )}
-        </AnimatePresence>
+        <ProductContentView
+          view={view}
+          searchTerm={searchTerm}
+          filteredProducts={filteredProducts}
+          subset={subset}
+        />
         {!products && <ProductCardSkeleton count={9} />}
       </div>
       <AnimatePresence>
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-filter.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-filter.tsx
index d81f8864b..7fff6eb7c 100644
--- a/src/app/dashboard/(user-dashboard)/products/_components/product-filter.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-filter.tsx
@@ -87,7 +87,7 @@ const ProductFilter = ({
         <div className="flex items-center gap-x-2">
           <Button
             onClick={() => setView("grid")}
-            disabled
+            disabled={view === "grid"}
             variant="outline"
             size="icon"
             className={cn(
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-grid-card.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-grid-card.tsx
new file mode 100644
index 000000000..a01aab2e0
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-grid-card.tsx
@@ -0,0 +1,102 @@
+import CustomButton from "~/components/common/common-button/common-button";
+import BlurImage from "~/components/miscellaneous/blur-image";
+import { Badge, type BadgeProperties } from "~/components/ui/badge";
+import { Input } from "~/components/ui/input";
+import { formatPrice } from "~/lib/utils";
+import { ProductHighlightTerm } from "./product-highlight-term";
+
+const stockStatus = {
+  in_stock: {
+    variant: "success-dot",
+    label: "In Stock",
+  },
+  out_of_stock: {
+    variant: "error-dot",
+    label: "Out of Stock",
+  },
+  low_on_stock: {
+    variant: "warning-dot",
+    label: "Low on Stock",
+  },
+};
+
+type ProductGridCardProperties = {
+  id?: string;
+  title: string;
+  description?: string;
+  status: "in_stock" | "out_of_stock" | "low_on_stock";
+  price: number;
+  imgSrc: string;
+  searchTerm?: string;
+  category: string;
+  onEdit: () => void; // (id: string) => void;
+  onDelete: () => void; // (id: string) => void;
+  onSelect: () => void; // (id: string) => void;
+};
+
+export function ProductGridCard({
+  // id,
+  title = "Product 1",
+  // description,
+  imgSrc,
+  price = 15,
+  status = "in_stock",
+  searchTerm = "",
+  category,
+  onEdit,
+  onDelete,
+  onSelect,
+}: ProductGridCardProperties) {
+  const stock = stockStatus[status];
+  return (
+    <div className="flex max-w-[240px] flex-col gap-[17.305px] rounded-[6px] border-[0.705px] bg-white px-4 py-4">
+      <div>
+        <div className="relative aspect-[21/11] w-full overflow-hidden rounded-[7.049px]">
+          <Input
+            type="checkbox"
+            className="z-1 absolute left-2 top-2 size-4"
+            onClick={onSelect}
+          />
+          <BlurImage src={imgSrc} alt={title} fill className="object-cover" />
+        </div>
+      </div>
+      <div className="flex flex-1 flex-col justify-between gap-2">
+        <div className="space-y-2">
+          <div className="flex flex-wrap justify-between gap-2 text-[16.917px] font-bold -tracking-[0.338px]">
+            <h2>
+              <ProductHighlightTerm searchTerm={searchTerm} title={title} />
+            </h2>
+            <p>{formatPrice(price)}</p>
+          </div>
+          <div>
+            <p className="text-[11.278px] text-neutral-dark-1">{category}</p>
+          </div>
+          <div>
+            <Badge
+              variant={stock.variant as BadgeProperties["variant"]}
+              className="h-5"
+            >
+              {stock.label}
+            </Badge>
+          </div>
+        </div>
+        <div className="flex flex-wrap justify-between gap-1.5">
+          <CustomButton
+            variant="outline"
+            className="h-8 flex-1 border-[0.705px] text-xs"
+            onClick={onEdit}
+          >
+            Edit
+          </CustomButton>
+          <CustomButton
+            variant="outline"
+            className="h-8 flex-1 border-[0.705px] text-xs text-error"
+            onClick={onDelete}
+          >
+            Delete
+          </CustomButton>
+        </div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-highlight-term.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-highlight-term.tsx
new file mode 100644
index 000000000..791d10d98
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-highlight-term.tsx
@@ -0,0 +1,37 @@
+import { cn } from "~/lib/utils";
+
+type ProductHighlightTermProperties = {
+  searchTerm: string;
+  title: string;
+};
+
+export function ProductHighlightTerm({
+  title,
+  searchTerm = "",
+}: ProductHighlightTermProperties) {
+  return (
+    <>
+      {searchTerm.length > 1 ? (
+        <span
+          className={cn(
+            "",
+            searchTerm.length > 2 ? "w-[50px] overflow-x-auto" : "",
+          )}
+          dangerouslySetInnerHTML={{
+            __html: title.replaceAll(
+              new RegExp(`(${searchTerm})`, "gi"),
+              (match, group) =>
+                `<span  style="color: black; background-color: ${
+                  group.toLowerCase() === searchTerm.toLowerCase()
+                    ? "yellow"
+                    : "inherit"
+                }">${match}</span>`,
+            ),
+          }}
+        />
+      ) : (
+        <span className="">{title}</span>
+      )}
+    </>
+  );
+}
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-list-row.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-list-row.tsx
new file mode 100644
index 000000000..1a885a289
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-list-row.tsx
@@ -0,0 +1,188 @@
+import { AnimatePresence, motion } from "framer-motion";
+import { Edit2, MoreVertical, Trash } from "lucide-react";
+import { useEffect, useRef } from "react";
+
+import BlurImage from "~/components/miscellaneous/blur-image";
+import { Button } from "~/components/ui/button";
+import { Input } from "~/components/ui/input";
+import { TableCell, TableRow } from "~/components/ui/table";
+import { cn, formatPrice } from "~/lib/utils";
+import { ProductHighlightTerm } from "./product-highlight-term";
+
+type ProductListRowProperties = {
+  id: string;
+  title: string;
+  description: string;
+  category: string;
+  status: "in_stock" | "out_of_stock" | "low_on_stock";
+  price: number;
+  imgSrc: string;
+  isBottomRow: boolean;
+  selectedId?: string;
+  searchTerm?: string;
+  isActionModal: boolean;
+  onOpenActionModal: () => void;
+  onCloseActionModal: () => void;
+  onEdit: () => void; // (id: string) => void;
+  onDelete: () => void; // (id: string) => void;
+  onSelect?: () => void; // (id: string) => void;
+  onOpenDetails: () => void;
+};
+
+export function ProductListRow({
+  id,
+  selectedId,
+  status,
+  price,
+  imgSrc,
+  title,
+  category,
+  onOpenDetails,
+  searchTerm = "",
+  isBottomRow,
+  isActionModal,
+  onCloseActionModal,
+  onOpenActionModal,
+  onEdit,
+  onDelete,
+  //   onSelect,
+}: ProductListRowProperties) {
+  const modalReference = useRef<HTMLDivElement>(null);
+  useEffect(() => {
+    if (!isActionModal || !modalReference.current) return;
+    modalReference.current.scrollIntoView({ behavior: "smooth" });
+    // handle click outside modal
+    const handleOutsideClick = (event: MouseEvent) => {
+      if (
+        modalReference.current &&
+        !modalReference.current.contains(event.target as Node)
+      ) {
+        onCloseActionModal();
+      }
+    };
+    document.addEventListener("click", handleOutsideClick);
+    return () => {
+      document.removeEventListener("click", handleOutsideClick);
+    };
+  }, [isActionModal, onCloseActionModal]);
+  return (
+    <TableRow
+      key={id}
+      className={cn(
+        "relative bg-white",
+        selectedId === id ? "bg-[#F1F5F9]" : "",
+      )}
+    >
+      <TableCell className="flex items-center justify-start gap-x-2 whitespace-nowrap md:gap-x-4">
+        <div className="flex items-center gap-x-1 sm:gap-x-2 md:gap-x-4">
+          <Input
+            type="checkbox"
+            className="sticky left-0 size-4 min-[500px]:size-5 lg:size-8"
+          />
+          <BlurImage
+            src={imgSrc}
+            alt="Product"
+            width={40}
+            height={40}
+            className="size-6 flex-1 flex-shrink-0 rounded-md object-cover min-[500px]:size-7 md:size-10 md:rounded-xl"
+          />
+        </div>
+        <span
+          role="button"
+          onClick={onOpenDetails}
+          className="hide_scrollbar ml-0.5 w-[110px] whitespace-break-spaces text-[10px] text-neutral-dark-2 min-[376px]:text-xs sm:ml-1 md:w-[200px] md:text-base lg:w-[200px]"
+        >
+          <ProductHighlightTerm searchTerm={searchTerm} title={title} />
+        </span>
+      </TableCell>
+      <TableCell
+        role="button"
+        onClick={onOpenDetails}
+        className="text-sm uppercase md:text-base"
+      >
+        {id}
+      </TableCell>
+      <TableCell
+        role="button"
+        onClick={onOpenDetails}
+        className="text-[10px] min-[376px]:text-xs md:text-base"
+      >
+        {category}
+      </TableCell>
+      <TableCell
+        role="button"
+        onClick={onOpenDetails}
+        className="text-[10px] min-[376px]:text-xs md:text-base"
+      >
+        {formatPrice(price)}
+      </TableCell>
+      <TableCell role="button" onClick={onOpenDetails}>
+        <span
+          className={cn(
+            "flex items-center gap-x-1 whitespace-nowrap rounded-full px-2 text-[10px] leading-5 min-[376px]:text-xs md:gap-x-2 md:text-base",
+          )}
+        >
+          <span
+            className={cn("size-2 rounded-full sm:size-3", {
+              "bg-[#6DC347]": status === "in_stock",
+              "bg-[#DC2626]": status === "out_of_stock",
+              "bg-[#EAB308]": status === "low_on_stock",
+            })}
+          />
+          {status === "in_stock" && "In Stock"}
+          {status === "low_on_stock" && "Low on Stock"}
+          {status === "out_of_stock" && "Out of Stock"}
+        </span>
+      </TableCell>
+      <TableCell className="relative whitespace-nowrap px-2 py-4 md:gap-x-4 min-[1440px]:px-6">
+        <Button onClick={onOpenActionModal} variant={"ghost"} size={"icon"}>
+          <MoreVertical />
+        </Button>
+        <AnimatePresence>
+          {isActionModal && selectedId === id && (
+            <motion.div
+              ref={modalReference}
+              initial={{ opacity: 0, y: -20, x: 20 }}
+              animate={{ opacity: 1, y: 0, x: 0 }}
+              exit={{ opacity: 0, y: -20, x: 20 }}
+              className={cn(
+                "absolute right-16 z-30 flex w-[121px] flex-col justify-between gap-y-1 rounded-[6px] border border-gray-300 bg-white/80 shadow-[0px_1px_18px_0px_rgba(10,_57,_176,_0.12)] backdrop-blur-sm sm:w-full sm:max-w-[121px]",
+                isBottomRow ? "bottom-[3.7rem]" : "-bottom-[5.5rem]",
+              )}
+            >
+              <span className="border-b border-gray-200 px-2 py-2 text-sm font-semibold text-neutral-dark-2 md:px-4">
+                Actions
+              </span>
+              <div className="flex flex-col">
+                <Button
+                  variant="ghost"
+                  onClick={onEdit}
+                  size={"sm"}
+                  className={cn(
+                    "flex h-8 cursor-pointer items-center justify-start gap-x-2 px-2 py-1 text-xs min-[500px]:text-sm",
+                  )}
+                >
+                  <Edit2 className={cn("size-4")} />
+
+                  <span>Edit</span>
+                </Button>
+                <Button
+                  onClick={onDelete}
+                  variant="ghost"
+                  size={"sm"}
+                  className={cn(
+                    "flex h-8 cursor-pointer items-center justify-start gap-x-2 px-2 py-1 text-xs text-red-500 min-[500px]:text-sm",
+                  )}
+                >
+                  <Trash className={cn("size-4")} />
+
+                  <span>Delete</span>
+                </Button>
+              </div>
+            </motion.div>
+          )}
+        </AnimatePresence>
+      </TableCell>
+    </TableRow>
+  );
+}
diff --git a/src/app/dashboard/(user-dashboard)/products/_components/product-not-found.tsx b/src/app/dashboard/(user-dashboard)/products/_components/product-not-found.tsx
new file mode 100644
index 000000000..8df78e0e4
--- /dev/null
+++ b/src/app/dashboard/(user-dashboard)/products/_components/product-not-found.tsx
@@ -0,0 +1,11 @@
+export function ProductNotFound({ term }: { term: string }) {
+  return (
+    <div className="absolute top-1/2 flex w-full items-center justify-center">
+      <p className="w-full text-center">
+        No product found for &quot;
+        <span className="font-bold">{term}</span>
+        &quot;
+      </p>
+    </div>
+  );
+}
diff --git a/src/app/dashboard/(user-dashboard)/products/page.tsx b/src/app/dashboard/(user-dashboard)/products/page.tsx
index 1bb5df0fc..fa241ff49 100644
--- a/src/app/dashboard/(user-dashboard)/products/page.tsx
+++ b/src/app/dashboard/(user-dashboard)/products/page.tsx
@@ -21,7 +21,7 @@ const ProductFilter = dynamic(() => import("./_components/product-filter"), {
 
 const ProductPage = () => {
   const [searchTerm, setSearchTerm] = useState("");
-  const [view, setView] = useState<"list" | "grid">("list");
+  const [view, setView] = useState<"list" | "grid">("grid");
 
   const {
     isOpen,
diff --git a/src/app/globals.css b/src/app/globals.css
index a5043fd7e..a9943ece4 100644
--- a/src/app/globals.css
+++ b/src/app/globals.css
@@ -48,8 +48,13 @@
     --link: 222 47% 11%;
 
     --error: 0 72% 51%;
+    --error-50: 0 85% 95%;
+    --error-700: 0 90% 34%;
     --success: 102 51% 52%;
+    --success-50: 128 50% 94%;
+    --success-700: 126 84% 26%;
     --warning: 45 93% 47%;
+    --warning-50: 25% 100% 98%;
 
     --border: 214 32% 91%;
     --input: 214 32% 91%;
diff --git a/src/components/ui/badge.tsx b/src/components/ui/badge.tsx
new file mode 100644
index 000000000..2ec8c6011
--- /dev/null
+++ b/src/components/ui/badge.tsx
@@ -0,0 +1,45 @@
+import { cva, type VariantProps } from "class-variance-authority";
+import * as React from "react";
+
+import { cn } from "~/lib/utils";
+
+const badgeVariants = cva(
+  "inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2",
+  {
+    variants: {
+      variant: {
+        default:
+          "border-transparent bg-primary text-primary-foreground hover:bg-primary/80",
+        secondary:
+          "border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80",
+        destructive:
+          "border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80",
+        "success-dot":
+          "bg-success-50 text-success-700 border-transparent before:mr-1 before:content-['•_'] before:text-success",
+        "error-dot":
+          "bg-error-50 text-error-700 border-transparent before:mr-1 before:content-['•_'] before:text-error",
+        "warning-dot":
+          "bg-warning-50 text-warning border-transparent before:mr-1 before:content-['•_'] before:text-warning",
+        outline: "text-foreground",
+      },
+    },
+    defaultVariants: {
+      variant: "default",
+    },
+  },
+);
+
+export interface BadgeProperties
+  extends React.HTMLAttributes<HTMLDivElement>,
+    VariantProps<typeof badgeVariants> {}
+
+function Badge({ className, variant, ...properties }: BadgeProperties) {
+  return (
+    <div
+      className={cn(badgeVariants({ variant }), className)}
+      {...properties}
+    />
+  );
+}
+
+export { Badge, badgeVariants };
diff --git a/tailwind.config.ts b/tailwind.config.ts
index c318a20ed..53f29dd84 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -82,9 +82,20 @@ const config = {
           DEFAULT: "hsl(var(--card))",
           foreground: "hsl(var(--card-foreground))",
         },
-        error: "hsl(var(--error))",
-        success: "hsl(var(--success))",
-        warning: "hsl(var(--warning))",
+        error: {
+          DEFAULT: "hsl(var(--error))",
+          "50": "hsl(var(--error-50))",
+          "700": "hsl(var(--error-700))",
+        },
+        success: {
+          DEFAULT: "hsl(var(--success))",
+          "50": "hsl(var(--success-50))",
+          "700": "hsl(var(--success-700))",
+        },
+        warning: {
+          DEFAULT: "hsl(var(--warning))",
+          "50": "hsl(var(--warning-50))",
+        },
         neutral: {
           dark: {
             1: "hsl(var(--neutralColor-dark-1))",