diff --git a/app/components/header/DeployChat/components/DeployChatModal.tsx b/app/components/header/DeployChat/components/DeployChatModal.tsx
index 05571a57..269f9e4e 100644
--- a/app/components/header/DeployChat/components/DeployChatModal.tsx
+++ b/app/components/header/DeployChat/components/DeployChatModal.tsx
@@ -19,26 +19,38 @@ const DeployChatModal = ({
   error,
   handleDeploy,
 }: DeployChatModalProps) => {
+  const handleOverlayClick = (e: React.MouseEvent) => {
+    if (e.target === e.currentTarget) {
+      setIsModalOpen(false);
+    }
+  };
+
   return (
     <>
       {isModalOpen && (
-        <div className="fixed inset-0 bg-black bg-opacity-50 z-40 flex items-center justify-center">
-          <div className="bg-white rounded-lg p-6 max-w-2xl w-full z-50">
+        <div
+          className="fixed inset-0 bg-black bg-opacity-50 backdrop-blur-sm z-40 flex items-center justify-center"
+          onClick={handleOverlayClick}
+        >
+          <div className="bg-bolt-elements-background-depth-1 rounded-lg p-8 max-w-2xl w-full z-50 border border-bolt-elements-borderColor" onClick={(e) => e.stopPropagation()}>
             {status === DeployStatus.Succeeded ? (
               <>
-                <div className="text-center mb-2">Deployment Succeeded</div>
+                <h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
+                  Deployment Succeeded! 🎉
+                </h2>
                 <div className="text-center">
-                  <div className="flex justify-center gap-2 mt-4">
+                  <p className="text-bolt-elements-textSecondary mb-6">
+                    Your application has been successfully deployed. You can now access it at the URL below.
+                  </p>
+                  <div className="flex justify-center gap-2">
                     <a href={deploySettings?.siteURL} target="_blank" rel="noopener noreferrer">
-                      <button className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors">
+                      <button className="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
                         {deploySettings?.siteURL}
                       </button>
                     </a>
                     <button
-                      onClick={() => {
-                        setIsModalOpen(false);
-                      }}
-                      className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400"
+                      onClick={() => setIsModalOpen(false)}
+                      className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
                     >
                       Close
                     </button>
@@ -47,205 +59,324 @@ const DeployChatModal = ({
               </>
             ) : (
               <>
-                <h2 className="text-xl font-semibold text-center mb-4">Deploy</h2>
-                <div className="text-center mb-4">Deploy this chat's app to production.</div>
+                <h2 className="text-2xl font-bold mb-6 text-bolt-elements-textPrimary text-center">
+                  Deploy Your Application
+                </h2>
+                <div className="text-center mb-6 text-bolt-elements-textSecondary">
+                  <p className="mb-2">Deploy your chat application to production using Netlify and Supabase.</p>
+                  <p className="mb-2">This process will:</p>
+                  <ul className="text-left list-disc list-inside mb-4">
+                    <li>Create a new Netlify site or update an existing one</li>
+                    <li>Set up your database with Supabase</li>
+                    <li>Configure all necessary environment variables</li>
+                    <li>Deploy your application with production settings</li>
+                  </ul>
+                </div>
+
+                <div className="mb-8 p-4 bg-bolt-elements-background-depth-2 rounded-lg border border-bolt-elements-borderColor">
+                  <h3 className="text-sm font-medium text-bolt-elements-textPrimary mb-2">Before you begin:</h3>
+                  <p className="text-xs text-bolt-elements-textSecondary mb-3 whitespace-pre-wrap">
+                    You'll need accounts with both Netlify and Supabase to deploy your application. If you haven't already, please sign up using the links below:
+                  </p>
+                  <div className="flex flex-col gap-2">
+                    <a 
+                      href="https://app.netlify.com/signup" 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-xs text-green-500 hover:text-green-600 transition-colors"
+                    >
+                      → Sign up for Netlify
+                    </a>
+                    <a 
+                      href="https://supabase.com/dashboard/sign-up" 
+                      target="_blank" 
+                      rel="noopener noreferrer"
+                      className="text-xs text-green-500 hover:text-green-600 transition-colors"
+                    >
+                      → Sign up for Supabase
+                    </a>
+                  </div>
+                </div>
 
                 {deploySettings?.siteURL && (
-                  <div className="text-center mb-4">
-                    <span className="text-lg text-gray-700 pr-2">Existing site:</span>
+                  <div className="text-center mb-6">
+                    <span className="text-lg text-bolt-elements-textPrimary pr-2">Existing site:</span>
                     <a href={deploySettings?.siteURL} target="_blank" rel="noopener noreferrer">
-                      <button className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors">
+                      <button className="px-4 py-2 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium">
                         {deploySettings?.siteURL}
                       </button>
                     </a>
                   </div>
                 )}
 
-                <div className="grid grid-cols-2 gap-2 mb-4 items-center">
-                  <label className="text-sm font-lg text-gray-700 text-right">Netlify Auth Token:</label>
-                  <input
-                    name="netlifyAuthToken"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.netlify?.authToken}
-                    placeholder="nfp_..."
-                    onChange={(e) => {
-                      const netlify = {
-                        authToken: e.target.value,
-                        siteId: deploySettings?.netlify?.siteId || '',
-                        createInfo: deploySettings?.netlify?.createInfo || undefined,
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        netlify,
-                      });
-                    }}
-                  />
-                  <label className="text-sm font-lg text-gray-700 text-right">Netlify Site ID (existing site):</label>
-                  <input
-                    name="netlifySiteId"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.netlify?.siteId}
-                    placeholder="123e4567-..."
-                    onChange={(e) => {
-                      const netlify = {
-                        authToken: deploySettings?.netlify?.authToken || '',
-                        siteId: e.target.value,
-                        createInfo: deploySettings?.netlify?.createInfo || undefined,
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        netlify,
-                      });
-                    }}
-                  />
-                  <label className="text-sm font-lg text-gray-700 text-right">Netlify Account Slug (new site):</label>
-                  <input
-                    name="netlifyAccountSlug"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.netlify?.createInfo?.accountSlug}
-                    placeholder="abc..."
-                    onChange={(e) => {
-                      const createInfo = {
-                        accountSlug: e.target.value,
-                        siteName: deploySettings?.netlify?.createInfo?.siteName || '',
-                      };
-                      const netlify = {
-                        authToken: deploySettings?.netlify?.authToken || '',
-                        siteId: deploySettings?.netlify?.siteId || '',
-                        createInfo,
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        netlify,
-                      });
-                    }}
-                  />
-                  <label className="text-sm font-lg text-gray-700 text-right">Netlify Site Name (new site):</label>
-                  <input
-                    name="netlifySiteName"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.netlify?.createInfo?.siteName}
-                    placeholder="my-chat-app..."
-                    onChange={(e) => {
-                      const createInfo = {
-                        accountSlug: deploySettings?.netlify?.createInfo?.accountSlug || '',
-                        siteName: e.target.value,
-                      };
-                      const netlify = {
-                        authToken: deploySettings?.netlify?.authToken || '',
-                        siteId: deploySettings?.netlify?.siteId || '',
-                        createInfo,
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        netlify,
-                      });
-                    }}
-                  />
-                  <label className="text-sm font-lg text-gray-700 text-right">Supabase Database URL:</label>
-                  <input
-                    name="supabaseDatabaseURL"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.supabase?.databaseURL}
-                    placeholder="https://abc...def.supabase.co"
-                    onChange={(e) => {
-                      const supabase = {
-                        databaseURL: e.target.value,
-                        anonKey: deploySettings?.supabase?.anonKey || '',
-                        serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
-                        postgresURL: deploySettings?.supabase?.postgresURL || '',
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        supabase,
-                      });
-                    }}
-                  />
-                  <label className="text-sm font-lg text-gray-700 text-right">Supabase Anonymous Key:</label>
-                  <input
-                    name="supabaseAnonKey"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.supabase?.anonKey}
-                    placeholder="ey..."
-                    onChange={(e) => {
-                      const supabase = {
-                        databaseURL: deploySettings?.supabase?.databaseURL || '',
-                        anonKey: e.target.value,
-                        serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
-                        postgresURL: deploySettings?.supabase?.postgresURL || '',
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        supabase,
-                      });
-                    }}
-                  />
-                  <label className="text-sm font-lg text-gray-700 text-right">Supabase Service Role Key:</label>
-                  <input
-                    name="supabaseServiceRoleKey"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.supabase?.serviceRoleKey}
-                    placeholder="ey..."
-                    onChange={(e) => {
-                      const supabase = {
-                        databaseURL: deploySettings?.supabase?.databaseURL || '',
-                        anonKey: deploySettings?.supabase?.anonKey || '',
-                        serviceRoleKey: e.target.value,
-                        postgresURL: deploySettings?.supabase?.postgresURL || '',
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        supabase,
-                      });
-                    }}
-                  />
-                  <label className="text-sm font-lg text-gray-700 text-right">Supabase Postgres URL:</label>
-                  <input
-                    name="supabasePostgresURL"
-                    className="bg-bolt-elements-background-depth-1 text-bolt-elements-textPrimary rounded px-2 py-2 border border-gray-300"
-                    value={deploySettings?.supabase?.postgresURL}
-                    placeholder="postgresql://postgres:<password>@db.abc...def.supabase.co:5432/postgres"
-                    onChange={(e) => {
-                      const supabase = {
-                        databaseURL: deploySettings?.supabase?.databaseURL || '',
-                        anonKey: deploySettings?.supabase?.anonKey || '',
-                        serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
-                        postgresURL: e.target.value,
-                      };
-                      setDeploySettings({
-                        ...deploySettings,
-                        supabase,
-                      });
-                    }}
-                  />
-                </div>
-
-                <div className="flex justify-center gap-2 mt-4">
-                  {status === DeployStatus.Started && (
-                    <div className="w-full text-bolt-elements-textSecondary flex items-center">
-                      <span className="i-svg-spinners:3-dots-fade inline-block w-[1em] h-[1em] mr-2 text-4xl"></span>
+                <div className="grid grid-cols-2 gap-4 mb-6">
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Netlify Auth Token
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        Your authentication token from Netlify account settings. Used to authorize deployments.
+                      </p>
                     </div>
-                  )}
+                    <input
+                      name="netlifyAuthToken"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.netlify?.authToken}
+                      placeholder="nfp_..."
+                      onChange={(e) => {
+                        const netlify = {
+                          authToken: e.target.value,
+                          siteId: deploySettings?.netlify?.siteId || '',
+                          createInfo: deploySettings?.netlify?.createInfo || undefined,
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          netlify,
+                        });
+                      }}
+                    />
+                  </div>
 
-                  {status === DeployStatus.NotStarted && (
-                    <button
-                      onClick={handleDeploy}
-                      className="px-4 py-2 bg-green-500 text-white rounded hover:bg-green-600 transition-colors"
-                    >
-                      Deploy
-                    </button>
-                  )}
-                  <button
-                    onClick={() => {
-                      setIsModalOpen(false);
-                    }}
-                    className="px-4 py-2 bg-gray-300 rounded hover:bg-gray-400 transition-colors"
-                  >
-                    Cancel
-                  </button>
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Netlify Site ID (existing site)
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        The ID of your existing Netlify site if you want to update an existing deployment.
+                      </p>
+                    </div>
+                    <input
+                      name="netlifySiteId"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.netlify?.siteId}
+                      placeholder="123e4567-..."
+                      onChange={(e) => {
+                        const netlify = {
+                          authToken: deploySettings?.netlify?.authToken || '',
+                          siteId: e.target.value,
+                          createInfo: deploySettings?.netlify?.createInfo || undefined,
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          netlify,
+                        });
+                      }}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Netlify Account Slug (new site)
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        Your Netlify account name, required when creating a new site.
+                      </p>
+                    </div>
+                    <input
+                      name="netlifyAccountSlug"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.netlify?.createInfo?.accountSlug}
+                      placeholder="abc..."
+                      onChange={(e) => {
+                        const createInfo = {
+                          accountSlug: e.target.value,
+                          siteName: deploySettings?.netlify?.createInfo?.siteName || '',
+                        };
+                        const netlify = {
+                          authToken: deploySettings?.netlify?.authToken || '',
+                          siteId: deploySettings?.netlify?.siteId || '',
+                          createInfo,
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          netlify,
+                        });
+                      }}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Netlify Site Name (new site)
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        The desired name for your new Netlify site. Will be part of your site's URL.
+                      </p>
+                    </div>
+                    <input
+                      name="netlifySiteName"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.netlify?.createInfo?.siteName}
+                      placeholder="my-chat-app..."
+                      onChange={(e) => {
+                        const createInfo = {
+                          accountSlug: deploySettings?.netlify?.createInfo?.accountSlug || '',
+                          siteName: e.target.value,
+                        };
+                        const netlify = {
+                          authToken: deploySettings?.netlify?.authToken || '',
+                          siteId: deploySettings?.netlify?.siteId || '',
+                          createInfo,
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          netlify,
+                        });
+                      }}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Supabase Database URL
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        The URL of your Supabase project, used to connect to your database.
+                      </p>
+                    </div>
+                    <input
+                      name="supabaseDatabaseURL"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.supabase?.databaseURL}
+                      placeholder="https://abc...def.supabase.co"
+                      onChange={(e) => {
+                        const supabase = {
+                          databaseURL: e.target.value,
+                          anonKey: deploySettings?.supabase?.anonKey || '',
+                          serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
+                          postgresURL: deploySettings?.supabase?.postgresURL || '',
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          supabase,
+                        });
+                      }}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Supabase Anonymous Key
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        Public API key for client-side database access with restricted permissions.
+                      </p>
+                    </div>
+                    <input
+                      name="supabaseAnonKey"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.supabase?.anonKey}
+                      placeholder="ey..."
+                      onChange={(e) => {
+                        const supabase = {
+                          databaseURL: deploySettings?.supabase?.databaseURL || '',
+                          anonKey: e.target.value,
+                          serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
+                          postgresURL: deploySettings?.supabase?.postgresURL || '',
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          supabase,
+                        });
+                      }}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Supabase Service Role Key
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        Admin API key for server-side operations with full database access.
+                      </p>
+                    </div>
+                    <input
+                      name="supabaseServiceRoleKey"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.supabase?.serviceRoleKey}
+                      placeholder="ey..."
+                      onChange={(e) => {
+                        const supabase = {
+                          databaseURL: deploySettings?.supabase?.databaseURL || '',
+                          anonKey: deploySettings?.supabase?.anonKey || '',
+                          serviceRoleKey: e.target.value,
+                          postgresURL: deploySettings?.supabase?.postgresURL || '',
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          supabase,
+                        });
+                      }}
+                    />
+                  </div>
+
+                  <div>
+                    <label className="block mb-2 text-sm font-medium text-bolt-elements-textPrimary">
+                      Supabase Postgres URL
+                    </label>
+                    <div className="w-full mb-2">
+                      <p className="text-xs text-bolt-elements-textSecondary whitespace-pre-wrap">
+                        Direct connection URL to your Postgres database for advanced operations.
+                      </p>
+                    </div>
+                    <input
+                      name="supabasePostgresURL"
+                      className="w-full p-3 border rounded-lg bg-bolt-elements-background-depth-2 text-bolt-elements-textPrimary border-bolt-elements-borderColor focus:ring-2 focus:ring-green-500 focus:border-transparent"
+                      value={deploySettings?.supabase?.postgresURL}
+                      placeholder="postgresql://postgres:<password>@db.abc...def.supabase.co:5432/postgres"
+                      onChange={(e) => {
+                        const supabase = {
+                          databaseURL: deploySettings?.supabase?.databaseURL || '',
+                          anonKey: deploySettings?.supabase?.anonKey || '',
+                          serviceRoleKey: deploySettings?.supabase?.serviceRoleKey || '',
+                          postgresURL: e.target.value,
+                        };
+                        setDeploySettings({
+                          ...deploySettings,
+                          supabase,
+                        });
+                      }}
+                    />
+                  </div>
                 </div>
 
-                {error && <div className="mt-4 p-3 bg-red-100 border border-red-400 text-red-700 rounded">{error}</div>}
+                <div className="flex justify-center gap-3">
+                  {status === DeployStatus.Started ? (
+                    <div className="w-full text-bolt-elements-textSecondary flex items-center justify-center">
+                      <span className="i-svg-spinners:3-dots-fade inline-block w-[1em] h-[1em] mr-2 text-4xl"></span>
+                      <span>Deploying your application...</span>
+                    </div>
+                  ) : (
+                    <>
+                      <button
+                        onClick={handleDeploy}
+                        className="px-4 py-3 bg-green-500 text-white rounded-lg hover:bg-green-600 transition-colors font-medium"
+                      >
+                        Deploy
+                      </button>
+                      <button
+                        onClick={() => setIsModalOpen(false)}
+                        className="px-4 py-3 bg-gray-300 rounded-lg hover:bg-gray-400 transition-colors font-medium"
+                      >
+                        Cancel
+                      </button>
+                    </>
+                  )}
+                </div>
+
+                {error && (
+                  <div className="mt-6 p-4 bg-red-100 border border-red-400 text-red-700 rounded-lg">
+                    <p className="font-medium mb-1">Deployment Error</p>
+                    <p>{error}</p>
+                  </div>
+                )}
               </>
             )}
           </div>