feat: update README and enhance server management UI

- Replaced the screenshot in README.md with a demo GIF for better visual representation.
- Updated the benefits section in README.md to clarify that team collaboration features are in beta.
- Improved the layout of the feature comparison table in README.md for better readability.
- Enhanced ServerCard component to display server logos if available, falling back to a GitHub icon if not.
- Added a refresh button and an "Add Custom Server" button in the McpManage component for improved user interaction.
- Introduced a dialog for adding custom servers in the McpManage component.
- Updated ServerType to rename icon_url to logoUrl for consistency.

Author: milisp

README.md

@@ -33,7 +33,7 @@ Add, manage, and sync MCP (Model Context Protocol) servers across AI clients lik
 
 **The fastest way to supercharge your AI workflow with 600+ curated MCP servers.**
 
-![Screenshot](./images/manage.png)
+![Demo](./images/demo.gif)
 
 ### 🎯 Key Features
 
@@ -48,7 +48,7 @@ Add, manage, and sync MCP (Model Context Protocol) servers across AI clients lik
 
 ### 💎 Game-Changing Benefits
 
-**Sync MCP server configuration across all your MCP clients. Pro users get secure, encrypted backup of their `mcp_server_config` to our FastAPI backend. Team collaboration features coming soon!**
+**Sync MCP server configuration across all your MCP clients. Pro users get secure, encrypted backup of their `mcp_server_config` to our FastAPI backend. Team collaboration features (beta)!**
 
 ## 🚀 Quick Start
 
@@ -63,17 +63,23 @@ Add, manage, and sync MCP (Model Context Protocol) servers across AI clients lik
 
 | Feature                 | Free      | Pro     | Team    |
 |-------------------------|-----------|---------|---------|
+| Multi-client management | ✅        | ✅      | ✅      |
 | One-click install       | ✅        | ✅      | ✅      |
 | Sync across devices     | ❌        | ✅      | ✅      |
 | Encrypted sync          | ❌        | ✅      | ✅      |
 | Multi-team management   | ❌        | ❌      | ✅      |
 | Early access features   | ❌        | ✅      | ✅      |
 
+## 🚀 Upgrade to MCP-Linker Pro or Team
+
+Access cloud sync, unlimited clients, and more!  
+👉 [View Tiers & Subscribe](https://mcp-linker.store/tiers)
+
 ## 📸 Screenshots
 
-| 🔍 Server Discovery | ⚙️ Configuration |
-|---------------------|------------------|
-| ![Discover](./images/home.png) | ![Config](./images/config.png) |
+| Manage | 🔍 Server Discovery | ⚙️ Configuration |
+|---------------------|---------------------|------------------|
+![Manage](./images/manage.png)| ![Discover](./images/home.png) | ![Config](./images/config.png) |
 
 ---
 

images/demo.gif

@@ -92,6 +92,7 @@ export const Sidebar = ({ navs }: SidebarProps) => {
           {!isCollapsed && (
             <p className="font-medium">
               {user?.user_metadata.full_name ||
+                user?.user_metadata.user_name ||
                 user?.user_metadata.email.slice(0, 2) ||
                 t("guest")}
             </p>

images/manage.png

@@ -77,8 +77,12 @@ export function ServerCard({
       <CardHeader className="px-2 py-2 pb-0">
         <div className="flex justify-between items-start">
           <div className="flex gap-3 items-start">
-            <div className="p-2 bg-gray-100 rounded-full">
-              {showGithubIcon && <Github size={18} />}
+            <div className="bg-gray-100 rounded-full">
+             {server.logoUrl ? (
+               <img src={server.logoUrl} alt="icon" className="w-12 h-12 rounded-full" />
+             ) : (
+               showGithubIcon && <Github size={24} />
+             )}
             </div>
             <div>
               <CardTitle className="text-base">

src/components/Layout/Sidebar.tsx

@@ -1,18 +1,20 @@
+import { Dashboard } from "@/components/manage/Dashboard";
 import { LocalTable } from "@/components/manage/LocalTable";
 import { PersonalCloudTable } from "@/components/manage/PersonalCloudTable";
 import { TeamCloudTable } from "@/components/manage/team/TeamCloudTable";
 import { TeamLocalTable } from "@/components/manage/team/TeamLocalTable";
 import { TeamSelector } from "@/components/manage/team/TeamSelector";
+import { ServerTemplateDialog } from "@/components/server";
 import { ConfigFileSelector } from "@/components/settings/ConfigFileSelector";
-import { Dashboard } from "@/components/manage/Dashboard";
 import { Button } from "@/components/ui/button";
 import { Tabs, TabsContent, TabsList, TabsTrigger } from "@/components/ui/tabs";
 import { useAuth } from "@/hooks/useAuth";
 import { useTabStore } from "@/stores/tabStore";
 import { useTeamStore } from "@/stores/team";
 import { getEncryptionKey } from "@/utils/encryption";
-import { Cloud } from "lucide-react";
+import { Cloud, RefreshCcw } from "lucide-react";
 import { useEffect, useState } from "react";
+import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router";
 
 export default function McpManage() {
@@ -26,6 +28,8 @@ export default function McpManage() {
   } = useTabStore();
   const { isAuthenticated } = useAuth();
   const { selectedTeamId } = useTeamStore();
+  const { t } = useTranslation();
+  const [isDialogOpen, setIsDialogOpen] = useState(false);
   const [encryptionKey, setEncryptionKey] = useState<string | null>(null);
   const [personalStats, setPersonalStats] = useState({
     total: 0,
@@ -45,6 +49,10 @@ export default function McpManage() {
     fetchKey();
   }, []);
 
+  const handleAddServer = () => {
+    setIsDialogOpen(true);
+  };
+
   return (
     <div className="p-4 bg-background text-foreground">
       <Tabs
@@ -54,15 +62,26 @@ export default function McpManage() {
       >
         <div className="flex items-center justify-between mb-4">
           <h1 className="text-2xl font-bold">MCP Server Management</h1>
-          <TabsList className="grid grid-cols-2 gap-2 bg-secondary">
-            <TabsTrigger value="personal">Personal</TabsTrigger>
-            <TabsTrigger value="team">Team</TabsTrigger>
-          </TabsList>
+          <span className="flex items-center gap-2">
+            <Button
+              className="flex"
+              onClick={() => {
+                navigate(0);
+              }}
+            >
+              <RefreshCcw /> Refresh
+            </Button>
+            <Button onClick={handleAddServer}>{t("addCustomServer")}</Button>
+            <TabsList className="grid grid-cols-2 gap-2 bg-secondary">
+              <TabsTrigger value="personal">Personal</TabsTrigger>
+              <TabsTrigger value="team">Team</TabsTrigger>
+            </TabsList>
+          </span>
         </div>
-        
+
         {/* Dashboard */}
         <Dashboard personalStats={personalStats} teamStats={teamStats} />
-        
+
         <div className="flex-1 min-h-0">
           {/* personal */}
           <TabsContent value="personal" className="flex-1 min-h-0">
@@ -147,6 +166,12 @@ export default function McpManage() {
           </TabsContent>
         </div>
       </Tabs>
+
+      <ServerTemplateDialog
+        isOpen={isDialogOpen}
+        setIsDialogOpen={setIsDialogOpen}
+        isSell={false}
+      />
     </div>
   );
 }

src/components/server/list/ServerCard.tsx

@@ -2,7 +2,7 @@ export type ServerType = {
   id: string;
   name: string;
   developer?: string;
-  icon_url?: string;
+  logoUrl?: string;
   description: string;
   category?: string;
   source: string;
@@ -12,4 +12,5 @@ export type ServerType = {
   rating: number;
   views: number;
   isFavorited: boolean;
+  tags?: string[]
 };