diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx
deleted file mode 100644
index 1c5a3cedb6b..00000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.test.tsx
+++ /dev/null
@@ -1,61 +0,0 @@
-import { render, screen } from "@testing-library/react";
-import userEvent from "@testing-library/user-event";
-import { describe, expect, it, vi } from "vitest";
-import { ModelSelector } from "./ModelSelector";
-
-const MODELS = ["gpt-4", "gpt-3.5-turbo"];
-
-describe("ModelSelector", () => {
-  it("should render", () => {
-    render(<ModelSelector value="" onChange={vi.fn()} models={MODELS} />);
-    expect(screen.getByRole("combobox")).toBeInTheDocument();
-  });
-
-  it("reports the model the user picks from the dropdown", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<ModelSelector value="" onChange={onChange} models={MODELS} />);
-
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByRole("option", { name: "gpt-4" }));
-
-    expect(onChange).toHaveBeenCalledWith("gpt-4");
-  });
-
-  it("displays a custom value that is not one of the known models", () => {
-    render(<ModelSelector value="custom-model-123" onChange={vi.fn()} models={MODELS} />);
-
-    expect(screen.getByRole("combobox")).toHaveValue("custom-model-123");
-  });
-
-  it("reports a custom model typed into the custom name field", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    render(<ModelSelector value="" onChange={onChange} models={MODELS} />);
-
-    await user.click(screen.getByRole("combobox"));
-    await user.click(await screen.findByRole("option", { name: "+ Add custom model" }));
-    await user.type(await screen.findByPlaceholderText("Custom Model Name (Enter to add)"), "my-custom-model{Enter}");
-
-    expect(onChange).toHaveBeenCalledWith("my-custom-model");
-  });
-
-  it("disables the control when disabled is set", async () => {
-    const user = userEvent.setup();
-    const onChange = vi.fn();
-    const { rerender } = render(<ModelSelector value="custom-model-123" onChange={onChange} models={MODELS} />);
-    expect(screen.getByRole("combobox")).toBeEnabled();
-
-    rerender(<ModelSelector value="custom-model-123" onChange={onChange} models={MODELS} disabled={true} />);
-
-    const combobox = screen.getByRole("combobox");
-    expect(combobox).toBeDisabled();
-
-    await user.click(combobox);
-    await user.keyboard("gpt-4");
-
-    expect(combobox).toHaveValue("custom-model-123");
-    expect(screen.queryByRole("option")).not.toBeInTheDocument();
-    expect(onChange).not.toHaveBeenCalled();
-  });
-});
diff --git a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx b/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx
deleted file mode 100644
index 8ecc0e0c8bb..00000000000
--- a/ui/litellm-dashboard/src/app/(dashboard)/playground/components/compareUI/components/ModelSelector.tsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { useMemo, useState } from "react";
-import { SearchSelect } from "@/components/shared/SearchSelect";
-import { Input } from "@/components/ui/input";
-interface ModelSelectorProps {
-  value: string;
-  onChange: (value: string) => void;
-  models: string[];
-  loading?: boolean;
-  disabled?: boolean;
-}
-export function ModelSelector({ value, onChange, models, loading, disabled }: ModelSelectorProps) {
-  const [isAddingCustom, setIsAddingCustom] = useState(false);
-  const [customValue, setCustomValue] = useState("");
-
-  const options = useMemo(() => Array.from(new Set(models)).sort(), [models]);
-  const displayOptions = useMemo(() => {
-    if (value && !options.includes(value)) {
-      return [value, ...options];
-    }
-    return options;
-  }, [options, value]);
-
-  const selectValue = isAddingCustom ? "__custom__" : value || undefined;
-
-  const handleSelectChange = (selected: string | null) => {
-    if (selected === null) return;
-    if (selected === "__custom__") {
-      setIsAddingCustom(true);
-      if (value && !options.includes(value)) {
-        setCustomValue(value);
-      } else {
-        setCustomValue("");
-      }
-      return;
-    }
-    setIsAddingCustom(false);
-    setCustomValue("");
-    onChange(selected);
-  };
-
-  const commitCustomValue = () => {
-    const trimmed = customValue.trim();
-    if (!trimmed) {
-      setIsAddingCustom(false);
-      setCustomValue("");
-      return;
-    }
-    onChange(trimmed);
-    setIsAddingCustom(false);
-    setCustomValue("");
-  };
-  return (
-    <div className="flex-1 min-w-0">
-      <SearchSelect
-        options={[
-          ...displayOptions.map((model) => ({ label: model, value: model })),
-          { label: "+ Add custom model", value: "__custom__" },
-        ]}
-        value={selectValue ?? ""}
-        onValueChange={handleSelectChange}
-        disabled={disabled}
-        placeholder={loading ? "Loading models..." : "Select a model"}
-        emptyText="No models found"
-        allowClear={false}
-        className="rounded-md"
-      />
-      {isAddingCustom && (
-        <Input
-          className="mt-2"
-          placeholder="Custom Model Name (Enter to add)"
-          value={customValue}
-          onChange={(e) => setCustomValue(e.target.value)}
-          onKeyDown={(event) => {
-            if (event.key === "Enter") {
-              event.preventDefault();
-              commitCustomValue();
-            }
-          }}
-          onBlur={commitCustomValue}
-          autoFocus
-        />
-      )}
-    </div>
-  );
-}