diff --git a/apps/landing/src/components/docs/final/InteractiveAPIWidgetFinal.tsx b/apps/landing/src/components/docs/final/InteractiveAPIWidgetFinal.tsx
index 183ebc7..a146cb6 100644
--- a/apps/landing/src/components/docs/final/InteractiveAPIWidgetFinal.tsx
+++ b/apps/landing/src/components/docs/final/InteractiveAPIWidgetFinal.tsx
@@ -26,23 +26,23 @@ interface InteractiveAPIWidgetFinalProps {
   }>;
 }
 
-type Language = 'curl' | 'javascript' | 'python' | 'go';
+type Language = 'curl' | 'javascript' | 'python' | 'go' | 'js-sdk' | 'mcp';
 
 const API_BASE_URL = process.env.NEXT_PUBLIC_API_URL || 'http://localhost:3000';
 const API_KEY_STORAGE = 'banatie_docs_api_key';
 
-const getMethodColor = (method: string): string => {
+const getMethodBadgeStyle = (method: string): string => {
   switch (method) {
     case 'GET':
-      return 'from-cyan-500 to-cyan-600';
+      return 'bg-cyan-600/20 text-cyan-400 border border-cyan-500/40';
     case 'POST':
-      return 'from-purple-500 to-purple-600';
+      return 'bg-green-600/20 text-green-400 border border-green-500/40';
     case 'PUT':
-      return 'from-amber-500 to-amber-600';
+      return 'bg-amber-600/20 text-amber-400 border border-amber-500/40';
     case 'DELETE':
-      return 'from-red-500 to-red-600';
+      return 'bg-red-600/20 text-red-400 border border-red-500/40';
     default:
-      return 'from-purple-500 to-cyan-500';
+      return 'bg-slate-600/20 text-slate-400 border border-slate-500/40';
   }
 };
 
@@ -96,10 +96,33 @@ export const InteractiveAPIWidgetFinal = ({
     };
   }, [parameters]);
 
+  // Get language display name
+  const getLanguageLabel = (lang: Language): string => {
+    switch (lang) {
+      case 'curl':
+        return 'cURL';
+      case 'javascript':
+        return 'JavaScript';
+      case 'python':
+        return 'Python';
+      case 'go':
+        return 'Go';
+      case 'js-sdk':
+        return 'JS SDK';
+      case 'mcp':
+        return 'MCP';
+    }
+  };
+
   // Generate code examples
   const generateCode = (): string => {
     const url = `${API_BASE_URL}${endpoint}`;
 
+    // Coming soon placeholders
+    if (language === 'js-sdk' || language === 'mcp') {
+      return `# Coming soon\n# ${getLanguageLabel(language)} integration is under development`;
+    }
+
     switch (language) {
       case 'curl':
         return `curl -X ${method} "${url}" \\
@@ -251,59 +274,52 @@ func main() {
   return (
     <>
       {/* Minimized Widget */}
-      <div className="my-8 bg-slate-900/50 backdrop-blur-sm border border-purple-500/30 rounded-2xl overflow-hidden shadow-xl">
+      <div className="my-8 bg-slate-900/50 backdrop-blur-sm border border-slate-700/50 rounded-2xl overflow-hidden">
         {/* Header */}
-        <div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-purple-500/30">
+        <div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-slate-700/50">
           <div className="flex items-center gap-3">
-            <div className={`px-3 py-1.5 rounded-lg bg-gradient-to-r ${getMethodColor(method)} text-white text-sm font-bold shadow-lg`}>
+            <div className={`px-3 py-1 rounded text-xs font-bold ${getMethodBadgeStyle(method)}`}>
               {method}
             </div>
             <code className="text-sm text-gray-400">{endpoint}</code>
           </div>
           <button
             onClick={() => setIsExpanded(true)}
-            className="px-4 py-2 bg-cyan-600/20 hover:bg-cyan-600/30 text-cyan-400 rounded-lg transition-all text-sm font-semibold border border-cyan-500/40 hover:border-cyan-500/60"
+            className="flex items-center gap-2 px-4 py-2 bg-cyan-600/10 hover:bg-cyan-600/20 text-cyan-400 rounded-lg transition-all text-sm font-medium border border-cyan-500/30 hover:border-cyan-500/50"
           >
-            ⛶ Expand
+            <span>⛶</span>
+            <span>Expand</span>
           </button>
         </div>
 
         {/* Code Section - Full Width */}
         <div className="p-6">
           {/* Language Tabs */}
-          <div className="flex items-center gap-2 mb-4">
-            {(['curl', 'javascript', 'python', 'go'] as Language[]).map((lang, idx) => {
-              const colors = ['purple', 'cyan', 'amber', 'purple'];
-              const color = colors[idx];
-              return (
-                <button
-                  key={lang}
-                  onClick={() => setLanguage(lang)}
-                  className={`px-4 py-2 text-sm rounded-xl font-semibold transition-all border ${
-                    language === lang
-                      ? color === 'purple'
-                        ? 'bg-purple-500/30 text-white border-purple-500/60 shadow-lg shadow-purple-500/20'
-                        : color === 'cyan'
-                        ? 'bg-cyan-500/30 text-white border-cyan-500/60 shadow-lg shadow-cyan-500/20'
-                        : 'bg-amber-500/30 text-white border-amber-500/60 shadow-lg shadow-amber-500/20'
-                      : 'bg-slate-800/30 text-gray-400 border-slate-700 hover:border-slate-600 hover:text-white'
-                  }`}
-                >
-                  {lang === 'javascript' ? 'JS' : lang.toUpperCase()}
-                </button>
-              );
-            })}
+          <div className="flex items-center gap-2 mb-4 flex-wrap">
+            {(['curl', 'javascript', 'python', 'go', 'js-sdk', 'mcp'] as Language[]).map((lang) => (
+              <button
+                key={lang}
+                onClick={() => setLanguage(lang)}
+                className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-all border ${
+                  language === lang
+                    ? 'bg-slate-700 text-white border-slate-600'
+                    : 'bg-slate-800/50 text-gray-400 border-slate-700/50 hover:border-slate-600 hover:text-gray-300'
+                }`}
+              >
+                {getLanguageLabel(lang)}
+              </button>
+            ))}
           </div>
 
           {/* Code Display */}
-          <div className="border border-cyan-500/30 rounded-xl overflow-hidden shadow-lg">
-            <div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-cyan-500/20">
-              <span className="text-xs text-cyan-400 font-semibold">Code Example</span>
+          <div className="border border-slate-700/50 rounded-xl overflow-hidden">
+            <div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-slate-700/50">
+              <span className="text-xs text-gray-400 font-medium">Code Example</span>
               <button
                 onClick={copyCode}
-                className="px-3 py-1.5 text-xs bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 rounded-lg transition-all font-semibold"
+                className="text-xs text-gray-400 hover:text-white transition-colors font-medium"
               >
-                📋 Copy
+                Copy
               </button>
             </div>
             <div className="p-4 bg-slate-950/50 max-h-80 overflow-auto">
@@ -315,50 +331,43 @@ func main() {
         </div>
 
         {/* Footer */}
-        <div className="grid grid-cols-2 gap-4 px-6 pb-6">
+        <div className="flex items-center justify-between px-6 pb-6">
           <button
             onClick={expandApiKey}
-            className="flex items-center gap-2 px-4 py-2.5 bg-slate-800/50 hover:bg-slate-800 border border-slate-700 rounded-lg text-gray-400 hover:text-white text-sm transition-colors"
+            className="text-sm text-gray-400 hover:text-white underline-offset-4 hover:underline transition-colors"
           >
-            <span>🔑</span>
-            <span>{apiKey ? 'API Key Set' : 'Enter API Key'}</span>
+            {apiKey ? 'API Key Set' : 'Enter API Key'}
           </button>
           <button
             onClick={executeRequest}
             disabled={!apiKey || isExecuting}
-            className="px-4 py-2.5 rounded-lg bg-gradient-to-r from-purple-600 to-cyan-600 text-white text-sm font-semibold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-lg hover:shadow-purple-500/30"
+            className="px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed"
           >
-            {isExecuting ? '⚡ Executing...' : '⚡ Try It'}
+            {isExecuting ? 'Executing...' : 'Try It'}
           </button>
         </div>
 
         {/* Inline Response (if any) */}
         {(response || error) && (
-          <div className="border-t border-purple-500/30 p-6 bg-slate-950/50">
-            <h4 className="text-sm font-semibold text-white mb-3 flex items-center gap-2">
-              <span>📦</span>
+          <div className="border-t border-slate-700/50 p-6 bg-slate-950/50">
+            <h4 className="text-sm font-semibold text-white mb-3">
               Response
             </h4>
             {error ? (
-              <div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm shadow-lg shadow-red-500/10">
-                <div className="flex items-start gap-2">
-                  <span>⚠️</span>
-                  <div>
-                    <p className="font-semibold mb-1">Error</p>
-                    <p className="text-xs">{error}</p>
-                  </div>
-                </div>
+              <div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm">
+                <p className="font-semibold mb-1">Error</p>
+                <p className="text-xs">{error}</p>
               </div>
             ) : (
-              <div className={`p-4 rounded-xl border ${
+              <div className={`p-4 rounded-xl ${
                 isSuccess
-                  ? 'bg-green-500/5 border-green-500/40 shadow-lg shadow-green-500/10'
-                  : 'bg-slate-800/50 border-slate-700'
+                  ? 'bg-green-500/5 border border-green-500/30'
+                  : 'bg-slate-800/50 border border-slate-700'
               }`}>
                 {isSuccess && (
                   <div className="flex items-center gap-2 mb-3">
-                    <span className="px-2 py-1 text-xs bg-green-500/20 text-green-400 rounded-full border border-green-500/40">
-                      ✓ 200 Success
+                    <span className="px-2 py-1 text-xs bg-green-500/20 text-green-400 rounded border border-green-500/40">
+                      200 Success
                     </span>
                   </div>
                 )}
@@ -374,63 +383,59 @@ func main() {
       {/* Expanded Modal */}
       {isExpanded && (
         <div className="fixed inset-0 z-50 flex items-center justify-center bg-black/70 backdrop-blur-sm">
-          <div className="relative w-[90vw] h-[85vh] bg-slate-900 border border-purple-500/30 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
+          <div className="relative w-[90vw] h-[85vh] bg-slate-900 border border-slate-700/50 rounded-2xl shadow-2xl overflow-hidden flex flex-col">
             {/* Modal Header */}
-            <div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-purple-500/30">
-              <div className="flex items-center gap-3">
-                <div className={`px-3 py-1.5 rounded-lg bg-gradient-to-r ${getMethodColor(method)} text-white text-sm font-bold shadow-lg`}>
-                  {method}
+            <div className="flex items-center justify-between bg-slate-950/80 px-6 py-4 border-b border-slate-700/50">
+              <div className="flex items-center gap-4">
+                <div className="flex items-center gap-3">
+                  <div className={`px-3 py-1 rounded text-xs font-bold ${getMethodBadgeStyle(method)}`}>
+                    {method}
+                  </div>
+                  <code className="text-sm text-gray-400">{endpoint}</code>
                 </div>
-                <code className="text-sm text-gray-400">{endpoint}</code>
+                <span className="text-xs text-gray-500">•</span>
+                <p className="text-xs text-gray-500">{description}</p>
               </div>
               <button
                 onClick={() => setIsExpanded(false)}
-                className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-gray-400 hover:text-white rounded-lg transition-all text-sm font-semibold"
+                className="px-4 py-2 bg-slate-800 hover:bg-slate-700 text-gray-400 hover:text-white rounded-lg transition-all text-sm font-medium"
               >
-                ✕ Close
+                Close
               </button>
             </div>
 
             {/* Two-Panel Layout */}
             <div className="grid grid-cols-2 gap-6 p-6 flex-1 overflow-hidden">
               {/* Left: Code */}
-              <div className="flex flex-col overflow-hidden">
-                <div className="flex items-center gap-2 mb-4">
-                  {(['curl', 'javascript', 'python', 'go'] as Language[]).map((lang, idx) => {
-                    const colors = ['purple', 'cyan', 'amber', 'purple'];
-                    const color = colors[idx];
-                    return (
-                      <button
-                        key={lang}
-                        onClick={() => setLanguage(lang)}
-                        className={`px-4 py-2 text-sm rounded-xl font-semibold transition-all border ${
-                          language === lang
-                            ? color === 'purple'
-                              ? 'bg-purple-500/30 text-white border-purple-500/60 shadow-lg shadow-purple-500/20'
-                              : color === 'cyan'
-                              ? 'bg-cyan-500/30 text-white border-cyan-500/60 shadow-lg shadow-cyan-500/20'
-                              : 'bg-amber-500/30 text-white border-amber-500/60 shadow-lg shadow-amber-500/20'
-                            : 'bg-slate-800/30 text-gray-400 border-slate-700 hover:border-slate-600 hover:text-white'
-                        }`}
-                      >
-                        {lang === 'javascript' ? 'JS' : lang.toUpperCase()}
-                      </button>
-                    );
-                  })}
+              <div className="flex flex-col h-full min-h-0">
+                <div className="flex items-center gap-2 mb-4 flex-wrap min-h-[32px] flex-shrink-0">
+                  {(['curl', 'javascript', 'python', 'go', 'js-sdk', 'mcp'] as Language[]).map((lang) => (
+                    <button
+                      key={lang}
+                      onClick={() => setLanguage(lang)}
+                      className={`px-3 py-1.5 text-xs rounded-lg font-medium transition-all border ${
+                        language === lang
+                          ? 'bg-slate-700 text-white border-slate-600'
+                          : 'bg-slate-800/50 text-gray-400 border-slate-700/50 hover:border-slate-600 hover:text-gray-300'
+                      }`}
+                    >
+                      {getLanguageLabel(lang)}
+                    </button>
+                  ))}
                 </div>
 
-                <div className="border border-cyan-500/30 rounded-xl overflow-hidden shadow-lg flex-1 flex flex-col">
-                  <div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-cyan-500/20">
-                    <span className="text-xs text-cyan-400 font-semibold">Code Example</span>
+                <div className="border border-slate-700/50 rounded-xl overflow-hidden flex-1 flex flex-col min-h-0">
+                  <div className="flex items-center justify-between bg-slate-950/80 px-4 py-3 border-b border-slate-700/50 flex-shrink-0">
+                    <span className="text-xs text-gray-400 font-medium">Code Example</span>
                     <button
                       onClick={copyCode}
-                      className="px-3 py-1.5 text-xs bg-purple-600/30 hover:bg-purple-600/50 text-purple-300 rounded-lg transition-all font-semibold"
+                      className="text-xs text-gray-400 hover:text-white transition-colors font-medium"
                     >
-                      📋 Copy
+                      Copy
                     </button>
                   </div>
-                  <div className="p-4 bg-slate-950/50 overflow-auto flex-1">
-                    <pre className="text-base text-gray-300 leading-relaxed">
+                  <div className="p-4 bg-slate-950/50 overflow-auto flex-1 min-h-0">
+                    <pre className="text-sm text-gray-300 leading-relaxed">
                       <code>{generateCode()}</code>
                     </pre>
                   </div>
@@ -438,36 +443,30 @@ func main() {
               </div>
 
               {/* Right: Response */}
-              <div className="flex flex-col overflow-hidden">
-                <h4 className="text-sm font-semibold text-white mb-4 flex items-center gap-2">
-                  <span>📦</span>
+              <div className="flex flex-col h-full min-h-0">
+                <h4 className="text-sm font-semibold text-white mb-4 min-h-[32px] flex items-center flex-shrink-0">
                   Response
                 </h4>
 
-                <div className="border border-purple-500/30 rounded-xl overflow-hidden shadow-lg flex-1 flex flex-col">
-                  <div className="bg-slate-950/80 px-4 py-3 border-b border-purple-500/20">
+                <div className="border border-slate-700/50 rounded-xl overflow-hidden flex-1 flex flex-col min-h-0">
+                  <div className="bg-slate-950/80 px-4 py-3 border-b border-slate-700/50 flex-shrink-0">
                     {response && (
                       <span
-                        className={`inline-flex items-center gap-2 px-3 py-1.5 rounded-lg text-xs font-bold ${
+                        className={`inline-flex items-center gap-2 px-3 py-1 rounded text-xs font-bold ${
                           response.success
-                            ? 'bg-green-500/20 text-green-400 border border-green-500/40 shadow-lg shadow-green-500/10'
-                            : 'bg-red-500/20 text-red-400 border border-red-500/40 shadow-lg shadow-red-500/10'
+                            ? 'bg-green-500/20 text-green-400 border border-green-500/40'
+                            : 'bg-red-500/20 text-red-400 border border-red-500/40'
                         }`}
                       >
-                        {response.success ? '✓ Success' : '✕ Error'}
+                        {response.success ? 'Success' : 'Error'}
                       </span>
                     )}
                   </div>
-                  <div className="p-4 bg-slate-950/50 overflow-auto flex-1">
+                  <div className="p-4 bg-slate-950/50 overflow-auto flex-1 min-h-0">
                     {error ? (
-                      <div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm shadow-lg shadow-red-500/10">
-                        <div className="flex items-start gap-2">
-                          <span className="text-xl">⚠️</span>
-                          <div>
-                            <p className="font-semibold mb-1">Error</p>
-                            <p className="text-xs">{error}</p>
-                          </div>
-                        </div>
+                      <div className="p-4 bg-red-500/10 border border-red-500/40 rounded-xl text-red-400 text-sm">
+                        <p className="font-semibold mb-1">Error</p>
+                        <p className="text-xs">{error}</p>
                       </div>
                     ) : response ? (
                       <pre className="text-sm text-gray-300 leading-relaxed">
@@ -476,9 +475,8 @@ func main() {
                     ) : (
                       <div className="flex items-center justify-center h-full">
                         <div className="text-center">
-                          <p className="text-4xl mb-3">🚀</p>
                           <p className="text-sm text-gray-500">
-                            Click <strong className="text-purple-400">"Try It"</strong> below to see the response
+                            Click <strong className="text-white">"Try It"</strong> below to see the response
                           </p>
                         </div>
                       </div>
@@ -490,17 +488,12 @@ func main() {
                 <button
                   onClick={executeRequest}
                   disabled={!apiKey || isExecuting}
-                  className="mt-4 px-6 py-3 rounded-xl bg-gradient-to-r from-purple-600 to-cyan-600 text-white text-base font-bold hover:from-purple-500 hover:to-cyan-500 transition-all disabled:opacity-50 disabled:cursor-not-allowed shadow-2xl hover:shadow-purple-500/50"
+                  className="mt-4 px-4 py-2 rounded-lg bg-slate-700 hover:bg-slate-600 text-white text-sm font-medium transition-all disabled:opacity-50 disabled:cursor-not-allowed flex-shrink-0"
                 >
-                  {isExecuting ? '⚡ Executing...' : '⚡ Try It Now'}
+                  {isExecuting ? 'Executing...' : 'Try It'}
                 </button>
               </div>
             </div>
-
-            {/* Footer hint */}
-            <div className="px-6 pb-4 text-center">
-              <p className="text-xs text-gray-500">{description}</p>
-            </div>
           </div>
         </div>
       )}