diff --git a/packages/nextjs/app/page.tsx b/packages/nextjs/app/page.tsx
index 035b331..e09bc73 100644
--- a/packages/nextjs/app/page.tsx
+++ b/packages/nextjs/app/page.tsx
@@ -1,59 +1,10 @@
-import Link from "next/link";
+import { RepTokensDemo } from "./rep-tokens-demo/_components/RepTokensDemo";
 import type { NextPage } from "next";
-import { BugAntIcon, MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 
 const Home: NextPage = () => {
   return (
     <>
-      <div className="flex items-center flex-col flex-grow pt-10">
-        <div className="px-5">
-          <h1 className="text-center mb-8">
-            <span className="block text-2xl mb-2">Welcome to</span>
-            <span className="block text-4xl font-bold">Scaffold-ETH 2</span>
-          </h1>
-          <p className="text-center text-lg">
-            Get started by editing{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/nextjs/app/page.tsx
-            </code>
-          </p>
-          <p className="text-center text-lg">
-            Edit your smart contract{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              YourContract.sol
-            </code>{" "}
-            in{" "}
-            <code className="italic bg-base-300 text-base font-bold max-w-full break-words break-all inline-block">
-              packages/hardhat/contracts
-            </code>
-          </p>
-        </div>
-
-        <div className="flex-grow bg-base-300 w-full mt-16 px-8 py-12">
-          <div className="flex justify-center items-center gap-12 flex-col sm:flex-row">
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <BugAntIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Tinker with your smart contract using the{" "}
-                <Link href="/debug" passHref className="link">
-                  Debug Contract
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-            <div className="flex flex-col bg-base-100 px-10 py-10 text-center items-center max-w-xs rounded-3xl">
-              <MagnifyingGlassIcon className="h-8 w-8 fill-secondary" />
-              <p>
-                Explore your local transactions with the{" "}
-                <Link href="/blockexplorer" passHref className="link">
-                  Block Explorer
-                </Link>{" "}
-                tab.
-              </p>
-            </div>
-          </div>
-        </div>
-      </div>
+      <RepTokensDemo />
     </>
   );
 };
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index 86112d1..a0bdd24 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -1,10 +1,10 @@
 "use client";
 
-import { tokenCardConfigProps as singleCardConfig } from "./SingleCardConfig";
+import { tokenCardConfigProps as singleCardConfig } from "./configs/SingleCardConfig";
 import { useAccount } from "wagmi";
-import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardConfig";
-import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig";
-import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/NavBarCardConfig";
+import { tokenGroupCardConfigProps as mainTokenGroupCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardConfig";
+import { tokenGroupCardConfigProps as mainTokenGroupOverlayCardConfigProps } from "~~/app/rep-tokens-demo/_components/configs/MainTokensCardWithNumberOverlayConfig";
+import { tokenGroupCardConfigProps as navBarTokenGroupConfigProps } from "~~/app/rep-tokens-demo/_components/configs/NavBarCardConfig";
 import { TokenCard } from "~~/components/rep-tokens/cards/token-card/TokenCard";
 import { TokenGroupCard } from "~~/components/rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "~~/components/rep-tokens/hooks/Hooks";
@@ -66,12 +66,10 @@ export function RepTokensDemo() {
 
   const singleCard0 = buildTokenCard(tokensData?.tokens[0], tokensData.address, singleCardConfig);
 
+  console.log(singleCard0);
+
   return (
     <>
-      <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
-        <div></div>
-      </div>
-
       <div className="flex flex-col justify-center items-center bg-primary bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
         <div>
           <TokenCard props={singleCard0} />
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/configs/MainTokensCardConfig.ts
similarity index 90%
rename from packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx
rename to packages/nextjs/app/rep-tokens-demo/_components/configs/MainTokensCardConfig.ts
index 819bc7b..5d1ff83 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardConfig.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/configs/MainTokensCardConfig.ts
@@ -1,11 +1,11 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import { ImageProps } from "../../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
   TokenCardConfigProps,
   TokenCardValuesConfigProps,
   ValueCardConfigProps,
-} from "../../../components/rep-tokens/types/Types";
-import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/Types";
+} from "../../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/configs/MainTokensCardWithNumberOverlayConfig.ts
similarity index 90%
rename from packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx
rename to packages/nextjs/app/rep-tokens-demo/_components/configs/MainTokensCardWithNumberOverlayConfig.ts
index 2a02e01..ea859fc 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/MainTokensCardWithNumberOverlayConfig.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/configs/MainTokensCardWithNumberOverlayConfig.ts
@@ -1,11 +1,11 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import { ImageProps } from "../../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
   TokenCardConfigProps,
   TokenCardValuesConfigProps,
   ValueCardConfigProps,
-} from "../../../components/rep-tokens/types/Types";
-import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/Types";
+} from "../../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/configs/NavBarCardConfig.ts
similarity index 86%
rename from packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx
rename to packages/nextjs/app/rep-tokens-demo/_components/configs/NavBarCardConfig.ts
index 9f5781f..e8847bd 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/NavBarCardConfig.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/configs/NavBarCardConfig.ts
@@ -1,11 +1,11 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import { ImageProps } from "../../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
   TokenCardConfigProps,
   TokenCardValuesConfigProps,
   ValueCardConfigProps,
-} from "../../../components/rep-tokens/types/Types";
-import { TokenGroupCardConfigProps } from "../../../components/rep-tokens/types/Types";
+} from "../../../../components/rep-tokens/types/Types";
+import { TokenGroupCardConfigProps } from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,
diff --git a/packages/nextjs/app/rep-tokens-demo/_components/SingleCardConfig.tsx b/packages/nextjs/app/rep-tokens-demo/_components/configs/SingleCardConfig.ts
similarity index 76%
rename from packages/nextjs/app/rep-tokens-demo/_components/SingleCardConfig.tsx
rename to packages/nextjs/app/rep-tokens-demo/_components/configs/SingleCardConfig.ts
index ef217b5..9c1e7e9 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/SingleCardConfig.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/configs/SingleCardConfig.ts
@@ -1,15 +1,15 @@
-import { ImageProps } from "../../../components/rep-tokens/cards/value-cards/ImageCard";
+import { ImageProps } from "../../../../components/rep-tokens/cards/value-cards/ImageCard";
 import {
   ImageValueCardConfigProp,
   TokenCardConfigProps,
   TokenCardValuesConfigProps,
   ValueCardConfigProps,
-} from "../../../components/rep-tokens/types/Types";
+} from "../../../../components/rep-tokens/types/Types";
 
 export const balanceProps = {
   isRendering: true,
   classes: {
-    card: "bg-red-300 rounded-lg bg-slate-300",
+    card: "rounded-lg bg-red-300",
     value: "text-4xl mx-auto text-center text-black",
   },
   isPrettyLoading: true,
@@ -18,7 +18,7 @@ export const balanceProps = {
 export const imageProps = {
   isRendering: true,
   classes: {
-    card: "bg-cyan-300 rounded-lg bg-slate-300 p-1",
+    card: "rounded-lg bg-cyan-300  p-1",
     value: "rounded-lg mx-auto",
   },
   imageProperties: new ImageProps("Token", 256, 256),
@@ -28,7 +28,7 @@ export const imageProps = {
 export const nameProps = {
   isRendering: true,
   classes: {
-    card: "bg-lime-300 rounded-lg bg-slate-300",
+    card: "rounded-lg bg-lime-300 ",
     value: "text-1xl text-center object-center mx-auto font-bold break-all text-black",
   },
   isPrettyLoading: true,
@@ -37,7 +37,7 @@ export const nameProps = {
 export const descriptionProps = {
   isRendering: true,
   classes: {
-    card: "bg-violet-300 rounded-lg bg-slate-300",
+    card: "rounded-lg bg-violet-300",
     value: "text-1xl mx-auto text-center break-words text-black",
   },
   isPrettyLoading: true,
@@ -46,7 +46,7 @@ export const descriptionProps = {
 export const addressProps = {
   isRendering: true,
   classes: {
-    card: "bg-pink-300 rounded-lg flex items-center justify-center bg-slate-300",
+    card: "rounded-lg flex items-center justify-center bg-pink-300",
     value: " ml-1.5 text-base font-normal text-cyan-800",
   },
   isPrettyLoading: true,
diff --git a/packages/nextjs/app/rep-tokens-demo/page.tsx b/packages/nextjs/app/rep-tokens-demo/page.tsx
deleted file mode 100644
index 75beede..0000000
--- a/packages/nextjs/app/rep-tokens-demo/page.tsx
+++ /dev/null
@@ -1,18 +0,0 @@
-import { RepTokensDemo } from "./_components/RepTokensDemo";
-import type { NextPage } from "next";
-import { getMetadata } from "~~/utils/scaffold-eth/getMetadata";
-
-export const metadata = getMetadata({
-  title: "Debug Contracts",
-  description: "Debug your deployed 🏗 Scaffold-ETH 2 contracts in an easy way",
-});
-
-const RepTokensDemoPage: NextPage = () => {
-  return (
-    <>
-      <RepTokensDemo />
-    </>
-  );
-};
-
-export default RepTokensDemoPage;
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index 98da7f8..f24a1de 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -24,10 +24,6 @@ export const menuLinks: HeaderMenuLink[] = [
     href: "/debug",
     icon: <BugAntIcon className="h-4 w-4" />,
   },
-  {
-    label: "Rep Tokens Demo",
-    href: "/rep-tokens-demo",
-  },
 ];
 
 export const HeaderMenuLinks = () => {
diff --git a/packages/nextjs/components/rep-tokens/cards/value-cards/BalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/value-cards/BalanceCard.tsx
index 97f50e4..7b424a6 100644
--- a/packages/nextjs/components/rep-tokens/cards/value-cards/BalanceCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/value-cards/BalanceCard.tsx
@@ -13,6 +13,8 @@ export interface BigIntCardPropsInternal {
 export const BalanceCard = ({ props }: BigIntCardPropsInternal) => {
   let output;
 
+  console.log(props);
+
   props?.isPrettyLoading
     ? props?.value !== undefined
       ? (output = Number(props?.value))