diff --git a/.env.sample b/.env.sample
index 47e2b7c..8c5c439 100644
--- a/.env.sample
+++ b/.env.sample
@@ -1,15 +1,8 @@
 # Used by new API examples
 APP_URL="http://localhost:3000"
+# secure image worker for frames
+IMAGE_WORKER_SECRET=""
 
-# Used by deprecated examples
-NEXT_PUBLIC_HOST="http://localhost:3000"
-
-# Optional - Hub URL to use for the debugger. If not set, the debugger will use the default hub URL.
-DEBUG_HUB_HTTP_URL=
-
-# Optional - Slow request example
-KV_REST_API_URL=
-KV_REST_API_TOKEN=
-
-# Optional - debugging URL for the examples index page
-NEXT_PUBLIC_DEBUGGER_URL=
+# Turso SQLite db 
+TURSO_DATABASE_URL=""
+TURSO_AUTH_TOKEN=""
diff --git a/bun.lockb b/bun.lockb
index 25bd1fb..892e790 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/public/images/default-pfp.png b/public/images/default-pfp.png
new file mode 100644
index 0000000..7bdd0e0
Binary files /dev/null and b/public/images/default-pfp.png differ
diff --git a/src/app/api/token/route.ts b/src/app/api/token/route.ts
deleted file mode 100644
index c3486e7..0000000
--- a/src/app/api/token/route.ts
+++ /dev/null
@@ -1,59 +0,0 @@
-import { getTokenFromAddress } from "@/utils/db";
-import { NextRequest, NextResponse } from "next/server";
-
-export const GET = async (req: NextRequest) => {
-  try {
-    const url = new URL(req.url);
-    const searchParams = new URLSearchParams(url.searchParams);
-
-    const tokenAddress = searchParams.get("address");
-
-    if (!tokenAddress) {
-      return NextResponse.json(
-        {
-          status: "nok",
-          error: {
-            message: "Address missing",
-          },
-        },
-        {
-          status: 400,
-          statusText: "Bad Request",
-        }
-      );
-    }
-
-    const token = await getTokenFromAddress(tokenAddress);
-    if (!token) {
-      return NextResponse.json(
-        {
-          status: "nok",
-          error: {
-            message: "Token not found",
-          },
-        },
-        {
-          status: 404,
-          statusText: "Not Found",
-        }
-      );
-    }
-    return NextResponse.json({
-      status: "ok",
-      data: token,
-    });
-  } catch (error) {
-    return NextResponse.json(
-      {
-        status: "nok",
-        error: {
-          message: "Internal Server Error",
-        },
-      },
-      {
-        status: 500,
-        statusText: "Internal Server Error",
-      }
-    );
-  }
-};
diff --git a/src/app/components/token-details.tsx b/src/app/components/token-details.tsx
index 55121c7..2d2ee2d 100644
--- a/src/app/components/token-details.tsx
+++ b/src/app/components/token-details.tsx
@@ -1,41 +1,21 @@
-"use client";
-
 import { Token } from "@/utils/schemas/db.schema";
-import { usePathname } from "next/navigation";
-import { useEffect, useState } from "react";
 import { Button } from "./ui/button";
 
-export const TokenDetails = () => {
-  const pathname = usePathname();
-  const tokenAddress = pathname.split("/").pop();
-
-  const [token, setToken] = useState<Token | undefined>(undefined);
-
-  if (!tokenAddress) {
-    return <div>Token not found</div>;
-  }
-
-  useEffect(() => {
-    async function getTokenFromDb(tokenAddress: string) {
-      const tokenResult = await fetch(`/api/token?address=${tokenAddress}`);
-      const { data: token } = await tokenResult.json();
-      setToken(token);
-    }
-    if (tokenAddress) {
-      getTokenFromDb(tokenAddress);
-    }
-  }, [tokenAddress]);
+import Image from "next/image";
 
+export const TokenDetails = ({ token }: { token: Token | undefined }) => {
   return (
     <>
       {token && (
         <div className="flex flex-col-reverse md:flex-row w-full gap-2">
           <div className="flex flex-col gap-2 bg-slate-400 p-2 rounded-xl w-full md:w-[60%]">
             <div className="flex flex-row gap-2">
-              <img
-                src={`/images/copy.png`}
-                alt={token.name}
-                className="w-[60px] h-[60px] rounded-lg"
+              <Image
+                src={token.image || `/images/copy.png`}
+                alt={`${token.name} logo`}
+                className="w-[60px] h-[60px] rounded-lg object-contain"
+                width={60}
+                height={60}
               />
               <div className="flex flex-col">
                 <p className="text-xl font-bold">{token.ticker}</p>
diff --git a/src/app/frames/frames.ts b/src/app/frames/frames.ts
index f0aa5fd..3902492 100644
--- a/src/app/frames/frames.ts
+++ b/src/app/frames/frames.ts
@@ -2,13 +2,8 @@ import { farcasterHubContext } from "frames.js/middleware";
 import { imagesWorkerMiddleware } from "frames.js/middleware/images-worker";
 import { createFrames } from "frames.js/next";
 
-type State = {
-  counter: number;
-};
-
-export const frames = createFrames<State>({
+export const frames = createFrames({
   basePath: "/frames",
-  initialState: { counter: 0 },
   debug: process.env.NODE_ENV === "development",
   middleware: [
     farcasterHubContext(),
diff --git a/src/app/frames/route.tsx b/src/app/frames/route.tsx
index 95f1982..abe28e4 100644
--- a/src/app/frames/route.tsx
+++ b/src/app/frames/route.tsx
@@ -4,12 +4,6 @@ import { frames } from "./frames";
 import { appURL } from "../utils";
 
 const frameHandler = frames(async (ctx) => {
-  const counter = ctx.message
-    ? ctx.searchParams.op === "+"
-      ? ctx.state.counter + 1
-      : ctx.state.counter - 1
-    : ctx.state.counter;
-
   return {
     image: (
       <div tw="flex flex-col">
@@ -17,12 +11,6 @@ const frameHandler = frames(async (ctx) => {
       </div>
     ),
     buttons: [
-      <Button action="post" target={{ pathname: "/", query: { op: "+" } }}>
-        Increment
-      </Button>,
-      <Button action="post" target={{ pathname: "/", query: { op: "-" } }}>
-        Decrement
-      </Button>,
       <Button action="link" target={appURL()}>
         External
       </Button>,
@@ -30,7 +18,6 @@ const frameHandler = frames(async (ctx) => {
         Token
       </Button>,
     ],
-    state: { counter: counter },
   };
 });
 
diff --git a/src/app/frames/token/[address]/route.tsx b/src/app/frames/token/[address]/route.tsx
new file mode 100644
index 0000000..a6abc6b
--- /dev/null
+++ b/src/app/frames/token/[address]/route.tsx
@@ -0,0 +1,211 @@
+/* eslint-disable @next/next/no-img-element */
+/* eslint-disable react/jsx-key */
+import { frames } from "@/app/frames/frames";
+import { appURL } from "@/app/utils";
+import { Button } from "frames.js/next";
+import { Container } from "@/app/frames/components/container";
+import { Column } from "@/app/frames/components/column";
+import { Text } from "@/app/frames/components/text";
+import { Row } from "@/app/frames/components/row";
+import { UserBanner } from "@/app/frames/components/user-banner";
+import { BrianClankerBanner } from "@/app/frames/components/brian-clanker-banner";
+import { BackgroundImage } from "@/app/frames/components/background-image";
+import { getTokenFromAddress } from "@/utils/db";
+
+import { getAddress, isAddress } from "viem";
+import { getUserDataForFid } from "frames.js";
+
+function truncate(text: string, max: number) {
+  return text.slice(0, max - 1) + (text.length > max ? "..." : "");
+}
+
+const frameHandler = frames(async (ctx) => {
+  const address = ctx.url.pathname.split("/").pop();
+  try {
+    if (!address) {
+      throw new Error("No address provided");
+    }
+    if (!isAddress(address, { strict: false })) {
+      throw new Error("Invalid address");
+    }
+    const token = await getTokenFromAddress(getAddress(address));
+    if (!token) {
+      throw new Error("Token not found");
+    }
+    const requestor = await getUserDataForFid({ fid: token.requestedBy });
+    return {
+      image: (
+        <BackgroundImage
+          src={`${appURL()}/images/square_desert_painted.png`}
+          width="1080px"
+          height="1080px"
+          container="absolute"
+        >
+          <Container>
+            <Column tw="my-auto mx-auto bg-black/75 text-white rounded-xl w-[800px] py-[20px]">
+              <img
+                src={token.image || `${appURL()}/images/copy.png`}
+                tw="w-[760px] h-[760px] rounded-xl mx-auto"
+                alt={`Token ${token.name} logo`}
+                style={{
+                  objectFit: "contain",
+                }}
+              />
+              <Row tw="mt-8 justify-between w-[760px] mx-auto">
+                <Column tw="">
+                  <Text
+                    tw="text-3xl mb-4"
+                    style={{
+                      fontFamily: "ChakraPetch-Regular",
+                    }}
+                  >
+                    {truncate(token.name, 25)}
+                  </Text>
+                  <Text
+                    tw="text-4xl h-[60px] items-center"
+                    style={{
+                      fontFamily: "ChakraPetch-Bold",
+                    }}
+                  >
+                    {truncate(token.ticker, 15)}
+                  </Text>
+                </Column>
+                <Column tw="w-[350px] flex items-end">
+                  <Text
+                    tw="text-3xl mb-4"
+                    style={{
+                      fontFamily: "ChakraPetch-Regular",
+                    }}
+                  >
+                    {token ? "Requested by" : "Who dis?"}
+                  </Text>
+                  <UserBanner
+                    user={{
+                      displayName: truncate(
+                        `@${requestor?.username}` ||
+                          token.requestedBy.toString(),
+                        15
+                      ),
+                      pfp: requestor?.profileImage || "",
+                    }}
+                    size="sm"
+                    tw="text-4xl"
+                    style={{
+                      fontFamily: "ChakraPetch-Bold",
+                    }}
+                  />
+                </Column>
+              </Row>
+            </Column>
+          </Container>
+          <BrianClankerBanner />
+        </BackgroundImage>
+      ),
+      buttons: [
+        <Button action="link" target={`${appURL()}/token/${address}`}>
+          View
+        </Button>,
+        <Button
+          action="link"
+          target={`https://dexscreener.com/base/${address}`}
+        >
+          DexScreener
+        </Button>,
+        <Button action="link" target={`${appURL()}/token/${address}`}>
+          Buy
+        </Button>,
+      ],
+      imageOptions: {
+        aspectRatio: "1:1",
+      },
+    };
+  } catch (error) {
+    const errorMessage =
+      error instanceof Error ? error.message : "Unknown error";
+    return {
+      image: (
+        <BackgroundImage
+          src={`${appURL()}/images/square_desert_painted.png`}
+          width="1080px"
+          height="1080px"
+          container="absolute"
+        >
+          <Container>
+            <Column tw="my-auto mx-auto bg-black/75 text-white rounded-xl w-[800px] py-[20px]">
+              <img
+                src={`${appURL()}/images/copy.png`}
+                tw="w-[760px] h-[760px] rounded-xl mx-auto"
+                alt={`Token not found logo`}
+                style={{
+                  objectFit: "contain",
+                }}
+              />
+              <Row tw="mt-8 justify-between w-[760px] mx-auto">
+                <Column tw="">
+                  <Text
+                    tw="text-3xl mb-4"
+                    style={{
+                      fontFamily: "ChakraPetch-Regular",
+                    }}
+                  >
+                    An error occured
+                  </Text>
+                  <Text
+                    tw="text-4xl h-[60px] items-center"
+                    style={{
+                      fontFamily: "ChakraPetch-Bold",
+                    }}
+                  >
+                    {errorMessage}
+                  </Text>
+                </Column>
+                <Column>
+                  <Text
+                    tw="text-3xl mb-4"
+                    style={{
+                      fontFamily: "ChakraPetch-Regular",
+                    }}
+                  >
+                    {"1) What"}
+                  </Text>
+                  <UserBanner
+                    user={{
+                      displayName: "Brian Clanker",
+                      pfp: `${appURL()}/images/default-pfp.png`,
+                    }}
+                    size="sm"
+                    tw="text-4xl"
+                    style={{
+                      fontFamily: "ChakraPetch-Bold",
+                    }}
+                  />
+                </Column>
+              </Row>
+            </Column>
+          </Container>
+          <BrianClankerBanner />
+        </BackgroundImage>
+      ),
+      buttons: [
+        <Button action="link" target={`${appURL()}/token/${address}`}>
+          View
+        </Button>,
+        <Button
+          action="link"
+          target={`https://dexscreener.com/base/${address}`}
+        >
+          DexScreener
+        </Button>,
+        <Button action="link" target={`${appURL()}/token/${address}`}>
+          Buy
+        </Button>,
+      ],
+      imageOptions: {
+        aspectRatio: "1:1",
+      },
+    };
+  }
+});
+
+export const GET = frameHandler;
+export const POST = frameHandler;
diff --git a/src/app/frames/token/route.tsx b/src/app/frames/token/route.tsx
deleted file mode 100644
index d51d39a..0000000
--- a/src/app/frames/token/route.tsx
+++ /dev/null
@@ -1,99 +0,0 @@
-/* eslint-disable react/jsx-key */
-import { frames } from "@/app/frames/frames";
-import { appURL } from "@/app/utils";
-import { Button } from "frames.js/next";
-import { Container } from "@/app/frames/components/container";
-import { Column } from "@/app/frames/components/column";
-import { Text } from "@/app/frames/components/text";
-import { Row } from "@/app/frames/components/row";
-import { UserBanner } from "@/app/frames/components/user-banner";
-import { BrianClankerBanner } from "@/app/frames/components/brian-clanker-banner";
-import { BackgroundImage } from "../components/background-image";
-
-const frameHandler = frames(async (ctx) => {
-  return {
-    image: (
-      <BackgroundImage
-        src={`${appURL()}/images/square_desert_painted.png`}
-        width="1080px"
-        height="1080px"
-        container="absolute"
-      >
-        <Container>
-          <Column tw="my-auto mx-auto bg-black/75 text-white rounded-xl w-[800px] py-[20px]">
-            {/* <Text tw="text-[80px] mb-8 mx-auto">Copy Trade on Interface</Text> */}
-            <img
-              src={`${appURL()}/images/copy.png`}
-              tw="w-[760px] h-[760px] rounded-xl mx-auto"
-            />
-            <Row tw="mt-8 justify-between w-[760px] mx-auto">
-              <Column tw="">
-                <Text
-                  tw="text-3xl mb-4"
-                  style={{
-                    fontFamily: "ChakraPetch-Regular",
-                  }}
-                >
-                  Copy Trade on Interface
-                </Text>
-                <Text
-                  tw="text-5xl h-[60px] items-center"
-                  style={{
-                    fontFamily: "ChakraPetch-Bold",
-                  }}
-                >
-                  $copy
-                </Text>
-              </Column>
-              <Column>
-                <Text
-                  tw="text-3xl mb-4"
-                  style={{
-                    fontFamily: "ChakraPetch-Regular",
-                  }}
-                >
-                  Requested by
-                </Text>
-                <UserBanner
-                  user={{
-                    displayName: "itsmide.eth",
-                    pfp: "https://avatars.githubusercontent.com/u/75645114?v=4",
-                  }}
-                  size="sm"
-                  tw="text-5xl"
-                  style={{
-                    fontFamily: "ChakraPetch-Bold",
-                  }}
-                />
-              </Column>
-            </Row>
-          </Column>
-        </Container>
-        <BrianClankerBanner />
-      </BackgroundImage>
-    ),
-    buttons: [
-      <Button action="link" target={{ pathname: `${appURL()}/token` }}>
-        View
-      </Button>,
-      <Button
-        action="link"
-        target={{
-          pathname:
-            "https://dexscreener.com/base/0xc1a6fbedae68e1472dbb91fe29b51f7a0bd44f97",
-        }}
-      >
-        DexScreener
-      </Button>,
-      <Button action="link" target={{ pathname: "/token" }}>
-        Buy
-      </Button>,
-    ],
-    imageOptions: {
-      aspectRatio: "1:1",
-    },
-  };
-});
-
-export const GET = frameHandler;
-export const POST = frameHandler;
diff --git a/src/app/token/[address]/page.tsx b/src/app/token/[address]/page.tsx
index 33c9ab0..7eebdc1 100644
--- a/src/app/token/[address]/page.tsx
+++ b/src/app/token/[address]/page.tsx
@@ -1,9 +1,41 @@
+import type { Metadata } from "next";
+import { fetchMetadata } from "frames.js/next";
+import { getAddress, isAddress } from "viem";
+
+import { createExampleURL } from "@/app/utils";
 import { TokenDetails } from "@/app/components/token-details";
+import { getTokenFromAddress } from "@/utils/db";
+
+export async function generateMetadata({
+  params,
+}: {
+  params: { address: string };
+}): Promise<Metadata> {
+  return {
+    title: "Brian Clanker",
+    description: "Brian Clanker is better",
+    other: {
+      ...(await fetchMetadata(
+        createExampleURL(`/frames/token/${params.address}`)
+      )),
+    },
+  };
+}
+
+export default async function TokenPage({
+  params,
+}: {
+  params: { address: string };
+}) {
+  const address = params.address;
+  if (!address || !isAddress(address, { strict: false })) {
+    return <div>Invalid address</div>;
+  }
+  const token = await getTokenFromAddress(getAddress(address));
 
-export default async function TokenPage() {
   return (
     <div className="p-4 bg-slate-200 rounded-xl w-full">
-      <TokenDetails />
+      <TokenDetails token={token} />
     </div>
   );
 }