diff --git a/.scripts/set-local-install.js b/.scripts/set-local-install.js
new file mode 100644
index 000000000..2ad93e82d
--- /dev/null
+++ b/.scripts/set-local-install.js
@@ -0,0 +1,16 @@
+const { execSync } = require("child_process");
+const path = require("path");
+
+try {
+  const scriptPath = path.resolve(__dirname, "vercel-local-install.sh");
+  console.log("Running local installation script...");
+
+  execSync(`bash ${scriptPath}`, {
+    stdio: "inherit",
+  });
+
+  console.log("Local installation completed successfully");
+} catch (error) {
+  console.error("Error during local installation:", error.message);
+  process.exit(1);
+}
diff --git a/.scripts/vercel-local-install.sh b/.scripts/vercel-local-install.sh
new file mode 100644
index 000000000..736093fd6
--- /dev/null
+++ b/.scripts/vercel-local-install.sh
@@ -0,0 +1,5 @@
+# if secrets folder exists, copy the static folder to the apps
+if [ -d "secrets/static" ]; then
+    mkdir -p apps/hub/public/internal-env
+    cp -r secrets/static/* apps/hub/public/internal-env
+fi
\ No newline at end of file
diff --git a/apps/hub/next.config.mjs b/apps/hub/next.config.mjs
index 767aa5474..87bf03362 100755
--- a/apps/hub/next.config.mjs
+++ b/apps/hub/next.config.mjs
@@ -39,6 +39,9 @@ const config = {
       "res.cloudinary.com",
       "raw.githubusercontent.com",
       "s3.amazonaws.com",
+      "assets.coingecko.com",
+      "artio-static-asset-public.s3.ap-southeast-1.amazonaws.com", // clean this up with new links
+      // Add google cdn here as well
     ],
   },
 };
diff --git a/apps/hub/src/app/Providers.tsx b/apps/hub/src/app/Providers.tsx
index b8a4caa23..e7f7160da 100755
--- a/apps/hub/src/app/Providers.tsx
+++ b/apps/hub/src/app/Providers.tsx
@@ -1,14 +1,24 @@
 "use client";
 
 import React, { useEffect, type PropsWithChildren } from "react";
-import { BeraJsProvider, BlockTimeProvider } from "@bera/berajs";
+import {
+  BeraJsProvider,
+  BlockTimeProvider,
+  SWRFallback,
+  formatTokenList,
+} from "@bera/berajs";
+import { chainId, tokenListUrl } from "@bera/config";
 import { BeraWagmi } from "@bera/wagmi";
 import posthog from "posthog-js";
 import { PostHogProvider } from "posthog-js/react";
+import { unstable_serialize } from "swr";
 
 import { ThemeProvider } from "~/components/theme-provider";
 
-export default function Providers({ children }: PropsWithChildren<any>) {
+export default function Providers({
+  children,
+  content,
+}: PropsWithChildren<any>) {
   useEffect(() => {
     if (!process.env.NEXT_PUBLIC_POSTHOG_KEY) {
       return;
@@ -24,14 +34,21 @@ export default function Providers({ children }: PropsWithChildren<any>) {
       <BeraWagmi>
         <BeraJsProvider configOverride={undefined}>
           <BlockTimeProvider>
-            <ThemeProvider
-              attribute="class"
-              defaultTheme="dark"
-              forcedTheme="dark"
-              themes={["dark"]}
+            <SWRFallback
+              fallback={{
+                [unstable_serialize(["useTokens", tokenListUrl])]:
+                  formatTokenList(content?.tokens ?? [], [], chainId),
+              }}
             >
-              {children}
-            </ThemeProvider>
+              <ThemeProvider
+                attribute="class"
+                defaultTheme="dark"
+                forcedTheme="dark"
+                themes={["dark"]}
+              >
+                {children}
+              </ThemeProvider>
+            </SWRFallback>
           </BlockTimeProvider>
         </BeraJsProvider>
       </BeraWagmi>
diff --git a/apps/hub/src/app/layout.tsx b/apps/hub/src/app/layout.tsx
index 11e40a1ca..a4880463f 100755
--- a/apps/hub/src/app/layout.tsx
+++ b/apps/hub/src/app/layout.tsx
@@ -1,9 +1,11 @@
 import "../styles/globals.css";
+import { readFileSync } from "fs";
+import path from "path";
 import { Metadata } from "next";
 import dynamic from "next/dynamic";
 import { IBM_Plex_Sans } from "next/font/google";
 import Script from "next/script";
-import { hubName, hubUrl } from "@bera/config";
+import { chainId, hubName, hubUrl, tokenListUrl } from "@bera/config";
 import {
   Footer,
   Header,
@@ -35,7 +37,12 @@ const PostHogPageView = dynamic(() => import("./PostHogPageView"), {
   ssr: false,
 });
 
-export default function RootLayout(props: { children: React.ReactNode }) {
+export default async function RootLayout(props: { children: React.ReactNode }) {
+  const fileContent = readFileSync(
+    path.join(process.cwd(), `public/${tokenListUrl}`),
+    "utf8",
+  );
+  const fetchedTokenList = JSON.parse(fileContent);
   return (
     <html lang="en" className="bg-background">
       <Script
@@ -52,7 +59,7 @@ export default function RootLayout(props: { children: React.ReactNode }) {
         })(window,document,'https://static.hotjar.com/c/hotjar-','.js?sv=');`,
         }}
       />
-      <Providers>
+      <Providers content={fetchedTokenList}>
         <body
           className={cn(
             "min-h-screen font-sans antialiased",
diff --git a/package.json b/package.json
index 4ba054f9d..9d00e85d6 100755
--- a/package.json
+++ b/package.json
@@ -29,7 +29,8 @@
     "check": "biome check .",
     "prepare": "husky install",
     "upsertenv": "node ./scripts/upsertVercelEnv.js",
-    "knip": "knip --exclude binaries"
+    "knip": "knip --exclude binaries",
+    "local-install": "node ./.scripts/set-local-install.js"
   },
   "dependencies": {
     "@ianvs/prettier-plugin-sort-imports": "^3.7.2",
diff --git a/packages/berajs/src/actions/dex/getTokens.ts b/packages/berajs/src/actions/dex/getTokens.ts
index 20f0260ea..ef717c800 100755
--- a/packages/berajs/src/actions/dex/getTokens.ts
+++ b/packages/berajs/src/actions/dex/getTokens.ts
@@ -1,11 +1,10 @@
-import { chainId } from "@bera/config";
+import { chainId, tokenListUrl } from "@bera/config";
 
-import { BeraConfig } from "../../types";
 import { Token } from "../../types/dex";
+import { formatTokenList, tokenListToDict } from "../../utils/formatTokenList";
 
 export interface GetTokensRequest {
   externalList?: Token[];
-  config: BeraConfig;
 }
 
 export interface GetTokens {
@@ -15,22 +14,11 @@ export interface GetTokens {
   featuredTokenList?: Token[] | undefined;
 }
 
-/**
- * fetch and format the token list
- */
-function tokenListToDict(list: Token[]): { [key: string]: Token } {
-  return list.reduce((acc, item) => {
-    // @ts-ignore
-    acc[item.address] = item;
-    return acc;
-  }, {});
-}
-
 export const getTokens = async ({
   externalList,
-  config,
 }: GetTokensRequest): Promise<GetTokens> => {
-  if (!config.endpoints?.tokenList) {
+  console.log("getting tokens", externalList);
+  if (!tokenListUrl) {
     return {
       tokenList: [],
       customTokenList: [...(externalList ?? [])],
@@ -39,49 +27,9 @@ export const getTokens = async ({
     };
   }
   try {
-    const tokenList = await fetch(config.endpoints?.tokenList);
+    const tokenList = await fetch(tokenListUrl);
     const temp = await tokenList.json();
-    if (!temp.tokens)
-      return {
-        tokenList: externalList ?? [],
-        customTokenList: externalList ?? [],
-        featuredTokenList: [],
-        tokenDictionary: {},
-      };
-    const defaultList = temp.tokens
-      .filter(
-        (token: any) =>
-          !token.chainId || Number(token.chainId) === Number(chainId),
-      )
-      .map((token: any) => {
-        return { ...token, default: true };
-      });
-
-    const isFeatured = (tag: string) => tag === "featured";
-
-    const defaultFeaturedList = defaultList
-      .filter((token: any) => {
-        return token.tags.some(isFeatured);
-      })
-      .map((token: any) => {
-        return { ...token, default: true };
-      });
-
-    const list = [...defaultList, ...(externalList ?? [])];
-
-    const uniqueList = list.filter(
-      (item, index) =>
-        list.findIndex((i) => i.address === item.address) === index,
-    );
-
-    console.log({ uniqueList, temp, defaultList, defaultFeaturedList });
-
-    return {
-      tokenList: uniqueList,
-      customTokenList: [...(externalList ?? [])],
-      tokenDictionary: tokenListToDict(list),
-      featuredTokenList: defaultFeaturedList ?? [],
-    };
+    return formatTokenList(temp.tokens, externalList ?? [], chainId);
   } catch (error) {
     console.error("Error fetching token list", error);
     return {
diff --git a/packages/berajs/src/hooks/useTokens.ts b/packages/berajs/src/hooks/useTokens.ts
index 70df2c668..da91dccb7 100755
--- a/packages/berajs/src/hooks/useTokens.ts
+++ b/packages/berajs/src/hooks/useTokens.ts
@@ -1,5 +1,6 @@
 import useSWRImmutable from "swr/immutable";
 import { useLocalStorage } from "usehooks-ts";
+import { tokenListUrl } from "@bera/config";
 
 import {
   DefaultHookOptions,
@@ -24,12 +25,13 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
     Token[]
   >(TOKEN_KEY, []);
   const swrResponse = useSWRImmutable<GetTokens>(
-    ["defaultTokenList", localStorageTokenList, config],
+    ["useTokens", tokenListUrl],
     async () => {
-      return getTokens({ externalList: localStorageTokenList, config });
+      return getTokens({ externalList: localStorageTokenList });
     },
     {
       ...options?.opts,
+      revalidateOnMount: true,
     },
   );
 
@@ -54,6 +56,7 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
       ? [...localStorageTokenList]
       : [...localStorageTokenList, acceptedToken as Token];
     setLocalStorageTokenList(updatedData);
+    swrResponse?.mutate();
     // Update config data and store it in localStorage
   };
 
@@ -64,6 +67,7 @@ export const useTokens = (options?: DefaultHookOptions): IUseTokens => {
 
     const updatedData = [...filteredList];
     setLocalStorageTokenList(updatedData);
+    swrResponse?.mutate();
   };
 
   return {
diff --git a/packages/berajs/src/types/dex.ts b/packages/berajs/src/types/dex.ts
index 1fe3eae1c..11daca5db 100755
--- a/packages/berajs/src/types/dex.ts
+++ b/packages/berajs/src/types/dex.ts
@@ -15,6 +15,7 @@ export type Token = {
   usdValue?: string;
   beraValue?: string;
   weight?: number;
+  base64?: string;
 };
 
 export interface TokenWithAmount extends Token {
diff --git a/packages/berajs/src/utils/formatTokenList.ts b/packages/berajs/src/utils/formatTokenList.ts
new file mode 100644
index 000000000..0f284b0ed
--- /dev/null
+++ b/packages/berajs/src/utils/formatTokenList.ts
@@ -0,0 +1,60 @@
+import { Token } from "../types";
+
+/**
+ * fetch and format the token list
+ */
+function tokenListToDict(list: Token[]): { [key: string]: Token } {
+  return list.reduce((acc, item) => {
+    // @ts-ignore
+    acc[item.address] = item;
+    return acc;
+  }, {});
+}
+
+const formatTokenList = (
+  tokenList: Token[],
+  externalList: Token[],
+  chainId: number,
+) => {
+  if (!tokenList)
+    return {
+      tokenList: externalList ?? [],
+      customTokenList: externalList ?? [],
+      featuredTokenList: [],
+      tokenDictionary: {},
+    };
+  const defaultList = tokenList
+    .filter(
+      (token: any) =>
+        !token.chainId || Number(token.chainId) === Number(chainId),
+    )
+    .map((token: any) => {
+      return { ...token, default: true };
+    });
+
+  const isFeatured = (tag: string) => tag === "featured";
+
+  const defaultFeaturedList = defaultList
+    .filter((token: any) => {
+      return token.tags.some(isFeatured);
+    })
+    .map((token: any) => {
+      return { ...token, default: true };
+    });
+
+  const list = [...defaultList, ...(externalList ?? [])];
+
+  const uniqueList = list.filter(
+    (item, index) =>
+      list.findIndex((i) => i.address === item.address) === index,
+  );
+
+  return {
+    tokenList: uniqueList,
+    customTokenList: [...(externalList ?? [])],
+    tokenDictionary: tokenListToDict(list),
+    featuredTokenList: defaultFeaturedList ?? [],
+  };
+};
+
+export { formatTokenList, tokenListToDict };
diff --git a/packages/berajs/src/utils/index.ts b/packages/berajs/src/utils/index.ts
index 19cba48a5..eafd7b952 100755
--- a/packages/berajs/src/utils/index.ts
+++ b/packages/berajs/src/utils/index.ts
@@ -13,3 +13,4 @@ export * from "./formatNumber";
 export * from "./formatTimestamps";
 export * from "./tokenWrapping";
 export * from "./errorMessages";
+export * from "./formatTokenList";
diff --git a/packages/shared-ui/src/token-icon.tsx b/packages/shared-ui/src/token-icon.tsx
index 50563c926..eed5491bd 100755
--- a/packages/shared-ui/src/token-icon.tsx
+++ b/packages/shared-ui/src/token-icon.tsx
@@ -1,9 +1,10 @@
 "use client";
 
-import { useMemo } from "react";
+import { useMemo, useState } from "react";
+import Image from "next/image";
 import { useTokens } from "@bera/berajs";
 import { cn } from "@bera/ui";
-import { Avatar, AvatarFallback, AvatarImage } from "@bera/ui/avatar";
+import { CustomAvatar } from "@bera/ui/custom-avatar";
 import { cva, type VariantProps } from "class-variance-authority";
 import { getAddress, isAddress } from "viem";
 
@@ -44,24 +45,42 @@ export const TokenIcon = ({
   ...props
 }: IconProps) => {
   const { data: tokenData } = useTokens();
+  const [imageError, setImageError] = useState(false);
+  const [isLoading, setIsLoading] = useState(true);
   const address = isAddress(adr ?? "") ? getAddress(adr ?? "") : adr;
   const img = useMemo(() => {
     if (tokenData?.tokenDictionary && address && isAddress(address)) {
+      const uploadedToken = tokenData?.tokenDictionary?.[address];
+      if (uploadedToken?.base64) {
+        setIsLoading(false);
+        return `data:image/svg+xml;base64,${uploadedToken.base64}`;
+      }
       return tokenData?.tokenDictionary[address]?.logoURI;
     }
     return "";
   }, [tokenData?.tokenDictionary, tokenData?.tokenDictionary?.[address ?? ""]]);
 
+  const finalImageUrl = imgOverride ?? img ?? "";
+
   return (
-    <Avatar className={cn(IconVariants({ size }), className)} {...props}>
-      <AvatarImage
-        src={imgOverride ?? img}
-        className="rounded-full"
-        alt={address}
-      />
-      <AvatarFallback className="h-full w-full border border-foreground bg-background text-inherit">
-        {symbol ? symbol.slice(0, 3) : "TKN"}
-      </AvatarFallback>
-    </Avatar>
+    <CustomAvatar
+      fallbackText={symbol ? symbol.slice(0, 3) : "TKN"}
+      className={cn(IconVariants({ size }), className)}
+      isNodeLoading={isLoading}
+      imageNode={
+        finalImageUrl && !imageError ? (
+          <Image
+            src={finalImageUrl}
+            alt="Custom Avatar"
+            fill
+            style={{ opacity: isLoading ? 0 : 1 }}
+            className={cn("aspect-square h-full w-full")}
+            onLoad={() => setIsLoading(false)}
+            onError={() => setImageError(true)}
+          />
+        ) : null
+      }
+      {...props}
+    />
   );
 };
diff --git a/packages/ui/package.json b/packages/ui/package.json
index 7078451f1..b78bfe578 100755
--- a/packages/ui/package.json
+++ b/packages/ui/package.json
@@ -226,6 +226,10 @@
       "import": "./dist/pagination.mjs",
       "types": "./dist/pagination.d.ts"
     },
+    "./custom-avatar": {
+      "import": "./dist/custom-avatar.mjs",
+      "types": "./dist/custom-avatar.d.ts"
+    },
     "./badge": {
       "import": "./dist/badge.mjs",
       "types": "./dist/badge.d.ts"
@@ -396,6 +400,9 @@
       ],
       "radio-group": [
         "dist/radio-group.d.ts"
+      ],
+      "custom-avatar": [
+        "dist/custom-avatar.d.ts"
       ]
     }
   },
diff --git a/packages/ui/src/custom-avatar.tsx b/packages/ui/src/custom-avatar.tsx
new file mode 100644
index 000000000..585470397
--- /dev/null
+++ b/packages/ui/src/custom-avatar.tsx
@@ -0,0 +1,144 @@
+"use client";
+
+import * as React from "react";
+import * as AvatarPrimitive from "@radix-ui/react-avatar";
+
+import { cn } from "./utils/cn";
+
+interface CustomAvatarProps
+  extends React.ComponentPropsWithoutRef<typeof AvatarPrimitive.Root> {
+  /**
+   * The image source URL to load via a standard <img> element by default.
+   * If this is provided and `imageNode` is not, a standard <img> is used.
+   */
+  src?: string;
+  /**
+   * The alt text for the image if using `src`.
+   */
+  alt?: string;
+  /**
+   * Fallback content to display if the image fails to load or is not provided.
+   * This can be initials, an icon, or any React element.
+   */
+  fallbackText?: React.ReactNode | string;
+  /**
+   * Width of the avatar in pixels.
+   */
+  width?: number;
+  /**
+   * Height of the avatar in pixels.
+   */
+  height?: number;
+  /**
+   * A React node that can be used to render a custom image.
+   * For example, a Next.js <Image> component. If provided, `src` is ignored.
+   */
+  imageNode?: React.ReactNode;
+  /**
+   * Custom className for the fallback element.
+   */
+  fallbackClassName?: string;
+  /**
+   * Whether the avatar is loading.
+   */
+  isNodeLoading?: boolean;
+}
+
+/**
+ * Avatar component that displays an image (img by default), a custom image node, or a fallback.
+ */
+const CustomAvatar = React.forwardRef<
+  React.ElementRef<typeof AvatarPrimitive.Root>,
+  CustomAvatarProps
+>(
+  (
+    {
+      className,
+      src,
+      alt = "Avatar",
+      fallbackText,
+      width = 40,
+      height = 40,
+      imageNode,
+      fallbackClassName,
+      isNodeLoading,
+      ...props
+    },
+    ref,
+  ) => {
+    const [hasError, setHasError] = React.useState(false);
+    const [isLoading, setIsLoading] = React.useState(true);
+
+    const AvatarFallback = React.useMemo(
+      () => (
+        <AvatarPrimitive.Fallback
+          className={cn(
+            "flex h-full w-full items-center justify-center rounded-full bg-muted",
+            fallbackClassName,
+          )}
+        >
+          {fallbackText ?? "?"}
+        </AvatarPrimitive.Fallback>
+      ),
+      [fallbackText, fallbackClassName],
+    );
+
+    const ImageContent = React.useMemo(() => {
+      if (imageNode) {
+        return (
+          <div className="relative h-full w-full">
+            {imageNode}
+            {isNodeLoading && AvatarFallback}
+          </div>
+        );
+      }
+
+      if (src && !hasError) {
+        return (
+          <>
+            <img
+              src={src}
+              alt={alt}
+              className="h-full w-full rounded-full object-cover"
+              style={{ display: isLoading ? "none" : "block" }}
+              onLoad={() => setIsLoading(false)}
+              onError={() => setHasError(true)}
+              width={width}
+              height={height}
+            />
+            {isLoading && AvatarFallback}
+          </>
+        );
+      }
+
+      return AvatarFallback;
+    }, [
+      imageNode,
+      src,
+      hasError,
+      isLoading,
+      isNodeLoading,
+      alt,
+      width,
+      height,
+      AvatarFallback,
+    ]);
+
+    return (
+      <AvatarPrimitive.Root
+        ref={ref}
+        className={cn(
+          "relative flex shrink-0 overflow-hidden rounded-full",
+          `h-[${height}px] w-[${width}px]`,
+          className,
+        )}
+        {...props}
+      >
+        {ImageContent}
+      </AvatarPrimitive.Root>
+    );
+  },
+);
+CustomAvatar.displayName = "CustomAvatar";
+
+export { CustomAvatar };
diff --git a/packages/ui/tsup.config.ts b/packages/ui/tsup.config.ts
index 408e2a730..3335ef8eb 100755
--- a/packages/ui/tsup.config.ts
+++ b/packages/ui/tsup.config.ts
@@ -41,6 +41,7 @@ const client = [
   "./src/pagination.tsx",
   "./src/table/index.ts",
   "./src/table/legacy/index.ts",
+  "./src/custom-avatar.tsx",
 ];
 
 const server = [