From d88c8614206895a79c92eb5110faf15224e478b3 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Thu, 12 Feb 2026 14:00:24 +0100
Subject: [PATCH 1/9] Token card twitter author

---
 src/app/markets/components/PairsCard.tsx | 13 +++++-
 src/app/markets/components/TokenCard.tsx | 55 ++++++++++++++++++++++--
 src/lib/renderUtils.ts                   |  6 +++
 src/modules/tokens/types.ts              |  7 +++
 4 files changed, 76 insertions(+), 5 deletions(-)
 create mode 100644 src/lib/renderUtils.ts

diff --git a/src/app/markets/components/PairsCard.tsx b/src/app/markets/components/PairsCard.tsx
index ba62ff1..370ef8d 100644
--- a/src/app/markets/components/PairsCard.tsx
+++ b/src/app/markets/components/PairsCard.tsx
@@ -41,7 +41,18 @@ export default function PairsCard({ title }: { title: string }) {
       </CardHeader>
       <CardContent className="px-4 py-4 border-b border-border hover:bg-muted">
         <TokenCard
-          token={{ symbol: "SYM", name: "My token", mint: "myMint" }}
+          token={{
+            symbol: "SYM",
+            name: "My token",
+            mint: "myMint",
+            twitterPost: {
+              link: "https://x.com/selimajdev/status/2013291898836758968",
+              author: {
+                username: "selimajdev",
+                followers: 1250000,
+              },
+            },
+          }}
         />
       </CardContent>
     </Card>
diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx
index 9ba14dd..642afe8 100644
--- a/src/app/markets/components/TokenCard.tsx
+++ b/src/app/markets/components/TokenCard.tsx
@@ -1,5 +1,6 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import { humanizeNumber } from "@/lib/renderUtils";
 import { cn } from "@/lib/utils";
 import { Token, TokenLiveData } from "@/modules/tokens/types";
 import {
@@ -12,10 +13,13 @@ import {
   GhostIcon,
   IconNode,
   LucideIcon,
+  UserIcon,
   UsersIcon,
   UserStarIcon,
   ZapIcon,
 } from "lucide-react";
+import Link from "next/link";
+import { useRouter } from "next/navigation";
 
 export default function TokenCard({ token }: { token: Token }) {
   const live: TokenLiveData = {
@@ -26,8 +30,16 @@ export default function TokenCard({ token }: { token: Token }) {
     bundleHold: 3,
   };
 
+  const router = useRouter();
+
   return (
-    <div className="flex gap-4">
+    <div
+      className="flex gap-4 cursor-pointer"
+      onClick={() => router.push(`/token/${token.mint}`)}
+      onContextMenu={() =>
+        window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer")
+      }
+    >
       <div className="h-full overflow-hidden min-w-0">
         {token.logoURI ? (
           <img
@@ -42,10 +54,17 @@ export default function TokenCard({ token }: { token: Token }) {
         )}
         <p className="mt-1 truncate text-xs text-muted-foreground"></p>
       </div>
-      <div className="flex flex-col">
+      <div className="flex flex-col gap-1">
         <div className="flex gap-1.5">
           <p className="font-semibold">{token.symbol}</p>
-          <p className="text-muted-foreground flex gap-1 items-center h-max cursor-pointer hover:text-accent">
+          <p
+            className="text-muted-foreground flex gap-1 items-center h-max cursor-pointer hover:text-accent"
+            onClick={(e) => {
+              e.preventDefault();
+              e.stopPropagation();
+              navigator.clipboard.writeText(token.mint);
+            }}
+          >
             {token.name} <CopyIcon className="w-4 h-4" />
           </p>
         </div>
@@ -60,6 +79,28 @@ export default function TokenCard({ token }: { token: Token }) {
             10
           </p>
         </div>
+        <div className="flex gap-1.5 items-center text-xs text-[#5DBCFF]">
+          {token.twitterPost ? (
+            <>
+              <Link
+                className="hover:underline"
+                target="_blank"
+                href={`https://x.com/${token.twitterPost.author?.username}`}
+                onClick={(e) => {
+                  e.stopPropagation();
+                }}
+              >
+                by @{token.twitterPost.author?.username}
+              </Link>
+              <p className="flex gap-0.5 items-center">
+                <UserIcon className="w-3 h-3" />
+                {humanizeNumber(token.twitterPost.author?.followers)}
+              </p>
+            </>
+          ) : (
+            <span className="invisible">by @username</span>
+          )}
+        </div>
         <div className="items-center flex gap-2">
           <TokenBadge value={live.topHolder} icon={UserStarIcon} />
           <TokenBadge value={live.devHold} icon={ChefHatIcon} />
@@ -71,7 +112,13 @@ export default function TokenCard({ token }: { token: Token }) {
       <div className="ml-auto flex flex-col">
         <TokenDigit name="MC" value="$15.6k" />
         <TokenDigit name="V" value="$42k" />
-        <Button className="mt-auto ml-auto p-1! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs">
+        <Button
+          className="mt-auto ml-auto p-1! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
+          onClick={(e) => {
+            e.preventDefault();
+            e.stopPropagation();
+          }}
+        >
           <ZapIcon />1 SOL
         </Button>
       </div>
diff --git a/src/lib/renderUtils.ts b/src/lib/renderUtils.ts
new file mode 100644
index 0000000..ab706a0
--- /dev/null
+++ b/src/lib/renderUtils.ts
@@ -0,0 +1,6 @@
+export const humanizeNumber = (num: number) => {
+  return new Intl.NumberFormat("en", {
+    notation: "compact",
+    maximumFractionDigits: 1,
+  }).format(num);
+};
diff --git a/src/modules/tokens/types.ts b/src/modules/tokens/types.ts
index 958be07..8a3f3fb 100644
--- a/src/modules/tokens/types.ts
+++ b/src/modules/tokens/types.ts
@@ -3,6 +3,13 @@ export interface Token {
   symbol: string;
   name: string;
   logoURI?: string;
+  twitterPost: {
+    link: string;
+    author: {
+      username: string;
+      followers: number;
+    };
+  };
 }
 
 export interface TokenLiveData {

From f8770477b4a3d4d82c7698ca9cb36e687c70ccdc Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Thu, 12 Feb 2026 14:27:48 +0100
Subject: [PATCH 2/9] Tooltips

---
 src/app/layout.tsx                       |   3 +-
 src/app/markets/components/TokenCard.tsx | 100 ++++++++++++++++-------
 src/components/ui/tooltip.tsx            |  57 +++++++++++++
 src/components/utils/MinimalTooltip.tsx  |  18 ++++
 4 files changed, 147 insertions(+), 31 deletions(-)
 create mode 100644 src/components/ui/tooltip.tsx
 create mode 100644 src/components/utils/MinimalTooltip.tsx

diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8c9b472..98c957c 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,6 +1,7 @@
 import type { Metadata } from "next";
 import { Geist, Geist_Mono } from "next/font/google";
 import "./globals.css";
+import { TooltipProvider } from "@/components/ui/tooltip";
 
 const geistSans = Geist({
   variable: "--font-geist-sans",
@@ -27,7 +28,7 @@ export default function RootLayout({
       <body
         className={`${geistSans.variable} ${geistMono.variable} antialiased`}
       >
-        {children}
+        <TooltipProvider>{children}</TooltipProvider>
       </body>
     </html>
   );
diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx
index 642afe8..6a83fd3 100644
--- a/src/app/markets/components/TokenCard.tsx
+++ b/src/app/markets/components/TokenCard.tsx
@@ -1,5 +1,11 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
+import MinimalTooltip from "@/components/utils/MinimalTooltip";
 import { humanizeNumber } from "@/lib/renderUtils";
 import { cn } from "@/lib/utils";
 import { Token, TokenLiveData } from "@/modules/tokens/types";
@@ -35,7 +41,13 @@ export default function TokenCard({ token }: { token: Token }) {
   return (
     <div
       className="flex gap-4 cursor-pointer"
-      onClick={() => router.push(`/token/${token.mint}`)}
+      onClick={(e) => {
+        if (e.ctrlKey || e.metaKey) {
+          window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer");
+        } else {
+          router.push(`/token/${token.mint}`);
+        }
+      }}
       onContextMenu={() =>
         window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer")
       }
@@ -70,48 +82,76 @@ export default function TokenCard({ token }: { token: Token }) {
         </div>
         <div className="items-center flex gap-3">
           <p className="text-green-500 text-sm">20m</p>
-          <p className="text-sm flex gap-1 items-center">
-            <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
-            10
-          </p>
-          <p className="text-sm flex gap-1 items-center">
-            <EyeIcon className="w-3.5 h-3.5" />
-            10
-          </p>
+          <MinimalTooltip label="Holders">
+            <p className="text-sm flex gap-1 items-center">
+              <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
+              10
+            </p>
+          </MinimalTooltip>
+          <MinimalTooltip label="Live NEXA viewers">
+            <p className="text-sm flex gap-1 items-center">
+              <EyeIcon className="w-3.5 h-3.5" />
+              10
+            </p>
+          </MinimalTooltip>
         </div>
         <div className="flex gap-1.5 items-center text-xs text-[#5DBCFF]">
           {token.twitterPost ? (
             <>
-              <Link
-                className="hover:underline"
-                target="_blank"
-                href={`https://x.com/${token.twitterPost.author?.username}`}
-                onClick={(e) => {
-                  e.stopPropagation();
-                }}
-              >
-                by @{token.twitterPost.author?.username}
-              </Link>
-              <p className="flex gap-0.5 items-center">
-                <UserIcon className="w-3 h-3" />
-                {humanizeNumber(token.twitterPost.author?.followers)}
-              </p>
+              <MinimalTooltip label="Twitter author">
+                <Link
+                  className="hover:underline"
+                  target="_blank"
+                  href={`https://x.com/${token.twitterPost.author?.username}`}
+                  onClick={(e) => {
+                    e.stopPropagation();
+                  }}
+                >
+                  by @{token.twitterPost.author?.username}
+                </Link>
+              </MinimalTooltip>
+              <MinimalTooltip label="Followers">
+                <p className="flex gap-0.5 items-center">
+                  <UserIcon className="w-3 h-3" />
+                  {humanizeNumber(token.twitterPost.author?.followers)}
+                </p>
+              </MinimalTooltip>
             </>
           ) : (
             <span className="invisible">by @username</span>
           )}
         </div>
         <div className="items-center flex gap-2">
-          <TokenBadge value={live.topHolder} icon={UserStarIcon} />
-          <TokenBadge value={live.devHold} icon={ChefHatIcon} />
-          <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
-          <TokenBadge value={live.insidersHold} icon={GhostIcon} />
-          <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
+          <MinimalTooltip independent label="Top 10 holders">
+            <TokenBadge value={live.topHolder} icon={UserStarIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Developer holdings">
+            <TokenBadge value={live.devHold} icon={ChefHatIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Snipers">
+            <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Insiders">
+            <TokenBadge value={live.insidersHold} icon={GhostIcon} />
+          </MinimalTooltip>
+
+          <MinimalTooltip independent label="Bundlers">
+            <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
+          </MinimalTooltip>
         </div>
       </div>
       <div className="ml-auto flex flex-col">
-        <TokenDigit name="MC" value="$15.6k" />
-        <TokenDigit name="V" value="$42k" />
+        <MinimalTooltip label="Market Cap">
+          <TokenDigit name="MC" value="$15.6k" />
+        </MinimalTooltip>
+
+        <MinimalTooltip label="Volume">
+          <TokenDigit name="V" value="$42k" />
+        </MinimalTooltip>
+
         <Button
           className="mt-auto ml-auto p-1! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
           onClick={(e) => {
diff --git a/src/components/ui/tooltip.tsx b/src/components/ui/tooltip.tsx
new file mode 100644
index 0000000..5b589e7
--- /dev/null
+++ b/src/components/ui/tooltip.tsx
@@ -0,0 +1,57 @@
+"use client";
+
+import * as React from "react";
+import { Tooltip as TooltipPrimitive } from "radix-ui";
+
+import { cn } from "@/lib/utils";
+
+function TooltipProvider({
+  delayDuration = 0,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Provider>) {
+  return (
+    <TooltipPrimitive.Provider
+      data-slot="tooltip-provider"
+      delayDuration={delayDuration}
+      {...props}
+    />
+  );
+}
+
+function Tooltip({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Root>) {
+  return <TooltipPrimitive.Root data-slot="tooltip" {...props} />;
+}
+
+function TooltipTrigger({
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Trigger>) {
+  return <TooltipPrimitive.Trigger data-slot="tooltip-trigger" {...props} />;
+}
+
+function TooltipContent({
+  className,
+  sideOffset = 0,
+  children,
+  ...props
+}: React.ComponentProps<typeof TooltipPrimitive.Content>) {
+  return (
+    <TooltipPrimitive.Portal>
+      <TooltipPrimitive.Content
+        data-slot="tooltip-content"
+        sideOffset={sideOffset}
+        className={cn(
+          "bg-background text-foreground animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2 z-50 w-fit origin-(--radix-tooltip-content-transform-origin) rounded-md px-3 py-1.5 text-xs text-balance",
+          className,
+        )}
+        {...props}
+      >
+        {children}
+        <TooltipPrimitive.Arrow className="bg-background fill-background z-50 size-2.5 translate-y-[calc(-50%-2px)] rotate-45 rounded-[2px]" />
+      </TooltipPrimitive.Content>
+    </TooltipPrimitive.Portal>
+  );
+}
+
+export { Tooltip, TooltipTrigger, TooltipContent, TooltipProvider };
diff --git a/src/components/utils/MinimalTooltip.tsx b/src/components/utils/MinimalTooltip.tsx
new file mode 100644
index 0000000..dc3a605
--- /dev/null
+++ b/src/components/utils/MinimalTooltip.tsx
@@ -0,0 +1,18 @@
+import { Tooltip, TooltipContent, TooltipTrigger } from "../ui/tooltip";
+
+export default function MinimalTooltip({
+  children,
+  label,
+  independent = false,
+}: {
+  children: React.ReactNode;
+  label: React.ReactNode;
+  independent?: boolean;
+}) {
+  return (
+    <Tooltip>
+      <TooltipTrigger asChild={!independent}>{children}</TooltipTrigger>
+      <TooltipContent>{label}</TooltipContent>
+    </Tooltip>
+  );
+}

From 914e5881fe130282ebe61e9819422903d3febcb3 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Thu, 12 Feb 2026 14:30:03 +0100
Subject: [PATCH 3/9] Navbar selected link

---
 src/components/layout/Navbar.tsx | 10 +++++++++-
 1 file changed, 9 insertions(+), 1 deletion(-)

diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index d6b0494..932a426 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -1,3 +1,5 @@
+"use client";
+
 import Link from "next/link";
 import { Button } from "../ui/button";
 import {
@@ -8,6 +10,8 @@ import {
   WalletIcon,
 } from "lucide-react";
 import { SolanaLogo } from "../logos";
+import { cn } from "@/lib/utils";
+import { usePathname } from "next/navigation";
 
 const links = [
   {
@@ -23,6 +27,7 @@ const links = [
 export default function Navbar() {
   const personalItemClass =
     "rounded-full bg-card p-2! aspect-square group hover:bg-accent/20 hover:text-accent";
+  const pathname = usePathname();
 
   return (
     <nav className="border-b border-b-border py-4 px-5 flex gap-5 items-center">
@@ -36,7 +41,10 @@ export default function Navbar() {
             <li key={l.path}>
               <Link
                 href={l.path}
-                className="px-3 py-2 rounded-lg hover:bg-primary/20 hover:text-primary transition-colors duration-300"
+                className={cn(
+                  "px-3 py-2 rounded-lg hover:bg-primary/20 hover:text-primary transition-colors duration-300",
+                  l.path === pathname && "text-primary",
+                )}
               >
                 {l.name}
               </Link>

From fac9640a6722a1d79824279dd65569a9fa2f4ddb Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Thu, 12 Feb 2026 14:32:44 +0100
Subject: [PATCH 4/9] Changed navbar primary color to accent

---
 src/components/layout/Navbar.tsx | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/layout/Navbar.tsx b/src/components/layout/Navbar.tsx
index 932a426..6cf907b 100644
--- a/src/components/layout/Navbar.tsx
+++ b/src/components/layout/Navbar.tsx
@@ -42,8 +42,8 @@ export default function Navbar() {
               <Link
                 href={l.path}
                 className={cn(
-                  "px-3 py-2 rounded-lg hover:bg-primary/20 hover:text-primary transition-colors duration-300",
-                  l.path === pathname && "text-primary",
+                  "px-3 py-2 rounded-lg hover:bg-accent/20 hover:text-accent transition-colors duration-300",
+                  l.path === pathname && "text-accent",
                 )}
               >
                 {l.name}

From 2e16ed4127b1feb52f274b85df5f38151dd3c0b7 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Thu, 12 Feb 2026 14:37:08 +0100
Subject: [PATCH 5/9] Small changes

---
 src/app/markets/components/TokenCard.tsx | 2 +-
 src/app/markets/page.tsx                 | 2 +-
 2 files changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx
index 6a83fd3..8b530cc 100644
--- a/src/app/markets/components/TokenCard.tsx
+++ b/src/app/markets/components/TokenCard.tsx
@@ -153,7 +153,7 @@ export default function TokenCard({ token }: { token: Token }) {
         </MinimalTooltip>
 
         <Button
-          className="mt-auto ml-auto p-1! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
+          className="mt-auto ml-auto p-1.5! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
diff --git a/src/app/markets/page.tsx b/src/app/markets/page.tsx
index 8aa6cca..a96ae92 100644
--- a/src/app/markets/page.tsx
+++ b/src/app/markets/page.tsx
@@ -9,7 +9,7 @@ export default function Markets() {
     <main className="h-svh flex flex-col">
       <Navbar />
       <section className="w-full h-full pt-10 pb-5 px-5">
-        <div className="w-full h-full grid grid-cols-3 gap-5">
+        <div className="w-full h-full grid grid-cols-1 md:grid-cols-3 gap-5">
           <PairsCard title="New Pairs" />
           <PairsCard title="Final Stretch" />
           <PairsCard title="Migrated" />

From 582b706f687d09382db72bc75f9684e95924885a Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Thu, 12 Feb 2026 15:05:35 +0100
Subject: [PATCH 6/9] Small changes

---
 src/app/markets/components/TokenCard.tsx | 188 ++++++++++++-----------
 1 file changed, 101 insertions(+), 87 deletions(-)

diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx
index 8b530cc..53287cb 100644
--- a/src/app/markets/components/TokenCard.tsx
+++ b/src/app/markets/components/TokenCard.tsx
@@ -1,10 +1,5 @@
 import { Badge } from "@/components/ui/badge";
 import { Button } from "@/components/ui/button";
-import {
-  Tooltip,
-  TooltipContent,
-  TooltipTrigger,
-} from "@/components/ui/tooltip";
 import MinimalTooltip from "@/components/utils/MinimalTooltip";
 import { humanizeNumber } from "@/lib/renderUtils";
 import { cn } from "@/lib/utils";
@@ -40,7 +35,10 @@ export default function TokenCard({ token }: { token: Token }) {
 
   return (
     <div
-      className="flex gap-4 cursor-pointer"
+      className="
+        flex flex-col gap-3 cursor-pointer
+        md:flex-row md:gap-4
+      "
       onClick={(e) => {
         if (e.ctrlKey || e.metaKey) {
           window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer");
@@ -52,114 +50,130 @@ export default function TokenCard({ token }: { token: Token }) {
         window.open(`/token/${token.mint}`, "_blank", "noopener,noreferrer")
       }
     >
-      <div className="h-full overflow-hidden min-w-0">
-        {token.logoURI ? (
-          <img
-            src={token.logoURI}
-            alt="Token"
-            className="w-16 h-16 rounded-lg"
-          />
-        ) : (
-          <div className="w-16 h-16 bg-primary/20 rounded-lg flex items-center justify-center">
-            <CoinsIcon className="text-primary" />
+      {/* Left: logo */}
+      <div className="flex gap-3 md:gap-4 min-w-0">
+        <div className="h-full overflow-hidden">
+          {token.logoURI ? (
+            <img
+              src={token.logoURI}
+              alt="Token"
+              className="w-14 h-14 md:w-16 md:h-16 rounded-lg"
+            />
+          ) : (
+            <div className="w-14 h-14 md:w-16 md:h-16 bg-primary/20 rounded-lg flex items-center justify-center">
+              <CoinsIcon className="text-primary" />
+            </div>
+          )}
+        </div>
+
+        {/* Main content */}
+        <div className="flex flex-col gap-1 min-w-0">
+          {/* Symbol + name */}
+          <div className="flex gap-1.5 items-center flex-wrap">
+            <p className="font-semibold">{token.symbol}</p>
+            <p
+              className="text-muted-foreground flex gap-1 items-center cursor-pointer hover:text-accent truncate"
+              onClick={(e) => {
+                e.preventDefault();
+                e.stopPropagation();
+                navigator.clipboard.writeText(token.mint);
+              }}
+            >
+              {token.name}
+              <CopyIcon className="w-4 h-4 shrink-0" />
+            </p>
           </div>
-        )}
-        <p className="mt-1 truncate text-xs text-muted-foreground"></p>
-      </div>
-      <div className="flex flex-col gap-1">
-        <div className="flex gap-1.5">
-          <p className="font-semibold">{token.symbol}</p>
-          <p
-            className="text-muted-foreground flex gap-1 items-center h-max cursor-pointer hover:text-accent"
-            onClick={(e) => {
-              e.preventDefault();
-              e.stopPropagation();
-              navigator.clipboard.writeText(token.mint);
-            }}
-          >
-            {token.name} <CopyIcon className="w-4 h-4" />
-          </p>
-        </div>
-        <div className="items-center flex gap-3">
-          <p className="text-green-500 text-sm">20m</p>
-          <MinimalTooltip label="Holders">
-            <p className="text-sm flex gap-1 items-center">
-              <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
-              10
-            </p>
-          </MinimalTooltip>
-          <MinimalTooltip label="Live NEXA viewers">
-            <p className="text-sm flex gap-1 items-center">
-              <EyeIcon className="w-3.5 h-3.5" />
-              10
-            </p>
-          </MinimalTooltip>
-        </div>
-        <div className="flex gap-1.5 items-center text-xs text-[#5DBCFF]">
-          {token.twitterPost ? (
-            <>
-              <MinimalTooltip label="Twitter author">
+
+          {/* Stats */}
+          <div className="items-center flex gap-3 flex-wrap text-xs md:text-sm">
+            <p className="text-green-500">20m</p>
+
+            <MinimalTooltip label="Holders">
+              <p className="flex gap-1 items-center">
+                <UsersIcon className="w-3.5 h-3.5 text-muted-foreground" />
+                10
+              </p>
+            </MinimalTooltip>
+
+            <MinimalTooltip label="Live NEXA viewers">
+              <p className="flex gap-1 items-center">
+                <EyeIcon className="w-3.5 h-3.5" />
+                10
+              </p>
+            </MinimalTooltip>
+          </div>
+
+          {/* Twitter */}
+          <div className="flex gap-2 items-center text-xs text-[#5DBCFF] flex-wrap">
+            {token.twitterPost ? (
+              <>
                 <Link
                   className="hover:underline"
                   target="_blank"
                   href={`https://x.com/${token.twitterPost.author?.username}`}
-                  onClick={(e) => {
-                    e.stopPropagation();
-                  }}
+                  onClick={(e) => e.stopPropagation()}
                 >
                   by @{token.twitterPost.author?.username}
                 </Link>
-              </MinimalTooltip>
-              <MinimalTooltip label="Followers">
+
                 <p className="flex gap-0.5 items-center">
                   <UserIcon className="w-3 h-3" />
                   {humanizeNumber(token.twitterPost.author?.followers)}
                 </p>
-              </MinimalTooltip>
-            </>
-          ) : (
-            <span className="invisible">by @username</span>
-          )}
-        </div>
-        <div className="items-center flex gap-2">
-          <MinimalTooltip independent label="Top 10 holders">
-            <TokenBadge value={live.topHolder} icon={UserStarIcon} />
-          </MinimalTooltip>
+              </>
+            ) : (
+              <span className="invisible">by @username</span>
+            )}
+          </div>
 
-          <MinimalTooltip independent label="Developer holdings">
-            <TokenBadge value={live.devHold} icon={ChefHatIcon} />
-          </MinimalTooltip>
+          {/* Badges */}
+          <div className="flex gap-1.5 items-center flex-wrap">
+            <MinimalTooltip independent label="Top 10 Holders">
+              <TokenBadge value={live.topHolder} icon={UserStarIcon} />
+            </MinimalTooltip>
 
-          <MinimalTooltip independent label="Snipers">
-            <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
-          </MinimalTooltip>
+            <MinimalTooltip independent label="Dev Holdings">
+              <TokenBadge value={live.devHold} icon={ChefHatIcon} />
+            </MinimalTooltip>
 
-          <MinimalTooltip independent label="Insiders">
-            <TokenBadge value={live.insidersHold} icon={GhostIcon} />
-          </MinimalTooltip>
+            <MinimalTooltip independent label="Snipers">
+              <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
+            </MinimalTooltip>
 
-          <MinimalTooltip independent label="Bundlers">
-            <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
-          </MinimalTooltip>
+            <MinimalTooltip independent label="Insiders">
+              <TokenBadge value={live.insidersHold} icon={GhostIcon} />
+            </MinimalTooltip>
+
+            <MinimalTooltip independent label="Bundlers">
+              <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
+            </MinimalTooltip>
+          </div>
         </div>
       </div>
-      <div className="ml-auto flex flex-col">
-        <MinimalTooltip label="Market Cap">
-          <TokenDigit name="MC" value="$15.6k" />
-        </MinimalTooltip>
 
-        <MinimalTooltip label="Volume">
+      {/* Right column */}
+      <div
+        className="
+          flex flex-row justify-between items-center gap-3
+          md:ml-auto md:flex-col md:items-end
+        "
+      >
+        <div className="flex gap-4 md:flex-col md:gap-1">
+          <TokenDigit name="MC" value="$15.6k" />
           <TokenDigit name="V" value="$42k" />
-        </MinimalTooltip>
+        </div>
 
         <Button
-          className="mt-auto ml-auto p-1.5! h-max w-max rounded-full bg-primary/20 text-primary hover:text-black gap-1 text-xs"
+          className="
+            ml-auto rounded-full bg-primary/20 text-primary gap-1 text-xs
+            py-1.5! h-max md:rounded-full hover:text-accent-foreground
+          "
           onClick={(e) => {
             e.preventDefault();
             e.stopPropagation();
           }}
         >
-          <ZapIcon />1 SOL
+          <ZapIcon className="w-4 h-4" />1 SOL
         </Button>
       </div>
     </div>

From b6627f87aac33744cebfd6f921e5fb78f5e702dc Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Thu, 12 Feb 2026 15:12:37 +0100
Subject: [PATCH 7/9] Improved tooltips

---
 src/app/markets/components/TokenCard.tsx | 47 ++++++++++++++----------
 src/components/utils/MinimalTooltip.tsx  |  8 +++-
 2 files changed, 34 insertions(+), 21 deletions(-)

diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx
index 53287cb..af1bef3 100644
--- a/src/app/markets/components/TokenCard.tsx
+++ b/src/app/markets/components/TokenCard.tsx
@@ -107,19 +107,23 @@ export default function TokenCard({ token }: { token: Token }) {
           <div className="flex gap-2 items-center text-xs text-[#5DBCFF] flex-wrap">
             {token.twitterPost ? (
               <>
-                <Link
-                  className="hover:underline"
-                  target="_blank"
-                  href={`https://x.com/${token.twitterPost.author?.username}`}
-                  onClick={(e) => e.stopPropagation()}
-                >
-                  by @{token.twitterPost.author?.username}
-                </Link>
+                <MinimalTooltip label="Twitter author">
+                  <Link
+                    className="hover:underline"
+                    target="_blank"
+                    href={`https://x.com/${token.twitterPost.author?.username}`}
+                    onClick={(e) => e.stopPropagation()}
+                  >
+                    by @{token.twitterPost.author?.username}
+                  </Link>
+                </MinimalTooltip>
 
-                <p className="flex gap-0.5 items-center">
-                  <UserIcon className="w-3 h-3" />
-                  {humanizeNumber(token.twitterPost.author?.followers)}
-                </p>
+                <MinimalTooltip label="Followers">
+                  <p className="flex gap-0.5 items-center">
+                    <UserIcon className="w-3 h-3" />
+                    {humanizeNumber(token.twitterPost.author?.followers)}
+                  </p>
+                </MinimalTooltip>
               </>
             ) : (
               <span className="invisible">by @username</span>
@@ -128,23 +132,23 @@ export default function TokenCard({ token }: { token: Token }) {
 
           {/* Badges */}
           <div className="flex gap-1.5 items-center flex-wrap">
-            <MinimalTooltip independent label="Top 10 Holders">
+            <MinimalTooltip independent bottom label="Top 10 Holders">
               <TokenBadge value={live.topHolder} icon={UserStarIcon} />
             </MinimalTooltip>
 
-            <MinimalTooltip independent label="Dev Holdings">
+            <MinimalTooltip independent bottom label="Dev Holdings">
               <TokenBadge value={live.devHold} icon={ChefHatIcon} />
             </MinimalTooltip>
 
-            <MinimalTooltip independent label="Snipers">
+            <MinimalTooltip independent bottom label="Snipers">
               <TokenBadge value={live.snipersHold} icon={CrosshairIcon} />
             </MinimalTooltip>
 
-            <MinimalTooltip independent label="Insiders">
+            <MinimalTooltip independent bottom label="Insiders">
               <TokenBadge value={live.insidersHold} icon={GhostIcon} />
             </MinimalTooltip>
 
-            <MinimalTooltip independent label="Bundlers">
+            <MinimalTooltip independent bottom label="Bundlers">
               <TokenBadge value={live.bundleHold} icon={BoxesIcon} />
             </MinimalTooltip>
           </div>
@@ -159,8 +163,13 @@ export default function TokenCard({ token }: { token: Token }) {
         "
       >
         <div className="flex gap-4 md:flex-col md:gap-1">
-          <TokenDigit name="MC" value="$15.6k" />
-          <TokenDigit name="V" value="$42k" />
+          <MinimalTooltip label="Market Cap">
+            <TokenDigit name="MC" value="$15.6k" />
+          </MinimalTooltip>
+
+          <MinimalTooltip label="Volume" bottom>
+            <TokenDigit name="V" value="$42k" />
+          </MinimalTooltip>
         </div>
 
         <Button
diff --git a/src/components/utils/MinimalTooltip.tsx b/src/components/utils/MinimalTooltip.tsx
index dc3a605..951dd2d 100644
--- a/src/components/utils/MinimalTooltip.tsx
+++ b/src/components/utils/MinimalTooltip.tsx
@@ -4,15 +4,19 @@ export default function MinimalTooltip({
   children,
   label,
   independent = false,
+  bottom = false,
 }: {
   children: React.ReactNode;
   label: React.ReactNode;
   independent?: boolean;
+  bottom?: boolean;
 }) {
   return (
     <Tooltip>
-      <TooltipTrigger asChild={!independent}>{children}</TooltipTrigger>
-      <TooltipContent>{label}</TooltipContent>
+      <TooltipTrigger asChild={!independent}>
+        <span className="inline-flex">{children}</span>
+      </TooltipTrigger>
+      <TooltipContent side={bottom ? "bottom" : "top"}>{label}</TooltipContent>
     </Tooltip>
   );
 }

From 7cefab0e6784e1851d7f26510a49aeb6e86789cb Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 13 Feb 2026 00:53:50 +0100
Subject: [PATCH 8/9] Improved idk

---
 src/app/markets/components/PairsCard.tsx | 30 ++++++-------
 src/app/markets/components/TokenCard.tsx |  1 -
 src/app/markets/page.tsx                 | 54 ++++++++++++++++++++++--
 3 files changed, 65 insertions(+), 20 deletions(-)

diff --git a/src/app/markets/components/PairsCard.tsx b/src/app/markets/components/PairsCard.tsx
index 370ef8d..1505d2f 100644
--- a/src/app/markets/components/PairsCard.tsx
+++ b/src/app/markets/components/PairsCard.tsx
@@ -3,8 +3,15 @@ import { Button } from "@/components/ui/button";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import { Settings2Icon, ZapIcon } from "lucide-react";
 import TokenCard from "./TokenCard";
+import { Token } from "@/modules/tokens/types";
 
-export default function PairsCard({ title }: { title: string }) {
+export default function PairsCard({
+  title,
+  tokens,
+}: {
+  title: string;
+  tokens: Token[];
+}) {
   return (
     <Card className="py-3 gap-0!">
       <CardHeader className="px-4 pb-3! border-b flex justify-between items-center">
@@ -39,21 +46,12 @@ export default function PairsCard({ title }: { title: string }) {
           </Button>
         </div>
       </CardHeader>
-      <CardContent className="px-4 py-4 border-b border-border hover:bg-muted">
-        <TokenCard
-          token={{
-            symbol: "SYM",
-            name: "My token",
-            mint: "myMint",
-            twitterPost: {
-              link: "https://x.com/selimajdev/status/2013291898836758968",
-              author: {
-                username: "selimajdev",
-                followers: 1250000,
-              },
-            },
-          }}
-        />
+      <CardContent className="p-0">
+        {tokens.map((token) => (
+          <div key={token.mint} className="px-4 py-4 border-b border-border hover:bg-muted">
+            <TokenCard token={token} />
+          </div>
+        ))}
       </CardContent>
     </Card>
   );
diff --git a/src/app/markets/components/TokenCard.tsx b/src/app/markets/components/TokenCard.tsx
index af1bef3..51e0fdd 100644
--- a/src/app/markets/components/TokenCard.tsx
+++ b/src/app/markets/components/TokenCard.tsx
@@ -12,7 +12,6 @@ import {
   CrosshairIcon,
   EyeIcon,
   GhostIcon,
-  IconNode,
   LucideIcon,
   UserIcon,
   UsersIcon,
diff --git a/src/app/markets/page.tsx b/src/app/markets/page.tsx
index a96ae92..93d6d14 100644
--- a/src/app/markets/page.tsx
+++ b/src/app/markets/page.tsx
@@ -10,9 +10,57 @@ export default function Markets() {
       <Navbar />
       <section className="w-full h-full pt-10 pb-5 px-5">
         <div className="w-full h-full grid grid-cols-1 md:grid-cols-3 gap-5">
-          <PairsCard title="New Pairs" />
-          <PairsCard title="Final Stretch" />
-          <PairsCard title="Migrated" />
+          <PairsCard
+            title="New Pairs"
+            tokens={[
+              {
+                symbol: "SYM",
+                name: "My token",
+                mint: "myMint",
+                twitterPost: {
+                  link: "https://x.com/selimajdev/status/2013291898836758968",
+                  author: {
+                    username: "selimajdev",
+                    followers: 1250000,
+                  },
+                },
+              },
+            ]}
+          />
+          <PairsCard
+            title="Final Stretch"
+            tokens={[
+              {
+                symbol: "TEST",
+                name: "A test token",
+                mint: "myMint2",
+                twitterPost: {
+                  link: "https://x.com/selimajdev/status/2013291898836758968",
+                  author: {
+                    username: "selimajdev",
+                    followers: 1250000,
+                  },
+                },
+              },
+            ]}
+          />
+          <PairsCard
+            title="Migrated"
+            tokens={[
+              {
+                symbol: "MIG",
+                name: "Are we migrated yet?",
+                mint: "migratedMint",
+                twitterPost: {
+                  link: "https://x.com/selimajdev/status/2013291898836758968",
+                  author: {
+                    username: "selimajdev",
+                    followers: 1250000,
+                  },
+                },
+              },
+            ]}
+          />
         </div>
       </section>
       <Statusbar />

From de7e0fd7820c60883302930bd728742e62e468b2 Mon Sep 17 00:00:00 2001
From: Klesti Selimaj <klesti.selimay@icloud.com>
Date: Fri, 13 Feb 2026 01:43:39 +0100
Subject: [PATCH 9/9] Landing page

---
 src/app/page.tsx | 147 ++++++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 145 insertions(+), 2 deletions(-)

diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5776a87..9b5b65d 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,146 @@
-export default function Home() {
-  return <div>hello world</div>;
+import Link from "next/link";
+
+export default function Landing() {
+  return (
+    <main className="min-h-screen bg-background text-foreground overflow-hidden">
+      {/* Background gradients */}
+      <div className="pointer-events-none fixed inset-0">
+        <div className="absolute -top-40 -left-40 h-150 w-150 rounded-full bg-primary/20 blur-[120px]" />
+        <div className="absolute top-1/3 -right-40 h-125 w-125 rounded-full bg-accent/20 blur-[120px]" />
+      </div>
+
+      {/* Hero */}
+      <section className="relative z-10 px-6 pt-32 pb-24 max-w-7xl mx-auto">
+        <div className="max-w-3xl">
+          <h1 className="text-5xl md:text-6xl font-semibold leading-tight">
+            Trade memecoins <br />
+            <span className="text-transparent bg-clip-text bg-linear-to-r from-primary to-accent">
+              without trading blind
+            </span>
+          </h1>
+
+          <p className="mt-6 text-lg text-muted-foreground max-w-xl">
+            Nexa filters noise, intercepts high-rug setups, and executes faster,
+            so you spend less time guessing and more time surviving.
+          </p>
+
+          <div className="mt-10 flex gap-4">
+            <Link href="/markets">
+              <button className="px-6 py-3 rounded-lg bg-primary text-primary-foreground font-medium hover:opacity-90 transition">
+                Open Terminal
+              </button>
+            </Link>
+            <Link
+              href="https://github.com/nexa-sol/nexa-trade?tab=readme-ov-file#-nexa-roadmap--alpha-release"
+              target="_blank"
+            >
+              <button className="px-6 py-3 rounded-lg border border-border hover:bg-accent/10 transition">
+                View Roadmap
+              </button>
+            </Link>
+          </div>
+        </div>
+      </section>
+
+      {/* Live signal strip */}
+      {/* <section className="relative z-10 border-y border-border/60 bg-card/40 backdrop-blur">
+        <div className="max-w-7xl mx-auto px-6 py-4 flex gap-8 text-sm text-muted-foreground overflow-x-auto">
+          <span>🟢 12 rugs intercepted today</span>
+          <span>⚡ Median execution: 420ms</span>
+          <span>📉 Top 10 holder risk flagged</span>
+          <span>🔍 Bundler detected pre-launch</span>
+        </div>
+      </section> */}
+
+      {/* Why Nexa */}
+      <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
+        <div className="grid md:grid-cols-3 gap-10">
+          <div>
+            <h3 className="text-xl font-medium mb-2">Risk-aware by default</h3>
+            <p className="text-muted-foreground">
+              Every trade is evaluated against holder concentration, bundlers,
+              deployer behavior, and liquidity signals, before execution.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-xl font-medium mb-2">AI where it matters</h3>
+            <p className="text-muted-foreground">
+              No magic predictions. Just automated checks that experienced
+              traders already do, instantly and consistently.
+            </p>
+          </div>
+
+          <div>
+            <h3 className="text-xl font-medium mb-2">Built for speed</h3>
+            <p className="text-muted-foreground">
+              Optimized request batching, Solana-native execution, and Jupiter
+              routing keep latency low even during peak volume.
+            </p>
+          </div>
+        </div>
+      </section>
+
+      {/* Risk interception highlight */}
+      <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
+        <div className="rounded-2xl border border-border bg-card/60 backdrop-blur p-10">
+          <h2 className="text-3xl font-semibold mb-4">
+            Nexa can stop you before you buy a rug
+          </h2>
+          <p className="text-muted-foreground max-w-2xl">
+            When high-risk patterns are detected, Nexa blocks execution by
+            default and tells you exactly why. If you still want in, that's your
+            call. But it won't be blind.
+          </p>
+        </div>
+      </section>
+
+      {/* How it works */}
+      <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
+        <h2 className="text-3xl font-semibold mb-12">How it works</h2>
+
+        <div className="grid md:grid-cols-4 gap-8 text-sm">
+          <div className="text-muted-foreground">
+            <span className="block text-foreground font-medium mb-1">
+              1. Detect
+            </span>
+            New pairs, migrations, and liquidity events are tracked in real
+            time.
+          </div>
+          <div className="text-muted-foreground">
+            <span className="block text-foreground font-medium mb-1">
+              2. Analyze
+            </span>
+            Risk signals, holder distribution, and deployer behavior are scored.
+          </div>
+          <div className="text-muted-foreground">
+            <span className="block text-foreground font-medium mb-1">
+              3. Decide
+            </span>
+            AI filters or manual overrides determine execution eligibility.
+          </div>
+          <div className="text-muted-foreground">
+            <span className="block text-foreground font-medium mb-1">
+              4. Execute
+            </span>
+            Trades are routed through Jupiter with minimal latency.
+          </div>
+        </div>
+      </section>
+
+      {/* Fees & alignment */}
+      <section className="relative z-10 px-6 py-24 max-w-7xl mx-auto">
+        <div className="max-w-2xl">
+          <h2 className="text-3xl font-semibold mb-4">
+            Fees that scale with success
+          </h2>
+          <p className="text-muted-foreground">
+            Nexa charges a small platform fee on executed trades, with optional
+            AI and quant features available per-use. No subscriptions. No hidden
+            incentives.
+          </p>
+        </div>
+      </section>
+    </main>
+  );
 }