diff --git a/.claude-sync-status.json b/.claude-sync-status.json
new file mode 100644
index 0000000..1b22362
--- /dev/null
+++ b/.claude-sync-status.json
@@ -0,0 +1,10 @@
+{
+  "service": "performance_monitor",
+  "status": "running",
+  "data": {
+    "cpu_cores": 10,
+    "system": "macOS",
+    "timestamp": "2026-02-25T12:22:52.407926"
+  },
+  "last_update": "2026-02-25T12:22:52.407983"
+}
\ No newline at end of file
diff --git a/.screen-graph.json b/.screen-graph.json
new file mode 100644
index 0000000..67dc27d
--- /dev/null
+++ b/.screen-graph.json
@@ -0,0 +1,974 @@
+{
+  "nodes": [
+    {
+      "id": "src/screens/Discovery/Discovery.tsx",
+      "label": "Discovery",
+      "routes": [
+        "/",
+        "/home",
+        "/copus"
+      ],
+      "isRoot": true
+    },
+    {
+      "id": "src/components/guards/AuthGuard.tsx",
+      "label": "AuthGuard",
+      "routes": [
+        "/following",
+        "/treasury",
+        "/notification",
+        "/setting",
+        "/earning",
+        "/my-treasury",
+        "/space/:category",
+        "/curate",
+        "/account/delete",
+        "/seoSet"
+      ]
+    },
+    {
+      "id": "src/routes/Login/screens/Login.tsx",
+      "label": "Login",
+      "routes": [
+        "/login"
+      ]
+    },
+    {
+      "id": "src/components/ShortLinkHandler.tsx",
+      "label": "ShortLinkHandler",
+      "routes": [
+        "/u/:namespace"
+      ]
+    },
+    {
+      "id": "src/screens/Content/Content.tsx",
+      "label": "Content",
+      "routes": [
+        "/work/:id"
+      ],
+      "dataModelId": "9091:54529"
+    },
+    {
+      "id": "src/routes/NewExplore/screens/NewExplore.tsx",
+      "label": "NewExplore",
+      "routes": [
+        "/*"
+      ],
+      "isRoot": true
+    }
+  ],
+  "edges": [
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:34:4-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "navigate('/setting')",
+          "line": 34,
+          "endLine": 34,
+          "column": 4,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:67:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"flex w-[30px] h-[30px] lg:w-[45px] lg:h-[45px] items-center justify-center rounded-full bg-red\">\n            <img\n              className=\"w-[18px] h-[18px] lg:w-7 lg:h-7\"\n              alt=\"Ic fractopus open\"\n              src=\"https://c.animaapp.com/mft9nppdGctUh1/img/ic-fractopus-open.svg\"\n            />\n          </Link>",
+          "line": 67,
+          "endLine": 73,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:75:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"[font-family:'Lato',Helvetica] font-bold text-dark-grey text-lg tracking-[0.90px] leading-[27px] whitespace-nowrap\">\n            Copus\n          </Link>",
+          "line": 75,
+          "endLine": 77,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:121:12-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/notification",
+        "trigger": {
+          "element": "<Link to=\"/notification\" className=\"block cursor-pointer relative\">\n              <img\n                className=\"w-[47px] h-[47px] rotate-[12deg] hover:rotate-[17deg] transition-transform duration-200\"\n                alt=\"Notification\"\n                src=\"https://c.animaapp.com/mft4oqz6uyUKY7/img/notification.svg\"\n              />\n              {unreadCount > 0 && (\n                <div className=\"absolute -top-1 -right-1 bg-red text-white text-xs font-bold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1\">\n                  {unreadCount > 99 ? '99+' : unreadCount}\n                </div>\n              )}\n            </Link>",
+          "line": 121,
+          "endLine": 132,
+          "column": 12,
+          "endColumn": 19,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:161:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "<Link\n                    to=\"/my-treasury\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    My Treasury\n                  </Link>",
+          "line": 161,
+          "endLine": 167,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:168:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "<Link\n                    to=\"/setting\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    Settings\n                  </Link>",
+          "line": 168,
+          "endLine": 174,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:188:14-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Link to=\"/copus\" className=\"inline-flex items-center justify-end relative flex-[0_0_auto] rounded-[10px_10px_0px_0px]\">\n                <div className=\"relative flex items-center justify-center w-fit font-p-l font-[number:var(--p-l-font-weight)] text-dark-grey text-[length:var(--p-l-font-size)] text-center tracking-[var(--p-l-letter-spacing)] leading-[var(--p-l-line-height)] whitespace-nowrap [font-style:var(--p-l-font-style)]\">\n                  Discover now\n                </div>\n              </Link>",
+          "line": 188,
+          "endLine": 192,
+          "column": 14,
+          "endColumn": 21,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:200:16-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "<Link to=\"/login\">Log in / Sign up</Link>",
+          "line": 200,
+          "endLine": 200,
+          "column": 16,
+          "endColumn": 57,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/MobileMenu/MobileMenu.tsx:80:6-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 80,
+          "endLine": 80,
+          "column": 6,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/MobileMenu/MobileMenu.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Discovery/sections/DiscoveryContentSection/DiscoveryContentSection.tsx:139:33-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 139,
+          "endLine": 139,
+          "column": 33,
+          "endColumn": 51,
+          "sourceFile": "src/screens/Discovery/sections/DiscoveryContentSection/DiscoveryContentSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Discovery/sections/DiscoveryContentSection/DiscoveryContentSection.tsx:197:25-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 197,
+          "endLine": 197,
+          "column": 25,
+          "endColumn": 43,
+          "sourceFile": "src/screens/Discovery/sections/DiscoveryContentSection/DiscoveryContentSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Discovery/sections/DiscoveryContentSection/DiscoveryContentSection.tsx:212:6-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "navigate('/my-treasury')",
+          "line": 212,
+          "endLine": 212,
+          "column": 6,
+          "endColumn": 30,
+          "sourceFile": "src/screens/Discovery/sections/DiscoveryContentSection/DiscoveryContentSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/guards/AuthGuard.tsx:43:11-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/components/guards/AuthGuard.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Navigate to=\"/copus\" replace />",
+          "line": 43,
+          "endLine": 43,
+          "column": 11,
+          "endColumn": 43,
+          "sourceFile": "src/components/guards/AuthGuard.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/pages/UnauthorizedPage.tsx:45:29-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/components/guards/AuthGuard.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 45,
+          "endLine": 45,
+          "column": 29,
+          "endColumn": 47,
+          "sourceFile": "src/components/pages/UnauthorizedPage.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/pages/UnauthorizedPage.tsx:59:12-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/components/guards/AuthGuard.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Link\n              to=\"/copus\"\n              className=\"block w-full text-gray-500 hover:text-gray-700 py-2 transition-colors\"\n            >\n              Back to Home\n            </Link>",
+          "line": 59,
+          "endLine": 64,
+          "column": 12,
+          "endColumn": 19,
+          "sourceFile": "src/components/pages/UnauthorizedPage.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:34:4-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "navigate('/setting')",
+          "line": 34,
+          "endLine": 34,
+          "column": 4,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:67:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"flex w-[30px] h-[30px] lg:w-[45px] lg:h-[45px] items-center justify-center rounded-full bg-red\">\n            <img\n              className=\"w-[18px] h-[18px] lg:w-7 lg:h-7\"\n              alt=\"Ic fractopus open\"\n              src=\"https://c.animaapp.com/mft9nppdGctUh1/img/ic-fractopus-open.svg\"\n            />\n          </Link>",
+          "line": 67,
+          "endLine": 73,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:75:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"[font-family:'Lato',Helvetica] font-bold text-dark-grey text-lg tracking-[0.90px] leading-[27px] whitespace-nowrap\">\n            Copus\n          </Link>",
+          "line": 75,
+          "endLine": 77,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:121:12-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/notification",
+        "trigger": {
+          "element": "<Link to=\"/notification\" className=\"block cursor-pointer relative\">\n              <img\n                className=\"w-[47px] h-[47px] rotate-[12deg] hover:rotate-[17deg] transition-transform duration-200\"\n                alt=\"Notification\"\n                src=\"https://c.animaapp.com/mft4oqz6uyUKY7/img/notification.svg\"\n              />\n              {unreadCount > 0 && (\n                <div className=\"absolute -top-1 -right-1 bg-red text-white text-xs font-bold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1\">\n                  {unreadCount > 99 ? '99+' : unreadCount}\n                </div>\n              )}\n            </Link>",
+          "line": 121,
+          "endLine": 132,
+          "column": 12,
+          "endColumn": 19,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:161:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "<Link\n                    to=\"/my-treasury\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    My Treasury\n                  </Link>",
+          "line": 161,
+          "endLine": 167,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:168:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "<Link\n                    to=\"/setting\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    Settings\n                  </Link>",
+          "line": 168,
+          "endLine": 174,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:188:14-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Link to=\"/copus\" className=\"inline-flex items-center justify-end relative flex-[0_0_auto] rounded-[10px_10px_0px_0px]\">\n                <div className=\"relative flex items-center justify-center w-fit font-p-l font-[number:var(--p-l-font-weight)] text-dark-grey text-[length:var(--p-l-font-size)] text-center tracking-[var(--p-l-letter-spacing)] leading-[var(--p-l-line-height)] whitespace-nowrap [font-style:var(--p-l-font-style)]\">\n                  Discover now\n                </div>\n              </Link>",
+          "line": 188,
+          "endLine": 192,
+          "column": 14,
+          "endColumn": 21,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:200:16-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "<Link to=\"/login\">Log in / Sign up</Link>",
+          "line": 200,
+          "endLine": 200,
+          "column": 16,
+          "endColumn": 57,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/MobileMenu/MobileMenu.tsx:80:6-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 80,
+          "endLine": 80,
+          "column": 6,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/MobileMenu/MobileMenu.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:34:4-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "navigate('/setting')",
+          "line": 34,
+          "endLine": 34,
+          "column": 4,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:67:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"flex w-[30px] h-[30px] lg:w-[45px] lg:h-[45px] items-center justify-center rounded-full bg-red\">\n            <img\n              className=\"w-[18px] h-[18px] lg:w-7 lg:h-7\"\n              alt=\"Ic fractopus open\"\n              src=\"https://c.animaapp.com/mft9nppdGctUh1/img/ic-fractopus-open.svg\"\n            />\n          </Link>",
+          "line": 67,
+          "endLine": 73,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:75:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"[font-family:'Lato',Helvetica] font-bold text-dark-grey text-lg tracking-[0.90px] leading-[27px] whitespace-nowrap\">\n            Copus\n          </Link>",
+          "line": 75,
+          "endLine": 77,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:121:12-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/notification",
+        "trigger": {
+          "element": "<Link to=\"/notification\" className=\"block cursor-pointer relative\">\n              <img\n                className=\"w-[47px] h-[47px] rotate-[12deg] hover:rotate-[17deg] transition-transform duration-200\"\n                alt=\"Notification\"\n                src=\"https://c.animaapp.com/mft4oqz6uyUKY7/img/notification.svg\"\n              />\n              {unreadCount > 0 && (\n                <div className=\"absolute -top-1 -right-1 bg-red text-white text-xs font-bold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1\">\n                  {unreadCount > 99 ? '99+' : unreadCount}\n                </div>\n              )}\n            </Link>",
+          "line": 121,
+          "endLine": 132,
+          "column": 12,
+          "endColumn": 19,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:161:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "<Link\n                    to=\"/my-treasury\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    My Treasury\n                  </Link>",
+          "line": 161,
+          "endLine": 167,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:168:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "<Link\n                    to=\"/setting\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    Settings\n                  </Link>",
+          "line": 168,
+          "endLine": 174,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:188:14-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Link to=\"/copus\" className=\"inline-flex items-center justify-end relative flex-[0_0_auto] rounded-[10px_10px_0px_0px]\">\n                <div className=\"relative flex items-center justify-center w-fit font-p-l font-[number:var(--p-l-font-weight)] text-dark-grey text-[length:var(--p-l-font-size)] text-center tracking-[var(--p-l-letter-spacing)] leading-[var(--p-l-line-height)] whitespace-nowrap [font-style:var(--p-l-font-style)]\">\n                  Discover now\n                </div>\n              </Link>",
+          "line": 188,
+          "endLine": 192,
+          "column": 14,
+          "endColumn": 21,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:200:16-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "<Link to=\"/login\">Log in / Sign up</Link>",
+          "line": 200,
+          "endLine": 200,
+          "column": 16,
+          "endColumn": 57,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/MobileMenu/MobileMenu.tsx:80:6-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 80,
+          "endLine": 80,
+          "column": 6,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/MobileMenu/MobileMenu.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/routes/MyTreasury/screens/sections/MainContentSection.tsx:386:6-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/routes/MyTreasury/screens/MyTreasury.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "navigate('/my-treasury')",
+          "line": 386,
+          "endLine": 386,
+          "column": 6,
+          "endColumn": 30,
+          "sourceFile": "src/routes/MyTreasury/screens/sections/MainContentSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Content/Content.tsx:111:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Content/Content.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Link to=\"/copus\" className=\"text-blue hover:underline\">\n            Back to Discovery\n          </Link>",
+          "line": 111,
+          "endLine": 113,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/screens/Content/Content.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Content/Content.tsx:126:25-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Content/Content.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 126,
+          "endLine": 126,
+          "column": 25,
+          "endColumn": 43,
+          "sourceFile": "src/screens/Content/Content.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Content/Content.tsx:169:25-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Content/Content.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 169,
+          "endLine": 169,
+          "column": 25,
+          "endColumn": 43,
+          "sourceFile": "src/screens/Content/Content.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Content/Content.tsx:177:6-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Content/Content.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "navigate('/my-treasury')",
+          "line": 177,
+          "endLine": 177,
+          "column": 6,
+          "endColumn": 30,
+          "sourceFile": "src/screens/Content/Content.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/screens/Content/Content.tsx:180:6-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Content/Content.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "navigate('/my-treasury')",
+          "line": 180,
+          "endLine": 180,
+          "column": 6,
+          "endColumn": 30,
+          "sourceFile": "src/screens/Content/Content.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:34:4-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "navigate('/setting')",
+          "line": 34,
+          "endLine": 34,
+          "column": 4,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:67:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"flex w-[30px] h-[30px] lg:w-[45px] lg:h-[45px] items-center justify-center rounded-full bg-red\">\n            <img\n              className=\"w-[18px] h-[18px] lg:w-7 lg:h-7\"\n              alt=\"Ic fractopus open\"\n              src=\"https://c.animaapp.com/mft9nppdGctUh1/img/ic-fractopus-open.svg\"\n            />\n          </Link>",
+          "line": 67,
+          "endLine": 73,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:75:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"[font-family:'Lato',Helvetica] font-bold text-dark-grey text-lg tracking-[0.90px] leading-[27px] whitespace-nowrap\">\n            Copus\n          </Link>",
+          "line": 75,
+          "endLine": 77,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:121:12-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/notification",
+        "trigger": {
+          "element": "<Link to=\"/notification\" className=\"block cursor-pointer relative\">\n              <img\n                className=\"w-[47px] h-[47px] rotate-[12deg] hover:rotate-[17deg] transition-transform duration-200\"\n                alt=\"Notification\"\n                src=\"https://c.animaapp.com/mft4oqz6uyUKY7/img/notification.svg\"\n              />\n              {unreadCount > 0 && (\n                <div className=\"absolute -top-1 -right-1 bg-red text-white text-xs font-bold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1\">\n                  {unreadCount > 99 ? '99+' : unreadCount}\n                </div>\n              )}\n            </Link>",
+          "line": 121,
+          "endLine": 132,
+          "column": 12,
+          "endColumn": 19,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:161:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "<Link\n                    to=\"/my-treasury\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    My Treasury\n                  </Link>",
+          "line": 161,
+          "endLine": 167,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:168:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "<Link\n                    to=\"/setting\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    Settings\n                  </Link>",
+          "line": 168,
+          "endLine": 174,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:188:14-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Link to=\"/copus\" className=\"inline-flex items-center justify-end relative flex-[0_0_auto] rounded-[10px_10px_0px_0px]\">\n                <div className=\"relative flex items-center justify-center w-fit font-p-l font-[number:var(--p-l-font-weight)] text-dark-grey text-[length:var(--p-l-font-size)] text-center tracking-[var(--p-l-letter-spacing)] leading-[var(--p-l-line-height)] whitespace-nowrap [font-style:var(--p-l-font-style)]\">\n                  Discover now\n                </div>\n              </Link>",
+          "line": 188,
+          "endLine": 192,
+          "column": 14,
+          "endColumn": 21,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:200:16-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "<Link to=\"/login\">Log in / Sign up</Link>",
+          "line": 200,
+          "endLine": 200,
+          "column": 16,
+          "endColumn": 57,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/MobileMenu/MobileMenu.tsx:80:6-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 80,
+          "endLine": 80,
+          "column": 6,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/MobileMenu/MobileMenu.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:34:4-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "navigate('/setting')",
+          "line": 34,
+          "endLine": 34,
+          "column": 4,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:67:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"flex w-[30px] h-[30px] lg:w-[45px] lg:h-[45px] items-center justify-center rounded-full bg-red\">\n            <img\n              className=\"w-[18px] h-[18px] lg:w-7 lg:h-7\"\n              alt=\"Ic fractopus open\"\n              src=\"https://c.animaapp.com/mft9nppdGctUh1/img/ic-fractopus-open.svg\"\n            />\n          </Link>",
+          "line": 67,
+          "endLine": 73,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:75:10-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/",
+        "trigger": {
+          "element": "<Link to=\"/\" className=\"[font-family:'Lato',Helvetica] font-bold text-dark-grey text-lg tracking-[0.90px] leading-[27px] whitespace-nowrap\">\n            Copus\n          </Link>",
+          "line": 75,
+          "endLine": 77,
+          "column": 10,
+          "endColumn": 17,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:121:12-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/notification",
+        "trigger": {
+          "element": "<Link to=\"/notification\" className=\"block cursor-pointer relative\">\n              <img\n                className=\"w-[47px] h-[47px] rotate-[12deg] hover:rotate-[17deg] transition-transform duration-200\"\n                alt=\"Notification\"\n                src=\"https://c.animaapp.com/mft4oqz6uyUKY7/img/notification.svg\"\n              />\n              {unreadCount > 0 && (\n                <div className=\"absolute -top-1 -right-1 bg-red text-white text-xs font-bold rounded-full min-w-[20px] h-[20px] flex items-center justify-center px-1\">\n                  {unreadCount > 99 ? '99+' : unreadCount}\n                </div>\n              )}\n            </Link>",
+          "line": 121,
+          "endLine": 132,
+          "column": 12,
+          "endColumn": 19,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:161:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/my-treasury",
+        "trigger": {
+          "element": "<Link\n                    to=\"/my-treasury\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    My Treasury\n                  </Link>",
+          "line": 161,
+          "endLine": 167,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:168:18-to-src/components/guards/AuthGuard.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/components/guards/AuthGuard.tsx",
+      "data": {
+        "viaRoute": "/setting",
+        "trigger": {
+          "element": "<Link\n                    to=\"/setting\"\n                    className=\"block px-4 py-2 text-sm text-gray-700 hover:bg-gray-100\"\n                    onClick={() => setShowUserMenu(false)}\n                  >\n                    Settings\n                  </Link>",
+          "line": 168,
+          "endLine": 174,
+          "column": 18,
+          "endColumn": 25,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:188:14-to-src/screens/Discovery/Discovery.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/screens/Discovery/Discovery.tsx",
+      "data": {
+        "viaRoute": "/copus",
+        "trigger": {
+          "element": "<Link to=\"/copus\" className=\"inline-flex items-center justify-end relative flex-[0_0_auto] rounded-[10px_10px_0px_0px]\">\n                <div className=\"relative flex items-center justify-center w-fit font-p-l font-[number:var(--p-l-font-weight)] text-dark-grey text-[length:var(--p-l-font-size)] text-center tracking-[var(--p-l-letter-spacing)] leading-[var(--p-l-line-height)] whitespace-nowrap [font-style:var(--p-l-font-style)]\">\n                  Discover now\n                </div>\n              </Link>",
+          "line": 188,
+          "endLine": 192,
+          "column": 14,
+          "endColumn": 21,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/HeaderSection/HeaderSection.tsx:200:16-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "<Link to=\"/login\">Log in / Sign up</Link>",
+          "line": 200,
+          "endLine": 200,
+          "column": 16,
+          "endColumn": 57,
+          "sourceFile": "src/components/shared/HeaderSection/HeaderSection.tsx"
+        }
+      }
+    },
+    {
+      "id": "src/components/shared/MobileMenu/MobileMenu.tsx:80:6-to-src/routes/Login/screens/Login.tsx",
+      "source": "src/screens/Discovery/Discovery.tsx",
+      "target": "src/routes/Login/screens/Login.tsx",
+      "data": {
+        "viaRoute": "/login",
+        "trigger": {
+          "element": "navigate('/login')",
+          "line": 80,
+          "endLine": 80,
+          "column": 6,
+          "endColumn": 24,
+          "sourceFile": "src/components/shared/MobileMenu/MobileMenu.tsx"
+        }
+      }
+    }
+  ]
+}
\ No newline at end of file
diff --git a/SPACE_PAYMENT_FEATURE_DESIGN.md b/SPACE_PAYMENT_FEATURE_DESIGN.md
new file mode 100644
index 0000000..27263aa
--- /dev/null
+++ b/SPACE_PAYMENT_FEATURE_DESIGN.md
@@ -0,0 +1,272 @@
+# 空间付费功能设计文档
+
+## 1. 功能概述
+
+### 核心理念
+- **买断制解锁**：用户一次性付费即可永久访问付费空间的所有内容
+- **混合内容模式**：空间可包含免费内容（预览/引流）和付费内容
+- **创作者变现**：为空间创建者提供内容变现渠道
+
+### 用户场景
+- **空间创建者**：可设置空间为付费模式，设定解锁价格，管理付费/免费内容
+- **空间访客**：可浏览免费内容，付费解锁完整空间内容
+- **已付费用户**：永久访问已购买空间的所有内容
+
+## 2. 功能模块设计
+
+### 2.1 空间付费设置模块
+- [ ] **空间类型配置**
+  - 免费空间（默认）
+  - 付费空间
+  - 混合空间（部分内容付费）
+
+- [ ] **定价设置**
+  - 空间解锁价格设定（USDT/USDC）
+  - 支持多币种定价
+  - 价格修改历史记录
+
+- [ ] **内容权限管理**
+  - 标记付费/免费内容
+  - 批量权限设置
+  - 内容预览设置（字数/图片数量限制）
+
+### 2.2 用户权限系统
+- [ ] **权限判断逻辑**
+  - 空间所有者：完全访问权限
+  - 已付费用户：完整内容访问权限
+  - 未付费用户：仅免费内容访问权限
+
+- [ ] **访问控制**
+  - 内容级别的权限检查
+  - 动态内容加载（付费内容需验证权限）
+  - 防爬虫/盗链保护
+
+### 2.3 支付系统集成
+- [ ] **支付流程设计**
+  - 复用现有 x402 支付协议
+  - 支持 Base/XLayer 网络
+  - MetaMask/OKX/Coinbase 钱包集成
+
+- [ ] **交易管理**
+  - 支付记录存储
+  - 交易状态追踪
+  - 退款机制（特殊情况）
+
+### 2.4 内容展示优化
+- [ ] **付费内容标识**
+  - 锁图标/付费标签
+  - 模糊预览效果
+  - 解锁提示信息
+
+- [ ] **免费内容预览**
+  - 精选免费文章展示
+  - 空间简介/创作者信息
+  - 付费内容数量/价值展示
+
+## 3. 数据库设计
+
+### 3.1 空间表扩展 (spaces)
+```sql
+ALTER TABLE spaces ADD COLUMN:
+- payment_type ENUM('free', 'paid', 'hybrid') DEFAULT 'free'
+- unlock_price DECIMAL(10,6) DEFAULT NULL  -- USDT价格
+- unlock_price_currency VARCHAR(10) DEFAULT 'USDT'
+- total_revenue DECIMAL(15,6) DEFAULT 0
+- subscriber_count INT DEFAULT 0
+- payment_enabled BOOLEAN DEFAULT false
+```
+
+### 3.2 内容权限表 (content_permissions)
+```sql
+CREATE TABLE content_permissions (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  space_id BIGINT NOT NULL,
+  article_id BIGINT NOT NULL,
+  is_paid_content BOOLEAN DEFAULT false,
+  preview_length INT DEFAULT NULL,  -- 免费预览字数
+  created_at TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+
+  FOREIGN KEY (space_id) REFERENCES spaces(id),
+  FOREIGN KEY (article_id) REFERENCES articles(id),
+  UNIQUE KEY unique_space_article (space_id, article_id)
+);
+```
+
+### 3.3 空间购买记录表 (space_purchases)
+```sql
+CREATE TABLE space_purchases (
+  id BIGINT PRIMARY KEY AUTO_INCREMENT,
+  space_id BIGINT NOT NULL,
+  user_id BIGINT NOT NULL,
+  purchase_price DECIMAL(10,6) NOT NULL,
+  purchase_currency VARCHAR(10) NOT NULL,
+  transaction_hash VARCHAR(255),
+  payment_network VARCHAR(50),
+  wallet_address VARCHAR(255),
+  purchase_date TIMESTAMP DEFAULT CURRENT_TIMESTAMP,
+  status ENUM('pending', 'completed', 'failed') DEFAULT 'pending',
+
+  FOREIGN KEY (space_id) REFERENCES spaces(id),
+  FOREIGN KEY (user_id) REFERENCES users(id),
+  UNIQUE KEY unique_user_space (user_id, space_id)
+);
+```
+
+## 4. API 接口设计
+
+### 4.1 空间付费设置
+```typescript
+// 设置空间付费模式
+POST /api/spaces/{spaceId}/payment-config
+{
+  paymentType: 'free' | 'paid' | 'hybrid',
+  unlockPrice?: number,
+  currency?: 'USDT' | 'USDC'
+}
+
+// 获取空间付费信息
+GET /api/spaces/{spaceId}/payment-info
+Response: {
+  paymentType: string,
+  unlockPrice: number,
+  currency: string,
+  userHasAccess: boolean,
+  freeContentCount: number,
+  paidContentCount: number
+}
+```
+
+### 4.2 内容权限管理
+```typescript
+// 设置文章付费状态
+PUT /api/spaces/{spaceId}/articles/{articleId}/payment
+{
+  isPaidContent: boolean,
+  previewLength?: number
+}
+
+// 批量设置内容权限
+PUT /api/spaces/{spaceId}/content-permissions
+{
+  articles: Array<{
+    articleId: number,
+    isPaidContent: boolean,
+    previewLength?: number
+  }>
+}
+```
+
+### 4.3 支付相关接口
+```typescript
+// 获取空间支付信息
+GET /api/spaces/{spaceId}/payment/info
+Response: {
+  price: number,
+  currency: string,
+  eip712Data: object,
+  paymentInfo: object
+}
+
+// 执行空间解锁支付
+POST /api/spaces/{spaceId}/payment/unlock
+Headers: {
+  'X-PAYMENT': string  // 支付授权header
+}
+```
+
+## 5. 前端页面设计
+
+### 5.1 空间设置页面
+- [ ] **付费模式切换开关**
+  - 免费/付费/混合模式选择
+  - 价格设置输入框
+  - 币种选择下拉框
+
+- [ ] **内容权限管理界面**
+  - 文章列表with付费状态切换
+  - 批量操作功能
+  - 预览长度设置
+
+- [ ] **收益统计面板**
+  - 总收益显示
+  - 订阅用户数
+  - 收益趋势图表
+
+### 5.2 空间访问页面
+- [ ] **付费状态展示**
+  - 未解锁状态：显示解锁按钮和价格
+  - 已解锁状态：显示完整内容
+  - 部分免费内容预览
+
+- [ ] **支付流程UI**
+  - 复用现有PayConfirmModal组件
+  - 空间特定的支付确认界面
+  - 支付成功后的内容解锁动画
+
+### 5.3 用户购买记录
+- [ ] **我的购买页面**
+  - 已购买空间列表
+  - 购买时间和价格信息
+  - 快速访问已购买空间
+
+## 6. 实现优先级
+
+### Phase 1: 核心付费功能 (2-3周)
+1. 数据库设计和迁移
+2. 基础API接口开发
+3. 空间付费设置功能
+4. 简单的支付流程集成
+
+### Phase 2: 权限系统完善 (1-2周)
+1. 内容权限管理系统
+2. 前端权限判断和内容过滤
+3. 付费内容预览功能
+
+### Phase 3: 用户体验优化 (1-2周)
+1. 支付流程UI优化
+2. 空间展示页面优化
+3. 用户购买记录管理
+4. 收益统计功能
+
+### Phase 4: 高级功能 (可选)
+1. 动态定价策略
+2. 促销和折扣功能
+3. 订阅统计和分析
+4. 创作者收益提现
+
+## 7. 技术注意事项
+
+### 7.1 安全考虑
+- **防止内容泄露**：付费内容在未授权状态下不应被传输到前端
+- **支付验证**：严格验证区块链交易的有效性
+- **防刷单保护**：同一用户不能重复购买同一空间
+
+### 7.2 性能优化
+- **内容懒加载**：根据用户权限动态加载内容
+- **缓存策略**：用户权限信息适当缓存，减少数据库查询
+- **CDN保护**：付费内容需要特殊的CDN访问控制
+
+### 7.3 兼容性
+- **现有功能保持**：确保免费空间功能不受影响
+- **渐进式升级**：现有空间默认为免费模式
+- **API向后兼容**：新增字段使用可选参数
+
+## 8. 成功指标
+
+### 8.1 产品指标
+- 付费空间创建数量
+- 空间平均解锁率
+- 单个空间平均收益
+- 用户复购率
+
+### 8.2 技术指标
+- 支付成功率 > 95%
+- 页面加载时间 < 2s
+- API响应时间 < 500ms
+- 零安全事件
+
+---
+
+**文档版本**: v1.0
+**创建时间**: 2025-01-22
+**负责团队**: Copus开发团队
\ No newline at end of file
diff --git a/X402_FEASIBILITY_ANALYSIS.md b/X402_FEASIBILITY_ANALYSIS.md
new file mode 100644
index 0000000..f6b664e
--- /dev/null
+++ b/X402_FEASIBILITY_ANALYSIS.md
@@ -0,0 +1,278 @@
+# x402-rs Integration Feasibility Analysis
+
+**Date:** January 1, 2026
+**Analyst:** Claude Code
+**Project:** Copus Internet Treasure Map
+**Subject:** x402-rs Payment System Integration
+
+## Executive Summary
+
+This document analyzes the technical feasibility of integrating the x402-rs Rust-based payment facilitator system into the Copus platform. After comprehensive analysis, **x402-rs integration is technically feasible and offers significant advantages** over the current manual x402 implementation.
+
+### Key Findings
+
+- ✅ **High Compatibility**: x402-rs maintains full compatibility with existing ERC-3009 payment flows
+- ✅ **Enhanced Reliability**: Production-grade facilitator service with OpenTelemetry monitoring
+- ✅ **Operational Benefits**: Simplified backend architecture and improved payment verification
+- ⚠️ **Implementation Effort**: Medium complexity requiring backend service setup and API adjustments
+- ⚠️ **Resource Requirements**: Additional Rust service deployment and maintenance
+
+## Current vs Proposed Architecture
+
+### Current Implementation (Custom x402)
+
+```mermaid
+graph TD
+    A[React Frontend] --> B[TypeScript x402Utils]
+    B --> C[Manual EIP-712 Signing]
+    C --> D[Custom Payment Header Creation]
+    D --> E[Node.js Backend API]
+    E --> F[Manual Payment Verification]
+    F --> G[ERC-3009 Contract Execution]
+```
+
+**Current Tech Stack:**
+- Frontend: Custom TypeScript x402Utils.ts (780 lines)
+- Backend: Node.js with manual payment verification
+- Networks: Base (mainnet/testnet), X Layer
+- Wallets: MetaMask, OKX with custom signing logic
+
+### Proposed Implementation (x402-rs)
+
+```mermaid
+graph TD
+    A[React Frontend] --> B[TypeScript x402Utils]
+    B --> C[EIP-712 Signing]
+    C --> D[Standard x402 Payment Headers]
+    D --> E[x402-rs Facilitator Service]
+    E --> F[Automated Payment Verification]
+    E --> G[Automated Settlement & Monitoring]
+    G --> H[Node.js Backend API]
+    H --> I[Content Unlock Logic]
+```
+
+**Proposed Tech Stack:**
+- Frontend: Existing TypeScript utils (minimal changes)
+- Facilitator: x402-rs Rust service (8080 port)
+- Backend: Node.js API (simplified payment logic)
+- Monitoring: OpenTelemetry with structured tracing
+
+## Technical Analysis
+
+### 1. Architecture Compatibility Assessment
+
+#### ✅ Frontend Compatibility
+- **Current Implementation**: Custom EIP-712 signing with TypeScript
+- **x402-rs Compatibility**: 100% compatible - uses standard x402 protocol
+- **Required Changes**: Minimal - update API endpoints and payment header format
+- **Risk Level**: Low
+
+```typescript
+// Current: Custom payment header
+const paymentHeader = createX402PaymentHeader(signedAuth, network, asset);
+
+// With x402-rs: Standard x402 protocol (same interface)
+const paymentHeader = createX402PaymentHeader(signedAuth, network, asset);
+// Internal structure changes to match x402-rs format, but API remains the same
+```
+
+#### ✅ Payment Flow Compatibility
+- **Current**: ERC-3009 TransferWithAuthorization → Custom verification → Manual settlement
+- **x402-rs**: ERC-3009 TransferWithAuthorization → Facilitator verification → Automated settlement
+- **Benefits**: Same user experience, improved backend reliability
+
+#### ✅ Multi-Network Support
+- **Current Networks**: Base mainnet/testnet, X Layer
+- **x402-rs Networks**: Base, Solana, Polygon, Avalanche, Sei + extensible
+- **Assessment**: x402-rs supports current networks plus additional options
+
+### 2. Implementation Complexity Analysis
+
+#### Backend Integration (Medium Complexity)
+
+**Required Changes:**
+1. **Deploy x402-rs Facilitator Service**
+   ```bash
+   # Docker deployment
+   docker run --env-file .env -p 8080:8080 ukstv/x402-facilitator
+   ```
+
+2. **Update Payment Verification Logic**
+   ```javascript
+   // Current: Manual verification in Node.js
+   async function verifyPayment(paymentHeader, requirements) {
+     // 100+ lines of manual verification logic
+   }
+
+   // With x402-rs: Delegate to facilitator
+   async function verifyPayment(paymentHeader, requirements) {
+     const response = await fetch('http://facilitator:8080/verify', {
+       method: 'POST',
+       body: JSON.stringify({ paymentPayload, paymentRequirements })
+     });
+     return response.json();
+   }
+   ```
+
+3. **API Endpoint Updates**
+   - Content unlock endpoints: Return 402 Payment Required with x402-rs format
+   - Payment verification: Use facilitator service instead of manual verification
+   - Error handling: Leverage x402-rs structured error responses
+
+#### Frontend Integration (Low Complexity)
+
+**Required Changes:**
+1. **Update Payment Header Format** (20-30 lines of code)
+2. **Adjust 402 Response Handling** (minor API response format changes)
+3. **No Wallet Integration Changes** (existing MetaMask/OKX flows remain)
+
+#### Infrastructure Setup (Medium Complexity)
+
+**New Components:**
+- x402-rs Facilitator service (Rust binary)
+- Environment configuration (RPC URLs, private keys)
+- Optional: OpenTelemetry monitoring stack
+
+### 3. Performance & Reliability Impact
+
+#### ✅ Improved Payment Verification
+- **Current**: Custom JavaScript verification logic
+- **x402-rs**: Production-tested Rust verification with comprehensive validation
+- **Benefit**: Higher accuracy, better error handling, reduced verification bugs
+
+#### ✅ Enhanced Monitoring
+- **Current**: Basic logging in Node.js backend
+- **x402-rs**: OpenTelemetry integration with structured traces and metrics
+- **Benefit**: Better payment flow observability, faster debugging
+
+#### ✅ Reduced Backend Complexity
+- **Current**: 780+ lines of custom payment logic
+- **x402-rs**: Delegates complex verification to specialized service
+- **Benefit**: Simplified backend codebase, easier maintenance
+
+### 4. Network & Token Support
+
+| Feature | Current Implementation | x402-rs | Compatibility |
+|---------|----------------------|---------|---------------|
+| **Networks** | Base, X Layer | Base, Solana, Polygon, Avalanche, Sei | ✅ Full support + additional options |
+| **Tokens** | USDC, USDT (custom config) | USDC + extensible token support | ✅ Compatible with fluent builder API |
+| **ERC-3009** | Manual implementation | Production-grade implementation | ✅ Same end-user flow |
+| **Multi-chain** | Custom network switching | Built-in multi-chain support | ✅ Improved UX potential |
+
+### 5. Security Assessment
+
+#### ✅ Enhanced Security Posture
+- **Payment Verification**: Production-tested Rust implementation vs custom JavaScript
+- **Signature Validation**: Comprehensive EIP-712 validation with better error messages
+- **Network Isolation**: Facilitator service can run in isolated environment
+- **Audit Trail**: Structured logging and tracing for payment flows
+
+#### ✅ Maintained Security Model
+- **Private Keys**: Same security model - never exposed to facilitator service
+- **User Authorization**: Identical EIP-712 signing flow for end users
+- **Gas Fee Model**: Same gasless experience for users
+
+### 6. Resource Requirements
+
+#### Infrastructure Costs
+- **Additional Service**: x402-rs facilitator (lightweight Rust binary)
+- **Resource Usage**: ~50MB memory, minimal CPU for payment verification
+- **Scaling**: Stateless service, horizontally scalable
+
+#### Development Effort Estimation
+- **Backend Integration**: 2-3 weeks (API updates, facilitator integration, testing)
+- **Frontend Updates**: 1 week (payment header format, response handling)
+- **Infrastructure Setup**: 1 week (Docker deployment, monitoring configuration)
+- **Testing & Migration**: 1-2 weeks (end-to-end testing, production migration)
+- **Total Estimated Effort**: 5-7 weeks
+
+#### Maintenance Considerations
+- **Reduced Complexity**: Simplified backend payment logic
+- **Standard Protocol**: Following x402 standard instead of custom implementation
+- **Community Support**: Active x402-rs development and community
+- **Monitoring**: Better observability for production issues
+
+## Risk Assessment
+
+### Low Risk Areas ✅
+- **Frontend Compatibility**: Minimal changes required to existing React/TypeScript code
+- **User Experience**: Same payment flow, same wallet integration
+- **Security**: Maintained security model with potential improvements
+- **Performance**: Same or better payment processing speed
+
+### Medium Risk Areas ⚠️
+- **Service Dependencies**: Additional Rust service in infrastructure
+- **Migration Complexity**: Backend API changes require careful testing
+- **Learning Curve**: Team needs familiarity with x402-rs configuration
+
+### Mitigation Strategies
+1. **Gradual Migration**: Deploy facilitator service alongside existing system for A/B testing
+2. **Rollback Plan**: Keep current implementation as fallback during migration period
+3. **Comprehensive Testing**: End-to-end payment flow testing on testnet
+4. **Documentation**: Detailed deployment and configuration documentation
+
+## Implementation Roadmap
+
+### Phase 1: Setup & Testing (Weeks 1-2)
+- Deploy x402-rs facilitator service in development environment
+- Configure environment variables (RPC URLs, private keys)
+- Test facilitator `/verify` and `/settle` endpoints with Copus payment flows
+- Update development API to use facilitator for payment verification
+
+### Phase 2: Backend Integration (Weeks 3-4)
+- Modify content unlock endpoints to return x402-rs compatible 402 responses
+- Update payment verification logic to use facilitator service
+- Implement error handling for facilitator communication
+- Add OpenTelemetry monitoring integration
+
+### Phase 3: Frontend Updates (Week 5)
+- Update payment header format for x402-rs compatibility
+- Adjust 402 response parsing for new format
+- Test wallet integration (MetaMask, OKX) with new flow
+- Verify multi-network support (Base, X Layer)
+
+### Phase 4: Production Deployment (Weeks 6-7)
+- Deploy facilitator service to production environment
+- Configure production RPC endpoints and monitoring
+- Gradual rollout with existing system as fallback
+- Monitor payment success rates and performance metrics
+
+## Recommendations
+
+### ✅ **Recommend Integration**
+
+**Primary Benefits:**
+1. **Enhanced Reliability**: Production-grade Rust implementation vs custom JavaScript
+2. **Simplified Maintenance**: Delegates complex payment verification to specialized service
+3. **Better Monitoring**: OpenTelemetry integration for payment flow observability
+4. **Future-Proofing**: Alignment with x402 protocol standard and ecosystem
+5. **Additional Network Support**: Built-in support for Solana, Polygon, Avalanche
+
+**Strategic Value:**
+- Positions Copus as early adopter of x402 protocol standard
+- Reduces technical debt from custom payment implementation
+- Enables future expansion to additional blockchain networks
+- Improves operational excellence with better monitoring and error handling
+
+### Implementation Priority: **Medium-High**
+
+**Immediate Action Items:**
+1. Deploy x402-rs facilitator in development environment for evaluation
+2. Create proof-of-concept integration with one content type
+3. Performance testing comparing current vs x402-rs payment flows
+4. Detailed implementation planning with development team
+
+### Alternative Considerations
+
+If x402-rs integration is not feasible in the short term:
+1. **Incremental Improvement**: Extract current payment logic into separate TypeScript service
+2. **Enhanced Monitoring**: Add structured logging to existing payment flows
+3. **Standard Compliance**: Gradually align custom implementation with x402 protocol standard
+
+## Conclusion
+
+The x402-rs integration represents a strategic upgrade from custom x402 implementation to a production-grade, standard-compliant payment system. The integration is technically feasible with manageable implementation complexity and offers significant operational benefits.
+
+The alignment with x402 protocol standards, enhanced reliability, and improved monitoring capabilities make this integration a valuable investment for Copus platform's payment infrastructure.
+
+**Final Assessment: ✅ Technically Feasible with Strong Strategic Benefits**
\ No newline at end of file
diff --git a/claude-autonomous-tasks-summary.json b/claude-autonomous-tasks-summary.json
new file mode 100644
index 0000000..e286e75
--- /dev/null
+++ b/claude-autonomous-tasks-summary.json
@@ -0,0 +1,19 @@
+{
+  "last_update": "2026-02-25T12:22:50.842891",
+  "total_tasks": 2,
+  "active_tasks": 0,
+  "recent_completions": [
+    {
+      "id": "database_schema_discovery_1771672027",
+      "tool": "schema_inspector",
+      "status": "completed",
+      "completion_time": "2026-02-21T19:07:08.921267"
+    },
+    {
+      "id": "database_query_optimization_1771672027",
+      "tool": "query_optimizer",
+      "status": "completed",
+      "completion_time": "2026-02-21T19:07:12.522191"
+    }
+  ]
+}
\ No newline at end of file
diff --git a/src/App.tsx b/src/App.tsx
index b90c6db..e2d3d02 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,4 +1,4 @@
-import React, { lazy, Suspense } from "react";
+import React, { lazy, Suspense, startTransition } from "react";
 import { RouterProvider, createBrowserRouter } from "react-router-dom";
 import { QueryClientProvider } from "@tanstack/react-query";
 import { HelmetProvider } from "react-helmet-async";
@@ -11,6 +11,9 @@ import { ToastProvider } from "./components/ui/toast";
 import { GlobalImagePreview } from "./components/ui/GlobalImagePreview";
 import { AuthGuard } from "./components/guards/AuthGuard";
 import { CopusLoading } from "./components/ui/copus-loading";
+import { PerformanceMonitor } from "./components/DevTools/PerformanceMonitor";
+import { resourcePreloader } from "./utils/resourcePreloader";
+import { cssOptimizer } from "./utils/cssOptimizer";
 
 // Eagerly loaded - critical path
 import { Discovery } from "./screens/Discovery/Discovery";
@@ -54,11 +57,56 @@ const SignUp = lazy(() => import("./routes/SignUp/screens/SignUp").then(m => ({
 const NotFoundPage = lazy(() => import("./components/pages/NotFoundPage").then(m => ({ default: m.NotFoundPage })));
 const OAuthRedirect = lazy(() => import("./components/OAuthRedirect"));
 
+// Error boundary to catch Suspense errors
+class SuspenseErrorBoundary extends React.Component<
+  { children: React.ReactNode },
+  { hasError: boolean; error?: Error }
+> {
+  constructor(props: { children: React.ReactNode }) {
+    super(props);
+    this.state = { hasError: false };
+  }
+
+  static getDerivedStateFromError(error: Error) {
+    console.error('🚨 Suspense Error Caught:', error);
+    return { hasError: true, error };
+  }
+
+  componentDidCatch(error: Error, errorInfo: any) {
+    console.error('🚨 Suspense Error Details:', { error, errorInfo });
+  }
+
+  render() {
+    if (this.state.hasError) {
+      return (
+        <div className="flex items-center justify-center min-h-screen">
+          <div className="text-center">
+            <h2 className="text-xl font-bold mb-4">Something went wrong</h2>
+            <p className="text-gray-600 mb-4">
+              Error: {this.state.error?.message || 'Unknown error'}
+            </p>
+            <button
+              onClick={() => this.setState({ hasError: false, error: undefined })}
+              className="px-4 py-2 bg-blue-500 text-white rounded hover:bg-blue-600"
+            >
+              Try Again
+            </button>
+          </div>
+        </div>
+      );
+    }
+
+    return this.props.children;
+  }
+}
+
 // Suspense wrapper for lazy components
 const LazyRoute = ({ children }: { children: React.ReactNode }) => (
-  <Suspense fallback={<CopusLoading />}>
-    {children}
-  </Suspense>
+  <SuspenseErrorBoundary>
+    <Suspense fallback={<CopusLoading />}>
+      {children}
+    </Suspense>
+  </SuspenseErrorBoundary>
 );
 
 const router = createBrowserRouter([
@@ -225,8 +273,11 @@ export const App = () => {
             <NotificationProvider>
               <ImagePreviewProvider>
                 <ToastProvider>
-                  <RouterProvider router={router} />
+                  <Suspense fallback={<CopusLoading />}>
+                    <RouterProvider router={router} />
+                  </Suspense>
                   <GlobalImagePreview />
+                  <PerformanceMonitor />
                 </ToastProvider>
               </ImagePreviewProvider>
             </NotificationProvider>
diff --git a/src/CreateSpaceModal/CreateSpaceModal.tsx b/src/CreateSpaceModal/CreateSpaceModal.tsx
new file mode 100644
index 0000000..88a98cf
--- /dev/null
+++ b/src/CreateSpaceModal/CreateSpaceModal.tsx
@@ -0,0 +1,305 @@
+import React, { useState } from 'react';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+import { Textarea } from '../ui/textarea';
+import { useToast } from '../ui/toast';
+import { SpacePaymentService } from '../../services/spacePaymentService';
+import { PaymentType, CurrencyType } from '../../types/space';
+
+interface CreateSpaceModalProps {
+  isOpen: boolean;
+  onClose: () => void;
+  onSuccess: (spaceId: number) => void;
+}
+
+export const CreateSpaceModal = ({ isOpen, onClose, onSuccess }: CreateSpaceModalProps): JSX.Element => {
+  const { showToast } = useToast();
+  const [loading, setLoading] = useState(false);
+
+  // Form state
+  const [formData, setFormData] = useState({
+    name: '',
+    description: '',
+    paymentType: 'free' as PaymentType,
+    unlockPrice: 0,
+    currency: 'USDT' as CurrencyType,
+  });
+
+  const [errors, setErrors] = useState<Record<string, string>>({});
+
+  // Reset form when modal opens/closes
+  React.useEffect(() => {
+    if (isOpen) {
+      setFormData({
+        name: '',
+        description: '',
+        paymentType: 'free',
+        unlockPrice: 0,
+        currency: 'USDT',
+      });
+      setErrors({});
+    }
+  }, [isOpen]);
+
+  // Form validation
+  const validateForm = (): boolean => {
+    const newErrors: Record<string, string> = {};
+
+    if (!formData.name.trim()) {
+      newErrors.name = 'Space name is required';
+    } else if (formData.name.length > 50) {
+      newErrors.name = 'Space name must be 50 characters or less';
+    }
+
+    if (!formData.description.trim()) {
+      newErrors.description = 'Space description is required';
+    } else if (formData.description.length > 200) {
+      newErrors.description = 'Description must be 200 characters or less';
+    }
+
+    if (formData.paymentType === 'paid' || formData.paymentType === 'hybrid') {
+      if (formData.unlockPrice <= 0) {
+        newErrors.unlockPrice = 'Price must be greater than 0';
+      }
+    }
+
+    setErrors(newErrors);
+    return Object.keys(newErrors).length === 0;
+  };
+
+  // Handle form submission
+  const handleSubmit = async (e: React.FormEvent) => {
+    e.preventDefault();
+
+    if (!validateForm()) {
+      return;
+    }
+
+    setLoading(true);
+
+    try {
+      // For demo purposes, we'll simulate creating a space
+      // In real implementation, this would call a space creation API
+      await new Promise(resolve => setTimeout(resolve, 1000));
+
+      // Mock space ID
+      const mockSpaceId = Math.floor(Math.random() * 1000) + 100;
+
+      // If payment is enabled, configure the payment settings
+      if (formData.paymentType !== 'free') {
+        await SpacePaymentService.setSpacePaymentConfig(mockSpaceId, {
+          paymentType: formData.paymentType,
+          unlockPrice: formData.unlockPrice,
+          currency: formData.currency,
+        });
+      }
+
+      showToast('Space created successfully!', 'success');
+      onSuccess(mockSpaceId);
+      onClose();
+
+    } catch (error) {
+      console.error('Failed to create space:', error);
+      showToast('Failed to create space, please try again', 'error');
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  // Handle input changes
+  const handleInputChange = (field: keyof typeof formData, value: string | number | PaymentType | CurrencyType) => {
+    setFormData(prev => ({ ...prev, [field]: value }));
+    // Clear error when user starts typing
+    if (errors[field]) {
+      setErrors(prev => ({ ...prev, [field]: '' }));
+    }
+  };
+
+  if (!isOpen) return <></>;
+
+  return (
+    <div className="fixed inset-0 bg-black/50 flex items-center justify-center z-50 p-4">
+      <div className="bg-white rounded-2xl max-w-2xl w-full max-h-[90vh] overflow-y-auto">
+        <form onSubmit={handleSubmit} className="p-6">
+          {/* Header */}
+          <div className="flex items-center justify-between mb-6">
+            <h2 className="text-2xl font-semibold text-off-black">Create New Space</h2>
+            <button
+              type="button"
+              onClick={onClose}
+              className="w-8 h-8 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
+              aria-label="Close modal"
+            >
+              <svg className="w-5 h-5 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+                <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+              </svg>
+            </button>
+          </div>
+
+          {/* Space Basic Info */}
+          <div className="space-y-6">
+            {/* Space Name */}
+            <div>
+              <label htmlFor="space-name" className="block text-sm font-medium text-gray-700 mb-2">
+                Space Name *
+              </label>
+              <Input
+                id="space-name"
+                type="text"
+                value={formData.name}
+                onChange={(e) => handleInputChange('name', e.target.value)}
+                placeholder="Enter space name..."
+                className={`w-full ${errors.name ? 'border-red-500' : ''}`}
+                maxLength={50}
+              />
+              {errors.name && (
+                <p className="mt-1 text-sm text-red-500">{errors.name}</p>
+              )}
+              <p className="mt-1 text-xs text-gray-500">{formData.name.length}/50 characters</p>
+            </div>
+
+            {/* Space Description */}
+            <div>
+              <label htmlFor="space-description" className="block text-sm font-medium text-gray-700 mb-2">
+                Description *
+              </label>
+              <Textarea
+                id="space-description"
+                value={formData.description}
+                onChange={(e) => handleInputChange('description', e.target.value)}
+                placeholder="Describe your space and what visitors can expect to find..."
+                className={`w-full h-24 resize-none ${errors.description ? 'border-red-500' : ''}`}
+                maxLength={200}
+              />
+              {errors.description && (
+                <p className="mt-1 text-sm text-red-500">{errors.description}</p>
+              )}
+              <p className="mt-1 text-xs text-gray-500">{formData.description.length}/200 characters</p>
+            </div>
+
+            {/* Payment Settings */}
+            <div className="border-t pt-6">
+              <h3 className="text-lg font-medium text-off-black mb-4">Payment Settings</h3>
+
+              {/* Payment Type */}
+              <div className="mb-4">
+                <label className="block text-sm font-medium text-gray-700 mb-3">
+                  Space Type
+                </label>
+                <div className="space-y-2">
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="paymentType"
+                      value="free"
+                      checked={formData.paymentType === 'free'}
+                      onChange={(e) => handleInputChange('paymentType', e.target.value as PaymentType)}
+                      className="w-4 h-4 text-red focus:ring-red border-gray-300"
+                    />
+                    <span className="ml-2 text-sm text-gray-700">
+                      <strong>Free Space</strong> - All content is accessible to everyone
+                    </span>
+                  </label>
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="paymentType"
+                      value="paid"
+                      checked={formData.paymentType === 'paid'}
+                      onChange={(e) => handleInputChange('paymentType', e.target.value as PaymentType)}
+                      className="w-4 h-4 text-red focus:ring-red border-gray-300"
+                    />
+                    <span className="ml-2 text-sm text-gray-700">
+                      <strong>Paid Space</strong> - Users pay once to unlock all content
+                    </span>
+                  </label>
+                  <label className="flex items-center">
+                    <input
+                      type="radio"
+                      name="paymentType"
+                      value="hybrid"
+                      checked={formData.paymentType === 'hybrid'}
+                      onChange={(e) => handleInputChange('paymentType', e.target.value as PaymentType)}
+                      className="w-4 h-4 text-red focus:ring-red border-gray-300"
+                    />
+                    <span className="ml-2 text-sm text-gray-700">
+                      <strong>Hybrid Space</strong> - Mix of free preview and paid content
+                    </span>
+                  </label>
+                </div>
+              </div>
+
+              {/* Price Configuration - Only show for paid/hybrid */}
+              {(formData.paymentType === 'paid' || formData.paymentType === 'hybrid') && (
+                <div className="bg-gray-50 p-4 rounded-lg">
+                  <h4 className="text-sm font-medium text-gray-700 mb-3">Price Configuration</h4>
+                  <div className="flex items-center gap-4">
+                    <div className="flex-1">
+                      <Input
+                        type="number"
+                        value={formData.unlockPrice}
+                        onChange={(e) => handleInputChange('unlockPrice', Number(e.target.value))}
+                        placeholder="0.00"
+                        min="0"
+                        step="0.01"
+                        className={`w-full ${errors.unlockPrice ? 'border-red-500' : ''}`}
+                      />
+                      {errors.unlockPrice && (
+                        <p className="mt-1 text-sm text-red-500">{errors.unlockPrice}</p>
+                      )}
+                    </div>
+                    <div className="flex-shrink-0">
+                      <select
+                        value={formData.currency}
+                        onChange={(e) => handleInputChange('currency', e.target.value as CurrencyType)}
+                        className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm focus:ring-2 focus:ring-red focus:border-red"
+                      >
+                        <option value="USDT">USDT</option>
+                        <option value="USDC">USDC</option>
+                      </select>
+                    </div>
+                  </div>
+                  <p className="mt-2 text-xs text-gray-600">
+                    Users will pay {SpacePaymentService.formatPrice(formData.unlockPrice || 0, formData.currency)} to unlock this space
+                  </p>
+                </div>
+              )}
+            </div>
+
+            {/* Info Box */}
+            <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+              <h4 className="text-sm font-medium text-blue-900 mb-2">✨ Space Features</h4>
+              <ul className="text-sm text-blue-700 space-y-1">
+                <li>• Organize your curated content collections</li>
+                <li>• Share your expertise with followers</li>
+                <li>• Monetize your content curation work</li>
+                <li>• Build your personal brand and audience</li>
+              </ul>
+            </div>
+          </div>
+
+          {/* Actions */}
+          <div className="flex items-center justify-end gap-4 mt-8 pt-6 border-t">
+            <Button
+              type="button"
+              variant="outline"
+              onClick={onClose}
+              disabled={loading}
+            >
+              Cancel
+            </Button>
+            <Button
+              type="submit"
+              disabled={loading}
+              className="bg-red hover:bg-red/90 text-white"
+            >
+              {loading ? 'Creating...' : 'Create Space'}
+            </Button>
+          </div>
+        </form>
+      </div>
+    </div>
+  );
+};
+
+export default CreateSpaceModal;
\ No newline at end of file
diff --git a/src/components/ArticleCard/ArticleCard.tsx b/src/components/ArticleCard/ArticleCard.tsx
index 4b427f2..d93ab34 100644
--- a/src/components/ArticleCard/ArticleCard.tsx
+++ b/src/components/ArticleCard/ArticleCard.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useCallback } from "react";
+import React, { useState, useCallback, startTransition } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import { Avatar, AvatarImage } from "../ui/avatar";
 import { Badge } from "../ui/badge";
@@ -139,7 +139,7 @@ const ArticleCardComponent: React.FC<ArticleCardProps> = ({
       onComment(article.uuid || article.id, article.uuid);
     } else {
       // Fallback: navigate directly to the article with comment parameter
-      navigate(`/work/${article.uuid || article.id}?comments=open`);
+      startTransition(() => { navigate(`/work/${article.uuid || article.id}?comments=open`); });
     }
   }, [onComment, article.uuid, article.id, navigate]);
 
diff --git a/src/components/CommentSection/CommentItem.tsx b/src/components/CommentSection/CommentItem.tsx
index 18a2c0c..13d005f 100644
--- a/src/components/CommentSection/CommentItem.tsx
+++ b/src/components/CommentSection/CommentItem.tsx
@@ -1,6 +1,6 @@
 // Individual comment item component
 
-import React, { useState, useEffect, useRef } from 'react';
+import React, { useState, useEffect, useRef, startTransition } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { Comment } from '../../types/comment';
 import { useToggleCommentLike, useDeleteComment, useUpdateComment, useLoadCommentReplies } from '../../hooks/queries/useComments';
@@ -257,9 +257,9 @@ const ReplyItemComponent: React.FC<{
   // Handle user click to navigate to profile page
   const handleUserClick = (comment: Comment) => {
     if (comment.authorNamespace) {
-      navigate(`/u/${comment.authorNamespace}`);
+      startTransition(() => navigate(`/u/${comment.authorNamespace}`));
     } else if (comment.authorId) {
-      navigate(`/user/${comment.authorId}/treasury`);
+      startTransition(() => navigate(`/user/${comment.authorId}/treasury`));
     }
   };
 
@@ -780,9 +780,9 @@ export const CommentItem: React.FC<CommentItemProps> = ({
   // Handle user click to navigate to profile page
   const handleUserClick = (comment: Comment) => {
     if (comment.authorNamespace) {
-      navigate(`/u/${comment.authorNamespace}`);
+      startTransition(() => navigate(`/u/${comment.authorNamespace}`));
     } else if (comment.authorId) {
-      navigate(`/user/${comment.authorId}/treasury`);
+      startTransition(() => navigate(`/user/${comment.authorId}/treasury`));
     }
   };
 
diff --git a/src/components/DevTools/PerformanceMonitor.tsx b/src/components/DevTools/PerformanceMonitor.tsx
new file mode 100644
index 0000000..328afdd
--- /dev/null
+++ b/src/components/DevTools/PerformanceMonitor.tsx
@@ -0,0 +1,216 @@
+/**
+ * 🔍 SEARCH: performance-monitor-component
+ * Development performance monitoring overlay - only shows in development mode
+ */
+import React, { useState, useEffect } from 'react';
+import { articleCache, imageCache, userCache } from '../../utils/cacheManager';
+import { resourcePreloader } from '../../utils/resourcePreloader';
+import { cssOptimizer } from '../../utils/cssOptimizer';
+
+interface PerformanceMetrics {
+  pageLoadTime: number;
+  domContentLoaded: number;
+  firstPaint: number;
+  firstContentfulPaint: number;
+  largestContentfulPaint: number;
+  totalBlockingTime: number;
+}
+
+interface CacheStats {
+  articles: number;
+  images: number;
+  users: number;
+}
+
+export const PerformanceMonitor: React.FC = () => {
+  const [isVisible, setIsVisible] = useState(false);
+  const [metrics, setMetrics] = useState<PerformanceMetrics | null>(null);
+  const [cacheStats, setCacheStats] = useState<CacheStats>({ articles: 0, images: 0, users: 0 });
+  const [apiRequests, setApiRequests] = useState<number>(0);
+
+  // Show in development and test environments
+  if (process.env.NODE_ENV === 'production') {
+    return null;
+  }
+
+  useEffect(() => {
+    // Collect performance metrics
+    const collectMetrics = () => {
+      if ('performance' in window) {
+        const navigation = performance.getEntriesByType('navigation')[0] as PerformanceNavigationTiming;
+        const paint = performance.getEntriesByType('paint');
+
+        const paintMetrics = paint.reduce((acc, entry) => {
+          if (entry.name === 'first-paint') acc.firstPaint = entry.startTime;
+          if (entry.name === 'first-contentful-paint') acc.firstContentfulPaint = entry.startTime;
+          return acc;
+        }, { firstPaint: 0, firstContentfulPaint: 0 });
+
+        setMetrics({
+          pageLoadTime: navigation.loadEventEnd - navigation.loadEventStart,
+          domContentLoaded: navigation.domContentLoadedEventEnd - navigation.domContentLoadedEventStart,
+          firstPaint: paintMetrics.firstPaint,
+          firstContentfulPaint: paintMetrics.firstContentfulPaint,
+          largestContentfulPaint: 0, // Would need observer for LCP
+          totalBlockingTime: 0, // Would need observer for TBT
+        });
+      }
+    };
+
+    // Update cache stats
+    const updateCacheStats = () => {
+      setCacheStats({
+        articles: articleCache.stats().size,
+        images: imageCache.stats().size,
+        users: userCache.stats().size,
+      });
+    };
+
+    // Count API requests (simple counter)
+    let requestCount = 0;
+    const originalFetch = window.fetch;
+    window.fetch = function(...args) {
+      requestCount++;
+      setApiRequests(requestCount);
+      return originalFetch.apply(this, args);
+    };
+
+    collectMetrics();
+    updateCacheStats();
+
+    // Update cache stats every 5 seconds
+    const interval = setInterval(updateCacheStats, 5000);
+
+    return () => {
+      clearInterval(interval);
+      window.fetch = originalFetch;
+    };
+  }, []);
+
+  // Toggle visibility with Ctrl/Cmd + Shift + P
+  useEffect(() => {
+    const handleKeyPress = (e: KeyboardEvent) => {
+      if ((e.ctrlKey || e.metaKey) && e.shiftKey && e.key === 'P') {
+        e.preventDefault();
+        setIsVisible(!isVisible);
+      }
+    };
+
+    window.addEventListener('keydown', handleKeyPress);
+    return () => window.removeEventListener('keydown', handleKeyPress);
+  }, [isVisible]);
+
+  if (!isVisible) {
+    return (
+      <div className="fixed bottom-4 right-4 z-50">
+        <button
+          onClick={() => setIsVisible(true)}
+          className="bg-gray-800 text-white px-3 py-2 rounded text-xs hover:bg-gray-700"
+        >
+          📊 Perf
+        </button>
+      </div>
+    );
+  }
+
+  return (
+    <div className="fixed bottom-4 right-4 w-80 bg-gray-900 text-white rounded-lg shadow-xl z-50 p-4 text-xs font-mono">
+      <div className="flex justify-between items-center mb-3">
+        <h3 className="text-sm font-bold text-green-400">⚡ Performance Monitor</h3>
+        <button
+          onClick={() => setIsVisible(false)}
+          className="text-gray-400 hover:text-white"
+        >
+          ✕
+        </button>
+      </div>
+
+      {/* Performance Metrics */}
+      <div className="mb-4">
+        <h4 className="text-blue-400 mb-2">📈 Core Metrics</h4>
+        {metrics && (
+          <div className="space-y-1">
+            <div className="flex justify-between">
+              <span>Page Load:</span>
+              <span className={metrics.pageLoadTime < 1000 ? 'text-green-400' : 'text-yellow-400'}>
+                {metrics.pageLoadTime.toFixed(0)}ms
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>DOM Ready:</span>
+              <span className={metrics.domContentLoaded < 500 ? 'text-green-400' : 'text-yellow-400'}>
+                {metrics.domContentLoaded.toFixed(0)}ms
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>First Paint:</span>
+              <span className={metrics.firstPaint < 1500 ? 'text-green-400' : 'text-yellow-400'}>
+                {metrics.firstPaint.toFixed(0)}ms
+              </span>
+            </div>
+            <div className="flex justify-between">
+              <span>FCP:</span>
+              <span className={metrics.firstContentfulPaint < 1800 ? 'text-green-400' : 'text-yellow-400'}>
+                {metrics.firstContentfulPaint.toFixed(0)}ms
+              </span>
+            </div>
+          </div>
+        )}
+      </div>
+
+      {/* Cache Stats */}
+      <div className="mb-4">
+        <h4 className="text-purple-400 mb-2">💾 Cache Status</h4>
+        <div className="space-y-1">
+          <div className="flex justify-between">
+            <span>Articles:</span>
+            <span className="text-green-400">{cacheStats.articles} cached</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Images:</span>
+            <span className="text-green-400">{cacheStats.images} cached</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Users:</span>
+            <span className="text-green-400">{cacheStats.users} cached</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Network Stats */}
+      <div className="mb-4">
+        <h4 className="text-orange-400 mb-2">🌐 Network</h4>
+        <div className="space-y-1">
+          <div className="flex justify-between">
+            <span>API Requests:</span>
+            <span className="text-yellow-400">{apiRequests}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Preloaded:</span>
+            <span className="text-green-400">{resourcePreloader.getStats().total}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Optimization Stats */}
+      <div className="mb-4">
+        <h4 className="text-cyan-400 mb-2">⚡ Optimizations</h4>
+        <div className="space-y-1">
+          <div className="flex justify-between">
+            <span>CSS Rules:</span>
+            <span className="text-green-400">{cssOptimizer.getStats().loaded}</span>
+          </div>
+          <div className="flex justify-between">
+            <span>Resources:</span>
+            <span className="text-blue-400">{resourcePreloader.getStats().loaded}</span>
+          </div>
+        </div>
+      </div>
+
+      {/* Tips */}
+      <div className="text-gray-400 text-xs mt-3 pt-2 border-t border-gray-700">
+        💡 Press Cmd/Ctrl+Shift+P to toggle
+      </div>
+    </div>
+  );
+};
\ No newline at end of file
diff --git a/src/components/SpacePaymentConfig/SpacePaymentConfig.tsx b/src/components/SpacePaymentConfig/SpacePaymentConfig.tsx
new file mode 100644
index 0000000..98ab413
--- /dev/null
+++ b/src/components/SpacePaymentConfig/SpacePaymentConfig.tsx
@@ -0,0 +1,259 @@
+import React, { useState, useEffect } from 'react';
+import { SpacePaymentService } from '../../services/spacePaymentService';
+import { PaymentType, CurrencyType } from '../../types/space';
+import { useToast } from '../ui/toast';
+import { CustomSwitch } from '../ui/custom-switch';
+import { Button } from '../ui/button';
+import { Input } from '../ui/input';
+
+interface SpacePaymentConfigProps {
+  spaceId: number;
+  onClose: () => void;
+}
+
+export const SpacePaymentConfig = ({ spaceId, onClose }: SpacePaymentConfigProps): JSX.Element => {
+  const { showToast } = useToast();
+  const [loading, setLoading] = useState(true);
+  const [saving, setSaving] = useState(false);
+
+  // Payment configuration state
+  const [paymentType, setPaymentType] = useState<PaymentType>('free');
+  const [unlockPrice, setUnlockPrice] = useState<number>(0);
+  const [currency, setCurrency] = useState<CurrencyType>('USDT');
+  const [paymentEnabled, setPaymentEnabled] = useState(false);
+
+  // Space info state
+  const [spaceInfo, setSpaceInfo] = useState<{
+    totalRevenue: number;
+    subscriberCount: number;
+    freeContentCount: number;
+    paidContentCount: number;
+  }>({
+    totalRevenue: 0,
+    subscriberCount: 0,
+    freeContentCount: 0,
+    paidContentCount: 0
+  });
+
+  // Load current payment configuration
+  useEffect(() => {
+    const loadPaymentInfo = async () => {
+      try {
+        setLoading(true);
+        const paymentInfo = await SpacePaymentService.getSpacePaymentInfo(spaceId);
+
+        setPaymentType(paymentInfo.paymentType);
+        setUnlockPrice(paymentInfo.unlockPrice || 0);
+        setCurrency(paymentInfo.currency);
+        setPaymentEnabled(paymentInfo.paymentType !== 'free');
+
+        setSpaceInfo({
+          totalRevenue: paymentInfo.totalRevenue || 0,
+          subscriberCount: paymentInfo.subscriberCount || 0,
+          freeContentCount: paymentInfo.freeContentCount,
+          paidContentCount: paymentInfo.paidContentCount
+        });
+
+      } catch (error) {
+        console.error('Failed to load payment info:', error);
+        showToast('Failed to load payment settings', 'error');
+      } finally {
+        setLoading(false);
+      }
+    };
+
+    loadPaymentInfo();
+  }, [spaceId, showToast]);
+
+  // Handle payment type change
+  const handlePaymentToggle = async (enabled: boolean) => {
+    try {
+      setSaving(true);
+
+      const newPaymentType: PaymentType = enabled ? 'paid' : 'free';
+
+      await SpacePaymentService.setSpacePaymentConfig(spaceId, {
+        paymentType: newPaymentType,
+        unlockPrice: enabled ? unlockPrice : undefined,
+        currency: enabled ? currency : undefined
+      });
+
+      setPaymentEnabled(enabled);
+      setPaymentType(newPaymentType);
+
+      showToast(
+        enabled ? 'Payment enabled for this space' : 'Payment disabled for this space',
+        'success'
+      );
+
+    } catch (error) {
+      console.error('Failed to toggle payment:', error);
+      showToast('Failed to update payment settings', 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  // Handle price and currency update
+  const handlePriceUpdate = async () => {
+    if (!paymentEnabled) return;
+
+    try {
+      setSaving(true);
+
+      await SpacePaymentService.setSpacePaymentConfig(spaceId, {
+        paymentType: 'paid',
+        unlockPrice,
+        currency
+      });
+
+      showToast('Price updated successfully', 'success');
+
+    } catch (error) {
+      console.error('Failed to update price:', error);
+      showToast('Failed to update price', 'error');
+    } finally {
+      setSaving(false);
+    }
+  };
+
+  if (loading) {
+    return (
+      <div className="flex flex-col items-center justify-center py-8">
+        <div className="w-8 h-8 border-4 border-red border-t-transparent rounded-full animate-spin mb-4"></div>
+        <p className="text-gray-600">Loading payment settings...</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="flex flex-col gap-6 p-6">
+      <div className="flex items-center justify-between">
+        <h2 className="text-xl font-semibold text-off-black">Space Payment Settings</h2>
+        <button
+          onClick={onClose}
+          className="w-6 h-6 flex items-center justify-center rounded-full hover:bg-gray-100 transition-colors"
+          aria-label="Close payment settings"
+        >
+          <svg className="w-4 h-4 text-gray-400" fill="none" stroke="currentColor" viewBox="0 0 24 24">
+            <path strokeLinecap="round" strokeLinejoin="round" strokeWidth={2} d="M6 18L18 6M6 6l12 12" />
+          </svg>
+        </button>
+      </div>
+
+      {/* Payment Enable/Disable Toggle */}
+      <div className="flex flex-col gap-4">
+        <CustomSwitch
+          checked={paymentEnabled}
+          onCheckedChange={handlePaymentToggle}
+          label="Enable paid space"
+          disabled={saving}
+          aria-label="Toggle payment for this space"
+        />
+
+        <p className="text-sm text-medium-dark-grey">
+          {paymentEnabled
+            ? 'Users will need to pay to access this space\'s content'
+            : 'This space is free for all users to access'
+          }
+        </p>
+      </div>
+
+      {/* Price Configuration - Only show when payment is enabled */}
+      {paymentEnabled && (
+        <div className="flex flex-col gap-4 p-4 bg-gray-50 rounded-lg">
+          <h3 className="text-lg font-medium text-off-black">Price Configuration</h3>
+
+          <div className="flex items-center gap-4">
+            <div className="flex-1">
+              <label htmlFor="unlock-price" className="block text-sm font-medium text-gray-700 mb-1">
+                Unlock Price
+              </label>
+              <Input
+                id="unlock-price"
+                type="number"
+                value={unlockPrice}
+                onChange={(e) => setUnlockPrice(Number(e.target.value))}
+                min="0"
+                step="0.01"
+                placeholder="0.00"
+                className="w-full"
+              />
+            </div>
+
+            <div className="flex-shrink-0">
+              <label htmlFor="currency" className="block text-sm font-medium text-gray-700 mb-1">
+                Currency
+              </label>
+              <select
+                id="currency"
+                value={currency}
+                onChange={(e) => setCurrency(e.target.value as CurrencyType)}
+                className="px-3 py-2 border border-gray-300 rounded-lg bg-white text-sm focus:ring-2 focus:ring-red focus:border-red"
+              >
+                <option value="USDT">USDT</option>
+                <option value="USDC">USDC</option>
+              </select>
+            </div>
+          </div>
+
+          <Button
+            onClick={handlePriceUpdate}
+            disabled={saving || unlockPrice <= 0}
+            className="self-start"
+          >
+            {saving ? 'Updating...' : 'Update Price'}
+          </Button>
+        </div>
+      )}
+
+      {/* Space Statistics */}
+      <div className="flex flex-col gap-4">
+        <h3 className="text-lg font-medium text-off-black">Space Statistics</h3>
+
+        <div className="grid grid-cols-2 gap-4">
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <p className="text-sm text-medium-dark-grey">Total Revenue</p>
+            <p className="text-xl font-semibold text-off-black">
+              {SpacePaymentService.formatPrice(spaceInfo.totalRevenue, currency)}
+            </p>
+          </div>
+
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <p className="text-sm text-medium-dark-grey">Subscribers</p>
+            <p className="text-xl font-semibold text-off-black">
+              {spaceInfo.subscriberCount}
+            </p>
+          </div>
+
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <p className="text-sm text-medium-dark-grey">Free Content</p>
+            <p className="text-xl font-semibold text-off-black">
+              {spaceInfo.freeContentCount}
+            </p>
+          </div>
+
+          <div className="bg-gray-50 p-4 rounded-lg">
+            <p className="text-sm text-medium-dark-grey">Paid Content</p>
+            <p className="text-xl font-semibold text-off-black">
+              {spaceInfo.paidContentCount}
+            </p>
+          </div>
+        </div>
+      </div>
+
+      {/* Help Text */}
+      <div className="bg-blue-50 p-4 rounded-lg border border-blue-200">
+        <h4 className="text-sm font-medium text-blue-900 mb-2">How it works</h4>
+        <ul className="text-sm text-blue-700 space-y-1">
+          <li>• Users pay once to permanently access all content in this space</li>
+          <li>• You can mix free and paid content for preview purposes</li>
+          <li>• Payments are processed instantly via blockchain</li>
+          <li>• Revenue is automatically tracked and displayed above</li>
+        </ul>
+      </div>
+    </div>
+  );
+};
+
+export default SpacePaymentConfig;
\ No newline at end of file
diff --git a/src/components/SubscribeButton/SubscribeButton.tsx b/src/components/SubscribeButton/SubscribeButton.tsx
index 4f9c36e..92cd994 100644
--- a/src/components/SubscribeButton/SubscribeButton.tsx
+++ b/src/components/SubscribeButton/SubscribeButton.tsx
@@ -8,8 +8,10 @@ import { AuthorInfo, SubscribeButtonState, EmailFrequency, SPACE_TYPES } from '.
 interface SubscribeButtonProps {
   authorUserId?: number;
   authorName?: string;
+  authorNamespace?: string; // Add namespace for real subscription status
   spaceId?: number;
   spaceName?: string;
+  spaceNamespace?: string; // Add space namespace for space subscription status
   size?: 'small' | 'medium' | 'large';
   onSubscriptionChange?: (isSubscribed: boolean) => void;
   onSubscriberCountLoaded?: (count: number) => void;
@@ -22,6 +24,9 @@ interface SubscribeButtonProps {
   spaceType?: number;
   // Subscription type
   subscriptionType?: 'author' | 'space';
+  // Initial subscription state from parent component
+  initialIsSubscribed?: boolean;
+  initialSubscriberCount?: number;
 }
 
 /**
@@ -38,8 +43,10 @@ interface SubscribeButtonProps {
 const SubscribeButton: React.FC<SubscribeButtonProps> = ({
   authorUserId,
   authorName = 'Author',
+  authorNamespace,
   spaceId,
   spaceName = 'Space',
+  spaceNamespace,
   size = 'medium',
   onSubscriptionChange,
   onSubscriberCountLoaded,
@@ -48,15 +55,18 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
   variant = 'default',
   position = 'inline',
   spaceType,
-  subscriptionType = 'author'
+  subscriptionType = 'author',
+  initialIsSubscribed,
+  initialSubscriberCount
 }) => {
   const [state, setState] = useState<SubscribeButtonState>({
-    isSubscribed: false,
-    isLoading: true,
-    subscriberCount: 0,
+    isSubscribed: initialIsSubscribed ?? false,
+    isLoading: initialIsSubscribed === undefined, // Only loading if no initial value provided
+    subscriberCount: initialSubscriberCount ?? 0,
     canSubscribe: true
   });
 
+
   const [showEmailModal, setShowEmailModal] = useState(false);
   const [showUnsubDropdown, setShowUnsubDropdown] = useState(false);
   const [email, setEmail] = useState('');
@@ -80,22 +90,51 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
     if (subscriptionType === 'author') {
       loadAuthorInfo();
     }
-  }, [authorUserId, spaceId, subscriptionType]);
+  }, [authorUserId, authorNamespace, spaceId, spaceNamespace, subscriptionType]);
 
   const loadSubscriptionStatus = async () => {
+    // If we already have initial values, don't load again
+    if (initialIsSubscribed !== undefined && initialSubscriberCount !== undefined) {
+      onSubscriberCountLoaded?.(initialSubscriberCount);
+      return;
+    }
+
     setState(prev => ({ ...prev, isLoading: true }));
 
     try {
-      const status = await subscriptionService.checkSubscriptionStatus(authorUserId);
-      setState(prev => ({
-        ...prev,
-        isSubscribed: status.isSubscribed,
-        subscriberCount: status.subscriberCount,
-        isLoading: false
-      }));
-      onSubscriberCountLoaded?.(status.subscriberCount);
+      if (subscriptionType === 'space' && spaceNamespace) {
+        // Use space/info API to get space subscription status
+        const response = await AuthService.getSpaceInfo(spaceNamespace);
+        const spaceInfo = response.data || response; // Handle both wrapped and unwrapped response
+        setState(prev => ({
+          ...prev,
+          isSubscribed: spaceInfo.isFollowed || false,
+          subscriberCount: spaceInfo.followerCount || 0,
+          isLoading: false
+        }));
+        onSubscriberCountLoaded?.(spaceInfo.followerCount || 0);
+      } else if (subscriptionType === 'author' && authorNamespace) {
+        // Use real API to get user subscription status
+        const userInfo = await AuthService.getOtherUserTreasuryInfoByNamespace(authorNamespace);
+        setState(prev => ({
+          ...prev,
+          isSubscribed: userInfo.isFollowed || false,
+          subscriberCount: userInfo.followerCount || 0,
+          isLoading: false
+        }));
+        onSubscriberCountLoaded?.(userInfo.followerCount || 0);
+      } else {
+        console.warn('SubscribeButton: Missing required parameters for subscription status check', {
+          subscriptionType,
+          spaceNamespace,
+          authorNamespace,
+          spaceId,
+          authorUserId
+        });
+        setState(prev => ({ ...prev, isLoading: false }));
+      }
     } catch (error) {
-      console.error('Failed to load subscription status:', error);
+      console.error('🔥 Failed to load subscription status:', error);
       setState(prev => ({ ...prev, isLoading: false }));
     }
   };
@@ -131,16 +170,32 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
       return;
     }
 
-    if (!currentUser.email) {
-      // Wallet user, needs to enter email
-      console.log('🔵 Wallet user has no email, show email modal');
+    // For logged in users, check their latest email info from server
+    try {
+      setState(prev => ({ ...prev, isLoading: true }));
+
+      // Get fresh user info from server to check email status
+      const userInfo = await AuthService.getUserInfo();
+      console.log('🔵 Fresh user info from server:', { hasEmail: !!userInfo.email });
+
+      if (!userInfo.email || userInfo.email.trim() === '') {
+        // User has no email set, show email modal
+        console.log('🔵 User has no email, show email modal');
+        setState(prev => ({ ...prev, isLoading: false }));
+        setShowEmailModal(true);
+        return;
+      }
+
+      // User has email, use direct email subscribe API
+      console.log('🔵 User has email, using email subscription API');
+      await performEmailSubscribe(userInfo.email);
+
+    } catch (error) {
+      console.error('🔥 Failed to get user info:', error);
+      setState(prev => ({ ...prev, isLoading: false }));
+      // Fall back to email modal if API fails
       setShowEmailModal(true);
-      return;
     }
-
-    // Users with email, directly subscribe
-    console.log('🔵 Logged in and has email, directly subscribe');
-    await handleConfirmSubscribe();
   };
 
   const handleEmailSubmit = async () => {
@@ -203,8 +258,8 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
 
       // Pass all checks, continue flow
       setShowEmailModal(false);
-      // 直接订阅，不显示推送频率确认
-      await handleConfirmSubscribe();
+      // 直接调用核心订阅函数
+      await performEmailSubscribe(email.trim());
 
     } catch (error) {
       console.error('Anti-abuse check failed:', error);
@@ -212,29 +267,58 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
     }
   };
 
-  const handleConfirmSubscribe = async () => {
+  // 核心订阅/取消订阅函数 - 统一的API调用入口
+  const performEmailSubscribe = async (userEmail: string) => {
     setState(prev => ({ ...prev, isLoading: true }));
 
     try {
-      const result = await subscriptionService.subscribeToAuthor({
-        authorUserId,
-        emailFrequency: 'DAILY', // 默认使用每日摘要
-        email: email || undefined
+      // Determine target ID and type based on subscription type
+      const targetId = subscriptionType === 'space' ? spaceId : authorUserId;
+      const targetType = subscriptionType === 'space' ? 2 : 1; // 1 for user, 2 for space
+
+      if (!targetId) {
+        throw new Error(`Invalid subscription target: ${subscriptionType}`);
+      }
+
+      console.log('🔵 Performing email subscribe/unsubscribe:', {
+        email: userEmail.substring(0, 3) + '***',
+        targetId,
+        targetType,
+        subscriptionType
       });
 
-      if (result.success) {
+      // Call the unified email subscription API - backend determines subscribe/unsubscribe
+      const success = await AuthService.emailSubscribe({
+        email: userEmail.trim(),
+        targetId,
+        targetType
+      });
+
+      if (success) {
+        // 判断当前是订阅还是取消订阅操作（根据之前的状态）
+        const wasSubscribed = state.isSubscribed;
+        const newSubscribedState = !wasSubscribed;
+
         setState(prev => ({
           ...prev,
-          isSubscribed: true,
-          subscriberCount: prev.subscriberCount + 1,
+          isSubscribed: newSubscribedState,
+          subscriberCount: newSubscribedState ? prev.subscriberCount + 1 : prev.subscriberCount - 1,
           isLoading: false
         }));
 
-        showToast('Successfully subscribed! You will receive email notifications for updates.', 'success');
-        onSubscriptionChange?.(true);
+        const successMessage = newSubscribedState
+          ? (subscriptionType === 'space'
+              ? `🎉 Successfully followed ${spaceName}! You will receive email notifications for updates.`
+              : `🎉 Successfully subscribed to ${authorName}! You will receive email notifications for updates.`)
+          : (subscriptionType === 'space'
+              ? `Successfully unfollowed ${spaceName}`
+              : 'Successfully unsubscribed');
+
+        showToast(successMessage, newSubscribedState ? 'success' : 'info');
+        onSubscriptionChange?.(newSubscribedState);
 
-        // Auto-follow all of the author's treasuries
-        if (authorUserId) {
+        // Auto-follow all of the author's treasuries if subscribing to an author
+        if (newSubscribedState && subscriptionType === 'author' && authorUserId) {
           try {
             const spacesResponse = await AuthService.getMySpaces(authorUserId);
             const spaces = spacesResponse?.data || spacesResponse?.records || spacesResponse || [];
@@ -254,47 +338,59 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
             console.warn('Failed to auto-follow author treasuries:', err);
           }
         }
+
       } else {
-        showToast(result.message || 'Subscription failed, please try again later', 'error');
+        showToast('Operation failed, please try again later', 'error');
         setState(prev => ({ ...prev, isLoading: false }));
       }
     } catch (error) {
-      console.error('Subscription failed:', error);
-      showToast('Subscription failed, please try again later', 'error');
+      console.error('🔥 Email subscription operation failed:', error);
+      console.error('🔥 Error context:', {
+        subscriptionType,
+        targetId: subscriptionType === 'space' ? spaceId : authorUserId,
+        targetType: subscriptionType === 'space' ? 2 : 1,
+        userEmail: userEmail ? userEmail.substring(0, 3) + '***' : 'empty',
+        error: error instanceof Error ? error.message : 'Unknown error'
+      });
+
+      // Show more specific error message if possible
+      let errorMessage = 'Operation failed, please try again later';
+      if (error instanceof Error && error.message) {
+        if (error.message.includes('401')) {
+          errorMessage = 'Please log in to continue';
+        } else if (error.message.includes('403')) {
+          errorMessage = 'Permission denied, please try again';
+        } else if (error.message.includes('400')) {
+          errorMessage = 'Invalid request, please check your input';
+        }
+      }
+
+      showToast(errorMessage, 'error');
       setState(prev => ({ ...prev, isLoading: false }));
     }
   };
 
   const handleUnsubscribe = async () => {
-    setState(prev => ({ ...prev, isLoading: true }));
-
+    // Get user email first
     try {
-      const result = await subscriptionService.unsubscribeFromAuthor(authorUserId);
+      const userInfo = await AuthService.getUserInfo();
+      const userEmail = userInfo.email?.trim();
 
-      if (result.success) {
-        setState(prev => ({
-          ...prev,
-          isSubscribed: false,
-          subscriberCount: Math.max(0, prev.subscriberCount - 1),
-          isLoading: false
-        }));
-
-        showToast('Successfully unsubscribed', 'info');
-        onSubscriptionChange?.(false);
-      } else {
-        showToast(result.message || 'Failed to unsubscribe', 'error');
-        setState(prev => ({ ...prev, isLoading: false }));
+      if (!userEmail) {
+        throw new Error('Email is required for unsubscription');
       }
+
+      // Use the unified function
+      await performEmailSubscribe(userEmail);
     } catch (error) {
-      console.error('Unsubscribe failed:', error);
+      console.error('Failed to get user email for unsubscription:', error);
       showToast('Failed to unsubscribe, please try again later', 'error');
-      setState(prev => ({ ...prev, isLoading: false }));
     }
   };
 
   // 🎨 Forced high contrast style system
   const getButtonStyles = () => {
-    // Base styles - matching "Create new treasury" button
+    // Base styles - matching "Create new treasury" button with improved accessibility
     const baseStyles = "[font-family:'Lato',Helvetica] font-normal text-sm leading-none rounded-[50px] transition-colors flex items-center justify-center gap-1.5 relative outline-none focus:outline-none";
 
     // Size styles
@@ -345,6 +441,16 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
       });
     }
 
+    if (state.isLoading) {
+      return {
+        ...baseStyles,
+        backgroundColor: '#f3f4f6',
+        color: '#6b7280',
+        border: '1px solid #d1d5db',
+        cursor: 'not-allowed'
+      };
+    }
+
     return state.isSubscribed
       ? {
           ...baseStyles,
@@ -364,10 +470,21 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
 
   // Get button content
   const getButtonContent = () => {
+    if (state.isLoading) {
+      return (
+        <>
+          <div className="w-3 h-3 border border-current border-t-transparent rounded-full animate-spin"></div>
+          Loading...
+        </>
+      );
+    }
+
     if (state.isSubscribed) {
+      const subscribedText = subscriptionType === 'space' ? 'Following' : 'Subscribed';
+
       return (
         <>
-          Subscribed
+          {subscribedText}
           {showSubscriberCount && size !== 'small' && (
             <span className="text-xs opacity-75">({state.subscriberCount})</span>
           )}
@@ -378,6 +495,9 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
       );
     }
 
+    const targetName = subscriptionType === 'space' ? spaceName : authorName;
+    const subscribeText = subscriptionType === 'space' ? 'Follow' : 'Subscribe';
+
     return (
       <>
         <svg width="16" height="16" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -385,9 +505,9 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
           <path d="M25.2021 14.8904C25.3276 14.1689 25.3935 13.432 25.3935 12.6967C25.3935 5.6957 19.6978 0 12.6967 0C5.6957 0 0 5.6957 0 12.6967C0 19.6978 5.6957 25.3935 12.6967 25.3935C13.4323 25.3935 14.1695 25.328 14.8906 25.2024C16.238 26.9034 18.3166 28 20.65 28C24.7027 28 28 24.7027 28 20.65C28 18.3165 26.9033 16.2378 25.2021 14.8904ZM12.6967 0.7C19.3119 0.7 24.6935 6.08159 24.6935 12.6967C24.6935 13.2802 24.6495 13.8647 24.5657 14.4409C23.4305 13.7224 22.09 13.3 20.65 13.3C18.8694 13.3 17.2353 13.9372 15.962 14.9946C14.9104 14.6529 13.8131 14.4754 12.6967 14.4754C8.76307 14.4754 5.13302 16.7004 3.32408 20.1724C1.68397 18.1203 0.7 15.522 0.7 12.6967C0.7 6.08159 6.08159 0.7 12.6967 0.7ZM12.6967 24.6935C9.17831 24.6935 6.00907 23.1709 3.81268 20.7502C5.45388 17.3611 8.92765 15.1754 12.6967 15.1754C13.6074 15.1754 14.5029 15.306 15.3694 15.5496C14.0911 16.8727 13.3 18.6694 13.3 20.65C13.3 22.0899 13.7223 23.4303 14.4408 24.5655C13.8649 24.6492 13.2804 24.6935 12.6967 24.6935ZM20.65 27.3C16.9832 27.3 14 24.3168 14 20.65C14 16.9832 16.9832 14 20.65 14C24.3168 14 27.3 16.9832 27.3 20.65C27.3 24.3168 24.3168 27.3 20.65 27.3Z" fill="currentColor" stroke="currentColor" strokeWidth="0.5"/>
           <path d="M23.236 17.5383C22.4608 17.2009 21.4129 17.2672 20.65 18.0879C19.8871 17.2672 18.8392 17.2006 18.064 17.5383C17.1603 17.9313 16.3998 18.9441 16.7371 20.3215C17.3028 22.6293 20.3554 24.2836 20.4849 24.353C20.5365 24.3807 20.5933 24.3944 20.65 24.3944C20.7067 24.3944 20.7635 24.3807 20.8151 24.353C20.9446 24.2836 23.9976 22.6293 24.5629 20.3215C24.9002 18.9441 24.1397 17.9313 23.236 17.5383ZM23.8827 20.1547C23.4609 21.8781 21.2724 23.2747 20.65 23.6414C20.0276 23.2747 17.8394 21.8781 17.4173 20.1547C17.1767 19.1734 17.7088 18.456 18.3432 18.1802C18.5312 18.0981 18.7523 18.0465 18.9854 18.0465C19.4537 18.0465 19.9695 18.2554 20.3574 18.8467C20.4866 19.0442 20.8134 19.0442 20.9426 18.8467C21.5236 17.9611 22.3904 17.9331 22.9568 18.1802C23.5912 18.456 24.1233 19.1734 23.8827 20.1547Z" fill="currentColor" stroke="currentColor" strokeWidth="0.3"/>
         </svg>
-        Subscribe
+        {subscribeText}
         {showSubscriberCount && size !== 'small' && state.subscriberCount > 0 && (
-          <span className="text-xs opacity-90">({state.subscriberCount})</span>
+          <span className="text-xs opacity-90">({state.subscriberCount} {subscriptionType === 'space' ? 'followers' : 'subscribers'})</span>
         )}
       </>
     );
@@ -436,7 +556,7 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
           disabled={state.isLoading}
           className={`${getButtonStyles()} touch-target subscribe-button no-zoom`}
           style={getInlineStyles()}
-          title={state.isSubscribed ? 'Click to manage subscription' : 'Click to subscribe'}
+          title={state.isSubscribed ? 'Click to manage subscription' : `Click to ${subscriptionType === 'space' ? 'follow' : 'subscribe'}`}
         >
           {getButtonContent()}
         </button>
@@ -453,7 +573,7 @@ const SubscribeButton: React.FC<SubscribeButtonProps> = ({
                 }}
                 className="flex items-center justify-center px-4 h-8 rounded-[50px] transition-colors hover:bg-[rgba(224,224,224,0.25)] [font-family:'Lato',Helvetica] font-normal text-sm text-red whitespace-nowrap"
               >
-                Unsubscribe
+                {subscriptionType === 'space' ? 'Unfollow' : 'Unsubscribe'}
               </button>
             </div>
           </>
diff --git a/src/components/notification/NotificationPanel.tsx b/src/components/notification/NotificationPanel.tsx
index d5bebf1..a8fb7f5 100644
--- a/src/components/notification/NotificationPanel.tsx
+++ b/src/components/notification/NotificationPanel.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useRef } from 'react';
+import React, { useEffect, useRef, startTransition } from 'react';
 import { useNavigate } from 'react-router-dom';
 import { useNotification } from '../../contexts/NotificationContext';
 import { Notification } from '../../types/notification';
@@ -178,7 +178,7 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({ isOpen, on
               onClick={(e) => {
                 e.stopPropagation();
                 console.log('🖱️ Clicking work title, navigating to:', `/work/${metadata.targetUuid}`);
-                navigate(`/work/${metadata.targetUuid}`);
+                startTransition(() => { navigate(`/work/${metadata.targetUuid}`); });
                 onClose();
               }}
               className="text-blue-600 hover:text-blue-800 underline cursor-pointer"
@@ -203,7 +203,7 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({ isOpen, on
 
     // Navigate to related page
     if (notification.actionUrl) {
-      navigate(notification.actionUrl);
+      startTransition(() => { navigate(notification.actionUrl); });
     }
 
     onClose();
@@ -308,7 +308,7 @@ export const NotificationPanel: React.FC<NotificationPanelProps> = ({ isOpen, on
         <div className="px-4 py-3 border-t bg-gray-50">
           <button
             onClick={() => {
-              navigate('/notifications');
+              startTransition(() => { navigate('/notifications'); });
               onClose();
             }}
             className="w-full text-center text-sm text-blue-600 hover:text-blue-800 transition-colors"
diff --git a/src/hooks/useArticles.ts b/src/hooks/useArticles.ts
index f679f67..a61cd4d 100644
--- a/src/hooks/useArticles.ts
+++ b/src/hooks/useArticles.ts
@@ -1,4 +1,4 @@
-import { useState, useEffect, useCallback } from 'react';
+import { useState, useEffect, useCallback, useRef } from 'react';
 import { getPageArticles } from '../services/articleService';
 import { Article, PageArticleParams } from '../types/article';
 
@@ -24,59 +24,98 @@ export const useArticles = (
     total: 0,
   });
 
+  // Request debouncing and caching
+  const requestTimeoutRef = useRef<NodeJS.Timeout>();
+  const lastRequestRef = useRef<string>('');
+  const cacheRef = useRef<Map<string, { data: Article[]; timestamp: number }>>(new Map());
+
   const fetchArticles = useCallback(async (params: PageArticleParams = {}, append = false) => {
     console.log('🔄 fetchArticles called:', { params, append, initialParams });
-    setState(prev => ({ ...prev, loading: true, error: null }));
 
-    try {
-      const finalParams = {
-        pageSize: 10, // Optimize loading performance for better UX
-        ...initialParams,
-        ...params,
-        page: append ? (params.page || 1) : 1, // Use provided page number in append mode, otherwise start from page 1
-      };
-
-      console.log('📡 About to call getPageArticles with:', finalParams);
-      const response = await getPageArticles(finalParams);
-
-
-      setState(prev => {
-        let mergedArticles;
-        if (append) {
-          // Deduplicate when merging, based on article.id
-          const existingIds = new Set(prev.articles.map(article => article.id));
-          const newArticles = response.articles.filter(article => !existingIds.has(article.id));
-          mergedArticles = [...prev.articles, ...newArticles];
-        } else {
-          mergedArticles = response.articles;
-        }
+    // Clear any pending requests
+    if (requestTimeoutRef.current) {
+      clearTimeout(requestTimeoutRef.current);
+    }
 
-        return {
-          ...prev,
-          articles: mergedArticles,
-          loading: false,
-          hasMore: response.hasMore,
-          page: response.page,
-          total: response.total,
-        };
-      });
-    } catch (error) {
-      let errorMessage = 'Failed to fetch articles';
-
-      if (error instanceof Error) {
-        if (error.message.includes('System internal error')) {
-          errorMessage = 'Backend service temporarily unavailable, please contact technical team to check service status';
-        } else {
-          errorMessage = error.message;
-        }
-      }
+    const finalParams = {
+      pageSize: 15, // Increased from 10 to 15 for better balance of performance and content
+      ...initialParams,
+      ...params,
+      page: append ? (params.page || 1) : 1, // Use provided page number in append mode, otherwise start from page 1
+    };
+
+    const requestKey = JSON.stringify(finalParams);
 
+    // Check cache first (5 minutes cache)
+    const cached = cacheRef.current.get(requestKey);
+    const now = Date.now();
+    if (cached && (now - cached.timestamp < 5 * 60 * 1000) && !append) {
+      console.log('📦 Using cached data for:', finalParams);
       setState(prev => ({
         ...prev,
+        articles: cached.data,
         loading: false,
-        error: errorMessage,
+        hasMore: cached.data.length >= finalParams.pageSize,
+        page: finalParams.page || 1,
+        total: cached.data.length,
       }));
+      return;
     }
+
+    setState(prev => ({ ...prev, loading: true, error: null }));
+
+    // Debounce the request by 200ms
+    requestTimeoutRef.current = setTimeout(async () => {
+      try {
+        console.log('📡 About to call getPageArticles with:', finalParams);
+        const response = await getPageArticles(finalParams);
+
+        // Cache the result for non-append requests
+        if (!append) {
+          cacheRef.current.set(requestKey, {
+            data: response.articles,
+            timestamp: now
+          });
+        }
+
+        setState(prev => {
+          let mergedArticles;
+          if (append) {
+            // Deduplicate when merging, based on article.id
+            const existingIds = new Set(prev.articles.map(article => article.id));
+            const newArticles = response.articles.filter(article => !existingIds.has(article.id));
+            mergedArticles = [...prev.articles, ...newArticles];
+          } else {
+            mergedArticles = response.articles;
+          }
+
+          return {
+            ...prev,
+            articles: mergedArticles,
+            loading: false,
+            hasMore: response.hasMore,
+            page: response.page,
+            total: response.total,
+          };
+        });
+      } catch (error) {
+        let errorMessage = 'Failed to fetch articles';
+
+        if (error instanceof Error) {
+          if (error.message.includes('System internal error')) {
+            errorMessage = 'Backend service temporarily unavailable, please contact technical team to check service status';
+          } else {
+            errorMessage = error.message;
+          }
+        }
+
+        setState(prev => ({
+          ...prev,
+          loading: false,
+          error: errorMessage,
+        }));
+      }
+    }, 200); // 200ms debounce
   }, [initialParams]); // Add initialParams dependency
 
   const loadMore = useCallback(() => {
diff --git a/src/hooks/useTransitionNavigation.ts b/src/hooks/useTransitionNavigation.ts
new file mode 100644
index 0000000..bfde126
--- /dev/null
+++ b/src/hooks/useTransitionNavigation.ts
@@ -0,0 +1,17 @@
+/**
+ * Hook to handle navigation with startTransition to prevent Suspense errors
+ */
+import { useCallback, startTransition } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+export const useTransitionNavigation = () => {
+  const navigate = useNavigate();
+
+  const navigateWithTransition = useCallback((path: string, options?: { replace?: boolean }) => {
+    startTransition(() => {
+      navigate(path, options);
+    });
+  }, [navigate]);
+
+  return navigateWithTransition;
+};
\ No newline at end of file
diff --git a/src/routes/MyTreasury/screens/MyTreasury.tsx b/src/routes/MyTreasury/screens/MyTreasury.tsx
index 96ac9ff..80b1b5e 100644
--- a/src/routes/MyTreasury/screens/MyTreasury.tsx
+++ b/src/routes/MyTreasury/screens/MyTreasury.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { startTransition } from "react";
 import { useNavigate, useLocation, useParams } from "react-router-dom";
 import { HeaderSection } from "../../../components/shared/HeaderSection/HeaderSection";
 import { SideMenuSection } from "../../../components/shared/SideMenuSection/SideMenuSection";
@@ -23,7 +23,7 @@ export const MyTreasury = (): JSX.Element => {
   React.useEffect(() => {
     // Only redirect when accessing /my-treasury path and user is logged in with namespace
     if (location.pathname === '/my-treasury' && user?.namespace && isLoggedIn) {
-      navigate(`/u/${user.namespace}`, { replace: true });
+      startTransition(() => navigate(`/u/${user.namespace}`, { replace: true }));
     }
   }, [location.pathname, user?.namespace, navigate, isLoggedIn]);
 
diff --git a/src/routes/MyTreasury/screens/sections/MainContentSection.tsx b/src/routes/MyTreasury/screens/sections/MainContentSection.tsx
index b37e693..eed9a12 100644
--- a/src/routes/MyTreasury/screens/sections/MainContentSection.tsx
+++ b/src/routes/MyTreasury/screens/sections/MainContentSection.tsx
@@ -286,10 +286,20 @@ const TreasuryHeaderSection = ({
               <SubscribeButton
                 authorUserId={userId}
                 authorName={username}
+                authorNamespace={namespace}
                 size="medium"
                 variant="default"
                 showSubscriberCount={false}
+                initialSubscriberCount={subscriberCount}
                 onSubscriberCountLoaded={onSubscriberCountLoaded}
+                onSubscriptionChange={(isSubscribed) => {
+                  // Real-time UI update for subscriber count
+                  if (isSubscribed) {
+                    onSubscriberCountLoaded?.((subscriberCount || 0) + 1);
+                  } else {
+                    onSubscriberCountLoaded?.(Math.max((subscriberCount || 0) - 1, 0));
+                  }
+                }}
               />
             )}
 
@@ -502,18 +512,10 @@ export const MainContentSection = (): JSX.Element => {
               targetUserId = user.id;
             }
           } else {
-            // Viewing own treasury - fetch full user info to get complete statistics
-            try {
-              console.log('Viewing own treasury, fetching full user info by namespace:', user.namespace);
-              processedInfo = await AuthService.getOtherUserTreasuryInfoByNamespace(user.namespace);
-              targetUserId = processedInfo?.id || user.id;
-              console.log('Own user full info:', processedInfo, 'userId:', targetUserId);
-            } catch (err) {
-              // Fall back to basic user info if fetch fails
-              console.warn('Failed to fetch full user info, using basic user info:', err);
-              processedInfo = user;
-              targetUserId = user.id;
-            }
+            // Viewing own treasury - use current user info directly
+            console.log('🟢 Viewing own treasury, using current user info');
+            processedInfo = user;
+            targetUserId = user.id;
           }
         } else if (namespace) {
           // Not logged in but have namespace - fetch that user's info
diff --git a/src/screens/Following/sections/FollowingAuthorSection.tsx b/src/screens/Following/sections/FollowingAuthorSection.tsx
index 500946d..1fe3fd3 100644
--- a/src/screens/Following/sections/FollowingAuthorSection.tsx
+++ b/src/screens/Following/sections/FollowingAuthorSection.tsx
@@ -42,6 +42,7 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
   const [canScrollRight, setCanScrollRight] = useState(false);
   const [popupTab, setPopupTab] = useState<'curator' | 'treasuries'>('curator');
   const [selectedAuthorFilter, setSelectedAuthorFilter] = useState<string | null>(null);
+  const [treasuriesLoading, setTreasuriesLoading] = useState(false);
 
   // Check scroll state
   const updateScrollState = useCallback(() => {
@@ -77,8 +78,10 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
         setLoading(true);
 
         // Fetch followed users
+        // 🔍 SEARCH: api-followed-users-fix-needed
+        // NOTE: API should not return current user in followed users list
+        // This is a temporary client-side fix until API is corrected
         const followedUsers = await AuthService.getFollowedUsers();
-        console.log('✅ Fetched followed users from API:', followedUsers);
 
         // Fetch followed spaces
         const followedSpacesData = await AuthService.getFollowedSpaces();
@@ -90,46 +93,80 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
         console.log('✅ Fetched followed articles from API:', followedArticlesResponse);
 
         // Transform API data to ArticleData format
-        if (followedArticlesResponse?.data && Array.isArray(followedArticlesResponse.data)) {
-          const transformedArticles: ArticleData[] = followedArticlesResponse.data.map((article: any) => ({
+        // API returns: {status: 1, msg: "success", data: {data: [...], pageCount, pageIndex, pageSize, totalCount}}
+        const articleData = followedArticlesResponse?.data?.data || followedArticlesResponse?.data;
+        if (Array.isArray(articleData)) {
+          const transformedArticles: ArticleData[] = articleData.map((article: any) => ({
             id: article.id?.toString() || article.uuid || `article_${Date.now()}_${Math.random()}`,
+            uuid: article.uuid,
             title: article.title || 'Untitled',
             description: article.content || '',
             coverImage: article.coverUrl || '',
-            category: 'Technology', // Default category, could be enhanced
+            category: 'General', // Could be enhanced with actual category data
+            categoryColor: '#666666', // Default color
             userName: article.authorInfo?.username || 'Unknown Author',
             userAvatar: article.authorInfo?.faceUrl || '',
-            date: new Date(article.publishAt || article.createAt || Date.now()).toISOString(),
-            treasureCount: 0, // Not provided in API response
-            visitCount: article.viewCount?.toString() || '0',
+            userId: article.authorInfo?.id,
+            userNamespace: article.authorInfo?.namespace,
+            date: new Date((article.publishAt || article.createAt || Date.now()) * 1000).toISOString(),
+            treasureCount: article.likeCount || 0, // Use real API data
+            visitCount: article.viewCount || 0,
             commentCount: article.commentCount || 0,
+            isLiked: article.isLiked || false, // Use real API data
+            targetUrl: article.targetUrl,
+            website: article.targetUrl ? (() => {
+              try {
+                return new URL(article.targetUrl).hostname;
+              } catch {
+                return undefined;
+              }
+            })() : undefined,
+            isPaymentRequired: article.targetUrlIsLocked || false,
+            paymentPrice: article.priceInfo?.price?.toString(),
+            visibility: article.visibility
           }));
+          console.log('✅ Transformed articles before setting state:', transformedArticles);
           setFollowedArticles(transformedArticles);
         } else {
+          console.log('❌ No article data found in response:', followedArticlesResponse);
           setFollowedArticles([]);
         }
 
         // Transform followed users to SubscribedAuthor format
-        const authorsArray: SubscribedAuthor[] = followedUsers.map((user) => ({
-          userId: user.id,
-          username: user.username,
-          displayName: user.username,
-          avatar: user.faceUrl || profileDefaultAvatar,
-          bio: user.bio || '',
-          spacesCount: 0, // Will be updated when we fetch their spaces
-          totalArticles: 0, // Will be calculated if needed
-          newArticlesSinceLastVisit: 0,
-          lastUpdated: new Date().toISOString(),
-          emailFrequency: 'DAILY' as const,
-          subscriptionInfo: {
-            subscriptionId: `api_${user.id}`,
-            authorUserId: user.id,
+        // Filter out current user (defensive programming)
+        const filteredUsers = followedUsers.filter((followedUser) => {
+          // Convert both to numbers for comparison to handle string vs number type issues
+          const followedUserId = Number(followedUser?.id);
+          const currentUserId = Number(user?.id);
+
+          const hasValidData = followedUser?.id && followedUser?.username;
+          const isNotCurrentUser = followedUserId !== currentUserId;
+          return hasValidData && isNotCurrentUser;
+        });
+
+        const authorsArray: SubscribedAuthor[] = filteredUsers
+          .map((user) => ({
+            userId: user.id!,
+            username: user.username!,
+            displayName: user.username!,
+            avatar: user.faceUrl || profileDefaultAvatar,
+            bio: user.bio || '',
+            spacesCount: 0, // Will be updated when we fetch their spaces
+            totalArticles: 0, // Will be calculated if needed
+            newArticlesSinceLastVisit: 0,
+            lastUpdated: new Date().toISOString(),
             emailFrequency: 'DAILY' as const,
-            isActive: true,
-            subscribedAt: new Date().toISOString(),
-          } as SubscriptionInfo,
-          spaces: [],
-        }));
+            subscriptionInfo: {
+              subscriptionId: `api_${user.id}`,
+              authorUserId: user.id!,
+              emailFrequency: 'DAILY' as const,
+              isActive: true,
+              subscribedAt: new Date().toISOString(),
+            } as SubscriptionInfo,
+            spaces: [],
+          }));
+
+        console.log('✅ Transformed authors array:', authorsArray);
 
         // Fetch spaces for each author
         for (const author of authorsArray) {
@@ -172,6 +209,24 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
     }
   };
 
+  // Handle switching to treasuries tab and fetch fresh data
+  const handleTreasuriesTabClick = async () => {
+    setPopupTab('treasuries');
+    if (!user?.id) return;
+
+    try {
+      setTreasuriesLoading(true);
+      console.log('🔍 Fetching fresh followed spaces for Treasuries tab...');
+      const freshFollowedSpaces = await AuthService.getFollowedSpaces();
+      console.log('✅ Fresh followed spaces loaded:', freshFollowedSpaces);
+      setFollowedSpaces(freshFollowedSpaces);
+    } catch (error) {
+      console.error('❌ Failed to fetch fresh followed spaces:', error);
+    } finally {
+      setTreasuriesLoading(false);
+    }
+  };
+
   // If user is not logged in
   if (!user) {
     return (
@@ -259,40 +314,7 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
             style={{ scrollbarWidth: 'none', msOverflowStyle: 'none' }}
             onScroll={updateScrollState}
           >
-            {/* My profile card */}
-            {user && (
-              <Card
-                className={`w-44 flex-shrink-0 cursor-pointer transition-colors ${
-                  selectedAuthorFilter === (user.username || 'Me')
-                    ? 'bg-gray-100 border-gray-400'
-                    : 'bg-white border border-gray-200'
-                }`}
-                onClick={() => setSelectedAuthorFilter(prev => prev === (user.username || 'Me') ? null : (user.username || 'Me'))}
-              >
-                <CardContent className="p-3">
-                  <div className="flex items-center gap-3">
-                    <img
-                      src={user.faceUrl || user.avatar || profileDefaultAvatar}
-                      alt="My avatar"
-                      className="w-10 h-10 rounded-full object-cover flex-shrink-0"
-                      onError={(e) => {
-                        (e.target as HTMLImageElement).src = profileDefaultAvatar;
-                      }}
-                    />
-                    <div className="flex-1 min-w-0">
-                      <h4 className="[font-family:'Lato',Helvetica] font-semibold text-gray-900 text-sm truncate">
-                        {user.username || 'Me'}
-                      </h4>
-                      {user.namespace && (
-                        <span className="[font-family:'Lato',Helvetica] text-gray-500 text-xs truncate block">
-                          @{user.namespace}
-                        </span>
-                      )}
-                    </div>
-                  </div>
-                </CardContent>
-              </Card>
-            )}
+            {/* Removed "My profile card" - users shouldn't see themselves in their following list */}
 
             {/* Subscribed author cards */}
             {subscribedAuthors.map((author) => (
@@ -376,8 +398,23 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
           </div>
         )}
         {followedArticles.length === 0 ? (
-          <div className="text-center py-10">
-            <p className="[font-family:'Lato',Helvetica] text-sm text-gray-400">No content yet</p>
+          <div className="text-center py-16">
+            <div className="max-w-md mx-auto">
+              <h3 className="text-lg font-normal text-medium-grey mb-2 [font-family:'Lato',Helvetica]">
+                No followed articles yet
+              </h3>
+              <p className="text-medium-grey text-sm mb-6 [font-family:'Lato',Helvetica]">
+                Follow some authors and spaces to see their latest articles here
+              </p>
+              <Button
+                onClick={() => navigate('/')}
+                variant="copus"
+                size="lg"
+                className="px-6 py-3 rounded-full"
+              >
+                Discover Content
+              </Button>
+            </div>
           </div>
         ) : (
           <div className="grid grid-cols-1 lg:grid-cols-[repeat(auto-fill,minmax(280px,1fr))] gap-4 lg:gap-8">
@@ -386,6 +423,10 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
                 ? followedArticles.filter(a => a.userName === selectedAuthorFilter)
                 : followedArticles;
 
+              console.log('🔍 Rendering articles - followedArticles.length:', followedArticles.length);
+              console.log('🔍 Filtered articles for display:', filteredArticles.length);
+              console.log('🔍 Selected author filter:', selectedAuthorFilter);
+
               return filteredArticles.map((article) => (
                 <ArticleCard
                   key={article.id}
@@ -451,7 +492,7 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
                 Curator
               </button>
               <button
-                onClick={() => setPopupTab('treasuries')}
+                onClick={handleTreasuriesTabClick}
                 className={`text-[12px] [font-family:'Lato',Helvetica] px-3 py-1 rounded-full border transition-colors ${
                   popupTab === 'treasuries'
                     ? 'text-gray-900 border-gray-300 bg-gray-100 font-semibold'
@@ -499,8 +540,9 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
                           authorUserId={author.userId}
                           authorName={author.displayName}
                           size="medium"
+                          initialIsSubscribed={true} // Since this is the followed users list
                           onSubscriptionChange={() => {
-                            // 订阅状态改变时刷新数据
+                            // Refresh data when subscription status changes
                             setRefreshTrigger(prev => prev + 1);
                           }}
                         />
@@ -512,15 +554,24 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
                   {subscribedAuthors.length === 0 && (
                     <div className="flex-1 flex items-center justify-center">
                       <p className="[font-family:'Lato',Helvetica] text-sm text-gray-400">
-                        No subscribed curators yet
+                        No followed authors yet
                       </p>
                     </div>
                   )}
                 </>
               ) : (
                 <>
-                  {/* Real followed spaces */}
-                  {followedSpaces.map((space) => (
+                  {/* Loading state for treasuries */}
+                  {treasuriesLoading ? (
+                    <div className="flex-1 flex items-center justify-center">
+                      <p className="[font-family:'Lato',Helvetica] text-sm text-gray-400">
+                        Loading treasuries...
+                      </p>
+                    </div>
+                  ) : (
+                    <>
+                      {/* Real followed spaces */}
+                      {followedSpaces.map((space) => (
                     <div
                       key={space.id || space.namespace}
                       className="flex items-center gap-3 p-3 rounded-lg border border-gray-200 hover:bg-gray-50 transition-colors cursor-pointer"
@@ -530,10 +581,10 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
                       }}
                     >
                       <div className="w-10 h-10 rounded-lg bg-gray-100 flex items-center justify-center flex-shrink-0">
-                        {space.coverUrl ? (
+                        {(space.faceUrl || space.coverUrl) ? (
                           <img
-                            src={space.coverUrl}
-                            alt={`${space.name} cover`}
+                            src={space.faceUrl || space.coverUrl}
+                            alt={`${space.name} avatar`}
                             className="w-full h-full rounded-lg object-cover"
                             onError={(e) => {
                               const svgFallback = (
@@ -573,23 +624,33 @@ export const FollowingAuthorSection = ({ showSubscriptionsPopup, setShowSubscrip
                           )}
                         </div>
                       </div>
-                      <button
-                        className="[font-family:'Lato',Helvetica] font-normal text-sm leading-none rounded-[50px] px-3 h-8 flex items-center justify-center gap-1.5 transition-colors flex-shrink-0"
-                        style={{ backgroundColor: '#ffffff', color: '#059669', border: '1px solid #059669' }}
-                        onClick={(e) => e.stopPropagation()}
-                      >
-                        Subscribed
-                      </button>
+                      <div onClick={(e) => e.stopPropagation()}>
+                        <SubscribeButton
+                          spaceId={space.id}
+                          spaceName={space.name}
+                          spaceNamespace={space.namespace}
+                          size="medium"
+                          subscriptionType="space"
+                          initialIsSubscribed={true} // Since this is the followed spaces list
+                          initialSubscriberCount={space.followerCount || 0} // Use API data to prevent extra calls
+                          onSubscriptionChange={() => {
+                            // Refresh data when subscription status changes
+                            setRefreshTrigger(prev => prev + 1);
+                          }}
+                        />
+                      </div>
                     </div>
                   ))}
 
-                  {/* Show message if no followed spaces */}
-                  {followedSpaces.length === 0 && (
-                    <div className="flex-1 flex items-center justify-center">
-                      <p className="[font-family:'Lato',Helvetica] text-sm text-gray-400">
-                        No subscribed treasuries yet
-                      </p>
-                    </div>
+                      {/* Show message if no followed spaces */}
+                      {followedSpaces.length === 0 && (
+                        <div className="flex-1 flex items-center justify-center">
+                          <p className="[font-family:'Lato',Helvetica] text-sm text-gray-400">
+                            No followed treasuries yet
+                          </p>
+                        </div>
+                      )}
+                    </>
                   )}
                 </>
               )}
diff --git a/src/screens/Following/sections/FollowingContentSection.tsx b/src/screens/Following/sections/FollowingContentSection.tsx
index 47288bd..7e48ff1 100644
--- a/src/screens/Following/sections/FollowingContentSection.tsx
+++ b/src/screens/Following/sections/FollowingContentSection.tsx
@@ -7,22 +7,35 @@ import { AuthService } from "../../../services/authService";
 import { CollectTreasureModal } from "../../../components/CollectTreasureModal";
 import profileDefaultAvatar from "../../../assets/images/profile-default.svg";
 
-// Interface for followed space
+// Interface for followed space - matches updated API spec
 interface FollowedSpace {
-  id: number;
-  name: string;
-  namespace: string;
-  spaceType?: number; // 1 = Treasury, 2 = Curations (default spaces)
-  userId?: number;
-  ownerInfo?: {
+  articleCount?: number;
+  coverUrl?: string;
+  data?: Array<{
+    coverUrl?: string;
+    targetUrl?: string;
+    title?: string;
+  }>;
+  description?: string;
+  faceUrl?: string;
+  followerCount?: number;
+  id?: number;
+  isAdmin?: boolean;
+  isBind?: boolean;
+  isFollowed?: boolean;
+  name?: string;
+  namespace?: string;
+  seoDataByAi?: string;
+  spaceType?: number; // 0 = normal space, 1 = Treasury, 2 = Curations
+  userInfo?: {
+    bio?: string;
+    coverUrl?: string;
+    faceUrl?: string;
     id?: number;
-    username?: string;
     namespace?: string;
-  };
-  authorInfo?: {
-    id?: number;
     username?: string;
   };
+  visibility?: number; // 0:公开 1:登录可见 2:付费可见
 }
 
 // Interface for space with resolved username
@@ -56,15 +69,9 @@ export const FollowingContentSection = (): JSX.Element => {
         const response = await AuthService.getFollowedSpaces();
         console.log('Followed spaces response:', response);
 
-        // Parse the response - handle different response formats
-        let spacesArray: FollowedSpace[] = [];
-        if (response?.data?.data && Array.isArray(response.data.data)) {
-          spacesArray = response.data.data;
-        } else if (response?.data && Array.isArray(response.data)) {
-          spacesArray = response.data;
-        } else if (Array.isArray(response)) {
-          spacesArray = response;
-        }
+        // Parse the response - service already handles data extraction
+        let spacesArray: FollowedSpace[] = Array.isArray(response) ? response : [];
+        console.log('✅ Transformed spaces array:', spacesArray);
 
         // Resolve display names for default spaces using existing data (no extra API calls)
         const spacesWithDisplayNames = spacesArray.map(space => {
@@ -74,12 +81,8 @@ export const FollowingContentSection = (): JSX.Element => {
             space.name?.toLowerCase().includes('default');
 
           if (isDefaultSpace) {
-            // Try to get username from various possible fields in the response
-            const username = space.ownerInfo?.username
-              || space.authorInfo?.username
-              || (space as any).userInfo?.username
-              || (space as any).userName
-              || (space as any).ownerName;
+            // Get username from the new userInfo structure
+            const username = space.userInfo?.username;
 
             if (username) {
               let displayName: string;
@@ -115,18 +118,12 @@ export const FollowingContentSection = (): JSX.Element => {
 
       try {
         setLoadingArticles(true);
-        const response = await AuthService.getFollowedArticles(1, 50);
+        const response = await AuthService.getPageMyFollowedArticle(1, 50);
         console.log('Followed articles response:', response);
 
-        // Parse the response
-        let articlesArray: any[] = [];
-        if (response?.data?.data && Array.isArray(response.data.data)) {
-          articlesArray = response.data.data;
-        } else if (response?.data && Array.isArray(response.data)) {
-          articlesArray = response.data;
-        } else if (Array.isArray(response)) {
-          articlesArray = response;
-        }
+        // Parse the response - service handles data extraction
+        let articlesArray: any[] = Array.isArray(response) ? response : response?.data || [];
+        console.log('✅ Transformed articles array:', articlesArray);
 
         setAllArticles(articlesArray);
       } catch (err) {
diff --git a/src/screens/Login/Login.tsx b/src/screens/Login/Login.tsx
index 9f786b6..80d2b33 100644
--- a/src/screens/Login/Login.tsx
+++ b/src/screens/Login/Login.tsx
@@ -1,4 +1,4 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, startTransition } from "react";
 import { useNavigate, useSearchParams } from "react-router-dom";
 import { useUser } from "../../contexts/UserContext";
 import { useToast } from "../../components/ui/toast";
@@ -518,7 +518,9 @@ export const Login = (): JSX.Element => {
               }, 1000);
             }
 
-            navigate('/', { replace: true });
+            startTransition(() => {
+              navigate('/', { replace: true });
+            });
           } else if (provider === 'x') {
             // X (Twitter) login handling
             response = await AuthService.xLogin(code, state, hasExistingToken);
@@ -560,7 +562,9 @@ export const Login = (): JSX.Element => {
 
             await fetchUserInfo(response.token);
 
-            navigate('/', { replace: true });
+            startTransition(() => {
+              navigate('/', { replace: true });
+            });
           } else {
             // Default fallback (for backward compatibility)
             response = await AuthService.xLogin(code, state, hasExistingToken);
@@ -569,7 +573,9 @@ export const Login = (): JSX.Element => {
               showToast('Login successful! Welcome back 🎉', 'success');
               const tokenToUse = response.token || response.data?.token;
               await fetchUserInfo(tokenToUse);
-              navigate('/', { replace: true });
+              startTransition(() => {
+                navigate('/', { replace: true });
+              });
             } else {
               throw new Error('No authentication token received');
             }
@@ -805,7 +811,9 @@ export const Login = (): JSX.Element => {
         }
 
         showToast('Login successful! Welcome back 🎉', 'success');
-        navigate('/');
+        startTransition(() => {
+          navigate('/');
+        });
       } else {
         // Handle wallet address not registered case
         if (response.msg && (
@@ -940,7 +948,9 @@ export const Login = (): JSX.Element => {
         }
 
         showToast('Login successful! Welcome back 🎉', 'success');
-        navigate('/');
+        startTransition(() => {
+          navigate('/');
+        });
       } else {
         // Handle wallet address not registered case
         if (response.msg && (
@@ -1080,7 +1090,9 @@ export const Login = (): JSX.Element => {
         }
 
         showToast('Login successful! Welcome back 🎉', 'success');
-        navigate('/');
+        startTransition(() => {
+          navigate('/');
+        });
       } else {
         // Handle wallet address not registered case
         if (response.msg && (
@@ -1235,7 +1247,9 @@ export const Login = (): JSX.Element => {
         }
 
         showToast('Login successful! Welcome back 🎉', 'success');
-        navigate('/');
+        startTransition(() => {
+          navigate('/');
+        });
       } else {
         // Translate error messages
         let errorMessage = 'Login failed';
diff --git a/src/screens/Notification/sections/NotificationListSection/NotificationListSection.tsx b/src/screens/Notification/sections/NotificationListSection/NotificationListSection.tsx
index ec0ce67..7df224b 100644
--- a/src/screens/Notification/sections/NotificationListSection/NotificationListSection.tsx
+++ b/src/screens/Notification/sections/NotificationListSection/NotificationListSection.tsx
@@ -1,4 +1,4 @@
-import React, { useEffect, useState, useCallback, useRef } from "react";
+import React, { useEffect, useState, useCallback, useRef, startTransition } from "react";
 import {
   Avatar,
   AvatarFallback,
@@ -646,10 +646,10 @@ export const NotificationListSection = (): JSX.Element => {
     // Prefer namespace, fallback to userId
     if (notification.namespace) {
       // Use short link format to navigate to user profile page
-      navigate(`/u/${notification.namespace}`);
+      startTransition(() => navigate(`/u/${notification.namespace}`));
     } else if (notification.userId) {
       // Fallback: use userId
-      navigate(`/user/${notification.userId}/treasury`);
+      startTransition(() => navigate(`/user/${notification.userId}/treasury`));
     }
   };
 
@@ -665,10 +665,10 @@ export const NotificationListSection = (): JSX.Element => {
     console.log('[Follow Treasury Avatar Click]', { spaceNamespace, spaceId, articleUuid, articleId });
 
     if (spaceNamespace) {
-      navigate(`/treasury/${spaceNamespace}`);
+      startTransition(() => navigate(`/treasury/${spaceNamespace}`));
     } else if (articleUuid || articleId) {
       // Fallback to article page
-      navigate(`/work/${articleUuid || articleId}`);
+      startTransition(() => navigate(`/work/${articleUuid || articleId}`));
     }
   };
 
@@ -725,7 +725,7 @@ export const NotificationListSection = (): JSX.Element => {
                                   notification.articleId;
                   console.log('[Follow Treasury Click] Navigating to article:', articleId);
                   if (articleId) {
-                    navigate(`/work/${articleId}`);
+                    startTransition(() => navigate(`/work/${articleId}`));
                   }
                 } else {
                   // First bracket is space name - navigate to the space
@@ -737,11 +737,11 @@ export const NotificationListSection = (): JSX.Element => {
                   console.log('[Follow Treasury Click] Space info:', { spaceNamespace, spaceId, articleUuid, articleId });
 
                   if (spaceNamespace) {
-                    navigate(`/treasury/${spaceNamespace}`);
+                    startTransition(() => navigate(`/treasury/${spaceNamespace}`));
                   } else if (articleUuid || articleId) {
                     // Fallback: if no space namespace, navigate to the article which shows the space
                     console.log('[Follow Treasury Click] No namespace, navigating to article instead');
-                    navigate(`/work/${articleUuid || articleId}`);
+                    startTransition(() => navigate(`/work/${articleUuid || articleId}`));
                   } else {
                     console.warn('[Follow Treasury Click] No space namespace or article found! Extra:', notification.metadata?.extra);
                   }
@@ -773,14 +773,14 @@ export const NotificationListSection = (): JSX.Element => {
                                   notification.metadata?.extra?.articleId ||
                                   notification.articleId;
                   if (articleId) {
-                    navigate(`/work/${articleId}`);
+                    startTransition(() => navigate(`/work/${articleId}`));
                   }
                 } else if (isFirstBracket) {
                   // Click on username - navigate to user profile
                   const senderNamespace = notification.metadata?.senderNamespace ||
                                          notification.namespace;
                   if (senderNamespace) {
-                    navigate(`/u/${senderNamespace}`);
+                    startTransition(() => navigate(`/u/${senderNamespace}`));
                   }
                 } else if (isSpaceName) {
                   // Click on space name - find the corresponding space and navigate
@@ -788,7 +788,7 @@ export const NotificationListSection = (): JSX.Element => {
                   const clickedSpace = spaces.find((space: any) => space.name === linkText);
 
                   if (clickedSpace && clickedSpace.namespace) {
-                    navigate(`/treasury/${clickedSpace.namespace}`);
+                    startTransition(() => navigate(`/treasury/${clickedSpace.namespace}`));
                   } else {
                     console.warn('Could not find space namespace for:', linkText, spaces);
                     // Fallback to article
@@ -796,7 +796,7 @@ export const NotificationListSection = (): JSX.Element => {
                                     notification.metadata?.extra?.articleId ||
                                     notification.articleId;
                     if (articleId) {
-                      navigate(`/work/${articleId}`);
+                      startTransition(() => navigate(`/work/${articleId}`));
                     }
                   }
                 }
@@ -843,7 +843,7 @@ export const NotificationListSection = (): JSX.Element => {
                                         notification.metadata?.extra?.namespace;
                   console.log('[Follow Click] Using space namespace:', spaceNamespace);
                   if (spaceNamespace) {
-                    navigate(`/treasury/${spaceNamespace}`);
+                    startTransition(() => navigate(`/treasury/${spaceNamespace}`));
                   } else {
                     console.warn('[Follow Click] No space namespace found in metadata. Checking alternative locations...');
                     console.log('[Follow Click] Full extra object:', JSON.stringify(notification.metadata?.extra, null, 2));
@@ -852,7 +852,7 @@ export const NotificationListSection = (): JSX.Element => {
                   const senderNamespace = notification.metadata?.senderNamespace ||
                                          notification.namespace;
                   if (senderNamespace) {
-                    navigate(`/u/${senderNamespace}`);
+                    startTransition(() => navigate(`/u/${senderNamespace}`));
                   }
                 }
               }}
@@ -885,7 +885,7 @@ export const NotificationListSection = (): JSX.Element => {
                   e.stopPropagation();
                   const articleId = notification.articleId || notification.metadata?.targetUuid || notification.metadata?.targetId;
                   if (articleId) {
-                    navigate(`/work/${articleId}`);
+                    startTransition(() => navigate(`/work/${articleId}`));
                   }
                 }}
                 title="Click to view content"
@@ -903,7 +903,7 @@ export const NotificationListSection = (): JSX.Element => {
                   e.stopPropagation();
                   const namespace = notification.namespace || notification.metadata?.senderNamespace;
                   if (namespace) {
-                    navigate(`/u/${namespace}`);
+                    startTransition(() => navigate(`/u/${namespace}`));
                   }
                 }}
                 title="Click to view user profile"
@@ -926,7 +926,7 @@ export const NotificationListSection = (): JSX.Element => {
 
                   if (articleId) {
                     // 使用新的评论参数格式打开评论区
-                    navigate(`/work/${articleId}?comments=open`);
+                    startTransition(() => navigate(`/work/${articleId}?comments=open`));
                   }
                 }}
                 title="Click to view comment"
@@ -944,7 +944,7 @@ export const NotificationListSection = (): JSX.Element => {
                   e.stopPropagation();
                   const articleId = notification.articleId || notification.metadata?.targetUuid || notification.metadata?.targetId;
                   if (articleId) {
-                    navigate(`/work/${articleId}`);
+                    startTransition(() => navigate(`/work/${articleId}`));
                   }
                 }}
                 title="Click to view content"
@@ -962,7 +962,7 @@ export const NotificationListSection = (): JSX.Element => {
                   e.stopPropagation();
                   const senderNamespace = notification.metadata?.senderNamespace;
                   if (senderNamespace) {
-                    navigate(`/u/${senderNamespace}`);
+                    startTransition(() => navigate(`/u/${senderNamespace}`));
                   }
                 }}
                 title="Click to view user profile"
@@ -981,7 +981,7 @@ export const NotificationListSection = (): JSX.Element => {
                 e.stopPropagation();
                 const articleId = notification.articleId || notification.metadata?.targetUuid || notification.metadata?.targetId;
                 if (articleId) {
-                  navigate(`/work/${articleId}`);
+                  startTransition(() => navigate(`/work/${articleId}`));
                 }
               }}
               title="Click to view content"
diff --git a/src/screens/Space/sections/SpaceContentSection.tsx b/src/screens/Space/sections/SpaceContentSection.tsx
index 319cdeb..77b6325 100644
--- a/src/screens/Space/sections/SpaceContentSection.tsx
+++ b/src/screens/Space/sections/SpaceContentSection.tsx
@@ -38,6 +38,7 @@ const SpaceInfoSection = ({
   authorName,
   authorAvatar,
   authorNamespace,
+  spaceNamespace,
   spaceDescription,
   spaceCoverUrl,
   spaceFaceUrl,
@@ -54,6 +55,7 @@ const SpaceInfoSection = ({
   onEdit,
   onImportCSV,
   onSubscriberCountLoaded,
+  onSubscriptionChange,
 }: {
   spaceName: string;
   treasureCount: number;
@@ -61,6 +63,7 @@ const SpaceInfoSection = ({
   authorName: string;
   authorAvatar?: string;
   authorNamespace?: string;
+  spaceNamespace?: string;
   spaceDescription?: string;
   spaceCoverUrl?: string;
   spaceFaceUrl?: string;
@@ -77,6 +80,7 @@ const SpaceInfoSection = ({
   onEdit?: () => void;
   onImportCSV?: () => void;
   onSubscriberCountLoaded?: (count: number) => void;
+  onSubscriptionChange?: (isSubscribed: boolean) => void;
 }): JSX.Element => {
   const canEdit = isOwner;
   const [showShareDropdown, setShowShareDropdown] = useState(false);
@@ -219,17 +223,14 @@ const SpaceInfoSection = ({
             <SubscribeButton
               spaceId={spaceId}
               spaceName={spaceName}
+              spaceNamespace={spaceNamespace}
               size="medium"
               variant="default"
               subscriptionType="space"
+              initialIsSubscribed={isFollowing}
+              initialSubscriberCount={subscriberCount}
               onSubscriberCountLoaded={onSubscriberCountLoaded}
-              onSubscriptionChange={(isSubscribed) => {
-                if (isSubscribed) {
-                  onFollow();
-                } else {
-                  onUnfollow();
-                }
-              }}
+              onSubscriptionChange={onSubscriptionChange}
             />
           )}
 
@@ -670,18 +671,36 @@ export const SpaceContentSection = (): JSX.Element => {
       return;
     }
     try {
-      await AuthService.followSpace(spaceId);
-      setIsFollowing(true);
-      showToast('Subscribed to space', 'success');
+      // Get user's email for subscription
+      const userInfo = await AuthService.getUserInfo();
 
-      // Update cache with new subscription status
-      const cacheKey = namespace ? `namespace:${decodeURIComponent(spaceIdentifier || '')}` : `category:${decodeURIComponent(spaceIdentifier || '')}`;
-      const cached = spaceFetchCache.get(cacheKey);
-      if (cached && cached.data) {
-        spaceFetchCache.set(cacheKey, {
-          ...cached,
-          data: { ...cached.data, isFollowing: true }
-        });
+      if (!userInfo.email || userInfo.email.trim() === '') {
+        showToast('Please set your email in profile to subscribe to spaces', 'error');
+        return;
+      }
+
+      // Use new email subscription API for spaces
+      const success = await AuthService.emailSubscribe({
+        email: userInfo.email,
+        targetId: spaceId,
+        targetType: 2 // 2 for space
+      });
+
+      if (success) {
+        setIsFollowing(true);
+        showToast(`Successfully subscribed to space! Notifications will be sent to ${userInfo.email}`, 'success');
+
+        // Update cache with new subscription status
+        const cacheKey = namespace ? `namespace:${decodeURIComponent(spaceIdentifier || '')}` : `category:${decodeURIComponent(spaceIdentifier || '')}`;
+        const cached = spaceFetchCache.get(cacheKey);
+        if (cached && cached.data) {
+          spaceFetchCache.set(cacheKey, {
+            ...cached,
+            data: { ...cached.data, isFollowing: true }
+          });
+        }
+      } else {
+        showToast('Failed to subscribe to space', 'error');
       }
     } catch (err) {
       console.error('Failed to subscribe to space:', err);
@@ -700,18 +719,37 @@ export const SpaceContentSection = (): JSX.Element => {
       return;
     }
     try {
-      await AuthService.followSpace(spaceId); // Same API toggles subscribe/unsubscribe
-      setIsFollowing(false);
-      showToast('Unsubscribed from space', 'success');
+      // TODO: Implement unsubscribe API when backend provides it
+      // For now, we'll use the same emailSubscribe API if it toggles
+      const userInfo = await AuthService.getUserInfo();
 
-      // Update cache with new subscription status
-      const cacheKey = namespace ? `namespace:${decodeURIComponent(spaceIdentifier || '')}` : `category:${decodeURIComponent(spaceIdentifier || '')}`;
-      const cached = spaceFetchCache.get(cacheKey);
-      if (cached && cached.data) {
-        spaceFetchCache.set(cacheKey, {
-          ...cached,
-          data: { ...cached.data, isFollowing: false }
-        });
+      if (!userInfo.email || userInfo.email.trim() === '') {
+        showToast('Unable to unsubscribe - email not found', 'error');
+        return;
+      }
+
+      // Try using the same API - if it toggles, this should unsubscribe
+      const success = await AuthService.emailSubscribe({
+        email: userInfo.email,
+        targetId: spaceId,
+        targetType: 2 // 2 for space
+      });
+
+      if (success) {
+        setIsFollowing(false);
+        showToast('Unsubscribed from space', 'success');
+
+        // Update cache with new subscription status
+        const cacheKey = namespace ? `namespace:${decodeURIComponent(spaceIdentifier || '')}` : `category:${decodeURIComponent(spaceIdentifier || '')}`;
+        const cached = spaceFetchCache.get(cacheKey);
+        if (cached && cached.data) {
+          spaceFetchCache.set(cacheKey, {
+            ...cached,
+            data: { ...cached.data, isFollowing: false }
+          });
+        }
+      } else {
+        showToast('Failed to unsubscribe from space', 'error');
       }
     } catch (err) {
       console.error('Failed to unsubscribe from space:', err);
@@ -1103,6 +1141,7 @@ export const SpaceContentSection = (): JSX.Element => {
         authorName={spaceInfo?.authorName || 'Anonymous'}
         authorAvatar={spaceInfo?.authorAvatar}
         authorNamespace={spaceInfo?.authorNamespace}
+        spaceNamespace={namespace || spaceIdentifier}
         spaceDescription={spaceInfo?.description}
         spaceCoverUrl={spaceInfo?.coverUrl}
         spaceFaceUrl={spaceInfo?.faceUrl}
@@ -1119,6 +1158,15 @@ export const SpaceContentSection = (): JSX.Element => {
         onEdit={handleEditSpace}
         onImportCSV={isOwner ? () => setShowImportModal(true) : undefined}
         onSubscriberCountLoaded={setSubscriberCount}
+        onSubscriptionChange={(isSubscribed) => {
+          // Update local state only - SubscribeButton already handled the API call
+          setIsFollowing(isSubscribed);
+          if (isSubscribed) {
+            setSubscriberCount(prev => (prev || 0) + 1);
+          } else {
+            setSubscriberCount(prev => Math.max((prev || 0) - 1, 0));
+          }
+        }}
       />
 
       {/* Articles Grid */}
diff --git a/src/screens/UserProfile/UserProfile.tsx b/src/screens/UserProfile/UserProfile.tsx
index b23f39d..2733af9 100644
--- a/src/screens/UserProfile/UserProfile.tsx
+++ b/src/screens/UserProfile/UserProfile.tsx
@@ -1,8 +1,15 @@
-import React, { useEffect } from "react";
+import React, { useEffect, Suspense, lazy, startTransition } from "react";
 import { useParams, useNavigate, useLocation } from "react-router-dom";
 import { useUser } from "../../contexts/UserContext";
 import { PageWrapper } from "../../components/layout/PageWrapper";
-import { UserProfileContent } from "./sections/UserProfileContent";
+import { ArticleListSkeleton } from "../../components/ui/skeleton";
+
+// Lazy load the heavy UserProfileContent component
+const UserProfileContent = lazy(() =>
+  import("./sections/UserProfileContent").then(m => ({
+    default: m.UserProfileContent
+  }))
+);
 
 export const UserProfile = (): JSX.Element => {
   const { namespace } = useParams<{ namespace: string }>();
@@ -18,7 +25,7 @@ export const UserProfile = (): JSX.Element => {
   useEffect(() => {
     // If viewing own namespace, redirect to /my-treasury
     if (user && namespace === user.namespace) {
-      navigate('/my-treasury', { replace: true });
+      startTransition(() => navigate('/my-treasury', { replace: true }));
     }
   }, [user, namespace, navigate]);
 
@@ -34,7 +41,9 @@ export const UserProfile = (): JSX.Element => {
 
   return (
     <PageWrapper>
-      <UserProfileContent namespace={namespace} />
+      <Suspense fallback={<ArticleListSkeleton />}>
+        <UserProfileContent namespace={namespace} />
+      </Suspense>
     </PageWrapper>
   );
 };
\ No newline at end of file
diff --git a/src/screens/UserProfile/sections/UserProfileContent.tsx b/src/screens/UserProfile/sections/UserProfileContent.tsx
index a6fe411..f269b80 100644
--- a/src/screens/UserProfile/sections/UserProfileContent.tsx
+++ b/src/screens/UserProfile/sections/UserProfileContent.tsx
@@ -548,10 +548,13 @@ export const UserProfileContent: React.FC<UserProfileContentProps> = ({ namespac
 
           {/* Action buttons - Subscribe and Share on the same line */}
           <div className="flex items-center gap-3">
-            {!isOwnProfile && userInfo?.id && (
+            {!isOwnProfile && userInfo?.id && userInfo.hasOwnProperty('isFollowed') && (
               <SubscribeButton
                 authorUserId={userInfo.id}
                 authorName={userInfo.username}
+                authorNamespace={namespace}
+                initialIsSubscribed={userInfo.isFollowed}
+                initialSubscriberCount={userInfo.followerCount}
                 size="medium"
                 variant="default"
                 showSubscriberCount={true}
diff --git a/src/services/authService.ts b/src/services/authService.ts
index 39a44ac..d83a6e0 100644
--- a/src/services/authService.ts
+++ b/src/services/authService.ts
@@ -621,6 +621,7 @@ export class AuthService {
         };
       }
 
+      console.log('🔵 AuthService.getUserInfo() calling /client/user/userInfo');
       const response: ApiUserInfoResponse = await apiRequest('/client/user/userInfo', requestOptions);
 
       // Validate API response format
@@ -806,9 +807,9 @@ export class AuthService {
   }
 
   /**
-   * 批量上传评论图片
-   * @param files 图片文件数组
-   * @returns Promise<string[]> 图片URL数组
+   * Batch upload comment images
+   * @param files Array of image files
+   * @returns Promise<string[]> Array of image URLs
    */
   static async uploadCommentImages(files: File[]): Promise<string[]> {
     if (files.length === 0) {
@@ -816,7 +817,7 @@ export class AuthService {
     }
 
     try {
-      // 并行上传所有图片
+      // Upload all images in parallel
       const uploadPromises = files.map(async (file) => {
         const result = await this.uploadImage(file);
         return result.url;
@@ -1098,12 +1099,13 @@ export class AuthService {
   /**
    * Get user detail info - by namespace
    * Get user home info by namespace
-   * Public endpoint - does not require authentication
+   * Requires authentication to get complete user data
    */
   static async getUserHomeInfo(namespace: string): Promise<UserHomeResponse> {
+    console.log('🔵 AuthService.getUserHomeInfo() calling /client/userHome/userInfo with namespace:', namespace);
     const response = await apiRequest(`/client/userHome/userInfo?namespace=${encodeURIComponent(namespace)}`, {
       method: 'GET',
-      requiresAuth: false,
+      requiresAuth: true,
     });
     // User information is in response.data
     return response.data;
@@ -1112,8 +1114,7 @@ export class AuthService {
   /**
    * Get other user's treasury information (public data) - by namespace
    * Get other user's treasury information (public data) - by namespace
-   * NOTE: We explicitly exclude the Authorization header to ensure we get
-   * the target user's data, not the logged-in user's data.
+   * Now requires authentication to access user data
    */
   static async getOtherUserTreasuryInfoByNamespace(namespace: string): Promise<{
     bio: string;
@@ -1143,25 +1144,15 @@ export class AuthService {
     username: string;
     walletAddress: string;
   }> {
-    // Make a direct fetch call without the Authorization header
-    // This ensures we get the target user's data, not the logged-in user's
-    const API_BASE_URL = import.meta.env.VITE_API_BASE_URL || 'https://api-test.copus.network';
-    const url = `${API_BASE_URL}/client/userHome/userInfo?namespace=${encodeURIComponent(namespace)}`;
-
-    const response = await fetch(url, {
+    // This API should be publicly accessible for viewing other users' profiles
+    console.log('🔵 AuthService.getOtherUserTreasuryInfoByNamespace() calling /client/userHome/userInfo with namespace:', namespace);
+    const response = await apiRequest(`/client/userHome/userInfo?namespace=${encodeURIComponent(namespace)}`, {
       method: 'GET',
-      headers: {
-        'Content-Type': 'application/json',
-      },
+      requiresAuth: false, // Allow unauthenticated access to public user profiles
     });
 
-    if (!response.ok) {
-      throw new Error(`HTTP error! status: ${response.status}`);
-    }
-
-    const data = await response.json();
     // User information is in response.data
-    return data.data;
+    return response.data;
   }
 
   /**
@@ -1859,16 +1850,20 @@ export class AuthService {
    * @returns Array of followed users
    */
   static async getFollowedUsers(): Promise<Array<{
-    bio: string;
-    coverUrl: string;
-    faceUrl: string;
-    id: number;
-    namespace: string;
-    username: string;
+    bio?: string;
+    coverUrl?: string;
+    faceUrl?: string;
+    id?: number;
+    namespace?: string;
+    username?: string;
   }>> {
-    return apiRequest('/client/follow/followedUsers', {
+    const response = await apiRequest('/client/follow/followedUsers', {
       method: 'GET',
+      requiresAuth: true, // This endpoint returns personal following list
     });
+
+    // Handle nested response structure: {status: 1, msg: "success", data: [...]}
+    return response?.data || response || [];
   }
 
   /**
@@ -1876,37 +1871,41 @@ export class AuthService {
    * @returns Array of followed spaces
    */
   static async getFollowedSpaces(): Promise<Array<{
-    articleCount: number;
-    coverUrl: string;
-    data: Array<{
-      coverUrl: string;
-      targetUrl: string;
-      title: string;
+    articleCount?: number;
+    coverUrl?: string;
+    data?: Array<{
+      coverUrl?: string;
+      targetUrl?: string;
+      title?: string;
     }>;
-    description: string;
-    faceUrl: string;
-    followerCount: number;
-    id: number;
-    isAdmin: boolean;
-    isBind: boolean;
-    isFollowed: boolean;
-    name: string;
-    namespace: string;
-    seoDataByAi: string;
-    spaceType: number;
-    userInfo: {
-      bio: string;
-      coverUrl: string;
-      faceUrl: string;
-      id: number;
-      namespace: string;
-      username: string;
+    description?: string;
+    faceUrl?: string;
+    followerCount?: number;
+    id?: number;
+    isAdmin?: boolean;
+    isBind?: boolean;
+    isFollowed?: boolean;
+    name?: string;
+    namespace?: string;
+    seoDataByAi?: string;
+    spaceType?: number;
+    userInfo?: {
+      bio?: string;
+      coverUrl?: string;
+      faceUrl?: string;
+      id?: number;
+      namespace?: string;
+      username?: string;
     };
-    visibility: number;
+    visibility?: number;
   }>> {
-    return apiRequest('/client/follow/myFollowedSpaces', {
+    const response = await apiRequest('/client/follow/myFollowedSpaces', {
       method: 'GET',
+      requiresAuth: true, // This endpoint returns personal following list
     });
+
+    // Handle nested response structure: {status: 1, msg: "success", data: [...]}
+    return response?.data || response || [];
   }
 
   /**
@@ -2036,17 +2035,54 @@ export class AuthService {
     });
   }
 
+
   /**
-   * Get list of followed spaces
-   * API: GET /client/article/space/myFollowedSpaces
+   * Email subscribe to authors/spaces
+   * @param email - User email address
+   * @param targetId - Target user/space ID
+   * @param targetType - 1 for user, 2 for space
    */
-  static async getFollowedSpaces(): Promise<any> {
-    return apiRequest(`/client/article/space/myFollowedSpaces`, {
-      method: 'GET',
-      requiresAuth: true,
-    });
+  static async emailSubscribe(params: {
+    email: string;
+    targetId: number;
+    targetType: number; // 1: user, 2: space
+  }): Promise<boolean> {
+    try {
+      console.log('🔵 EmailSubscribe API call with params:', params);
+
+      const response = await apiRequest('/client/follow/emailSubscribe', {
+        method: 'POST',
+        body: JSON.stringify(params),
+        requiresAuth: false, // Allow unauthenticated users to subscribe via email
+      });
+
+      console.log('🔵 EmailSubscribe API response:', response);
+
+      // API returns {status: 1, msg: "success", data: boolean} for success
+      // The data field indicates the final subscription state, not the operation success
+      // Any response with status === 1 means the operation was successful
+      if (response && response.status === 1) {
+        return true;
+      }
+
+      // Also check for direct boolean response (backward compatibility)
+      if (response === true) {
+        return true;
+      }
+
+      return false;
+    } catch (error) {
+      console.error('🔥 Email subscribe failed:', error);
+      console.error('🔥 Error details:', {
+        message: error instanceof Error ? error.message : 'Unknown error',
+        params,
+        timestamp: new Date().toISOString()
+      });
+      throw error;
+    }
   }
 
+
   /**
    * Get articles from followed spaces (paginated)
    * API: GET /client/article/space/pageMyFollowedArticle
diff --git a/src/services/subscriptionService.ts b/src/services/subscriptionService.ts
index 79c8d85..a243d2a 100644
--- a/src/services/subscriptionService.ts
+++ b/src/services/subscriptionService.ts
@@ -56,30 +56,9 @@ class SubscriptionService {
     subscriberCount: number;
   }> {
     try {
-      // Try to get real subscription status from user API if we have the namespace
-      const currentUser = this.getCurrentUserNamespace();
-      if (currentUser) {
-        try {
-          const { AuthService } = await import('./authService');
-          const userInfo = await AuthService.getOtherUserTreasuryInfoByNamespace(currentUser);
-
-          // For viewing another user's profile, we need to get their info by ID
-          // This is a simplified approach - in real app we'd need proper namespace lookup
-          const stats = this.mockAuthorStats[authorUserId] || {
-            totalSubscribers: Math.floor(Math.random() * 500) + 50,
-            weeklyGrowth: Math.floor(Math.random() * 20) + 5,
-            growthRate: Math.round((Math.random() * 5 + 3) * 10) / 10,
-            activeSubscribers: 0
-          };
-
-          return {
-            isSubscribed: userInfo?.isFollowed || false,
-            subscriberCount: userInfo?.followerCount || stats.totalSubscribers
-          };
-        } catch (apiError) {
-          console.warn('Failed to fetch API subscription status, falling back to mock:', apiError);
-        }
-      }
+      // Removed unnecessary API call that was causing duplicate requests
+      // The logic was incorrect - calling current user's info to check if following another user
+      console.log('🟢 checkSubscriptionStatus: Using fallback mock implementation for authorUserId:', authorUserId);
 
       // Fallback to existing mock implementation
       await new Promise(resolve => setTimeout(resolve, 150));
@@ -114,12 +93,14 @@ class SubscriptionService {
     subscriberCount: number;
   }> {
     try {
-      const { AuthService } = await import('./authService');
-      const userInfo = await AuthService.getOtherUserTreasuryInfoByNamespace(namespace);
+      // Removed API call to prevent duplicate requests
+      // This method was calling the same API unnecessarily
+      console.log('🟢 checkSubscriptionStatusByNamespace: Using fallback for namespace:', namespace);
 
+      // Return mock data to prevent breaking functionality
       return {
-        isSubscribed: userInfo?.isFollowed || false,
-        subscriberCount: userInfo?.followerCount || 0
+        isSubscribed: false,
+        subscriberCount: 0
       };
     } catch (error) {
       console.error('Failed to check subscription status by namespace:', error);
diff --git a/src/space.ts b/src/space.ts
new file mode 100644
index 0000000..5775271
--- /dev/null
+++ b/src/space.ts
@@ -0,0 +1,96 @@
+// 空间付费相关类型定义
+
+export type PaymentType = 'free' | 'paid' | 'hybrid';
+export type CurrencyType = 'USDT' | 'USDC';
+export type PurchaseStatus = 'pending' | 'completed' | 'failed';
+
+// 空间付费配置
+export interface SpacePaymentConfig {
+  paymentType: PaymentType;
+  unlockPrice?: number;
+  currency?: CurrencyType;
+}
+
+// 空间付费信息
+export interface SpacePaymentInfo {
+  paymentType: PaymentType;
+  unlockPrice: number;
+  currency: CurrencyType;
+  userHasAccess: boolean;
+  freeContentCount: number;
+  paidContentCount: number;
+  totalRevenue?: number;
+  subscriberCount?: number;
+}
+
+// 内容权限
+export interface ContentPermission {
+  articleId: number;
+  isPaidContent: boolean;
+  previewLength?: number; // 免费预览字数
+}
+
+// 批量设置内容权限
+export interface BatchContentPermissions {
+  spaceId: number;
+  permissions: ContentPermission[];
+}
+
+// 空间购买记录
+export interface SpacePurchase {
+  id: number;
+  spaceId: number;
+  spaceName: string;
+  userId: number;
+  purchasePrice: number;
+  purchaseCurrency: CurrencyType;
+  transactionHash?: string;
+  paymentNetwork?: string;
+  walletAddress?: string;
+  purchaseDate: string;
+  status: PurchaseStatus;
+}
+
+// 空间支付请求数据
+export interface SpacePaymentRequest {
+  spaceId: number;
+  network: string;
+  asset: string;
+  userAddress: string;
+}
+
+// 空间支付响应数据
+export interface SpacePaymentResponse {
+  eip712Data?: any;
+  paymentInfo?: {
+    network: string;
+    asset: string;
+    amount: string;
+    recipient: string;
+    contractAddress: string;
+    resourceUrl: string;
+  };
+}
+
+// 用于 x402 支付的空间信息
+export interface SpaceX402PaymentInfo {
+  payTo: string;
+  asset: string;
+  amount: string;
+  network: string;
+  resource: string;
+}
+
+// 空间收益统计
+export interface SpaceRevenueStats {
+  spaceId: number;
+  totalRevenue: number;
+  totalSubscribers: number;
+  monthlyRevenue: number;
+  monthlySubscribers: number;
+  revenueHistory: Array<{
+    month: string;
+    revenue: number;
+    subscribers: number;
+  }>;
+}
\ No newline at end of file
diff --git a/src/utils/cacheManager.ts b/src/utils/cacheManager.ts
new file mode 100644
index 0000000..08be83c
--- /dev/null
+++ b/src/utils/cacheManager.ts
@@ -0,0 +1,178 @@
+/**
+ * 🔍 SEARCH: cache-manager-system
+ * Comprehensive caching system for performance optimization
+ */
+
+export interface CacheItem<T> {
+  data: T;
+  timestamp: number;
+  expiresAt: number;
+  key: string;
+}
+
+export interface CacheConfig {
+  ttl: number; // Time to live in milliseconds
+  maxSize: number; // Maximum number of items
+}
+
+export class CacheManager {
+  private cache: Map<string, CacheItem<any>>;
+  private config: CacheConfig;
+
+  constructor(config: CacheConfig = { ttl: 5 * 60 * 1000, maxSize: 100 }) {
+    this.cache = new Map();
+    this.config = config;
+  }
+
+  /**
+   * Set cache item with automatic expiration
+   */
+  set<T>(key: string, data: T, customTTL?: number): void {
+    const now = Date.now();
+    const ttl = customTTL || this.config.ttl;
+    const item: CacheItem<T> = {
+      data,
+      timestamp: now,
+      expiresAt: now + ttl,
+      key,
+    };
+
+    // Remove expired items if we're at max capacity
+    if (this.cache.size >= this.config.maxSize) {
+      this.cleanup();
+    }
+
+    this.cache.set(key, item);
+  }
+
+  /**
+   * Get cache item if not expired
+   */
+  get<T>(key: string): T | null {
+    const item = this.cache.get(key);
+    if (!item) return null;
+
+    const now = Date.now();
+    if (now > item.expiresAt) {
+      this.cache.delete(key);
+      return null;
+    }
+
+    return item.data as T;
+  }
+
+  /**
+   * Check if key exists and is not expired
+   */
+  has(key: string): boolean {
+    const item = this.cache.get(key);
+    if (!item) return false;
+
+    if (Date.now() > item.expiresAt) {
+      this.cache.delete(key);
+      return false;
+    }
+
+    return true;
+  }
+
+  /**
+   * Remove specific key
+   */
+  delete(key: string): void {
+    this.cache.delete(key);
+  }
+
+  /**
+   * Clear all cache
+   */
+  clear(): void {
+    this.cache.clear();
+  }
+
+  /**
+   * Remove expired items
+   */
+  cleanup(): void {
+    const now = Date.now();
+    for (const [key, item] of this.cache.entries()) {
+      if (now > item.expiresAt) {
+        this.cache.delete(key);
+      }
+    }
+  }
+
+  /**
+   * Get cache statistics
+   */
+  stats(): { size: number; maxSize: number; hitRate: number } {
+    return {
+      size: this.cache.size,
+      maxSize: this.config.maxSize,
+      hitRate: 0, // Would need to track hits/misses for accurate rate
+    };
+  }
+}
+
+// Create singleton instances for different data types
+export const articleCache = new CacheManager({
+  ttl: 10 * 60 * 1000, // 10 minutes for articles
+  maxSize: 50,
+});
+
+export const imageCache = new CacheManager({
+  ttl: 30 * 60 * 1000, // 30 minutes for images
+  maxSize: 200,
+});
+
+export const userCache = new CacheManager({
+  ttl: 5 * 60 * 1000, // 5 minutes for user data
+  maxSize: 30,
+});
+
+/**
+ * 🔍 SEARCH: cache-with-api
+ * Cache-aware API request wrapper
+ */
+export const cacheWithApi = async <T>(
+  key: string,
+  apiCall: () => Promise<T>,
+  cache: CacheManager = articleCache,
+  customTTL?: number
+): Promise<T> => {
+  // Try cache first
+  const cached = cache.get<T>(key);
+  if (cached !== null) {
+    console.log('📦 Cache hit for:', key);
+    return cached;
+  }
+
+  // Make API call and cache result
+  console.log('🌐 Cache miss, making API call for:', key);
+  try {
+    const data = await apiCall();
+    cache.set(key, data, customTTL);
+    return data;
+  } catch (error) {
+    console.error('❌ API call failed for:', key, error);
+    throw error;
+  }
+};
+
+/**
+ * 🔍 SEARCH: cache-preloader
+ * Preload common data
+ */
+export const preloadCommonData = () => {
+  // Auto-cleanup every 5 minutes
+  setInterval(() => {
+    articleCache.cleanup();
+    imageCache.cleanup();
+    userCache.cleanup();
+  }, 5 * 60 * 1000);
+};
+
+// Initialize preloading when module loads
+if (typeof window !== 'undefined') {
+  preloadCommonData();
+}
\ No newline at end of file
diff --git a/src/utils/cssOptimizer.ts b/src/utils/cssOptimizer.ts
new file mode 100644
index 0000000..a61d866
--- /dev/null
+++ b/src/utils/cssOptimizer.ts
@@ -0,0 +1,256 @@
+/**
+ * 🔍 SEARCH: css-optimizer-system
+ * CSS loading optimization for better Critical Rendering Path
+ */
+
+interface CSSResource {
+  href: string;
+  media?: string;
+  priority: 'critical' | 'high' | 'low';
+  loaded: boolean;
+}
+
+class CSSOptimizer {
+  private loadedStylesheets: Set<string> = new Set();
+  private pendingStyles: CSSResource[] = [];
+
+  /**
+   * Load CSS asynchronously to avoid render blocking
+   */
+  loadStylesheetAsync(href: string, media: string = 'all', priority: 'critical' | 'high' | 'low' = 'low'): Promise<void> {
+    return new Promise((resolve, reject) => {
+      // Skip if already loaded
+      if (this.loadedStylesheets.has(href)) {
+        resolve();
+        return;
+      }
+
+      const link = document.createElement('link');
+      link.rel = 'preload';
+      link.as = 'style';
+      link.href = href;
+      link.media = 'print'; // Load as print media to avoid blocking
+      link.onload = () => {
+        // Switch to the correct media after loading
+        link.media = media;
+        link.rel = 'stylesheet';
+        this.loadedStylesheets.add(href);
+        resolve();
+      };
+      link.onerror = reject;
+
+      // Insert based on priority
+      if (priority === 'critical') {
+        document.head.insertBefore(link, document.head.firstChild);
+      } else {
+        document.head.appendChild(link);
+      }
+    });
+  }
+
+  /**
+   * Inline critical CSS for above-the-fold content
+   */
+  inlineCriticalCSS(cssContent: string): void {
+    const style = document.createElement('style');
+    style.textContent = cssContent;
+    style.setAttribute('data-critical', 'true');
+
+    // Insert at the beginning of head for highest priority
+    document.head.insertBefore(style, document.head.firstChild);
+  }
+
+  /**
+   * Extract critical CSS for the current page
+   */
+  extractCriticalCSS(): string {
+    // Define critical CSS that's needed for initial render
+    return `
+      /* Critical CSS for above-the-fold content */
+      .bg-\\[linear-gradient\\(0deg\\2c rgba\\(224\\2c 224\\2c 224\\2c 0\\.18\\)_0\\%\\2c rgba\\(224\\2c 224\\2c 224\\2c 0\\.18\\)_100\\%\\)\\2c linear-gradient\\(0deg\\2c rgba\\(255\\2c 255\\2c 255\\2c 1\\)_0\\%\\2c rgba\\(255\\2c 255\\2c 255\\2c 1\\)_100\\%\\)\\] {
+        background: linear-gradient(0deg,rgba(224,224,224,0.18) 0%,rgba(224,224,224,0.18) 100%),linear-gradient(0deg,rgba(255,255,255,1) 0%,rgba(255,255,255,1) 100%);
+      }
+
+      /* Critical layout classes */
+      .w-full { width: 100%; }
+      .min-h-screen { min-height: 100vh; }
+      .flex { display: flex; }
+      .items-center { align-items: center; }
+      .justify-center { justify-content: center; }
+      .opacity-0 { opacity: 0; }
+      .opacity-100 { opacity: 1; }
+      .transition-opacity { transition-property: opacity; }
+      .duration-300 { transition-duration: 300ms; }
+
+      /* Header height to prevent layout shift */
+      .pt-\\[50px\\] { padding-top: 50px; }
+
+      @media (min-width: 1024px) {
+        .lg\\:ml-\\[310px\\] { margin-left: 310px; }
+        .lg\\:mr-\\[40px\\] { margin-right: 40px; }
+        .lg\\:pt-\\[60px\\] { padding-top: 60px; }
+      }
+    `;
+  }
+
+  /**
+   * Optimize font loading
+   */
+  optimizeFontLoading(): void {
+    // Preload critical fonts
+    const criticalFonts = [
+      // Add any critical fonts here
+    ];
+
+    criticalFonts.forEach(fontUrl => {
+      const link = document.createElement('link');
+      link.rel = 'preload';
+      link.as = 'font';
+      link.type = 'font/woff2';
+      link.crossOrigin = 'anonymous';
+      link.href = fontUrl;
+      document.head.appendChild(link);
+    });
+
+    // Apply font-display: swap to avoid invisible text
+    const style = document.createElement('style');
+    style.textContent = `
+      @font-face {
+        font-family: 'Lato';
+        font-display: swap;
+      }
+
+      /* Ensure text is visible during webfont load */
+      body {
+        font-display: swap;
+      }
+    `;
+    document.head.appendChild(style);
+  }
+
+  /**
+   * Defer non-critical CSS loading
+   */
+  deferNonCriticalCSS(): void {
+    // Wait for the page to load before loading non-critical styles
+    if (document.readyState === 'complete') {
+      this.loadNonCriticalStyles();
+    } else {
+      window.addEventListener('load', () => {
+        this.loadNonCriticalStyles();
+      });
+    }
+  }
+
+  /**
+   * Load non-critical styles after page load
+   */
+  private loadNonCriticalStyles(): void {
+    // Load animation and enhancement CSS after main content
+    const nonCriticalStyles = [
+      // Add any non-critical stylesheets here
+    ];
+
+    nonCriticalStyles.forEach(href => {
+      this.loadStylesheetAsync(href, 'all', 'low');
+    });
+  }
+
+  /**
+   * Remove unused CSS on the fly
+   */
+  removeUnusedCSS(): void {
+    // This is a simplified version - in production you'd use a tool like PurgeCSS
+    const unusedSelectors = [
+      // Add selectors that are definitely not used on current page
+    ];
+
+    // Find and disable unused style rules (development and test only)
+    if (process.env.NODE_ENV !== 'production') {
+      unusedSelectors.forEach(selector => {
+        const rules = document.styleSheets;
+        for (let i = 0; i < rules.length; i++) {
+          try {
+            const cssRules = rules[i].cssRules || rules[i].rules;
+            if (cssRules) {
+              for (let j = 0; j < cssRules.length; j++) {
+                const rule = cssRules[j] as CSSStyleRule;
+                if (rule.selectorText && rule.selectorText.includes(selector)) {
+                  rule.style.display = 'none';
+                }
+              }
+            }
+          } catch (e) {
+            // Cross-origin stylesheets can't be accessed
+          }
+        }
+      });
+    }
+  }
+
+  /**
+   * Initialize CSS optimization
+   */
+  init(): void {
+    if (typeof window === 'undefined') return;
+
+    // Inline critical CSS immediately
+    const criticalCSS = this.extractCriticalCSS();
+    this.inlineCriticalCSS(criticalCSS);
+
+    // Optimize font loading
+    this.optimizeFontLoading();
+
+    // Defer non-critical CSS
+    this.deferNonCriticalCSS();
+
+    // Set up performance monitoring
+    this.monitorCSSPerformance();
+  }
+
+  /**
+   * Monitor CSS loading performance
+   */
+  private monitorCSSPerformance(): void {
+    if ('performance' in window && window.performance.getEntriesByType) {
+      setTimeout(() => {
+        const cssEntries = window.performance.getEntriesByType('resource')
+          .filter(entry => entry.name.endsWith('.css'));
+
+        const totalCSSTime = cssEntries.reduce((total, entry) => {
+          return total + (entry.responseEnd - entry.startTime);
+        }, 0);
+
+        if (process.env.NODE_ENV !== 'production') {
+          console.log(`📊 CSS Performance: ${cssEntries.length} stylesheets loaded in ${totalCSSTime.toFixed(2)}ms`);
+        }
+      }, 2000);
+    }
+  }
+
+  /**
+   * Get CSS optimization statistics
+   */
+  getStats(): { loaded: number; pending: number; loadTime: number } {
+    return {
+      loaded: this.loadedStylesheets.size,
+      pending: this.pendingStyles.length,
+      loadTime: 0 // Would track actual load times in production
+    };
+  }
+}
+
+// Create singleton instance
+export const cssOptimizer = new CSSOptimizer();
+
+// Auto-initialize
+if (typeof window !== 'undefined') {
+  // Initialize as early as possible
+  if (document.readyState === 'loading') {
+    document.addEventListener('DOMContentLoaded', () => {
+      cssOptimizer.init();
+    });
+  } else {
+    cssOptimizer.init();
+  }
+}
\ No newline at end of file
diff --git a/src/utils/resourcePreloader.ts b/src/utils/resourcePreloader.ts
new file mode 100644
index 0000000..aa3e536
--- /dev/null
+++ b/src/utils/resourcePreloader.ts
@@ -0,0 +1,260 @@
+/**
+ * 🔍 SEARCH: resource-preloader-system
+ * Intelligent resource preloading system for better performance
+ */
+
+interface PreloadOptions {
+  priority?: 'high' | 'low';
+  crossOrigin?: 'anonymous' | 'use-credentials';
+  as?: 'script' | 'style' | 'image' | 'font' | 'fetch';
+}
+
+interface PreloadedResource {
+  url: string;
+  type: string;
+  loaded: boolean;
+  element?: HTMLLinkElement | HTMLImageElement;
+}
+
+class ResourcePreloader {
+  private preloadedResources: Map<string, PreloadedResource> = new Map();
+  private criticalImages: Set<string> = new Set();
+  private routeComponents: Map<string, () => Promise<any>> = new Map();
+
+  /**
+   * Preload critical images that are likely to be needed soon
+   */
+  preloadCriticalImages(imageUrls: string[]): void {
+    imageUrls.forEach(url => {
+      if (!this.criticalImages.has(url) && url && url !== 'undefined') {
+        this.criticalImages.add(url);
+        this.preloadImage(url, { priority: 'high' });
+      }
+    });
+  }
+
+  /**
+   * Preload an image resource
+   */
+  private preloadImage(url: string, options: PreloadOptions = {}): Promise<void> {
+    return new Promise((resolve, reject) => {
+      if (this.preloadedResources.has(url)) {
+        resolve();
+        return;
+      }
+
+      // Use link rel=preload for high priority images
+      if (options.priority === 'high') {
+        const link = document.createElement('link');
+        link.rel = 'preload';
+        link.as = 'image';
+        link.href = url;
+        link.onload = () => {
+          this.preloadedResources.set(url, { url, type: 'image', loaded: true, element: link });
+          resolve();
+        };
+        link.onerror = reject;
+        document.head.appendChild(link);
+      } else {
+        // Use Image() for low priority preloading
+        const img = new Image();
+        img.onload = () => {
+          this.preloadedResources.set(url, { url, type: 'image', loaded: true });
+          resolve();
+        };
+        img.onerror = reject;
+        img.src = url;
+      }
+    });
+  }
+
+  /**
+   * Preload JavaScript modules for upcoming routes
+   */
+  preloadRoute(routePath: string, moduleLoader: () => Promise<any>): void {
+    if (!this.routeComponents.has(routePath)) {
+      this.routeComponents.set(routePath, moduleLoader);
+
+      // Preload on idle
+      if ('requestIdleCallback' in window) {
+        requestIdleCallback(() => {
+          moduleLoader().catch(console.error);
+        });
+      } else {
+        // Fallback for browsers without requestIdleCallback
+        setTimeout(() => {
+          moduleLoader().catch(console.error);
+        }, 100);
+      }
+    }
+  }
+
+  /**
+   * Preload based on user interaction patterns
+   */
+  onUserInteraction(linkElement: HTMLAnchorElement): void {
+    const href = linkElement.getAttribute('href');
+    if (!href) return;
+
+    // Detect likely next routes based on hover/focus
+    if (href.startsWith('/work/')) {
+      // Preload Content page components
+      this.preloadRoute('/content', () => import('../screens/Content/Content'));
+    } else if (href.startsWith('/user/')) {
+      // Preload UserProfile components
+      this.preloadRoute('/user', () => import('../screens/UserProfile/UserProfile'));
+    } else if (href === '/curate') {
+      // Preload Create page components
+      this.preloadRoute('/curate', () => import('../screens/Create/Create'));
+    }
+  }
+
+  /**
+   * Preload fonts that are used throughout the app
+   */
+  preloadFonts(): void {
+    const fonts = [
+      // Add any custom fonts here
+      // 'https://fonts.gstatic.com/s/inter/v12/UcCO3FwrK3iLTeHuS_fvQtMwCp50KnMw2boKoduKmMEVuLyfAZ9hiJ-Ek-_EeA.woff2'
+    ];
+
+    fonts.forEach(fontUrl => {
+      if (!this.preloadedResources.has(fontUrl)) {
+        const link = document.createElement('link');
+        link.rel = 'preload';
+        link.as = 'font';
+        link.type = 'font/woff2';
+        link.crossOrigin = 'anonymous';
+        link.href = fontUrl;
+        document.head.appendChild(link);
+
+        this.preloadedResources.set(fontUrl, {
+          url: fontUrl,
+          type: 'font',
+          loaded: true,
+          element: link
+        });
+      }
+    });
+  }
+
+  /**
+   * Intelligent preloading based on viewport and user behavior
+   */
+  observeVisibleImages(): void {
+    if (!('IntersectionObserver' in window)) return;
+
+    const observer = new IntersectionObserver((entries) => {
+      entries.forEach(entry => {
+        if (entry.isIntersecting) {
+          const img = entry.target as HTMLImageElement;
+          const src = img.getAttribute('data-src') || img.src;
+
+          if (src && !this.preloadedResources.has(src)) {
+            this.preloadImage(src, { priority: 'low' });
+          }
+        }
+      });
+    }, {
+      rootMargin: '200px', // Start preloading 200px before visible
+      threshold: 0.1
+    });
+
+    // Observe all images on the page
+    document.querySelectorAll('img[data-src], img[src]').forEach(img => {
+      observer.observe(img);
+    });
+  }
+
+  /**
+   * Preload next page content on hover
+   */
+  setupHoverPreloading(): void {
+    let hoverTimeout: NodeJS.Timeout;
+
+    document.addEventListener('mouseover', (e) => {
+      const target = e.target as HTMLElement;
+      const link = target.closest('a[href]') as HTMLAnchorElement;
+
+      if (link && link.href) {
+        clearTimeout(hoverTimeout);
+        hoverTimeout = setTimeout(() => {
+          this.onUserInteraction(link);
+        }, 100); // 100ms delay to avoid preloading on quick mouseovers
+      }
+    });
+
+    document.addEventListener('mouseout', () => {
+      clearTimeout(hoverTimeout);
+    });
+  }
+
+  /**
+   * Get preload statistics for performance monitoring
+   */
+  getStats(): { total: number; loaded: number; hitRate: number } {
+    const total = this.preloadedResources.size;
+    const loaded = Array.from(this.preloadedResources.values()).filter(r => r.loaded).length;
+
+    return {
+      total,
+      loaded,
+      hitRate: total > 0 ? (loaded / total) * 100 : 0
+    };
+  }
+
+  /**
+   * Initialize all preloading strategies
+   */
+  init(): void {
+    // Only initialize in browsers
+    if (typeof window === 'undefined') return;
+
+    // Preload fonts
+    this.preloadFonts();
+
+    // Setup hover preloading
+    this.setupHoverPreloading();
+
+    // Observe images when DOM is ready
+    if (document.readyState === 'loading') {
+      document.addEventListener('DOMContentLoaded', () => {
+        this.observeVisibleImages();
+      });
+    } else {
+      this.observeVisibleImages();
+    }
+
+    // Preload likely next routes based on current page
+    this.preloadLikelyRoutes();
+  }
+
+  /**
+   * Preload routes that users are likely to visit next
+   */
+  private preloadLikelyRoutes(): void {
+    const currentPath = window.location.pathname;
+
+    // Wait a bit for the current page to load
+    setTimeout(() => {
+      if (currentPath === '/' || currentPath === '/copus') {
+        // On homepage, users likely to visit content pages
+        this.preloadRoute('/content', () => import('../screens/Content/Content'));
+      } else if (currentPath.startsWith('/work/')) {
+        // On content pages, users might go back to discovery or view profile
+        this.preloadRoute('/user', () => import('../screens/UserProfile/UserProfile'));
+      }
+    }, 2000);
+  }
+}
+
+// Create singleton instance
+export const resourcePreloader = new ResourcePreloader();
+
+// Auto-initialize when module is imported
+if (typeof window !== 'undefined') {
+  // Wait a bit for the app to initialize
+  setTimeout(() => {
+    resourcePreloader.init();
+  }, 1000);
+}
\ No newline at end of file