diff --git a/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts b/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts
index 0f92b61a46e..62f3c3ace08 100644
--- a/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts
+++ b/ui/litellm-dashboard/src/components/EntityUsageExport/types.ts
@@ -1,3 +1,4 @@
+// eslint-disable-next-line litellm-ui/no-banned-ui-imports
 import type { DateRangePickerValue } from "@tremor/react";
 import type { Team } from "@/components/key_team_helpers/key_list";
 
diff --git a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
index 0a77c252133..95504ebfe79 100644
--- a/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/conditional_public_model_name.tsx
@@ -1,6 +1,6 @@
 import React, { useEffect, useState } from "react";
 import { Form, Table } from "antd";
-import { TextInput } from "@tremor/react";
+import { Input } from "@/components/ui/input";
 import { Tooltip } from "../atoms/index";
 import { Providers } from "../provider_info_helpers";
 
@@ -18,6 +18,7 @@ const ConditionalPublicModelName: React.FC = () => {
   useEffect(() => {
     if (customModelName && selectedModels.includes("custom")) {
       const currentMappings = form.getFieldValue("model_mappings") || [];
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const updatedMappings = currentMappings.map((mapping: any) => {
         if (mapping.public_name === "custom" || mapping.litellm_model === "custom") {
           if (selectedProvider === Providers.Azure) {
@@ -95,19 +96,32 @@ const ConditionalPublicModelName: React.FC = () => {
 
   const publicNameTooltipContent = (
     <>
-      <div className="mb-2 font-normal">The name you specify in your API calls to LiteLLM Proxy</div>
+      <div className="mb-2 font-normal">
+        The name you specify in your API calls to LiteLLM Proxy
+      </div>
       <div className="mb-2 font-normal">
         <strong>Example:</strong> If you name your public model{" "}
-        <code className="bg-gray-700 px-1 py-0.5 rounded text-xs">example-name</code>, and choose{" "}
-        <code className="bg-gray-700 px-1 py-0.5 rounded text-xs">openai/qwen-plus-latest</code> as the LiteLLM model
+        <code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
+          example-name
+        </code>
+        , and choose{" "}
+        <code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
+          openai/qwen-plus-latest
+        </code>{" "}
+        as the LiteLLM model
       </div>
       <div className="mb-2 font-normal">
         <strong>Usage:</strong> You make an API call to the LiteLLM proxy with{" "}
-        <code className="bg-gray-700 px-1 py-0.5 rounded text-xs">model = &quot;example-name&quot;</code>
+        <code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
+          model = &quot;example-name&quot;
+        </code>
       </div>
       <div className="font-normal">
         <strong>Result:</strong> LiteLLM sends{" "}
-        <code className="bg-gray-700 px-1 py-0.5 rounded text-xs">qwen-plus-latest</code> to the provider
+        <code className="bg-foreground/70 text-background px-1 py-0.5 rounded text-xs">
+          qwen-plus-latest
+        </code>{" "}
+        to the provider
       </div>
     </>
   );
@@ -124,9 +138,10 @@ const ConditionalPublicModelName: React.FC = () => {
       ),
       dataIndex: "public_name",
       key: "public_name",
+      // eslint-disable-next-line @typescript-eslint/no-explicit-any
       render: (text: string, record: any, index: number) => {
         return (
-          <TextInput
+          <Input
             value={text}
             onChange={(e) => {
               const newValue = e.target.value;
@@ -188,9 +203,10 @@ const ConditionalPublicModelName: React.FC = () => {
               if (!value || value.length === 0) {
                 throw new Error("At least one model mapping is required");
               }
-              // Check if all mappings have valid public names
               const invalidMappings = value.filter(
-                (mapping: any) => !mapping.public_name || mapping.public_name.trim() === "",
+                // eslint-disable-next-line @typescript-eslint/no-explicit-any
+                (mapping: any) =>
+                  !mapping.public_name || mapping.public_name.trim() === "",
               );
               if (invalidMappings.length > 0) {
                 throw new Error("All model mappings must have valid public names");