diff --git a/index.html b/index.html
index 6019575..843da8e 100644
--- a/index.html
+++ b/index.html
@@ -3,38 +3,35 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Tootaio - 一站式开发者服务平台</title>
+    <title>Tootaio - Premium Developer Services</title>
     <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
+    <link href="https://fonts.googleapis.com/css2?family=Playfair+Display:wght@400;700&family=Inter:wght@300;400;500;600&display=swap" rel="stylesheet">
     <style>
         :root {
-            --primary: #6366f1;
-            --primary-dark: #4f46e5;
-            --secondary: #8b5cf6;
-            --light: #f8fafc;
-            --dark: #1e293b;
-            --gray: #64748b;
-            --card-bg: #ffffff;
-        }
-
-        .dark-mode {
-            --light: #0f172a;
-            --dark: #f1f5f9;
-            --gray: #cbd5e1;
-            --card-bg: #1e293b;
+            --primary-dark: #0A0E17;
+            --primary: #121826;
+            --secondary: #1C2431;
+            --accent-gold: #D4AF37;
+            --accent-gold-light: #F1E5AC;
+            --accent-blue: #2A4B7C;
+            --text-primary: #FFFFFF;
+            --text-secondary: #B0B7C3;
+            --card-bg: rgba(28, 36, 49, 0.6);
+            --transition: all 0.3s ease;
         }
 
         * {
             margin: 0;
             padding: 0;
             box-sizing: border-box;
-            transition: background-color 0.3s, color 0.3s;
         }
 
         body {
-            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
-            background-color: var(--light);
-            color: var(--dark);
+            font-family: 'Inter', sans-serif;
+            background: linear-gradient(135deg, var(--primary-dark), var(--primary));
+            color: var(--text-primary);
             line-height: 1.6;
+            overflow-x: hidden;
         }
 
         .container {
@@ -44,13 +41,13 @@
         }
 
         header {
-            background: linear-gradient(120deg, var(--primary), var(--secondary));
-            color: white;
-            padding: 1rem 0;
+            background: rgba(10, 14, 23, 0.8);
+            backdrop-filter: blur(10px);
+            padding: 1.2rem 0;
             position: sticky;
             top: 0;
             z-index: 100;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            border-bottom: 1px solid rgba(212, 175, 55, 0.2);
         }
 
         .nav-container {
@@ -60,88 +57,146 @@
         }
 
         .logo {
-            font-size: 1.8rem;
+            font-family: 'Playfair Display', serif;
+            font-size: 2rem;
             font-weight: 700;
             display: flex;
             align-items: center;
+            color: var(--accent-gold);
         }
 
         .logo i {
             margin-right: 10px;
+            color: var(--accent-gold);
         }
 
         .nav-links {
             display: flex;
-            gap: 1.5rem;
+            gap: 2rem;
         }
 
         .nav-links a {
-            color: white;
+            color: var(--text-primary);
             text-decoration: none;
             font-weight: 500;
-            padding: 5px 10px;
+            padding: 8px 16px;
             border-radius: 4px;
+            transition: var(--transition);
         }
 
         .nav-links a:hover {
-            background-color: rgba(255, 255, 255, 0.1);
+            color: var(--accent-gold);
         }
 
         .language-switcher {
-            background: rgba(255, 255, 255, 0.2);
-            border: none;
-            color: white;
-            padding: 5px 10px;
+            background: rgba(212, 175, 55, 0.1);
+            border: 1px solid var(--accent-gold);
+            color: var(--accent-gold);
+            padding: 8px 16px;
             border-radius: 4px;
             cursor: pointer;
+            transition: var(--transition);
+            display: flex;
+            align-items: center;
+            gap: 8px;
+        }
+
+        .language-switcher:hover {
+            background: rgba(212, 175, 55, 0.2);
         }
 
         .hero {
             text-align: center;
-            padding: 4rem 1rem;
-            background: linear-gradient(45deg, #4f46e5, #7c3aed);
-            color: white;
-            border-radius: 0 0 20px 20px;
-            margin-bottom: 2rem;
+            padding: 6rem 1rem;
+            position: relative;
+            overflow: hidden;
+        }
+
+        .hero::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at top right, rgba(212, 175, 55, 0.1), transparent 30%);
         }
 
         .hero h1 {
-            font-size: 3rem;
-            margin-bottom: 1rem;
+            font-family: 'Playfair Display', serif;
+            font-size: 3.5rem;
+            margin-bottom: 1.5rem;
+            background: linear-gradient(to right, var(--accent-gold), var(--accent-gold-light));
+            -webkit-background-clip: text;
+            -webkit-text-fill-color: transparent;
         }
 
         .hero p {
             font-size: 1.2rem;
             max-width: 700px;
-            margin: 0 auto 2rem;
+            margin: 0 auto 3rem;
+            color: var(--text-secondary);
         }
 
         .cta-button {
             display: inline-block;
-            background-color: white;
-            color: var(--primary);
-            padding: 12px 30px;
+            background: linear-gradient(135deg, var(--accent-gold), #B8860B);
+            color: var(--primary-dark);
+            padding: 14px 35px;
             border-radius: 50px;
             text-decoration: none;
             font-weight: 600;
-            box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s, box-shadow 0.3s;
+            box-shadow: 0 4px 15px rgba(212, 175, 55, 0.3);
+            transition: var(--transition);
+            position: relative;
+            overflow: hidden;
+        }
+
+        .cta-button::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: -100%;
+            width: 100%;
+            height: 100%;
+            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
+            transition: 0.5s;
         }
 
         .cta-button:hover {
             transform: translateY(-3px);
-            box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
+            box-shadow: 0 6px 20px rgba(212, 175, 55, 0.4);
+        }
+
+        .cta-button:hover::before {
+            left: 100%;
         }
 
         .section-title {
             text-align: center;
-            margin-bottom: 2.5rem;
-            font-size: 2.2rem;
-            color: var(--primary);
+            margin-bottom: 3rem;
+            font-family: 'Playfair Display', serif;
+            font-size: 2.5rem;
+            color: var(--accent-gold);
+            position: relative;
+            display: inline-block;
+            left: 50%;
+            transform: translateX(-50%);
+        }
+
+        .section-title::after {
+            content: '';
+            position: absolute;
+            bottom: -10px;
+            left: 50%;
+            transform: translateX(-50%);
+            width: 60px;
+            height: 3px;
+            background: var(--accent-gold);
         }
 
         .services {
-            padding: 3rem 0;
+            padding: 5rem 0;
         }
 
         .services-grid {
@@ -151,26 +206,33 @@
         }
 
         .service-card {
-            background-color: var(--card-bg);
+            background: var(--card-bg);
             border-radius: 12px;
             overflow: hidden;
-            box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
-            transition: transform 0.3s;
+            box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
+            transition: var(--transition);
+            border: 1px solid rgba(212, 175, 55, 0.1);
+            backdrop-filter: blur(10px);
+            position: relative;
         }
 
         .service-card:hover {
-            transform: translateY(-5px);
+            transform: translateY(-10px);
+            border-color: rgba(212, 175, 55, 0.3);
+            box-shadow: 0 15px 30px rgba(0, 0, 0, 0.3);
         }
 
         .card-header {
             padding: 1.5rem;
-            background: linear-gradient(45deg, var(--primary), var(--secondary));
-            color: white;
+            background: linear-gradient(90deg, var(--accent-blue), var(--secondary));
+            color: var(--text-primary);
+            position: relative;
         }
 
         .card-header h3 {
             font-size: 1.4rem;
             margin-bottom: 0.5rem;
+            font-weight: 600;
         }
 
         .card-body {
@@ -178,26 +240,39 @@
         }
 
         .card-body p {
-            color: var(--gray);
+            color: var(--text-secondary);
             margin-bottom: 1.5rem;
+            font-size: 0.95rem;
         }
 
         .card-link {
-            display: inline-block;
-            color: var(--primary);
+            display: inline-flex;
+            align-items: center;
+            color: var(--accent-gold);
             text-decoration: none;
-            font-weight: 600;
+            font-weight: 500;
+            gap: 8px;
+            transition: var(--transition);
         }
 
         .card-link:hover {
-            text-decoration: underline;
+            gap: 12px;
         }
 
         .other-links {
-            padding: 3rem 0;
-            background-color: rgba(99, 102, 241, 0.05);
-            border-radius: 20px;
-            margin: 3rem 0;
+            padding: 5rem 0;
+            background: rgba(10, 14, 23, 0.5);
+            position: relative;
+        }
+
+        .other-links::before {
+            content: '';
+            position: absolute;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: radial-gradient(circle at bottom left, rgba(42, 75, 124, 0.1), transparent 30%);
         }
 
         .links-grid {
@@ -209,36 +284,41 @@
         .link-item {
             display: flex;
             align-items: center;
-            padding: 1rem;
-            background-color: var(--card-bg);
+            padding: 1.2rem;
+            background: var(--card-bg);
             border-radius: 8px;
-            box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
             text-decoration: none;
-            color: var(--dark);
-            transition: transform 0.3s;
+            color: var(--text-primary);
+            transition: var(--transition);
+            border: 1px solid rgba(212, 175, 55, 0.05);
+            backdrop-filter: blur(10px);
         }
 
         .link-item:hover {
-            transform: translateY(-3px);
+            transform: translateY(-5px);
+            border-color: rgba(212, 175, 55, 0.2);
+            box-shadow: 0 8px 20px rgba(0, 0, 0, 0.2);
         }
 
         .link-icon {
-            width: 40px;
-            height: 40px;
-            background: linear-gradient(45deg, var(--primary), var(--secondary));
+            width: 45px;
+            height: 45px;
+            background: linear-gradient(135deg, var(--accent-gold), #B8860B);
             border-radius: 50%;
             display: flex;
             align-items: center;
             justify-content: center;
             margin-right: 1rem;
-            color: white;
+            color: var(--primary-dark);
+            font-size: 1.2rem;
         }
 
         footer {
-            background-color: var(--dark);
-            color: white;
-            padding: 3rem 0 2rem;
+            background-color: var(--primary-dark);
+            padding: 4rem 0 2rem;
             margin-top: 4rem;
+            border-top: 1px solid rgba(212, 175, 55, 0.1);
         }
 
         .footer-content {
@@ -257,46 +337,74 @@
         .footer-column h3 {
             font-size: 1.2rem;
             margin-bottom: 1.2rem;
-            color: var(--secondary);
+            color: var(--accent-gold);
+            font-family: 'Playfair Display', serif;
         }
 
         .footer-column a {
             display: block;
-            color: #cbd5e1;
+            color: var(--text-secondary);
             text-decoration: none;
             margin-bottom: 0.8rem;
+            transition: var(--transition);
         }
 
         .footer-column a:hover {
-            color: white;
+            color: var(--accent-gold);
         }
 
         .copyright {
             text-align: center;
             padding-top: 2rem;
-            border-top: 1px solid rgba(255, 255, 255, 0.1);
-            color: #94a3b8;
+            border-top: 1px solid rgba(255, 255, 255, 0.05);
+            color: var(--text-secondary);
+            font-size: 0.9rem;
         }
 
+        /* Animation for cards when they appear in viewport */
+        @keyframes fadeInUp {
+            from {
+                opacity: 0;
+                transform: translateY(30px);
+            }
+            to {
+                opacity: 1;
+                transform: translateY(0);
+            }
+        }
+
+        .service-card, .link-item {
+            opacity: 0;
+        }
+
+        .animated {
+            animation: fadeInUp 0.6s forwards;
+        }
+
+        /* Responsive design */
         @media (max-width: 768px) {
             .nav-links {
                 display: none;
             }
 
             .hero h1 {
-                font-size: 2.2rem;
+                font-size: 2.5rem;
             }
 
             .hero p {
                 font-size: 1rem;
             }
+
+            .services-grid, .links-grid {
+                grid-template-columns: 1fr;
+            }
         }
 
         .mobile-menu-btn {
             display: none;
             background: none;
             border: none;
-            color: white;
+            color: var(--accent-gold);
             font-size: 1.5rem;
             cursor: pointer;
         }
@@ -306,13 +414,52 @@
                 display: block;
             }
         }
+
+        /* Configuration panel for demo purposes */
+        .config-panel {
+            position: fixed;
+            bottom: 20px;
+            right: 20px;
+            background: var(--secondary);
+            border: 1px solid var(--accent-gold);
+            border-radius: 8px;
+            padding: 15px;
+            z-index: 1000;
+            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
+        }
+
+        .config-panel h4 {
+            margin-bottom: 10px;
+            color: var(--accent-gold);
+            font-size: 1rem;
+        }
+
+        .config-buttons {
+            display: flex;
+            gap: 10px;
+        }
+
+        .config-btn {
+            padding: 8px 12px;
+            background: var(--accent-blue);
+            border: none;
+            border-radius: 4px;
+            color: white;
+            cursor: pointer;
+            transition: var(--transition);
+        }
+
+        .config-btn:hover {
+            background: var(--accent-gold);
+            color: var(--primary-dark);
+        }
     </style>
 </head>
 <body>
     <header>
         <div class="container nav-container">
             <div class="logo">
-                <i class="fas fa-cube"></i>
+                <i class="fas fa-crown"></i>
                 <span data-lang="en">Tootaio</span>
                 <span data-lang="zh" style="display: none;">Tootaio</span>
             </div>
@@ -328,6 +475,7 @@
                 <a href="#" data-lang="zh" style="display: none;">联系</a>
             </nav>
             <button class="language-switcher" id="languageSwitcher">
+                <i class="fas fa-globe"></i>
                 <span data-lang="en">中文</span>
                 <span data-lang="zh" style="display: none;">English</span>
             </button>
@@ -339,10 +487,10 @@
 
     <section class="hero">
         <div class="container">
-            <h1 data-lang="en">Your All-in-One Developer Platform</h1>
-            <h1 data-lang="zh" style="display: none;">一站式开发者服务平台</h1>
-            <p data-lang="en">Tootaio provides a suite of powerful tools and services for developers, gamers, and creators. Everything you need in one place.</p>
-            <p data-lang="zh" style="display: none;">Tootaio 为开发者、游戏玩家和创作者提供一套强大的工具和服务。您所需的一切，尽在一处。</p>
+            <h1 data-lang="en">Premium Developer Experience</h1>
+            <h1 data-lang="zh" style="display: none;">卓越开发者体验</h1>
+            <p data-lang="en">Tootaio provides a suite of premium tools and services for developers, gamers, and creators. Experience the difference.</p>
+            <p data-lang="zh" style="display: none;">Tootaio 为开发者、游戏玩家和创作者提供一套高级工具和服务。体验与众不同的服务。</p>
             <a href="#services" class="cta-button" data-lang="en">Explore Services</a>
             <a href="#services" class="cta-button" data-lang="zh" style="display: none;">探索服务</a>
         </div>
@@ -353,138 +501,8 @@
             <h2 class="section-title" data-lang="en">Our Services</h2>
             <h2 class="section-title" data-lang="zh" style="display: none;">我们的服务</h2>
             
-            <div class="services-grid">
-                <!-- Main Site -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">The main portal to all Tootaio services and resources.</p>
-                        <p data-lang="zh" style="display: none;">通往所有 Tootaio 服务和资源的主门户。</p>
-                        <a href="https://tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- Gitea -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>git.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Self-hosted Gitea open source community platform.</p>
-                        <p data-lang="zh" style="display: none;">自托管的 Gitea 开源社区平台。</p>
-                        <a href="https://git.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- NAS -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>nas.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Cloud storage solution for your files and data.</p>
-                        <p data-lang="zh" style="display: none;">为您的文件和数据提供的云存储解决方案。</p>
-                        <a href="https://nas.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- Torrent -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>torrent.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Download torrent files to our server with high speed.</p>
-                        <p data-lang="zh" style="display: none;">借助服务器高速下载 Torrent 文件。</p>
-                        <a href="https://torrent.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- Wiki -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>wiki.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Wiki for our studio's games and project planning.</p>
-                        <p data-lang="zh" style="display: none;">我们工作室游戏和项目策划的维基百科。</p>
-                        <a href="https://wiki.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- Kenney Assets -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>kenney-assets.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Unofficial mirror for Kenney's game assets.</p>
-                        <p data-lang="zh" style="display: none;">Kenney 游戏资源的非官方镜像站。</p>
-                        <a href="https://kenney-assets.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- Itch.io Godot Downloader -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>itch-gd-dl.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Itch.io Godot game crawler and downloader.</p>
-                        <p data-lang="zh" style="display: none;">Itch.io Godot 游戏爬取和下载工具。</p>
-                        <a href="https://itch-gd-dl.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- PDF Tools -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>pdf.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Online PDF tools for all your document needs.</p>
-                        <p data-lang="zh" style="display: none;">满足您所有文档需求的在线 PDF 工具。</p>
-                        <a href="https://pdf.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- Life Restart -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>life-restart.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Mirror site for the Life Restart Simulator game.</p>
-                        <p data-lang="zh" style="display: none;">人生重开模拟器游戏的镜像站。</p>
-                        <a href="https://life-restart.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- Memos -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>memos.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">Note-taking space for your ideas and thoughts.</p>
-                        <p data-lang="zh" style="display: none;">记录您的想法和思考的笔记空间。</p>
-                        <a href="https://memos.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
-
-                <!-- JSON Hero -->
-                <div class="service-card">
-                    <div class="card-header">
-                        <h3>json.tootaio.com</h3>
-                    </div>
-                    <div class="card-body">
-                        <p data-lang="en">JSON Hero viewer for visualizing and editing JSON data.</p>
-                        <p data-lang="zh" style="display: none;">用于可视化和编辑 JSON 数据的 JSON Hero 查看器。</p>
-                        <a href="https://json.tootaio.com" class="card-link" target="_blank">Visit Site</a>
-                    </div>
-                </div>
+            <div class="services-grid" id="servicesGrid">
+                <!-- Services will be loaded dynamically from JSON -->
             </div>
         </div>
     </section>
@@ -494,38 +512,8 @@
             <h2 class="section-title" data-lang="en">Other Links</h2>
             <h2 class="section-title" data-lang="zh" style="display: none;">其他链接</h2>
             
-            <div class="links-grid">
-                <a href="https://kingsmai.github.io" class="link-item" target="_blank">
-                    <div class="link-icon">
-                        <i class="fas fa-blog"></i>
-                    </div>
-                    <span data-lang="en">Kingsmai's Personal Blog</span>
-                    <span data-lang="zh" style="display: none;">Kingsmai 的个人博客</span>
-                </a>
-                
-                <a href="https://github.com/kingsmai" class="link-item" target="_blank">
-                    <div class="link-icon">
-                        <i class="fab fa-github"></i>
-                    </div>
-                    <span data-lang="en">Kingsmai's GitHub</span>
-                    <span data-lang="zh" style="display: none;">Kingsmai 的 GitHub</span>
-                </a>
-                
-                <a href="https://discord.com/invite/sJcv7ZM" class="link-item" target="_blank">
-                    <div class="link-icon">
-                        <i class="fab fa-discord"></i>
-                    </div>
-                    <span data-lang="en">Studio Discord Community</span>
-                    <span data-lang="zh" style="display: none;">工作室 Discord 社区</span>
-                </a>
-                
-                <a href="https://space.bilibili.com/670118055" class="link-item" target="_blank">
-                    <div class="link-icon">
-                        <i class="fas fa-video"></i>
-                    </div>
-                    <span data-lang="en">Studio BiliBili Space</span>
-                    <span data-lang="zh" style="display: none;">工作室 BiliBili 空间</span>
-                </a>
+            <div class="links-grid" id="linksGrid">
+                <!-- Links will be loaded dynamically from JSON -->
             </div>
         </div>
     </section>
@@ -570,8 +558,116 @@
         </div>
     </footer>
 
+    <!-- Configuration panel for demo -->
+    <div class="config-panel">
+        <h4>Developer Options</h4>
+        <div class="config-buttons">
+            <button class="config-btn" id="reloadData">Reload Data</button>
+            <button class="config-btn" id="viewConfig">View Config</button>
+        </div>
+    </div>
+
     <script>
+        // Configuration data - in a real scenario, this would be in an external JSON file
+        const siteConfig = {
+            "services": [
+                {
+                    "name": "tootaio.com",
+                    "url": "https://tootaio.com",
+                    "description_en": "The main portal to all Tootaio services and resources.",
+                    "description_zh": "通往所有 Tootaio 服务和资源的主门户。"
+                },
+                {
+                    "name": "git.tootaio.com",
+                    "url": "https://git.tootaio.com",
+                    "description_en": "Self-hosted Gitea open source community platform.",
+                    "description_zh": "自托管的 Gitea 开源社区平台。"
+                },
+                {
+                    "name": "nas.tootaio.com",
+                    "url": "https://nas.tootaio.com",
+                    "description_en": "Cloud storage solution for your files and data.",
+                    "description_zh": "为您的文件和数据提供的云存储解决方案。"
+                },
+                {
+                    "name": "torrent.tootaio.com",
+                    "url": "https://torrent.tootaio.com",
+                    "description_en": "Download torrent files to our server with high speed.",
+                    "description_zh": "借助服务器高速下载 Torrent 文件。"
+                },
+                {
+                    "name": "wiki.tootaio.com",
+                    "url": "https://wiki.tootaio.com",
+                    "description_en": "Wiki for our studio's games and project planning.",
+                    "description_zh": "我们工作室游戏和项目策划的维基百科。"
+                },
+                {
+                    "name": "kenney-assets.tootaio.com",
+                    "url": "https://kenney-assets.tootaio.com",
+                    "description_en": "Unofficial mirror for Kenney's game assets.",
+                    "description_zh": "Kenney 游戏资源的非官方镜像站。"
+                },
+                {
+                    "name": "itch-gd-dl.tootaio.com",
+                    "url": "https://itch-gd-dl.tootaio.com",
+                    "description_en": "Itch.io Godot game crawler and downloader.",
+                    "description_zh": "Itch.io Godot 游戏爬取和下载工具。"
+                },
+                {
+                    "name": "pdf.tootaio.com",
+                    "url": "https://pdf.tootaio.com",
+                    "description_en": "Online PDF tools for all your document needs.",
+                    "description_zh": "满足您所有文档需求的在线 PDF 工具。"
+                },
+                {
+                    "name": "life-restart.tootaio.com",
+                    "url": "https://life-restart.tootaio.com",
+                    "description_en": "Mirror site for the Life Restart Simulator game.",
+                    "description_zh": "人生重开模拟器游戏的镜像站。"
+                },
+                {
+                    "name": "memos.tootaio.com",
+                    "url": "https://memos.tootaio.com",
+                    "description_en": "Note-taking space for your ideas and thoughts.",
+                    "description_zh": "记录您的想法和思考的笔记空间。"
+                },
+                {
+                    "name": "json.tootaio.com",
+                    "url": "https://json.tootaio.com",
+                    "description_en": "JSON Hero viewer for visualizing and editing JSON data.",
+                    "description_zh": "用于可视化和编辑 JSON 数据的 JSON Hero 查看器。"
+                }
+            ],
+            "otherLinks": [
+                {
+                    "name_en": "Kingsmai's Personal Blog",
+                    "name_zh": "Kingsmai 的个人博客",
+                    "url": "https://kingsmai.github.io",
+                    "icon": "blog"
+                },
+                {
+                    "name_en": "Kingsmai's GitHub",
+                    "name_zh": "Kingsmai 的 GitHub",
+                    "url": "https://github.com/kingsmai",
+                    "icon": "github"
+                },
+                {
+                    "name_en": "Studio Discord Community",
+                    "name_zh": "工作室 Discord 社区",
+                    "url": "https://discord.com/invite/sJcv7ZM",
+                    "icon": "discord"
+                },
+                {
+                    "name_en": "Studio BiliBili Space",
+                    "name_zh": "工作室 BiliBili 空间",
+                    "url": "https://space.bilibili.com/670118055",
+                    "icon": "video"
+                }
+            ]
+        };
+
         document.addEventListener('DOMContentLoaded', function() {
+            // Language switching functionality
             const languageSwitcher = document.getElementById('languageSwitcher');
             let currentLang = 'en';
             
@@ -591,16 +687,119 @@
                 // Update button text
                 const buttonText = currentLang === 'en' ? '中文' : 'English';
                 languageSwitcher.querySelector('span').textContent = buttonText;
+                
+                // Reload content with new language
+                loadServices(currentLang);
+                loadOtherLinks(currentLang);
             });
             
-            // Mobile menu toggle (optional enhancement)
-            const mobileMenuBtn = document.querySelector('.mobile-menu-btn');
-            const navLinks = document.querySelector('.nav-links');
+            // Load initial content
+            loadServices(currentLang);
+            loadOtherLinks(currentLang);
             
-            mobileMenuBtn.addEventListener('click', function() {
-                navLinks.style.display = navLinks.style.display === 'flex' ? 'none' : 'flex';
+            // Animation on scroll
+            const observerOptions = {
+                threshold: 0.1,
+                rootMargin: '0px 0px -50px 0px'
+            };
+            
+            const observer = new IntersectionObserver(function(entries) {
+                entries.forEach(entry => {
+                    if (entry.isIntersecting) {
+                        entry.target.classList.add('animated');
+                    }
+                });
+            }, observerOptions);
+            
+            // Observe service cards and link items for animation
+            document.querySelectorAll('.service-card, .link-item').forEach(item => {
+                observer.observe(item);
+            });
+            
+            // Developer tools
+            document.getElementById('reloadData').addEventListener('click', function() {
+                loadServices(currentLang);
+                loadOtherLinks(currentLang);
+                alert('Data reloaded!');
+            });
+            
+            document.getElementById('viewConfig').addEventListener('click', function() {
+                alert('In a real implementation, this would open the external config file.\n\nFor now, check the JavaScript code for the siteConfig object.');
             });
         });
+        
+        function loadServices(lang) {
+            const servicesGrid = document.getElementById('servicesGrid');
+            servicesGrid.innerHTML = '';
+            
+            siteConfig.services.forEach(service => {
+                const card = document.createElement('div');
+                card.className = 'service-card';
+                
+                card.innerHTML = `
+                    <div class="card-header">
+                        <h3>${service.name}</h3>
+                    </div>
+                    <div class="card-body">
+                        <p>${lang === 'en' ? service.description_en : service.description_zh}</p>
+                        <a href="${service.url}" class="card-link" target="_blank">
+                            <span data-lang="en">Visit Site</span>
+                            <span data-lang="zh" style="display: none;">访问网站</span>
+                            <i class="fas fa-arrow-right"></i>
+                        </a>
+                    </div>
+                `;
+                
+                servicesGrid.appendChild(card);
+                
+                // Set language-specific visibility
+                card.querySelectorAll('[data-lang]').forEach(element => {
+                    if (element.getAttribute('data-lang') === lang) {
+                        element.style.display = 'inline';
+                    } else {
+                        element.style.display = 'none';
+                    }
+                });
+            });
+        }
+        
+        function loadOtherLinks(lang) {
+            const linksGrid = document.getElementById('linksGrid');
+            linksGrid.innerHTML = '';
+            
+            siteConfig.otherLinks.forEach(link => {
+                const linkItem = document.createElement('a');
+                linkItem.href = link.url;
+                linkItem.target = '_blank';
+                linkItem.className = 'link-item';
+                
+                // Get icon class based on config
+                let iconClass = 'fas fa-link';
+                if (link.icon === 'blog') iconClass = 'fas fa-blog';
+                if (link.icon === 'github') iconClass = 'fab fa-github';
+                if (link.icon === 'discord') iconClass = 'fab fa-discord';
+                if (link.icon === 'video') iconClass = 'fas fa-video';
+                
+                linkItem.innerHTML = `
+                    <div class="link-icon">
+                        <i class="${iconClass}"></i>
+                    </div>
+                    <span data-lang="en">${link.name_en}</span>
+                    <span data-lang="zh" style="display: none;">${link.name_zh}</span>
+                `;
+                
+                linksGrid.appendChild(linkItem);
+                
+                // Set language-specific visibility
+                linkItem.querySelectorAll('[data-lang]').forEach(element => {
+                    if (element.getAttribute('data-lang') === lang) {
+                        element.style.display = 'inline';
+                    } else {
+                        element.style.display = 'none';
+                    }
+                });
+            });
+        }
     </script>
 </body>
 </html>
\ No newline at end of file
