Classification Model UI Refactor (#20602)

* Add cutoff for object classification * Add selector for classifiction model type * Improve model selection view * Clean up design of classification card * Tweaks * Adjust button colors * Improvements to gradients and making face library consistent * Add basic classification model wizard * Use relative coordinates * Properly get resolution * Clean up exports * Cleanup * Cleanup * Update to use pre-defined component for image shadow * Refactor image grouping * Clean up mobile * Clean up decision logic * Remove max check on classification objects * Increase default number of faces shown * Cleanup * Improve mobile layout * Clenaup * Update vocabulary * Fix layout * Fix page * Cleanup * Choose last item for unknown objects * Move explore button * Cleanup grid * Cleanup classification * Cleanup grid * Cleanup * Set transparency * Set unknown * Don't filter all configs * Check length
2026-04-28 23:06:13 +02:00 · 2025-10-22 07:36:09 -06:00
parent 9638e85a1f
commit d6f5d2b0fa
23 changed files with 666 additions and 434 deletions
--- a/web/public/locales/en/config/face_recognition.json
+++ b/web/public/locales/en/config/face_recognition.json
@@ -23,7 +23,7 @@
      "label": "Min face recognitions for the sub label to be applied to the person object."
    },
    "save_attempts": {
-      "label": "Number of face attempts to save in the train tab."
+      "label": "Number of face attempts to save in the recent recognitions tab."
    },
    "blur_confidence_filter": {
      "label": "Apply blur quality filter to face confidence."
--- a/web/public/locales/en/views/classificationModel.json
+++ b/web/public/locales/en/views/classificationModel.json
@@ -41,13 +41,17 @@
    "invalidName": "Invalid name. Names can only include letters, numbers, spaces, apostrophes, underscores, and hyphens."
  },
  "train": {
-    "title": "Train",
-    "aria": "Select Train"
+    "title": "Recent Classifications",
+    "aria": "Select Recent Classifications"
  },
  "categories": "Classes",
  "createCategory": {
    "new": "Create New Class"
  },
  "categorizeImageAs": "Classify Image As:",
-  "categorizeImage": "Classify Image"
+  "categorizeImage": "Classify Image",
+  "wizard": {
+    "title": "Create New Classification",
+    "description": "Create a new state or object classification model."
+  }
 }
--- a/web/public/locales/en/views/faceLibrary.json
+++ b/web/public/locales/en/views/faceLibrary.json
@@ -22,7 +22,7 @@
    "title": "Create Collection",
    "desc": "Create a new collection",
    "new": "Create New Face",
-    "nextSteps": "To build a strong foundation:<li>Use the Train tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>"
+    "nextSteps": "To build a strong foundation:<li>Use the Recent Recognitions tab to select and train on images for each detected person.</li><li>Focus on straight-on images for best results; avoid training images that capture faces at an angle.</li></ul>"
  },
  "steps": {
    "faceName": "Enter Face Name",
@@ -33,8 +33,8 @@
    }
  },
  "train": {
-    "title": "Train",
-    "aria": "Select train",
+    "title": "Recent Recognitions",
+    "aria": "Select recent recognitions",
    "empty": "There are no recent face recognition attempts"
  },
  "selectItem": "Select {{item}}",
--- a/web/src/components/card/ClassificationCard.tsx
+++ b/web/src/components/card/ClassificationCard.tsx
@@ -6,7 +6,7 @@ import {
  ClassificationThreshold,
 } from "@/types/classification";
 import { Event } from "@/types/event";
-import { useMemo, useRef, useState } from "react";
+import { forwardRef, useMemo, useRef, useState } from "react";
 import { isDesktop, isMobile } from "react-device-detect";
 import { useTranslation } from "react-i18next";
 import TimeAgo from "../dynamic/TimeAgo";
@@ -14,7 +14,24 @@ import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
 import { LuSearch } from "react-icons/lu";
 import { TooltipPortal } from "@radix-ui/react-tooltip";
 import { useNavigate } from "react-router-dom";
-import { getTranslatedLabel } from "@/utils/i18n";
+import { HiSquare2Stack } from "react-icons/hi2";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+  DialogTrigger,
+} from "../ui/dialog";
+import {
+  MobilePage,
+  MobilePageContent,
+  MobilePageDescription,
+  MobilePageHeader,
+  MobilePageTitle,
+  MobilePageTrigger,
+} from "../mobile/MobilePage";

 type ClassificationCardProps = {
  className?: string;
@@ -24,20 +41,28 @@ type ClassificationCardProps = {
  selected: boolean;
  i18nLibrary: string;
  showArea?: boolean;
+  count?: number;
  onClick: (data: ClassificationItemData, meta: boolean) => void;
  children?: React.ReactNode;
 };
-export function ClassificationCard({
-  className,
-  imgClassName,
-  data,
-  threshold,
-  selected,
-  i18nLibrary,
-  showArea = true,
-  onClick,
-  children,
-}: ClassificationCardProps) {
+export const ClassificationCard = forwardRef<
+  HTMLDivElement,
+  ClassificationCardProps
+>(function ClassificationCard(
+  {
+    className,
+    imgClassName,
+    data,
+    threshold,
+    selected,
+    i18nLibrary,
+    showArea = true,
+    count,
+    onClick,
+    children,
+  },
+  ref,
+) {
  const { t } = useTranslation([i18nLibrary]);
  const [imageLoaded, setImageLoaded] = useState(false);

@@ -72,61 +97,81 @@ export function ClassificationCard({
  }, [showArea, imageLoaded]);

  return (
-    <>
-      <div
+    <div
+      ref={ref}
+      className={cn(
+        "relative flex size-full cursor-pointer flex-col overflow-hidden rounded-lg outline outline-[3px]",
+        className,
+        selected
+          ? "shadow-selected outline-selected"
+          : "outline-transparent duration-500",
+      )}
+      onClick={(e) => {
+        const isMeta = e.metaKey || e.ctrlKey;
+        if (isMeta) {
+          e.stopPropagation();
+        }
+        onClick(data, isMeta);
+      }}
+      onContextMenu={(e) => {
+        e.preventDefault();
+        e.stopPropagation();
+        onClick(data, true);
+      }}
+    >
+      <img
+        ref={imgRef}
        className={cn(
-          "relative flex cursor-pointer flex-col rounded-lg outline outline-[3px]",
-          className,
-          selected
-            ? "shadow-selected outline-selected"
-            : "outline-transparent duration-500",
+          "absolute bottom-0 left-0 right-0 top-0 size-full",
+          imgClassName,
+          isMobile && "w-full",
        )}
-      >
-        <div className="relative w-full select-none overflow-hidden rounded-lg">
-          <img
-            ref={imgRef}
-            onLoad={() => setImageLoaded(true)}
-            className={cn("size-44", imgClassName, isMobile && "w-full")}
-            src={`${baseUrl}${data.filepath}`}
-            onClick={(e) => {
-              e.stopPropagation();
-              onClick(data, e.metaKey || e.ctrlKey);
-            }}
-          />
-          {imageArea != undefined && (
-            <div className="absolute bottom-1 right-1 z-10 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
-              {t("information.pixels", { ns: "common", area: imageArea })}
+        onLoad={() => setImageLoaded(true)}
+        src={`${baseUrl}${data.filepath}`}
+      />
+      <ImageShadowOverlay upperClassName="z-0" lowerClassName="h-[30%] z-0" />
+      {count && (
+        <div className="absolute right-2 top-2 flex flex-row items-center gap-1">
+          <div className="text-gray-200">{count}</div>{" "}
+          <HiSquare2Stack className="text-gray-200" />
+        </div>
+      )}
+      {!count && imageArea != undefined && (
+        <div className="absolute right-1 top-1 rounded-lg bg-black/50 px-2 py-1 text-xs text-white">
+          {t("information.pixels", { ns: "common", area: imageArea })}
+        </div>
+      )}
+      <div className="absolute bottom-0 left-0 right-0 h-[50%] bg-gradient-to-t from-black/60 to-transparent" />
+      <div className="absolute bottom-0 flex w-full select-none flex-row items-center justify-between gap-2 p-2">
+        <div
+          className={cn(
+            "flex flex-col items-start text-white",
+            data.score ? "text-xs" : "text-sm",
+          )}
+        >
+          <div className="smart-capitalize">
+            {data.name == "unknown" ? t("details.unknown") : data.name}
+          </div>
+          {data.score && (
+            <div
+              className={cn(
+                "",
+                scoreStatus == "match" && "text-success",
+                scoreStatus == "potential" && "text-orange-400",
+                scoreStatus == "unknown" && "text-danger",
+              )}
+            >
+              {Math.round(data.score * 100)}%
            </div>
          )}
        </div>
-        <div className="select-none p-2">
-          <div className="flex w-full flex-row items-center justify-between gap-2">
-            <div className="flex flex-col items-start text-xs text-primary-variant">
-              <div className="smart-capitalize">
-                {data.name == "unknown" ? t("details.unknown") : data.name}
-              </div>
-              {data.score && (
-                <div
-                  className={cn(
-                    "",
-                    scoreStatus == "match" && "text-success",
-                    scoreStatus == "potential" && "text-orange-400",
-                    scoreStatus == "unknown" && "text-danger",
-                  )}
-                >
-                  {Math.round(data.score * 100)}%
-                </div>
-              )}
-            </div>
-            <div className="flex flex-row items-start justify-end gap-5 md:gap-4">
-              {children}
-            </div>
-          </div>
+        <div className="flex flex-row items-start justify-end gap-5 md:gap-2">
+          {children}
        </div>
      </div>
-    </>
+    </div>
  );
-}
+});

 type GroupedClassificationCardProps = {
  group: ClassificationItemData[];
@@ -136,7 +181,6 @@ type GroupedClassificationCardProps = {
  i18nLibrary: string;
  objectType: string;
  onClick: (data: ClassificationItemData | undefined) => void;
-  onSelectEvent: (event: Event) => void;
  children?: (data: ClassificationItemData) => React.ReactNode;
 };
 export function GroupedClassificationCard({
@@ -145,20 +189,54 @@ export function GroupedClassificationCard({
  threshold,
  selectedItems,
  i18nLibrary,
-  objectType,
  onClick,
-  onSelectEvent,
  children,
 }: GroupedClassificationCardProps) {
  const navigate = useNavigate();
  const { t } = useTranslation(["views/explore", i18nLibrary]);
+  const [detailOpen, setDetailOpen] = useState(false);

  // data

-  const allItemsSelected = useMemo(
-    () => group.every((data) => selectedItems.includes(data.filename)),
-    [group, selectedItems],
-  );
+  const bestItem = useMemo<ClassificationItemData | undefined>(() => {
+    let best: undefined | ClassificationItemData = undefined;
+
+    group.forEach((item) => {
+      if (item?.name != undefined && item.name != "none") {
+        if (
+          best?.score == undefined ||
+          (item.score && best.score < item.score)
+        ) {
+          best = item;
+        }
+      }
+    });
+
+    if (!best) {
+      return group.at(-1);
+    }
+
+    const bestTyped: ClassificationItemData = best;
+    return {
+      ...bestTyped,
+      name: event ? (event.sub_label ?? t("details.unknown")) : bestTyped.name,
+      score: event?.data?.sub_label_score || bestTyped.score,
+    };
+  }, [group, event, t]);
+
+  const bestScoreStatus = useMemo(() => {
+    if (!bestItem?.score || !threshold) {
+      return "unknown";
+    }
+
+    if (bestItem.score >= threshold.recognition) {
+      return "match";
+    } else if (bestItem.score >= threshold.unknown) {
+      return "potential";
+    } else {
+      return "unknown";
+    }
+  }, [bestItem, threshold]);

  const time = useMemo(() => {
    const item = group[0];
@@ -170,94 +248,143 @@ export function GroupedClassificationCard({
    return item.timestamp * 1000;
  }, [group]);

-  return (
-    <div
-      className={cn(
-        "flex cursor-pointer flex-col gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
-        isMobile && "w-full",
-        allItemsSelected
-          ? "shadow-selected outline-selected"
-          : "outline-transparent duration-500",
-      )}
-      onClick={() => {
-        if (selectedItems.length) {
-          onClick(undefined);
-        }
-      }}
-      onContextMenu={(e) => {
-        e.stopPropagation();
-        e.preventDefault();
-        onClick(undefined);
-      }}
-    >
-      <div className="flex flex-row justify-between">
-        <div className="flex flex-col gap-1">
-          <div className="select-none smart-capitalize">
-            {getTranslatedLabel(objectType)}
-            {event?.sub_label
-              ? `: ${event.sub_label} (${Math.round((event.data.sub_label_score || 0) * 100)}%)`
-              : ": " + t("details.unknown")}
-          </div>
-          {time && (
-            <TimeAgo
-              className="text-sm text-secondary-foreground"
-              time={time}
-              dense
-            />
-          )}
-        </div>
-        {event && (
-          <Tooltip>
-            <TooltipTrigger>
-              <div
-                className="cursor-pointer"
-                onClick={() => {
-                  navigate(`/explore?event_id=${event.id}`);
-                }}
-              >
-                <LuSearch className="size-4 text-muted-foreground" />
-              </div>
-            </TooltipTrigger>
-            <TooltipPortal>
-              <TooltipContent>
-                {t("details.item.button.viewInExplore", {
-                  ns: "views/explore",
-                })}
-              </TooltipContent>
-            </TooltipPortal>
-          </Tooltip>
-        )}
-      </div>
+  if (!bestItem) {
+    return null;
+  }

-      <div
-        className={cn(
-          "gap-2",
-          isDesktop
-            ? "flex flex-row flex-wrap"
-            : "grid grid-cols-2 sm:grid-cols-5 lg:grid-cols-6",
-        )}
+  const Overlay = isDesktop ? Dialog : MobilePage;
+  const Trigger = isDesktop ? DialogTrigger : MobilePageTrigger;
+  const Header = isDesktop ? DialogHeader : MobilePageHeader;
+  const Content = isDesktop ? DialogContent : MobilePageContent;
+  const ContentTitle = isDesktop ? DialogTitle : MobilePageTitle;
+  const ContentDescription = isDesktop
+    ? DialogDescription
+    : MobilePageDescription;
+
+  return (
+    <>
+      <ClassificationCard
+        data={bestItem}
+        threshold={threshold}
+        selected={selectedItems.includes(bestItem.filename)}
+        i18nLibrary={i18nLibrary}
+        count={group.length}
+        onClick={(_, meta) => {
+          if (meta || selectedItems.length > 0) {
+            onClick(undefined);
+          } else {
+            setDetailOpen(true);
+          }
+        }}
+      />
+      <Overlay
+        open={detailOpen}
+        onOpenChange={(open) => {
+          if (!open) {
+            setDetailOpen(false);
+          }
+        }}
      >
-        {group.map((data: ClassificationItemData) => (
-          <ClassificationCard
-            key={data.filename}
-            data={data}
-            threshold={threshold}
-            selected={
-              allItemsSelected ? false : selectedItems.includes(data.filename)
-            }
-            i18nLibrary={i18nLibrary}
-            onClick={(data, meta) => {
-              if (meta || selectedItems.length > 0) {
-                onClick(data);
-              } else if (event) {
-                onSelectEvent(event);
-              }
-            }}
-          >
-            {children?.(data)}
-          </ClassificationCard>
-        ))}
-      </div>
-    </div>
+        <Trigger asChild></Trigger>
+        <Content
+          className={cn(
+            "",
+            isDesktop && "min-w-[50%] max-w-[65%]",
+            isMobile && "flex flex-col",
+          )}
+          onOpenAutoFocus={(e) => e.preventDefault()}
+        >
+          <>
+            <Header
+              className={cn(
+                "mx-2 flex flex-row items-center gap-4",
+                isMobile && "flex-shrink-0",
+              )}
+            >
+              <div>
+                <ContentTitle
+                  className={cn(
+                    "flex items-center gap-1 font-normal capitalize",
+                    isMobile && "px-2",
+                  )}
+                >
+                  {event?.sub_label ? event.sub_label : t("details.unknown")}
+                  {event?.sub_label && (
+                    <div
+                      className={cn(
+                        "",
+                        bestScoreStatus == "match" && "text-success",
+                        bestScoreStatus == "potential" && "text-orange-400",
+                        bestScoreStatus == "unknown" && "text-danger",
+                      )}
+                    >{`${Math.round((event.data.sub_label_score || 0) * 100)}%`}</div>
+                  )}
+                </ContentTitle>
+                <ContentDescription className={cn("", isMobile && "px-2")}>
+                  {time && (
+                    <TimeAgo
+                      className="text-sm text-secondary-foreground"
+                      time={time}
+                      dense
+                    />
+                  )}
+                </ContentDescription>
+              </div>
+              {isDesktop && (
+                <div className="flex flex-row justify-between">
+                  {event && (
+                    <Tooltip>
+                      <TooltipTrigger asChild>
+                        <div
+                          className="cursor-pointer"
+                          tabIndex={-1}
+                          onClick={() => {
+                            navigate(`/explore?event_id=${event.id}`);
+                          }}
+                        >
+                          <LuSearch className="size-4 text-secondary-foreground" />
+                        </div>
+                      </TooltipTrigger>
+                      <TooltipPortal>
+                        <TooltipContent>
+                          {t("details.item.button.viewInExplore", {
+                            ns: "views/explore",
+                          })}
+                        </TooltipContent>
+                      </TooltipPortal>
+                    </Tooltip>
+                  )}
+                </div>
+              )}
+            </Header>
+            <div
+              className={cn(
+                "grid w-full auto-rows-min grid-cols-2 gap-2 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-6 2xl:grid-cols-8",
+                isDesktop && "p-2",
+                isMobile && "scrollbar-container flex-1 overflow-y-auto",
+              )}
+            >
+              {group.map((data: ClassificationItemData) => (
+                <div key={data.filename} className="aspect-square w-full">
+                  <ClassificationCard
+                    data={data}
+                    threshold={threshold}
+                    selected={false}
+                    i18nLibrary={i18nLibrary}
+                    onClick={(data, meta) => {
+                      if (meta || selectedItems.length > 0) {
+                        onClick(data);
+                      }
+                    }}
+                  >
+                    {children?.(data)}
+                  </ClassificationCard>
+                </div>
+              ))}
+            </div>
+          </>
+        </Content>
+      </Overlay>
+    </>
  );
 }
--- a/web/src/components/card/ExportCard.tsx
+++ b/web/src/components/card/ExportCard.tsx
@@ -21,6 +21,7 @@ import { baseUrl } from "@/api/baseUrl";
 import { cn } from "@/lib/utils";
 import { shareOrCopy } from "@/utils/browserUtil";
 import { useTranslation } from "react-i18next";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";

 type ExportProps = {
  className: string;
@@ -145,7 +146,7 @@ export default function ExportCard({
          <>
            {exportedRecording.thumb_path.length > 0 ? (
              <img
-                className="absolute inset-0 aspect-video size-full rounded-lg object-contain md:rounded-2xl"
+                className="absolute inset-0 aspect-video size-full rounded-lg object-cover md:rounded-2xl"
                src={`${baseUrl}${exportedRecording.thumb_path.replace("/media/frigate/", "")}`}
                onLoad={() => setLoading(false)}
              />
@@ -224,10 +225,9 @@ export default function ExportCard({
        {loading && (
          <Skeleton className="absolute inset-0 aspect-video rounded-lg md:rounded-2xl" />
        )}
-        <div className="rounded-b-l pointer-events-none absolute inset-x-0 bottom-0 h-[20%] rounded-lg bg-gradient-to-t from-black/60 to-transparent md:rounded-2xl">
-          <div className="mx-3 flex h-full items-end justify-between pb-1 text-sm text-white smart-capitalize">
-            {exportedRecording.name.replaceAll("_", " ")}
-          </div>
+        <ImageShadowOverlay />
+        <div className="absolute bottom-2 left-3 flex h-full items-end justify-between text-white smart-capitalize">
+          {exportedRecording.name.replaceAll("_", " ")}
        </div>
      </div>
    </>
--- a/web/src/components/classification/ClassificationModelWizardDialog.tsx
+++ b/web/src/components/classification/ClassificationModelWizardDialog.tsx
@@ -0,0 +1,66 @@
+import { useTranslation } from "react-i18next";
+import StepIndicator from "../indicators/StepIndicator";
+import {
+  Dialog,
+  DialogContent,
+  DialogDescription,
+  DialogHeader,
+  DialogTitle,
+} from "../ui/dialog";
+import { useState } from "react";
+
+const STEPS = [
+  "classificationWizard.steps.nameAndDefine",
+  "classificationWizard.steps.stateArea",
+  "classificationWizard.steps.chooseExamples",
+  "classificationWizard.steps.train",
+];
+
+type ClassificationModelWizardDialogProps = {
+  open: boolean;
+  onClose: () => void;
+};
+export default function ClassificationModelWizardDialog({
+  open,
+  onClose,
+}: ClassificationModelWizardDialogProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+
+  // step management
+  const [currentStep, _] = useState(0);
+
+  return (
+    <Dialog
+      open={open}
+      onOpenChange={(open) => {
+        if (!open) {
+          onClose;
+        }
+      }}
+    >
+      <DialogContent
+        className="max-h-[90dvh] max-w-4xl overflow-y-auto"
+        onInteractOutside={(e) => {
+          e.preventDefault();
+        }}
+      >
+        <StepIndicator
+          steps={STEPS}
+          currentStep={currentStep}
+          variant="dots"
+          className="mb-4 justify-start"
+        />
+        <DialogHeader>
+          <DialogTitle>{t("wizard.title")}</DialogTitle>
+          {currentStep === 0 && (
+            <DialogDescription>{t("wizard.description")}</DialogDescription>
+          )}
+        </DialogHeader>
+
+        <div className="pb-4">
+          <div className="size-full"></div>
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+}
--- a/web/src/components/overlay/ClassificationSelectionDialog.tsx
+++ b/web/src/components/overlay/ClassificationSelectionDialog.tsx
@@ -20,15 +20,14 @@ import {
  TooltipTrigger,
 } from "@/components/ui/tooltip";
 import { isDesktop, isMobile } from "react-device-detect";
-import { LuPlus } from "react-icons/lu";
 import { useTranslation } from "react-i18next";
 import { cn } from "@/lib/utils";
 import React, { ReactNode, useCallback, useMemo, useState } from "react";
 import TextEntryDialog from "./dialog/TextEntryDialog";
 import { Button } from "../ui/button";
-import { MdCategory } from "react-icons/md";
 import axios from "axios";
 import { toast } from "sonner";
+import { Separator } from "../ui/separator";

 type ClassificationSelectionDialogProps = {
  className?: string;
@@ -97,7 +96,7 @@ export default function ClassificationSelectionDialog({
      );

  return (
-    <div className={className ?? ""}>
+    <div className={className ?? "flex"}>
      {newClass && (
        <TextEntryDialog
          open={true}
@@ -128,23 +127,22 @@ export default function ClassificationSelectionDialog({
                isMobile && "gap-2 pb-4",
              )}
            >
-              <SelectorItem
-                className="flex cursor-pointer gap-2 smart-capitalize"
-                onClick={() => setNewClass(true)}
-              >
-                <LuPlus />
-                {t("createCategory.new")}
-              </SelectorItem>
              {classes.sort().map((category) => (
                <SelectorItem
                  key={category}
                  className="flex cursor-pointer gap-2 smart-capitalize"
                  onClick={() => onCategorizeImage(category)}
                >
-                  <MdCategory />
                  {category.replaceAll("_", " ")}
                </SelectorItem>
              ))}
+              <Separator />
+              <SelectorItem
+                className="flex cursor-pointer gap-2 smart-capitalize"
+                onClick={() => setNewClass(true)}
+              >
+                {t("createCategory.new")}
+              </SelectorItem>
            </div>
          </SelectorContent>
        </Selector>
--- a/web/src/components/overlay/FaceSelectionDialog.tsx
+++ b/web/src/components/overlay/FaceSelectionDialog.tsx
@@ -62,7 +62,7 @@ export default function FaceSelectionDialog({
      );

  return (
-    <div className={className ?? ""}>
+    <div className={className ?? "flex"}>
      {newFace && (
        <TextEntryDialog
          open={true}
--- a/web/src/components/overlay/ImageShadowOverlay.tsx
+++ b/web/src/components/overlay/ImageShadowOverlay.tsx
@@ -0,0 +1,27 @@
+import { cn } from "@/lib/utils";
+
+type ImageShadowOverlayProps = {
+  upperClassName?: string;
+  lowerClassName?: string;
+};
+export function ImageShadowOverlay({
+  upperClassName,
+  lowerClassName,
+}: ImageShadowOverlayProps) {
+  return (
+    <>
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl",
+          upperClassName,
+        )}
+      />
+      <div
+        className={cn(
+          "pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl",
+          lowerClassName,
+        )}
+      />
+    </>
+  );
+}
--- a/web/src/components/overlay/dialog/TrainFilterDialog.tsx
+++ b/web/src/components/overlay/dialog/TrainFilterDialog.tsx
@@ -60,7 +60,7 @@ export default function TrainFilterDialog({
          moreFiltersSelected ? "text-white" : "text-secondary-foreground",
        )}
      />
-      {isDesktop && t("more")}
+      {isDesktop && t("filter")}
    </Button>
  );
  const content = (
@@ -122,7 +122,7 @@ export default function TrainFilterDialog({
  return (
    <PlatformAwareSheet
      trigger={trigger}
-      title={t("more")}
+      title={t("filter")}
      content={content}
      contentClassName={cn(
        "w-auto lg:min-w-[275px] scrollbar-container h-full overflow-auto px-4",
--- a/web/src/components/player/BirdseyeLivePlayer.tsx
+++ b/web/src/components/player/BirdseyeLivePlayer.tsx
@@ -6,6 +6,7 @@ import MSEPlayer from "./MsePlayer";
 import { LivePlayerMode } from "@/types/live";
 import { cn } from "@/lib/utils";
 import React from "react";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";

 type LivePlayerProps = {
  className?: string;
@@ -76,8 +77,7 @@ export default function BirdseyeLivePlayer({
      )}
      onClick={onClick}
    >
-      <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
-      <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
+      <ImageShadowOverlay />
      <div className="size-full" ref={playerRef}>
        {player}
      </div>
--- a/web/src/components/player/LivePlayer.tsx
+++ b/web/src/components/player/LivePlayer.tsx
@@ -25,6 +25,7 @@ import { PlayerStats } from "./PlayerStats";
 import { LuVideoOff } from "react-icons/lu";
 import { Trans, useTranslation } from "react-i18next";
 import { useCameraFriendlyName } from "@/hooks/use-camera-friendly-name";
+import { ImageShadowOverlay } from "../overlay/ImageShadowOverlay";

 type LivePlayerProps = {
  cameraRef?: (ref: HTMLDivElement | null) => void;
@@ -328,10 +329,7 @@ export default function LivePlayer({
    >
      {cameraEnabled &&
        ((showStillWithoutActivity && !liveReady) || liveReady) && (
-          <>
-            <div className="pointer-events-none absolute inset-x-0 top-0 z-10 h-[30%] w-full rounded-lg bg-gradient-to-b from-black/20 to-transparent md:rounded-2xl"></div>
-            <div className="pointer-events-none absolute inset-x-0 bottom-0 z-10 h-[10%] w-full rounded-lg bg-gradient-to-t from-black/20 to-transparent md:rounded-2xl"></div>
-          </>
+          <ImageShadowOverlay />
        )}
      {player}
      {cameraEnabled &&
--- a/web/src/components/ui/dialog.tsx
+++ b/web/src/components/ui/dialog.tsx
@@ -107,7 +107,7 @@ const DialogContent = React.forwardRef<
    >
      {children}
      <DialogPrimitive.Close className="absolute right-4 top-4 rounded-sm opacity-70 ring-offset-background transition-opacity data-[state=open]:bg-accent data-[state=open]:text-muted-foreground hover:opacity-100 focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2 disabled:pointer-events-none">
-        <X className="h-4 w-4" />
+        <X className="h-4 w-4 text-secondary-foreground" />
        <span className="sr-only">Close</span>
      </DialogPrimitive.Close>
    </DialogPrimitive.Content>
--- a/web/src/pages/FaceLibrary.tsx
+++ b/web/src/pages/FaceLibrary.tsx
@@ -63,10 +63,6 @@ import {
 } from "react-icons/lu";
 import { toast } from "sonner";
 import useSWR from "swr";
-import SearchDetailDialog, {
-  SearchTab,
-} from "@/components/overlay/detail/SearchDetailDialog";
-import { SearchResult } from "@/types/search";
 import {
  ClassificationCard,
  GroupedClassificationCard,
@@ -686,11 +682,6 @@ function TrainingGrid({
    { ids: eventIdsQuery },
  ]);

-  // selection
-
-  const [selectedEvent, setSelectedEvent] = useState<Event>();
-  const [dialogTab, setDialogTab] = useState<SearchTab>("details");
-
  if (attemptImages.length == 0) {
    return (
      <div className="absolute left-1/2 top-1/2 flex -translate-x-1/2 -translate-y-1/2 flex-col items-center justify-center text-center">
@@ -701,40 +692,29 @@ function TrainingGrid({
  }

  return (
-    <>
-      <SearchDetailDialog
-        search={
-          selectedEvent ? (selectedEvent as unknown as SearchResult) : undefined
-        }
-        page={dialogTab}
-        setSimilarity={undefined}
-        setSearchPage={setDialogTab}
-        setSearch={(search) => setSelectedEvent(search as unknown as Event)}
-        setInputFocused={() => {}}
-      />
-
-      <div
-        ref={contentRef}
-        className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
-      >
-        {Object.entries(faceGroups).map(([key, group]) => {
-          const event = events?.find((ev) => ev.id == key);
-          return (
+    <div
+      ref={contentRef}
+      className={cn(
+        "scrollbar-container grid grid-cols-2 gap-3 overflow-y-scroll p-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
+      )}
+    >
+      {Object.entries(faceGroups).map(([key, group]) => {
+        const event = events?.find((ev) => ev.id == key);
+        return (
+          <div key={key} className="aspect-square w-full">
            <FaceAttemptGroup
-              key={key}
              config={config}
              group={group}
              event={event}
              faceNames={faceNames}
              selectedFaces={selectedFaces}
              onClickFaces={onClickFaces}
-              onSelectEvent={setSelectedEvent}
              onRefresh={onRefresh}
            />
-          );
-        })}
-      </div>
-    </>
+          </div>
+        );
+      })}
+    </div>
  );
 }

@@ -745,7 +725,6 @@ type FaceAttemptGroupProps = {
  faceNames: string[];
  selectedFaces: string[];
  onClickFaces: (image: string[], ctrl: boolean) => void;
-  onSelectEvent: (event: Event) => void;
  onRefresh: () => void;
 };
 function FaceAttemptGroup({
@@ -755,7 +734,6 @@ function FaceAttemptGroup({
  faceNames,
  selectedFaces,
  onClickFaces,
-  onSelectEvent,
  onRefresh,
 }: FaceAttemptGroupProps) {
  const { t } = useTranslation(["views/faceLibrary", "views/explore"]);
@@ -773,8 +751,8 @@ function FaceAttemptGroup({

  const handleClickEvent = useCallback(
    (meta: boolean) => {
-      if (event && selectedFaces.length == 0 && !meta) {
-        onSelectEvent(event);
+      if (!meta) {
+        return;
      } else {
        const anySelected =
          group.find((face) => selectedFaces.includes(face.filename)) !=
@@ -798,7 +776,7 @@ function FaceAttemptGroup({
        }
      }
    },
-    [event, group, selectedFaces, onClickFaces, onSelectEvent],
+    [group, selectedFaces, onClickFaces],
  );

  // api calls
@@ -873,7 +851,6 @@ function FaceAttemptGroup({
          handleClickEvent(true);
        }
      }}
-      onSelectEvent={onSelectEvent}
    >
      {(data) => (
        <>
@@ -881,12 +858,12 @@ function FaceAttemptGroup({
            faceNames={faceNames}
            onTrainAttempt={(name) => onTrainAttempt(data, name)}
          >
-            <AddFaceIcon className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
+            <AddFaceIcon className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
          </FaceSelectionDialog>
          <Tooltip>
            <TooltipTrigger>
              <LuRefreshCw
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
+                className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40"
                onClick={() => onReprocess(data)}
              />
            </TooltipTrigger>
@@ -934,36 +911,35 @@ function FaceGrid({
    <div
      ref={contentRef}
      className={cn(
-        "scrollbar-container gap-2 overflow-y-scroll p-1",
-        isDesktop ? "flex flex-wrap" : "grid grid-cols-2 md:grid-cols-4",
+        "scrollbar-container grid grid-cols-2 gap-2 overflow-y-scroll p-1 md:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
      )}
    >
      {sortedFaces.map((image: string) => (
-        <ClassificationCard
-          className="gap-2 rounded-lg bg-card p-2"
-          key={image}
-          data={{
-            name: pageToggle,
-            filename: image,
-            filepath: `clips/faces/${pageToggle}/${image}`,
-          }}
-          selected={selectedFaces.includes(image)}
-          i18nLibrary="views/faceLibrary"
-          onClick={(data, meta) => onClickFaces([data.filename], meta)}
-        >
-          <Tooltip>
-            <TooltipTrigger>
-              <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete(pageToggle, [image]);
-                }}
-              />
-            </TooltipTrigger>
-            <TooltipContent>{t("button.deleteFaceAttempts")}</TooltipContent>
-          </Tooltip>
-        </ClassificationCard>
+        <div key={image} className="aspect-square w-full">
+          <ClassificationCard
+            data={{
+              name: pageToggle,
+              filename: image,
+              filepath: `clips/faces/${pageToggle}/${image}`,
+            }}
+            selected={selectedFaces.includes(image)}
+            i18nLibrary="views/faceLibrary"
+            onClick={(data, meta) => onClickFaces([data.filename], meta)}
+          >
+            <Tooltip>
+              <TooltipTrigger>
+                <LuTrash2
+                  className="size-5 cursor-pointer text-gray-200 hover:text-danger"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete(pageToggle, [image]);
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent>{t("button.deleteFaceAttempts")}</TooltipContent>
+            </Tooltip>
+          </ClassificationCard>
+        </div>
      ))}
    </div>
  );
--- a/web/src/types/frigateConfig.ts
+++ b/web/src/types/frigateConfig.ts
@@ -304,10 +304,10 @@ export type CustomClassificationModelConfig = {
  enabled: boolean;
  name: string;
  threshold: number;
-  object_config: null | {
+  object_config?: {
    objects: string[];
  };
-  state_config: null | {
+  state_config?: {
    cameras: {
      [cameraName: string]: {
        crop: [number, number, number, number];
--- a/web/src/views/classification/ModelSelectionView.tsx
+++ b/web/src/views/classification/ModelSelectionView.tsx
@@ -1,24 +1,39 @@
 import { baseUrl } from "@/api/baseUrl";
+import ClassificationModelWizardDialog from "@/components/classification/ClassificationModelWizardDialog";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
+import { ImageShadowOverlay } from "@/components/overlay/ImageShadowOverlay";
+import { Button } from "@/components/ui/button";
+import { ToggleGroup, ToggleGroupItem } from "@/components/ui/toggle-group";
+import useOptimisticState from "@/hooks/use-optimistic-state";
 import { cn } from "@/lib/utils";
 import {
  CustomClassificationModelConfig,
  FrigateConfig,
 } from "@/types/frigateConfig";
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
 import { isMobile } from "react-device-detect";
+import { useTranslation } from "react-i18next";
+import { FaFolderPlus } from "react-icons/fa";
 import useSWR from "swr";

+const allModelTypes = ["objects", "states"] as const;
+type ModelType = (typeof allModelTypes)[number];
+
 type ModelSelectionViewProps = {
  onClick: (model: CustomClassificationModelConfig) => void;
 };
 export default function ModelSelectionView({
  onClick,
 }: ModelSelectionViewProps) {
+  const { t } = useTranslation(["views/classificationModel"]);
+  const [page, setPage] = useState<ModelType>("objects");
+  const [pageToggle, setPageToggle] = useOptimisticState(page, setPage, 100);
  const { data: config } = useSWR<FrigateConfig>("config", {
    revalidateOnFocus: false,
  });

+  // data
+
  const classificationConfigs = useMemo(() => {
    if (!config) {
      return [];
@@ -27,6 +42,24 @@ export default function ModelSelectionView({
    return Object.values(config.classification.custom);
  }, [config]);

+  const selectedClassificationConfigs = useMemo(() => {
+    return classificationConfigs.filter((model) => {
+      if (pageToggle == "objects" && model.object_config != undefined) {
+        return true;
+      }
+
+      if (pageToggle == "states" && model.state_config != undefined) {
+        return true;
+      }
+
+      return false;
+    });
+  }, [classificationConfigs, pageToggle]);
+
+  // new model wizard
+
+  const [newModel, setNewModel] = useState(false);
+
  if (!config) {
    return <ActivityIndicator />;
  }
@@ -36,14 +69,62 @@ export default function ModelSelectionView({
  }

  return (
-    <div className="flex size-full gap-2 p-2">
-      {classificationConfigs.map((config) => (
-        <ModelCard
-          key={config.name}
-          config={config}
-          onClick={() => onClick(config)}
-        />
-      ))}
+    <div className="flex size-full flex-col p-2">
+      <ClassificationModelWizardDialog
+        open={newModel}
+        onClose={() => setNewModel(false)}
+      />
+
+      <div className="flex h-12 w-full items-center justify-between">
+        <div className="flex flex-row items-center">
+          <ToggleGroup
+            className="*:rounded-md *:px-3 *:py-4"
+            type="single"
+            size="sm"
+            value={pageToggle}
+            onValueChange={(value: ModelType) => {
+              if (value) {
+                // Restrict viewer navigation
+                setPageToggle(value);
+              }
+            }}
+          >
+            {allModelTypes.map((item) => (
+              <ToggleGroupItem
+                key={item}
+                className={`flex scroll-mx-10 items-center justify-between gap-2 ${pageToggle == item ? "" : "*:text-muted-foreground"}`}
+                value={item}
+                data-nav-item={item}
+                aria-label={t("selectItem", {
+                  ns: "common",
+                  item: t("menu." + item),
+                })}
+              >
+                <div className="smart-capitalize">{t("menu." + item)}</div>
+              </ToggleGroupItem>
+            ))}
+          </ToggleGroup>
+        </div>
+        <div className="flex flex-row items-center">
+          <Button
+            className="flex flex-row items-center gap-2"
+            variant="select"
+            onClick={() => setNewModel(true)}
+          >
+            <FaFolderPlus />
+            Add Classification
+          </Button>
+        </div>
+      </div>
+      <div className="flex size-full gap-2 p-2">
+        {selectedClassificationConfigs.map((config) => (
+          <ModelCard
+            key={config.name}
+            config={config}
+            onClick={() => onClick(config)}
+          />
+        ))}
+      </div>
    </div>
  );
 }
@@ -57,46 +138,37 @@ function ModelCard({ config, onClick }: ModelCardProps) {
    [id: string]: string[];
  }>(`classification/${config.name}/dataset`, { revalidateOnFocus: false });

-  const coverImages = useMemo(() => {
-    if (!dataset) {
-      return {};
+  const coverImage = useMemo(() => {
+    if (!dataset?.length) {
+      return undefined;
    }

-    const imageMap: { [key: string]: string } = {};
+    const keys = Object.keys(dataset).filter((key) => key != "none");
+    const selectedKey = keys[0];

-    for (const [key, imageList] of Object.entries(dataset)) {
-      if (imageList.length > 0) {
-        imageMap[key] = imageList[0];
-      }
-    }
-
-    return imageMap;
+    return {
+      name: selectedKey,
+      img: dataset[selectedKey][0],
+    };
  }, [dataset]);

  return (
    <div
      key={config.name}
      className={cn(
-        "flex h-60 cursor-pointer flex-col items-center gap-2 rounded-lg bg-card p-2 outline outline-[3px]",
+        "relative size-60 cursor-pointer overflow-hidden rounded-lg",
        "outline-transparent duration-500",
        isMobile && "w-full",
      )}
      onClick={() => onClick()}
    >
-      <div
-        className={cn("grid size-48 grid-cols-2 gap-2", isMobile && "w-full")}
-      >
-        {Object.entries(coverImages).map(([key, image]) => (
-          <img
-            key={key}
-            className=""
-            src={`${baseUrl}clips/${config.name}/dataset/${key}/${image}`}
-          />
-        ))}
-      </div>
-      <div className="smart-capitalize">
-        {config.name} ({config.state_config != null ? "State" : "Object"}{" "}
-        Classification)
+      <img
+        className={cn("size-full", isMobile && "w-full")}
+        src={`${baseUrl}clips/${config.name}/dataset/${coverImage?.name}/${coverImage?.img}`}
+      />
+      <ImageShadowOverlay />
+      <div className="absolute bottom-2 left-3 text-lg smart-capitalize">
+        {config.name}
      </div>
    </div>
  );
--- a/web/src/views/classification/ModelTrainingView.tsx
+++ b/web/src/views/classification/ModelTrainingView.tsx
@@ -44,7 +44,7 @@ import {
  useRef,
  useState,
 } from "react";
-import { isDesktop, isMobile } from "react-device-detect";
+import { isDesktop } from "react-device-detect";
 import { Trans, useTranslation } from "react-i18next";
 import { LuPencil, LuTrash2 } from "react-icons/lu";
 import { toast } from "sonner";
@@ -56,7 +56,6 @@ import { ModelState } from "@/types/ws";
 import ActivityIndicator from "@/components/indicators/activity-indicator";
 import { useNavigate } from "react-router-dom";
 import { IoMdArrowRoundBack } from "react-icons/io";
-import { MdAutoFixHigh } from "react-icons/md";
 import TrainFilterDialog from "@/components/overlay/dialog/TrainFilterDialog";
 import useApiFilter from "@/hooks/use-api-filter";
 import { ClassificationItemData, TrainFilter } from "@/types/classification";
@@ -69,6 +68,7 @@ import SearchDetailDialog, {
  SearchTab,
 } from "@/components/overlay/detail/SearchDetailDialog";
 import { SearchResult } from "@/types/search";
+import { HiSparkles } from "react-icons/hi";

 type ModelTrainingViewProps = {
  model: CustomClassificationModelConfig;
@@ -378,12 +378,13 @@ export default function ModelTrainingView({ model }: ModelTrainingViewProps) {
            <Button
              className="flex justify-center gap-2"
              onClick={trainModel}
+              variant="select"
              disabled={modelState != "complete"}
            >
              {modelState == "training" ? (
                <ActivityIndicator size={20} />
              ) : (
-                <MdAutoFixHigh className="text-secondary-foreground" />
+                <HiSparkles className="text-white" />
              )}
              {isDesktop && t("button.trainModel")}
            </Button>
@@ -631,37 +632,36 @@ function DatasetGrid({
  return (
    <div
      ref={contentRef}
-      className="scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2"
+      className="scrollbar-container grid grid-cols-2 gap-2 overflow-y-scroll p-1 md:grid-cols-4 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12"
    >
      {classData.map((image) => (
-        <ClassificationCard
-          key={image}
-          className="w-60 gap-4 rounded-lg bg-card p-2"
-          imgClassName="size-auto"
-          data={{
-            filename: image,
-            filepath: `clips/${modelName}/dataset/${categoryName}/${image}`,
-            name: "",
-          }}
-          selected={selectedImages.includes(image)}
-          i18nLibrary="views/classificationModel"
-          onClick={(data, _) => onClickImages([data.filename], true)}
-        >
-          <Tooltip>
-            <TooltipTrigger>
-              <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete([image]);
-                }}
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              {t("button.deleteClassificationAttempts")}
-            </TooltipContent>
-          </Tooltip>
-        </ClassificationCard>
+        <div key={image} className="aspect-square w-full">
+          <ClassificationCard
+            data={{
+              filename: image,
+              filepath: `clips/${modelName}/dataset/${categoryName}/${image}`,
+              name: "",
+            }}
+            selected={selectedImages.includes(image)}
+            i18nLibrary="views/classificationModel"
+            onClick={(data, _) => onClickImages([data.filename], true)}
+          >
+            <Tooltip>
+              <TooltipTrigger>
+                <LuTrash2
+                  className="size-5 cursor-pointer text-primary-variant hover:text-danger"
+                  onClick={(e) => {
+                    e.stopPropagation();
+                    onDelete([image]);
+                  }}
+                />
+              </TooltipTrigger>
+              <TooltipContent>
+                {t("button.deleteClassificationAttempts")}
+              </TooltipContent>
+            </Tooltip>
+          </ClassificationCard>
+        </div>
      ))}
    </div>
  );
@@ -757,7 +757,6 @@ function TrainGrid({
      selectedImages={selectedImages}
      onClickImages={onClickImages}
      onRefresh={onRefresh}
-      onDelete={onDelete}
    />
  );
 }
@@ -780,10 +779,7 @@ function StateTrainGrid({
  selectedImages,
  onClickImages,
  onRefresh,
-  onDelete,
 }: StateTrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
  const threshold = useMemo(() => {
    return {
      recognition: model.threshold,
@@ -795,45 +791,29 @@ function StateTrainGrid({
    <div
      ref={contentRef}
      className={cn(
-        "scrollbar-container flex flex-wrap gap-2 overflow-y-auto p-2",
-        isMobile && "justify-center",
+        "scrollbar-container grid grid-cols-2 gap-3 overflow-y-scroll p-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
      )}
    >
      {trainData?.map((data) => (
-        <ClassificationCard
-          key={data.filename}
-          className="w-60 gap-2 rounded-lg bg-card p-2"
-          imgClassName="size-auto"
-          data={data}
-          threshold={threshold}
-          selected={selectedImages.includes(data.filename)}
-          i18nLibrary="views/classificationModel"
-          showArea={false}
-          onClick={(data, meta) => onClickImages([data.filename], meta)}
-        >
-          <ClassificationSelectionDialog
-            classes={classes}
-            modelName={model.name}
-            image={data.filename}
-            onRefresh={onRefresh}
+        <div key={data.filename} className="aspect-square w-full">
+          <ClassificationCard
+            data={data}
+            threshold={threshold}
+            selected={selectedImages.includes(data.filename)}
+            i18nLibrary="views/classificationModel"
+            showArea={false}
+            onClick={(data, meta) => onClickImages([data.filename], meta)}
          >
-            <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
-          </ClassificationSelectionDialog>
-          <Tooltip>
-            <TooltipTrigger>
-              <LuTrash2
-                className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                onClick={(e) => {
-                  e.stopPropagation();
-                  onDelete([data.filename]);
-                }}
-              />
-            </TooltipTrigger>
-            <TooltipContent>
-              {t("button.deleteClassificationAttempts")}
-            </TooltipContent>
-          </Tooltip>
-        </ClassificationCard>
+            <ClassificationSelectionDialog
+              classes={classes}
+              modelName={model.name}
+              image={data.filename}
+              onRefresh={onRefresh}
+            >
+              <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+            </ClassificationSelectionDialog>
+          </ClassificationCard>
+        </div>
      ))}
    </div>
  );
@@ -847,7 +827,6 @@ type ObjectTrainGridProps = {
  selectedImages: string[];
  onClickImages: (images: string[], ctrl: boolean) => void;
  onRefresh: () => void;
-  onDelete: (ids: string[]) => void;
 };
 function ObjectTrainGrid({
  model,
@@ -857,10 +836,7 @@ function ObjectTrainGrid({
  selectedImages,
  onClickImages,
  onRefresh,
-  onDelete,
 }: ObjectTrainGridProps) {
-  const { t } = useTranslation(["views/classificationModel"]);
-
  // item data

  const groups = useMemo(() => {
@@ -950,55 +926,43 @@ function ObjectTrainGrid({

      <div
        ref={contentRef}
-        className="scrollbar-container flex flex-wrap gap-2 overflow-y-scroll p-1"
+        className={cn(
+          "scrollbar-container grid grid-cols-2 gap-3 overflow-y-scroll p-1 sm:grid-cols-3 md:grid-cols-4 lg:grid-cols-6 xl:grid-cols-8 2xl:grid-cols-10 3xl:grid-cols-12",
+        )}
      >
        {Object.entries(groups).map(([key, group]) => {
          const event = events?.find((ev) => ev.id == key);
          return (
-            <GroupedClassificationCard
-              key={key}
-              group={group}
-              event={event}
-              threshold={threshold}
-              selectedItems={selectedImages}
-              i18nLibrary="views/classificationModel"
-              objectType={model.object_config?.objects?.at(0) ?? "Object"}
-              onClick={(data) => {
-                if (data) {
-                  onClickImages([data.filename], true);
-                } else {
-                  handleClickEvent(group, event, true);
-                }
-              }}
-              onSelectEvent={() => {}}
-            >
-              {(data) => (
-                <>
-                  <ClassificationSelectionDialog
-                    classes={classes}
-                    modelName={model.name}
-                    image={data.filename}
-                    onRefresh={onRefresh}
-                  >
-                    <TbCategoryPlus className="size-5 cursor-pointer text-primary-variant hover:text-primary" />
-                  </ClassificationSelectionDialog>
-                  <Tooltip>
-                    <TooltipTrigger>
-                      <LuTrash2
-                        className="size-5 cursor-pointer text-primary-variant hover:text-primary"
-                        onClick={(e) => {
-                          e.stopPropagation();
-                          onDelete([data.filename]);
-                        }}
-                      />
-                    </TooltipTrigger>
-                    <TooltipContent>
-                      {t("button.deleteClassificationAttempts")}
-                    </TooltipContent>
-                  </Tooltip>
-                </>
-              )}
-            </GroupedClassificationCard>
+            <div key={key} className="aspect-square w-full">
+              <GroupedClassificationCard
+                group={group}
+                event={event}
+                threshold={threshold}
+                selectedItems={selectedImages}
+                i18nLibrary="views/classificationModel"
+                objectType={model.object_config?.objects?.at(0) ?? "Object"}
+                onClick={(data) => {
+                  if (data) {
+                    onClickImages([data.filename], true);
+                  } else {
+                    handleClickEvent(group, event, true);
+                  }
+                }}
+              >
+                {(data) => (
+                  <>
+                    <ClassificationSelectionDialog
+                      classes={classes}
+                      modelName={model.name}
+                      image={data.filename}
+                      onRefresh={onRefresh}
+                    >
+                      <TbCategoryPlus className="size-7 cursor-pointer p-1 text-gray-200 hover:rounded-full hover:bg-primary-foreground/40" />
+                    </ClassificationSelectionDialog>
+                  </>
+                )}
+              </GroupedClassificationCard>
+            </div>
          );
        })}
      </div>