diff --git a/components/MCPSetupComponent.tsx b/components/MCPSetupComponent.tsx
index b1f1800..605fcc1 100644
--- a/components/MCPSetupComponent.tsx
+++ b/components/MCPSetupComponent.tsx
@@ -1,11 +1,14 @@
-"use client"
+"use client";
 
-import { useState } from "react"
+// import { title } from "process"; // Not used, can be removed
+import { useState } from "react";
+
+type ConfigType = { title: string; code?: string; steps?: string[] };
 
 export const MCPSetupComponent = () => {
-  const [activeTab, setActiveTab] = useState("cursor")
+  const [activeTab, setActiveTab] = useState("cursor");
 
-  const configurations = {
+  const configurations: Record<string, ConfigType> = {
     cursor: {
       title: "Cursor — .cursor/mcp.json",
       code: `{
@@ -21,58 +24,107 @@ export const MCPSetupComponent = () => {
     },
     claude: {
       title: "Claude — Command Line",
-      code: `Claude mcp add nexlayer-mcp https://mcp.nexlayer.ai/api/mcp -e BEARER_TOKEN=<YOUR_NEXLAYER_TOKEN>`,
+      code: `claude mcp add nexlayer-mcp --transport sse https://mcp.nexlayer.ai/api/mcp --header "Authorization: Bearer <YOUR_NEXLAYER_TOKEN>"`,
+    },
+    vscode: {
+      title: "VS Code",
+      steps: [
+        "Open the Command Palette in VS Code 2 (Ctrl+Shift+P on Windows/Linux, Cmd+Shift+P on macOS)",
+        'Search and select the "MCP: Add Server" command',
+        "Select HTTP (HTTP or Server-Sent Events)",
+        "Enter 'https://mcp.nexlayer.ai/api/mcp' for the Server URL",
+        "Enter 'nexlayer-mcp' for the Server ID",
+        "In the nexlayer-mcp object, add the following lines of code:",
+        '',
+        "Save and begin prompting with Github Copilot!",
+      ],
     },
     other: {
       title: "Other AI coding agents",
       code: `https://mcp.nexlayer.ai/api/mcp`,
     },
-  }
+  };
+
+  // Removed misplaced return and code block. The main return is below.
+
+  // Helper to safely get code string
+  const getActiveCode = () => {
+    const config = configurations[activeTab as keyof typeof configurations];
+    return config && config.code ? config.code : '';
+  };
 
   const copyToClipboard = () => {
-    navigator.clipboard.writeText(configurations[activeTab as keyof typeof configurations].code)
-  }
+    navigator.clipboard.writeText(getActiveCode());
+  };
 
   return (
     <div className="group h-full transition-all duration-300 cursor-pointer overflow-hidden">
       {/* Header */}
       <div className="mb-8">
-        <h3 className="text-2xl font-semibold text-white mb-4">Setup with your AI agent assistant</h3>
-        <p className="text-gray-400">Nexlayer MCP configuration for different AI code editors</p>
+        <h3 className="text-2xl font-semibold text-white mb-4">
+          Setup with your AI agent assistant
+        </h3>
+        <p className="text-gray-400">
+          Nexlayer MCP configuration for different AI code editors
+        </p>
       </div>
 
       {/* Tabs */}
       <div className="mb-6">
-        <div className="flex space-x-1 bg-black border border-gray-600 rounded-lg p-1">
+        <div className="flex space-x-1 bg-black border border-gray-600 rounded-lg p-1 overflow-x-auto">
           <button
             onClick={() => setActiveTab("cursor")}
-            className={`flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
-              activeTab === "cursor" ? "bg-gray-700 text-white" : "text-gray-400 hover:text-white"
+            className={`flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium transition-all flex-shrink-0 ${
+              activeTab === "cursor"
+                ? "bg-gray-700 text-white"
+                : "text-gray-400 hover:text-white"
             }`}
           >
-            <img src="/icons/cursor-dark.svg" alt="Cursor" className="w-4 h-4" />
+            <img
+              src="/icons/cursor-dark.svg"
+              alt="Cursor"
+              className="w-4 h-4"
+            />
             <span>Cursor</span>
           </button>
           <button
             onClick={() => setActiveTab("claude")}
-            className={`flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium transition-all ${
-              activeTab === "claude" ? "bg-gray-700 text-white" : "text-gray-400 hover:text-white"
+            className={`flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium transition-all flex-shrink-0 ${
+              activeTab === "claude"
+                ? "bg-gray-700 text-white"
+                : "text-gray-400 hover:text-white"
             }`}
           >
-            <img src="/icons/claude-ai-icon.svg" alt="Claude" className="w-4 h-4" />
+            <img
+              src="/icons/claude-ai-icon.svg"
+              alt="Claude"
+              className="w-4 h-4"
+            />
             <span>Claude</span>
           </button>
+          <button
+            onClick={() => setActiveTab("vscode")}
+            className={`flex items-center space-x-2 px-4 py-2 rounded-md text-sm font-medium transition-all flex-shrink-0 ${
+              activeTab === "vscode"
+                ? "bg-gray-700 text-white"
+                : "text-gray-400 hover:text-white"
+            }`}
+          >
+            <img src="/icons/vs-code.svg" alt="VS Code" className="w-4 h-4" />
+            <span>VS Code</span>
+          </button>
           <button
             onClick={() => setActiveTab("other")}
-            className={`px-4 py-2 rounded-md text-sm font-medium transition-all ${
-              activeTab === "other" ? "bg-gray-700 text-white" : "text-gray-400 hover:text-white"
+            className={`px-4 py-2 rounded-md text-sm font-medium transition-all flex-shrink-0 ${
+              activeTab === "other"
+                ? "bg-gray-700 text-white"
+                : "text-gray-400 hover:text-white"
             }`}
           >
             Other
           </button>
         </div>
       </div>
-
       {/* Code Block */}
       <div className="flex-1 flex flex-col">
         <div className="bg-[#191919] rounded-lg border border-gray-600 overflow-hidden flex-1 flex flex-col">
@@ -81,8 +133,16 @@ export const MCPSetupComponent = () => {
             <span className="text-gray-300 text-sm font-mono">
               {configurations[activeTab as keyof typeof configurations].title}
             </span>
-            <button onClick={copyToClipboard} className="text-gray-400 hover:text-white transition-colors">
-              <svg className="w-4 h-4" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <button
+              onClick={copyToClipboard}
+              className="text-gray-400 hover:text-white transition-colors"
+            >
+              <svg
+                className="w-4 h-4"
+                fill="none"
+                stroke="currentColor"
+                viewBox="0 0 24 24"
+              >
                 <path
                   strokeLinecap="round"
                   strokeLinejoin="round"
@@ -95,12 +155,45 @@ export const MCPSetupComponent = () => {
 
           {/* Code content */}
           <div className="p-4 flex-1 overflow-auto">
-            <pre className="text-sm text-gray-300 font-mono leading-relaxed whitespace-pre-wrap break-all">
-              <code>{configurations[activeTab as keyof typeof configurations].code}</code>
-            </pre>
+            {activeTab === "vscode" ? (
+              <div className="space-y-2">
+                <div className="text-gray-300 font-semibold mb-2">
+                  Nexlayer MCP Setup Instructions for VS Code:
+                </div>
+                <ol className="space-y-1">
+                  {configurations.vscode.steps?.map((step, idx) => (
+                    <li key={idx} className="flex items-start">
+                      <span className="w-6 min-w-[1.5rem] text-right pr-2 font-bold text-gray-300 select-none">
+                        {idx + 1}.
+                      </span>
+                      <span className="flex-1 text-gray-300 whitespace-pre-line">
+                        {step}
+                        {idx === 6 && (
+                          <div style={{ background: '#18181b', color: '#fff', borderRadius: '8px', padding: '12px', fontFamily: 'monospace', fontSize: '13px', margin: '10px 0 0 0', overflowX: 'auto', border: '1px solid #333' }}>
+                            <pre style={{ margin: 0 }}>
+                              {`"nexlayer-mcp": {
+    ..."headers": {
+      "Authorization": "Bearer <NEXLAYER_MCP_TOKEN>"
+    }
+  }`}
+                            </pre>
+                          </div>
+                        )}
+                      </span>
+                    </li>
+                  ))}
+                </ol>
+              </div>
+            ) : (
+              <pre className="text-sm text-gray-300 font-mono leading-relaxed whitespace-pre-wrap break-all">
+                <code>
+                  {getActiveCode()}
+                </code>
+              </pre>
+            )}
           </div>
         </div>
       </div>
     </div>
-  )
-}
+  );
+};
diff --git a/public/icons/vs-code.svg b/public/icons/vs-code.svg
new file mode 100644
index 0000000..b9a5693
--- /dev/null
+++ b/public/icons/vs-code.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 128 128"><mask id="a" width="128" height="128" x="0" y="0" maskUnits="userSpaceOnUse" style="mask-type:alpha"><path fill="#fff" fill-rule="evenodd" d="M90.767 127.126a7.968 7.968 0 0 0 6.35-.244l26.353-12.681a8 8 0 0 0 4.53-7.209V21.009a8 8 0 0 0-4.53-7.21L97.117 1.12a7.97 7.97 0 0 0-9.093 1.548l-50.45 46.026L15.6 32.013a5.328 5.328 0 0 0-6.807.302l-7.048 6.411a5.335 5.335 0 0 0-.006 7.888L20.796 64 1.74 81.387a5.336 5.336 0 0 0 .006 7.887l7.048 6.411a5.327 5.327 0 0 0 6.807.303l21.974-16.68 50.45 46.025a7.96 7.96 0 0 0 2.743 1.793Zm5.252-92.183L57.74 64l38.28 29.058V34.943Z" clip-rule="evenodd"/></mask><g mask="url(#a)"><path fill="#0065A9" d="M123.471 13.82 97.097 1.12A7.973 7.973 0 0 0 88 2.668L1.662 81.387a5.333 5.333 0 0 0 .006 7.887l7.052 6.411a5.333 5.333 0 0 0 6.811.303l103.971-78.875c3.488-2.646 8.498-.158 8.498 4.22v-.306a8.001 8.001 0 0 0-4.529-7.208Z"/><g filter="url(#b)"><path fill="#007ACC" d="m123.471 114.181-26.374 12.698A7.973 7.973 0 0 1 88 125.333L1.662 46.613a5.333 5.333 0 0 1 .006-7.887l7.052-6.411a5.333 5.333 0 0 1 6.811-.303l103.971 78.874c3.488 2.647 8.498.159 8.498-4.219v.306a8.001 8.001 0 0 1-4.529 7.208Z"/></g><g filter="url(#c)"><path fill="#1F9CF0" d="M97.098 126.882A7.977 7.977 0 0 1 88 125.333c2.952 2.952 8 .861 8-3.314V5.98c0-4.175-5.048-6.266-8-3.313a7.977 7.977 0 0 1 9.098-1.549L123.467 13.8A8 8 0 0 1 128 21.01v85.982a8 8 0 0 1-4.533 7.21l-26.369 12.681Z"/></g><path fill="url(#d)" fill-rule="evenodd" d="M90.69 127.126a7.968 7.968 0 0 0 6.349-.244l26.353-12.681a8 8 0 0 0 4.53-7.21V21.009a8 8 0 0 0-4.53-7.21L97.039 1.12a7.97 7.97 0 0 0-9.093 1.548l-50.45 46.026-21.974-16.68a5.328 5.328 0 0 0-6.807.302l-7.048 6.411a5.336 5.336 0 0 0-.006 7.888L20.718 64 1.662 81.386a5.335 5.335 0 0 0 .006 7.888l7.048 6.411a5.328 5.328 0 0 0 6.807.303l21.975-16.681 50.45 46.026a7.959 7.959 0 0 0 2.742 1.793Zm5.252-92.184L57.662 64l38.28 29.057V34.943Z" clip-rule="evenodd" opacity="0.25" style="mix-blend-mode:overlay"/></g><defs><filter id="b" width="144.744" height="113.408" x="-8.41115" y="22.5944" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.16667"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow_1_36"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1_36" result="shape"/></filter><filter id="c" width="56.6667" height="144.007" x="79.6667" y="-8.0035" color-interpolation-filters="sRGB" filterUnits="userSpaceOnUse"><feFlood flood-opacity="0" result="BackgroundImageFix"/><feColorMatrix in="SourceAlpha" result="hardAlpha" values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"/><feOffset/><feGaussianBlur stdDeviation="4.16667"/><feColorMatrix values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.25 0"/><feBlend in2="BackgroundImageFix" mode="overlay" result="effect1_dropShadow_1_36"/><feBlend in="SourceGraphic" in2="effect1_dropShadow_1_36" result="shape"/></filter><linearGradient id="d" x1="63.9222" x2="63.9222" y1="0.329902" y2="127.67" gradientUnits="userSpaceOnUse"><stop stop-color="#fff"/><stop offset="1" stop-color="#fff" stop-opacity="0"/></linearGradient></defs></svg>