Update app.py

app.py

@@ -575,27 +575,27 @@ with gr.Blocks(title="🚦 Router MCP", css="""
         font-size: 1.8rem;
         margin: 0;
         line-height: 1.2;
-        mix-blend-mode: multiply;
+        color: var(--body-text-color);
     }
     .title-container p {
         position: relative;
         z-index: 1;
         font-size: 1rem;
         margin: 0.5rem 0 0 0;
-        color: #666;
-        mix-blend-mode: multiply;
+        color: var(--body-text-color);
+        opacity: 0.8;
     }
     .traffic-light {
         position: absolute;
         top: 50%;
         left: 50%;
         transform: translate(-50%, -50%);
-        width: 300px;
+        width: 500px;
         height: 40px;
         background: linear-gradient(90deg, 
-            rgba(255, 0, 0, 0.3) 0%,
-            rgba(255, 165, 0, 0.3) 50%,
-            rgba(0, 255, 0, 0.3) 100%
+            rgba(255, 0, 0, 0.2) 0%,
+            rgba(255, 165, 0, 0.2) 50%,
+            rgba(0, 255, 0, 0.2) 100%
         );
         border-radius: 20px;
         z-index: 0;
@@ -611,14 +611,20 @@ with gr.Blocks(title="🚦 Router MCP", css="""
     
     with gr.Tabs() as tabs:
         with gr.Tab("Overview"):
+            gr.Markdown("""
+            <span style="font-size: 1.1em">Router MCP is a powerful tool that helps you discover and connect to MCP servers.
+            Whether you're looking for specific functionality or exploring new possibilities, 
+            Router MCP makes it easy to find the perfect MCP server for your needs.</span>
+            """)
+            
+            gr.Markdown("""
+            ## 🎥 Video Demo
+            """)
+            
             with gr.Row():
                 with gr.Column():
                     gr.Markdown("""
-                    Router MCP is a powerful tool that helps you discover and connect to MCP servers. 
-                    Whether you're looking for specific functionality or exploring new possibilities, 
-                    Router MCP makes it easy to find the perfect server for your needs.
-
-                    ### How to Use Router MCP
+                    ## 🎯 How to Use Router MCP
 
                     1. **Enter Your Query**
                        - Type a natural language description of the MCP Server you're looking for
@@ -637,8 +643,10 @@ with gr.Blocks(title="🚦 Router MCP", css="""
                        - **Keyword Search**: Use when you have specific terms or names in mind
                        - **Semantic Search**: Use when you want to find servers based on meaning and intent
                        - Both methods will return ready-to-use MCP configurations
-
-                    ### Understanding Search Results
+                    """)
+                with gr.Column():
+                    gr.Markdown("""
+                    ## 📊 Understanding Search Results
 
                     The search results will show MCP Servers from different sources, each with their own format:
 
@@ -658,15 +666,30 @@ with gr.Blocks(title="🚦 Router MCP", css="""
                     - **configuration**: OS-specific MCP configuration (requires your Smithery key)
 
                     > Note: For Smithery servers, you'll need to replace "YOUR_SMITHERY_KEY" in the configuration with your actual Smithery API key.
+
+                    > Note: When using Semantic Search, each result includes a similarity score (0-1) that indicates how well the server matches your query's meaning. Higher scores (closer to 1) indicate better semantic matches.
                     """)
+            
+            gr.Markdown("""
+            ## 🚀 Upcoming Features
+
+            We're constantly working to improve Router MCP. Here's what's coming soon:
+            """)
+            
+            with gr.Row():
                 with gr.Column():
                     gr.Markdown("""
-                    ### Features
-
-                    - **Multi-Source Search**: Search across Hugging Face Spaces and Smithery
-                    - **Smart Search**: Choose between keyword and semantic search
-                    - **OS-Specific Configs**: Get configurations tailored to your operating system
-                    - **Ready-to-Use**: Direct integration with MCP-compatible clients
+                    #### 🔄 Enhanced Integration
+                    - Integration with Anthropic's Registry for comprehensive MCP server discovery
+                    - Complete support for Smithery search capabilities
+                    - Enhanced server discovery with improved filtering and sorting options
+                    """)
+                with gr.Column():
+                    gr.Markdown("""
+                    #### ⚡️ Automated Setup
+                    - One-click MCP server addition to your client
+                    - Automatic configuration generation and validation
+                    - Seamless integration with popular MCP clients
                     """)
 
         with gr.Tab("Try Router MCP"):
@@ -712,11 +735,11 @@ with gr.Blocks(title="🚦 Router MCP", css="""
 
         with gr.Tab("How to Integrate"):
             gr.Markdown("""
-            ### Integration Guide
+            ## Integration Guide
 
             To integrate Router MCP with your preferred client, follow these instructions:
 
-            #### For SSE-Supported Clients
+            ### For SSE-Supported Clients
             For clients that support SSE (e.g., Cursor, Windsurf, Cline), add this configuration to your MCP config:
 
             ```json
@@ -729,7 +752,7 @@ with gr.Blocks(title="🚦 Router MCP", css="""
             }
             ```
 
-            #### For stdio-Only Clients
+            ### For stdio-Only Clients
             For clients that only support stdio (e.g., Claude Desktop):
             1. First, install Node.js
             2. Add this configuration to your MCP config: