diff --git a/client/pages/Activity.tsx b/client/pages/Activity.tsx
index 1c8a8019..8798776e 100644
--- a/client/pages/Activity.tsx
+++ b/client/pages/Activity.tsx
@@ -75,14 +75,90 @@ export default function Activity() {
     );
   }
 
-  if (!isActivity) {
-    return null;
+  // Not in Discord Activity - show informational message
+  if (!isActivity && !isLoading) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-900">
+        <div className="text-center max-w-md">
+          <h1 className="text-3xl font-bold text-white mb-4">
+            🎮 Discord Activity
+          </h1>
+          <p className="text-gray-300 mb-8">
+            This page is designed to run as a Discord Activity. Open it within Discord to get started!
+          </p>
+          <p className="text-gray-500 text-sm">
+            Not in Discord? Visit the main app at{" "}
+            <a
+              href="https://aethex.dev"
+              target="_blank"
+              rel="noopener noreferrer"
+              className="text-blue-400 hover:text-blue-300 underline"
+            >
+              aethex.dev
+            </a>
+          </p>
+        </div>
+      </div>
+    );
   }
 
-  if (user) {
+  if (isLoading) {
+    return (
+      <LoadingScreen
+        message="Initializing Discord Activity..."
+        showProgress={true}
+        duration={5000}
+      />
+    );
+  }
+
+  if (error) {
+    return (
+      <div className="flex items-center justify-center min-h-screen bg-gray-900">
+        <div className="text-center max-w-md">
+          <h1 className="text-3xl font-bold text-red-500 mb-4">
+            ❌ Activity Error
+          </h1>
+          <p className="text-gray-300 mb-8 text-sm">{error}</p>
+
+          <div className="bg-gray-800 border border-gray-700 rounded-lg p-4 mb-6 text-left">
+            <h3 className="text-white font-semibold mb-3">
+              Troubleshooting Steps:
+            </h3>
+            <ol className="text-gray-400 text-sm space-y-2 list-decimal list-inside">
+              <li>Clear your browser cache (Ctrl+Shift+Delete)</li>
+              <li>Close Discord completely</li>
+              <li>Reopen Discord</li>
+              <li>Try opening the Activity again</li>
+            </ol>
+          </div>
+
+          <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-3 mb-6">
+            <p className="text-blue-300 text-xs">
+              💡 Open Discord DevTools (Ctrl+Shift+I) and check the console for messages starting with{" "}
+              <code className="bg-blue-950 px-1 rounded">
+                [Discord Activity]
+              </code>
+            </p>
+          </div>
+
+          <button
+            onClick={() => window.location.reload()}
+            className="px-4 py-2 bg-blue-600 hover:bg-blue-700 text-white rounded-lg transition-colors text-sm"
+          >
+            Retry
+          </button>
+        </div>
+      </div>
+    );
+  }
+
+  if (user && showContent) {
+    const appBaseUrl = "https://aethex.dev";
+
     return (
       <div className="min-h-screen bg-gray-900">
-        <div className="max-w-7xl mx-auto px-4 py-8">
+        <div className="max-w-2xl mx-auto px-4 py-8">
           <div className="text-center mb-8">
             <h1 className="text-3xl font-bold text-white">
               Welcome to AeThex, {user.full_name || user.username}! 🎉
@@ -127,48 +203,48 @@ export default function Activity() {
                 Your primary realm determines your Discord role and access to
                 realm-specific features.
               </p>
-              <button className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors">
+              <button
+                onClick={() => window.open(`${appBaseUrl}/profile/settings`, "_blank")}
+                className="mt-4 px-4 py-2 bg-purple-600 hover:bg-purple-700 text-white rounded-lg transition-colors"
+              >
                 Change Realm
               </button>
             </div>
           </div>
 
-          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700">
+          <div className="bg-gray-800 rounded-lg p-6 border border-gray-700 mb-8">
             <h2 className="text-xl font-bold text-white mb-4">
               🚀 Quick Actions
             </h2>
             <div className="grid grid-cols-1 md:grid-cols-3 gap-4">
-              <a
-                href="/creators"
-                className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors"
+              <button
+                onClick={() => window.open(`${appBaseUrl}/creators`, "_blank")}
+                className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
               >
                 🎨 Browse Creators
-              </a>
-              <a
-                href="/opportunities"
-                className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors"
+              </button>
+              <button
+                onClick={() => window.open(`${appBaseUrl}/opportunities`, "_blank")}
+                className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
               >
                 💼 Find Opportunities
-              </a>
-              <a
-                href="/profile/settings"
-                className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors"
+              </button>
+              <button
+                onClick={() => window.open(`${appBaseUrl}/profile/settings`, "_blank")}
+                className="p-4 bg-gray-700 hover:bg-gray-600 rounded-lg text-white text-center transition-colors font-medium"
               >
                 ⚙️ Settings
-              </a>
+              </button>
             </div>
           </div>
 
-          <div className="mt-8 p-4 bg-blue-900 border border-blue-700 rounded-lg">
-            <p className="text-blue-100">
-              💡 <strong>Tip:</strong> Use Discord commands like{" "}
-              <code className="bg-blue-800 px-2 py-1 rounded">/profile</code>,{" "}
-              <code className="bg-blue-800 px-2 py-1 rounded">/set-realm</code>,
-              and{" "}
-              <code className="bg-blue-800 px-2 py-1 rounded">
-                /verify-role
-              </code>{" "}
-              to manage your account within Discord.
+          <div className="bg-blue-900/20 border border-blue-700 rounded-lg p-4">
+            <p className="text-blue-100 text-sm">
+              💡 <strong>Discord Commands:</strong> Use{" "}
+              <code className="bg-blue-950 px-2 py-1 rounded text-xs">/profile</code>,{" "}
+              <code className="bg-blue-950 px-2 py-1 rounded text-xs">/set-realm</code>, and{" "}
+              <code className="bg-blue-950 px-2 py-1 rounded text-xs">/verify-role</code>{" "}
+              to manage your account directly in Discord.
             </p>
           </div>
         </div>
@@ -176,6 +252,7 @@ export default function Activity() {
     );
   }
 
+  // Still loading
   return (
     <LoadingScreen
       message="Loading your profile..."