diff --git a/ui/src/App.tsx b/ui/src/App.tsx
index b6416807..f38ba42c 100644
--- a/ui/src/App.tsx
+++ b/ui/src/App.tsx
@@ -338,7 +338,7 @@ function App() {
       </header>
       <main className="flex h-[calc(100vh-4rem)] gap-4 p-4 overflow-hidden">
         <div className="w-3/5">
-          <Providers />
+          <Providers showToast={(message, type) => setToast({ message, type })} />
         </div>
         <div className="flex w-2/5 flex-col gap-4">
           <div className="h-3/5">
diff --git a/ui/src/components/ProviderList.tsx b/ui/src/components/ProviderList.tsx
index 72602e97..b89692da 100644
--- a/ui/src/components/ProviderList.tsx
+++ b/ui/src/components/ProviderList.tsx
@@ -7,9 +7,10 @@ interface ProviderListProps {
   providers: Provider[];
   onEdit: (index: number) => void;
   onRemove: (index: number) => void;
+  showToast: (message: string, type: 'success' | 'error' | 'warning') => void;
 }
 
-export function ProviderList({ providers, onEdit, onRemove }: ProviderListProps) {
+export function ProviderList({ providers, onEdit, onRemove, showToast }: ProviderListProps) {
   // Handle case where providers might be null or undefined
   if (!providers || !Array.isArray(providers)) {
     return (
@@ -61,7 +62,21 @@ export function ProviderList({ providers, onEdit, onRemove }: ProviderListProps)
               <div className="flex flex-wrap gap-2 pt-2">
                 {models.map((model, modelIndex) => (
                   // Handle case where model might be null or undefined
-                  <Badge key={modelIndex} variant="outline" className="font-normal transition-all-ease hover:scale-105">
+                  <Badge 
+                    key={modelIndex} 
+                    variant="outline" 
+                    className="font-normal transition-all-ease hover:scale-105 cursor-pointer"
+                    onClick={async () => {
+                      const textToCopy = `${providerName},${model}`;
+                      try {
+                        await navigator.clipboard.writeText(textToCopy);
+                        showToast(`"${textToCopy}" copied to clipboard!`, 'success');
+                      } catch (err) {
+                        console.error('Failed to copy text: ', err);
+                        showToast('Failed to copy to clipboard.', 'error');
+                      }
+                    }}
+                  >
                     {model || "Unnamed Model"}
                   </Badge>
                 ))}
diff --git a/ui/src/components/Providers.tsx b/ui/src/components/Providers.tsx
index 4bb51b8a..02a0b2e2 100644
--- a/ui/src/components/Providers.tsx
+++ b/ui/src/components/Providers.tsx
@@ -23,7 +23,7 @@ import type { Provider } from "@/types";
 
 interface ProviderType extends Provider {}
 
-export function Providers() {
+export function Providers({ showToast }: { showToast: (message: string, type: 'success' | 'error' | 'warning') => void }) {
   const { t } = useTranslation();
   const { config, setConfig } = useConfig();
   const [editingProviderIndex, setEditingProviderIndex] = useState<number | null>(null);
@@ -551,6 +551,7 @@ export function Providers() {
           providers={filteredProviders}
           onEdit={handleEditProvider}
           onRemove={handleSetDeletingProviderIndex}
+          showToast={showToast}
         />
       </CardContent>
 
diff --git a/ui/src/lib/api.ts b/ui/src/lib/api.ts
index b98e7874..d221ec91 100644
--- a/ui/src/lib/api.ts
+++ b/ui/src/lib/api.ts
@@ -75,10 +75,13 @@ class ApiClient {
   private async apiFetch<T>(endpoint: string, options: RequestInit = {}): Promise<T> {
     const url = `${this.baseUrl}${endpoint}`;
     
+    // Only set Content-Type if there is a body
+    const contentType = options.body ? 'application/json' : '';
+    
     const config: RequestInit = {
       ...options,
       headers: {
-        ...this.createHeaders(),
+        ...this.createHeaders(contentType),
         ...options.headers,
       },
     };