diff --git a/ui/litellm-dashboard/src/components/add_model/ConnectionErrorDisplay.tsx b/ui/litellm-dashboard/src/components/add_model/ConnectionErrorDisplay.tsx
index 96e6b83c36d..7eb7e2a1902 100644
--- a/ui/litellm-dashboard/src/components/add_model/ConnectionErrorDisplay.tsx
+++ b/ui/litellm-dashboard/src/components/add_model/ConnectionErrorDisplay.tsx
@@ -101,42 +101,65 @@ ${formattedBody}
   ) : '';
 
   return (
-    <div style={{ padding: '16px 24px' }}>
+    <div style={{ padding: '24px', borderRadius: '8px', backgroundColor: '#fff' }}>
       {isLoading ? (
-        <div style={{ textAlign: 'center', padding: '20px' }}>
-          <div>Testing connection to {modelName}...</div>
-          {/* You could add a spinner here */}
+        <div style={{ textAlign: 'center', padding: '32px 20px' }}>
+          <div className="loading-spinner" style={{ marginBottom: '16px' }}>
+            {/* Simple CSS spinner */}
+            <div style={{ 
+              border: '3px solid #f3f3f3',
+              borderTop: '3px solid #1890ff',
+              borderRadius: '50%',
+              width: '30px',
+              height: '30px',
+              animation: 'spin 1s linear infinite',
+              margin: '0 auto'
+            }} />
+          </div>
+          <Text style={{ fontSize: '16px' }}>Testing connection to {modelName}...</Text>
+          <style jsx>{`
+            @keyframes spin {
+              0% { transform: rotate(0deg); }
+              100% { transform: rotate(360deg); }
+            }
+          `}</style>
         </div>
       ) : isSuccess ? (
-        <div style={{ textAlign: 'center', padding: '20px' }}>
-          <Text type="success" style={{ fontSize: '16px' }}>
+        <div style={{ textAlign: 'center', padding: '32px 20px' }}>
+          <div style={{ color: '#52c41a', fontSize: '32px', marginBottom: '16px' }}>
+            <svg viewBox="64 64 896 896" focusable="false" data-icon="check-circle" width="1em" height="1em" fill="currentColor" aria-hidden="true">
+              <path d="M512 64C264.6 64 64 264.6 64 512s200.6 448 448 448 448-200.6 448-448S759.4 64 512 64zm193.5 301.7l-210.6 292a31.8 31.8 0 01-51.7 0L318.5 484.9c-3.8-5.3 0-12.7 6.5-12.7h46.9c10.2 0 19.9 4.9 25.9 13.3l71.2 98.8 157.2-218c6-8.3 15.6-13.3 25.9-13.3H699c6.5 0 10.3 7.4 6.5 12.7z"></path>
+            </svg>
+          </div>
+          <Text type="success" style={{ fontSize: '18px', fontWeight: 500 }}>
             Connection to {modelName} successful!
           </Text>
         </div>
       ) : (
         <>
           <div>
-            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '16px' }}>
-              <WarningOutlined style={{ color: '#ff4d4f', fontSize: '20px', marginRight: '8px' }} />
-              <Text type="danger" style={{ fontSize: '16px' }}>Connection to {modelName} failed</Text>
+            <div style={{ display: 'flex', alignItems: 'center', marginBottom: '20px' }}>
+              <WarningOutlined style={{ color: '#ff4d4f', fontSize: '24px', marginRight: '12px' }} />
+              <Text type="danger" style={{ fontSize: '18px', fontWeight: 500 }}>Connection to {modelName} failed</Text>
             </div>
             
             <div style={{ 
               backgroundColor: '#fff2f0', 
               border: '1px solid #ffccc7', 
-              borderRadius: '6px', 
+              borderRadius: '8px', 
               padding: '16px', 
-              marginBottom: '16px' 
+              marginBottom: '20px',
+              boxShadow: '0 1px 2px rgba(0, 0, 0, 0.03)'
             }}>
-              <Text strong>Error: </Text>
-              <Text type="danger">{errorMessage}</Text>
+              <Text strong style={{ display: 'block', marginBottom: '8px' }}>Error: </Text>
+              <Text type="danger" style={{ fontSize: '14px', lineHeight: '1.5' }}>{errorMessage}</Text>
               
               {error && (
-                <div style={{ marginTop: '8px' }}>
+                <div style={{ marginTop: '12px' }}>
                   <Button 
                     type="link" 
                     onClick={() => setShowDetails(!showDetails)}
-                    style={{ paddingLeft: 0 }}
+                    style={{ paddingLeft: 0, height: 'auto' }}
                   >
                     {showDetails ? 'Hide Details' : 'Show Details'}
                   </Button>
@@ -145,15 +168,17 @@ ${formattedBody}
             </div>
             
             {showDetails && (
-              <div style={{ marginBottom: '16px' }}>
-                <h4>Troubleshooting Details</h4>
+              <div style={{ marginBottom: '20px' }}>
+                <Text strong style={{ display: 'block', marginBottom: '8px', fontSize: '15px' }}>Troubleshooting Details</Text>
                 <pre style={{ 
                   backgroundColor: '#f5f5f5', 
-                  padding: '12px', 
-                  borderRadius: '6px',
-                  fontSize: '12px',
+                  padding: '16px', 
+                  borderRadius: '8px',
+                  fontSize: '13px',
                   maxHeight: '200px',
-                  overflow: 'auto'
+                  overflow: 'auto',
+                  border: '1px solid #e8e8e8',
+                  lineHeight: '1.5'
                 }}>
                   {typeof error === 'string' ? error : JSON.stringify(error, null, 2)}
                 </pre>
@@ -161,19 +186,21 @@ ${formattedBody}
             )}
             
             <div>
-              <h4>API Request</h4>
+              <Text strong style={{ display: 'block', marginBottom: '8px', fontSize: '15px' }}>API Request</Text>
               <pre style={{ 
                 backgroundColor: '#f5f5f5', 
-                padding: '12px', 
-                borderRadius: '6px',
-                fontSize: '12px',
-                maxHeight: '200px',
-                overflow: 'auto'
+                padding: '16px', 
+                borderRadius: '8px',
+                fontSize: '13px',
+                maxHeight: '250px',
+                overflow: 'auto',
+                border: '1px solid #e8e8e8',
+                lineHeight: '1.5'
               }}>
                 {curlCommand || "No request data available"}
               </pre>
               <Button 
-                type="text" 
+                style={{ marginTop: '8px' }}
                 icon={<CopyOutlined />} 
                 onClick={() => {
                   navigator.clipboard.writeText(curlCommand || '');
@@ -186,8 +213,8 @@ ${formattedBody}
           </div>
         </>
       )}
-      <Divider style={{ margin: '16px 0' }} />
-      <div style={{ display: 'flex', justifyContent: 'space-between' }}>
+      <Divider style={{ margin: '24px 0 16px' }} />
+      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'center' }}>
         <Button 
           type="link" 
           href="https://docs.litellm.ai/docs/providers" 
@@ -197,6 +224,11 @@ ${formattedBody}
           View Documentation
         </Button>
         
+        {onClose && (
+          <Button onClick={onClose} type="primary">
+            Close
+          </Button>
+        )}
       </div>
     </div>
   );