diff --git a/web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx b/web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx
index 89b3c43f..704e20fc 100644
--- a/web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx
+++ b/web/src/app/home/plugins/mcp-server/MCPServerComponent.tsx
@@ -73,16 +73,26 @@ export default function MCPComponent({
   return (
     <div className="w-full h-full">
       {/* 已安装的服务器列表 */}
-      <div className="mb-[2rem]">
-        <div className="w-full px-[0.8rem] pt-[2rem] grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-4">
-          {loading ? (
-            <div className="text-center p-[2rem]">{t('mcp.loading')}</div>
-          ) : installedServers.length === 0 ? (
-            <div className="text-center p-[2rem]">
-              {t('mcp.noServerInstalled')}
-            </div>
-          ) : (
-            installedServers.map((server, index) => (
+      <div className="w-full px-[0.8rem] pt-[0rem]  gap-4">
+        {loading ? (
+          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+            {t('mcp.loading')}
+          </div>
+        ) : installedServers.length === 0 ? (
+          <div className="flex flex-col items-center justify-center text-gray-500 h-[calc(100vh-16rem)] w-full gap-2">
+            <svg
+              className="h-[3rem] w-[3rem]"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path d="M4.5 7.65311V16.3469L12 20.689L19.5 16.3469V7.65311L12 3.311L4.5 7.65311ZM12 1L21.5 6.5V17.5L12 23L2.5 17.5V6.5L12 1ZM6.49896 9.97065L11 12.5765V17.625H13V12.5765L17.501 9.97066L16.499 8.2398L12 10.8445L7.50104 8.2398L6.49896 9.97065Z"></path>
+            </svg>
+            <div className="text-lg mb-2">{t('mcp.noServerInstalled')}</div>
+          </div>
+        ) : (
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6 pt-[2rem]">
+            {installedServers.map((server, index) => (
               <div key={`${server.name}-${index}`}>
                 <MCPCardComponent
                   cardVO={server}
@@ -94,9 +104,9 @@ export default function MCPComponent({
                   onRefresh={fetchInstalledServers}
                 />
               </div>
-            ))
-          )}
-        </div>
+            ))}
+          </div>
+        )}
       </div>
     </div>
   );