Staging

src/app/account/page.tsx

@@ -24,7 +24,7 @@ function AccountPageContent() {
 
   const { data: agents = [] } = useQuery({
     queryKey: ["agents", userId],
-    queryFn: fetchAgents,
+    queryFn: () => fetchAgents(userId || undefined),
     enabled: isAuthenticated && !!userId,
   });
 

src/app/aibtc-charter/page.tsx

@@ -4,13 +4,14 @@ import { useQuery } from "@tanstack/react-query";
 import { MissionContent } from "@/components/aidaos/MissionContent";
 import { fetchDAOByName } from "@/services/dao.service";
 import { Loader } from "@/components/reusables/Loader";
+import { singleDaoName } from "@/config/features";
 
 export const runtime = "edge";
 
 export default function AIBTCCharterPage() {
   const { data: dao, isLoading } = useQuery({
-    queryKey: ["dao", "AIBTC-BREW"],
-    queryFn: () => fetchDAOByName("AIBTC-BREW"),
+    queryKey: ["dao", singleDaoName],
+    queryFn: () => fetchDAOByName(singleDaoName),
   });
 
   if (isLoading) {
@@ -32,12 +33,16 @@ export default function AIBTCCharterPage() {
             Charter Not Found
           </h2>
           <p className="text-zinc-400">
-            Could not find the AIBTC Brew charter information.
+            Could not find the {singleDaoName} charter information.
           </p>
         </div>
       </div>
     );
   }
 
-  return <MissionContent description={dao.description} />;
+  return (
+    <div className="px-1 md:px-16">
+      <MissionContent description={dao.description} />
+    </div>
+  );
 }

src/app/aidaos/[name]/charter/page.tsx

@@ -22,7 +22,7 @@ export default function CharterDAOPage() {
       <div className="flex justify-center items-center min-h-[400px] w-full">
         <div className="text-center space-y-4">
           <Loader />
-          <p className="text-zinc-400">Loading DAO information...</p>
+          <p className="text-zinc-400">Loading information...</p>
         </div>
       </div>
     );
@@ -32,10 +32,9 @@ export default function CharterDAOPage() {
     return (
       <div className="flex justify-center items-center min-h-[400px] w-full">
         <div className="text-center space-y-4">
-          <h2 className="text-2xl font-semibold text-white">DAO Not Found</h2>
+          <h2 className="text-2xl font-semibold text-white">Not Found</h2>
           <p className="text-zinc-400">
-            Could not find a DAO with the name '
-            {decodeURIComponent(encodedName)}'
+            Could not find '{decodeURIComponent(encodedName)}'
           </p>
         </div>
       </div>

src/app/aidaos/[name]/extension/page.tsx

@@ -43,7 +43,7 @@ export default function ExtensionsPage() {
   if (!extensions || extensions.length === 0) {
     return (
       <div className="text-center py-12">
-        <p className="text-zinc-400">No extensions found for this DAO.</p>
+        <p className="text-zinc-400">No extensions found.</p>
       </div>
     );
   }

src/app/aidaos/[name]/holders/page.tsx

@@ -18,7 +18,7 @@ export default function HoldersPage() {
   const decodedName = decodeURIComponent(encodedName);
   // console.log(decodedName);
 
-  // First, fetch the DAO by name to get its ID
+  // First, fetch by name to get its ID
   const { data: dao, isLoading: isLoadingDAO } = useQuery({
     queryKey: ["dao", decodedName],
     queryFn: () => fetchDAOByName(decodedName),
@@ -63,10 +63,9 @@ export default function HoldersPage() {
     return (
       <div className="flex justify-center items-center min-h-[400px] w-full">
         <div className="text-center space-y-4">
-          <h2 className="text-2xl font-semibold text-white">DAO Not Found</h2>
+          <h2 className="text-2xl font-semibold text-white">Not Found</h2>
           <p className="text-zinc-400">
-            Could not find a DAO with the name &apos;
-            {decodeURIComponent(encodedName)}&apos;
+            Could not find &apos;{decodeURIComponent(encodedName)}&apos;
           </p>
         </div>
       </div>

src/app/aidaos/[name]/layout.tsx

@@ -25,12 +25,12 @@ export async function generateMetadata({
 
   if (!dao) {
     return {
-      title: "DAO Not Found",
-      description: "The requested DAO could not be found.",
+      title: "Not Found",
+      description: "The requested item could not be found.",
     };
   }
 
-  // Now fetch the token using the DAO ID
+  // Now fetch the token using the ID
   // const { data: token } = await supabase
   //   .from("tokens")
   //   .select("image_url")
@@ -79,7 +79,7 @@ export async function generateMetadata({
       index: true,
       follow: true,
     },
-    keywords: [dao.name, "DAO", "Blockchain", "Governance", "Token"],
+    keywords: [dao.name, "Blockchain", "Governance", "Token"],
   };
 }
 

src/app/aidaos/[name]/page.tsx

@@ -55,10 +55,9 @@ function PageContent() {
     return (
       <div className="flex justify-center items-center min-h-[400px] w-full">
         <div className="text-center space-y-4">
-          <h2 className="text-2xl font-semibold text-white">DAO Not Found</h2>
+          <h2 className="text-2xl font-semibold text-white">Not Found</h2>
           <p className="text-zinc-400">
-            Could not find a DAO with the name &apos;
-            {decodeURIComponent(encodedName)}&apos;
+            Could not find &apos;{decodeURIComponent(encodedName)}&apos;
           </p>
         </div>
       </div>

src/app/application-layout.tsx

@@ -253,20 +253,26 @@ export default function ApplicationLayout({
           <div className="flex justify-center items-center gap-6 relative z-10"></div>
 
           {/* Right Section - Navigation Links, BTC Balance Dropdown & Auth Button */}
-          <div className="flex items-center gap-6 relative z-10 justify-end">
+          <div className="flex items-center gap-2 lg:gap-3 xl:gap-6 relative z-10 justify-end flex-nowrap">
             <a
               href="https://docs.aibtc.com/how-aibtc-works"
-              className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors duration-200"
+              className="text-xs lg:text-sm font-medium text-foreground/80 hover:text-foreground transition-colors duration-200 whitespace-nowrap"
               target="_blank"
             >
               How it works
             </a>
             <Link
               href="/aibtc-charter"
-              className="text-sm font-medium text-foreground/80 hover:text-foreground transition-colors duration-200"
+              className="text-xs lg:text-sm font-medium text-foreground/80 hover:text-foreground transition-colors duration-200 whitespace-nowrap"
             >
               AIBTC Charter
             </Link>
+            <Link
+              href="/leaderboard"
+              className="text-xs lg:text-sm font-medium text-foreground/80 hover:text-foreground transition-colors duration-200 whitespace-nowrap"
+            >
+              Leaderboard
+            </Link>
             {/* Notification Bell - commented out per requirements */}
             {/* {isAuthenticated && (
               <div className="mr-3">
@@ -346,16 +352,25 @@ export default function ApplicationLayout({
               {/* Sidebar Header */}
               <div className="flex items-center justify-between p-4 border-b border-border/20 relative z-10">
                 <div className="flex items-center gap-3">
-                  <Image
-                    src="/logos/aibtcdev-avatar-1000px.png"
-                    alt="AIBTC"
-                    width={24}
-                    height={24}
-                    className="shadow-lg shadow-primary/20"
-                  />
-                  <span className="text-lg font-bold text-foreground">
-                    Menu
-                  </span>
+                  <div className="flex flex-col gap-1">
+                    <Image
+                      src="/logos/aibtcdev-primary-logo-black-wide-1000px.png"
+                      alt="AIBTCDEV"
+                      width={100}
+                      height={24}
+                      className="h-6 w-auto block dark:hidden"
+                    />
+                    <Image
+                      src="/logos/aibtcdev-primary-logo-white-wide-1000px.png"
+                      alt="AIBTCDEV"
+                      width={100}
+                      height={24}
+                      className="h-6 w-auto hidden dark:block"
+                    />
+                    <span className="text-[10px] text-muted-foreground whitespace-nowrap">
+                      The Bitcoin Coordination Network
+                    </span>
+                  </div>
                 </div>
                 <Button
                   variant="ghost"
@@ -367,12 +382,31 @@ export default function ApplicationLayout({
                 </Button>
               </div>
 
-              {/* Navigation - Empty since items moved to dropdown */}
+              {/* Navigation */}
               <nav className="flex-1 px-4 py-6 relative z-10 overflow-y-auto">
                 <div className="space-y-3">
-                  <div className="text-center text-muted-foreground text-sm py-8">
-                    Use the dropdown menu above to navigate
-                  </div>
+                  <a
+                    href="https://docs.aibtc.com/how-aibtc-works"
+                    target="_blank"
+                    className="block px-4 py-3 text-sm font-medium text-foreground/80 hover:text-foreground hover:bg-primary/10 rounded-sm transition-colors duration-200"
+                    onClick={() => setLeftPanelOpen(false)}
+                  >
+                    How it works
+                  </a>
+                  <Link
+                    href="/aibtc-charter"
+                    className="block px-4 py-3 text-sm font-medium text-foreground/80 hover:text-foreground hover:bg-primary/10 rounded-sm transition-colors duration-200"
+                    onClick={() => setLeftPanelOpen(false)}
+                  >
+                    AIBTC Charter
+                  </Link>
+                  <Link
+                    href="/leaderboard"
+                    className="block px-4 py-3 text-sm font-medium text-foreground/80 hover:text-foreground hover:bg-primary/10 rounded-sm transition-colors duration-200"
+                    onClick={() => setLeftPanelOpen(false)}
+                  >
+                    Leaderboard
+                  </Link>
                 </div>
               </nav>
             </div>

src/app/extensions/page.tsx

@@ -0,0 +1,55 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import DAOExtensions from "@/components/aidaos/DaoExtensions";
+import { fetchDAOByName, fetchDAOExtensions } from "@/services/dao.service";
+import { Loader } from "@/components/reusables/Loader";
+import { singleDaoName } from "@/config/features";
+
+export const runtime = "edge";
+
+export default function ExtensionsPage() {
+  const daoName = singleDaoName;
+
+  // Fetch DAO to get its ID
+  const { data: dao, isLoading: loadingDao } = useQuery({
+    queryKey: ["dao", daoName],
+    queryFn: () => fetchDAOByName(daoName),
+  });
+  const daoId = dao?.id;
+
+  // Fetch extensions
+  const { data: extensions, isLoading: loadingExt } = useQuery({
+    queryKey: ["daoExtensions", daoId],
+    queryFn: () => (daoId ? fetchDAOExtensions(daoId) : []),
+    enabled: !!daoId,
+    staleTime: 600000,
+  });
+
+  const isLoading = loadingDao || loadingExt;
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px] w-full">
+        <div className="text-center space-y-4">
+          <Loader />
+          <p className="text-zinc-400">Loading extensions...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!extensions || extensions.length === 0) {
+    return (
+      <div className="text-center py-12">
+        <p className="text-zinc-400">No extensions found.</p>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full px-16">
+      <DAOExtensions extensions={extensions} />
+    </div>
+  );
+}

src/app/holders/page.tsx

@@ -0,0 +1,73 @@
+"use client";
+
+import { useQuery } from "@tanstack/react-query";
+import { Loader } from "@/components/reusables/Loader";
+import DAOHolders from "@/components/aidaos/DaoHolders";
+import {
+  fetchToken,
+  fetchHolders,
+  fetchDAOByName,
+} from "@/services/dao.service";
+import { singleDaoName } from "@/config/features";
+
+export const runtime = "edge";
+
+export default function HoldersPage() {
+  const daoName = singleDaoName;
+
+  // First, fetch by name to get its ID
+  const { data: dao, isLoading: isLoadingDAO } = useQuery({
+    queryKey: ["dao", daoName],
+    queryFn: () => fetchDAOByName(daoName),
+  });
+
+  const daoId = dao?.id;
+
+  // Then use the ID to fetch the token
+  const { data: token, isLoading: isLoadingToken } = useQuery({
+    queryKey: ["token", daoId],
+    queryFn: () => (daoId ? fetchToken(daoId) : null),
+    staleTime: 600000, // 10 minutes
+    enabled: !!daoId, // Only run this query when we have the daoId
+  });
+
+  // Finally fetch the holders using the DAO ID
+  const { data: holdersData, isLoading: isLoadingHolders } = useQuery({
+    queryKey: ["holders", daoId],
+    queryFn: () => fetchHolders(daoId!),
+    enabled: !!daoId,
+  });
+
+  const isLoading = isLoadingDAO || isLoadingToken || isLoadingHolders;
+
+  if (isLoading) {
+    return (
+      <div className="flex justify-center items-center  w-full">
+        <div className="text-center space-y-4">
+          <Loader />
+          <p className="text-zinc-400">Loading holders...</p>
+        </div>
+      </div>
+    );
+  }
+
+  if (!dao) {
+    return (
+      <div className="flex justify-center items-center min-h-[400px] w-full">
+        <div className="text-center space-y-4">
+          <h2 className="text-2xl font-semibold text-white">Not Found</h2>
+          <p className="text-zinc-400">Could not find {singleDaoName}</p>
+        </div>
+      </div>
+    );
+  }
+
+  return (
+    <div className="w-full px-16">
+      <DAOHolders
+        holders={holdersData?.holders || []}
+        tokenSymbol={token?.symbol || ""}
+      />
+    </div>
+  );
+}

src/app/layout.tsx

@@ -17,7 +17,7 @@ export const metadata: Metadata = {
     template: "%s | AIBTC",
   },
   description: "The Bitcoin Coordination Network.",
-  keywords: ["Bitcoin", "AI", "Stacks", "L2", "Trading", "DAO"],
+  keywords: ["Bitcoin", "AI", "Stacks", "L2", "Trading"],
   authors: [{ name: "AIBTC" }],
   openGraph: {
     title: "AIBTC",