diff --git a/packages/nextjs/components/rep-tokens-demo/Index.tsx b/packages/nextjs/components/rep-tokens-demo/Index.tsx
index ca01782..8d8d995 100644
--- a/packages/nextjs/components/rep-tokens-demo/Index.tsx
+++ b/packages/nextjs/components/rep-tokens-demo/Index.tsx
@@ -1,28 +1,25 @@
-import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
+// import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
 import { TokenGroupCard } from "../rep-tokens/cards/token-group-card/TokenGroupCard";
 import { useRepTokens } from "../rep-tokens/hooks/Hooks";
-import { buildTokenGroupCard } from "../rep-tokens/utils/buildTokensCard";
-// import { BalanceProp } from "../rep-tokens/cards/token-card/BaseTokenCard";
+import {
+  buildTokenGroupCard, //  RenderProps, TokenElementsClasses
+} from "../rep-tokens/utils/buildTokensCard";
 import {
   tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardLoadingProps,
   tokensCardPrettifyLoadingProps as isBeautifyingMainTokenGroupCardLoadingProps, // isRenderingTokenCardProps as isRenderingMainTokenCardProps,
-  // tokensCardRenderProps as isRenderingMainTokenGroupCardProps,
   tokenCardPropertiesClasses as mainTokenCardPropertiesClasses,
   tokensCardPropertiesClasses as mainTokenGroupCardElementsClassess,
+  tokenCardElementsProps,
 } from "./MainTokensCardConfig";
 // import {
 //   tokenCardPrettifyLoadingProps as isBeautifyingMainTokenCardOverlayLoadingProps,
-//   isRenderingTokenCardProps as isRenderingMainTokenCardOverlayProps,
 //   tokenCardPropertiesClasses as mainNumberOverlayTokenCardPropertiesClasses,
 //   tokensCardPropertiesClasses as mainNumberOverlayTokensCardElementsClasses,
 //   tokensCardPrettifyLoadingProps as mainNumberOverlayTokensCardPrettifyLoadingProps,
-//   // tokensCardRenderProps as mainNumberOverlayTokensCardRenderProps,
 // } from "./MainTokensCardWithNumberOverlayConfig";
 // import {
 //   tokenCardPrettifyLoadingProps as isBeautifyingNavBarLoadingProps,
 //   tokensCardPrettifyLoadingProps as isBeuatyingNavBarTokenGroupCardLoadingProps,
-//   isRenderingTokenCardProps as isRenderingNavBarCardProps,
-//   // tokensCardRenderProps as isRenderingNavBarTokenGroupCardProps,
 //   tokenCardPropertiesClasses as navBarElementsClasses,
 //   tokensCardPropertiesClasses as navBarTokenGroupCardElementsClasses,
 // } from "./NavBarCardConfig";
@@ -30,7 +27,7 @@ import { useAccount } from "wagmi";
 
 export const Index = () => {
   // const navBarCardImageProperties = new ImageProperties("Token", 64, 64);
-  const mainCardImageProperties = new ImageProperties("Token", 256, 256);
+  // const mainCardImageProperties = new ImageProperties("Token", 256, 256);
 
   const { address } = useAccount();
 
@@ -42,33 +39,35 @@ export const Index = () => {
 
   // const navBarTokenCard = buildTokenGroupCard(
   //   tokensData.tokens,
-  //   tokensData.address,
   //   navBarCardImageProperties,
   //   navBarElementsClasses,
-  //   isRenderingNavBarCardProps,
   //   isBeautifyingNavBarLoadingProps,
+  //   false,
+  //   false,
+  //   undefined,
+
   // );
 
+  console.log(tokenCardElementsProps);
+
   const mainTokenGroupCard = buildTokenGroupCard(
     tokensData.tokens,
     tokensData.address,
-    mainCardImageProperties,
+    tokenCardElementsProps,
     mainTokenCardPropertiesClasses,
-    // isRenderingMainTokenCardProps,
     isBeautifyingMainTokenCardLoadingProps,
   );
 
   // const mainNumberOverlayTokenCard = buildTokenGroupCard(
   //   tokensData.tokens,
+  //   true,
+  //   true,
   //   tokensData.address,
   //   mainCardImageProperties,
   //   mainNumberOverlayTokenCardPropertiesClasses,
-  //   isRenderingMainTokenCardOverlayProps,
   //   isBeautifyingMainTokenCardOverlayLoadingProps,
   // );
 
-  console.log(mainTokenGroupCard);
-
   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] ">
@@ -77,7 +76,6 @@ export const Index = () => {
             address={tokensData.address}
             tokenCardsProps={navBarTokenCard}
             elementsClasses={navBarTokenGroupCardElementsClasses}
-            isRenderingTokenGroupCardProps={isRenderingNavBarTokenGroupCardProps}
             isBeautifyingTokenGroupCardLoadingProps={isBeuatyingNavBarTokenGroupCardLoadingProps}
           />
         </div>
@@ -89,19 +87,17 @@ export const Index = () => {
             address={tokensData.address}
             tokenCardsProps={mainTokenGroupCard}
             elementsClasses={mainTokenGroupCardElementsClassess}
-            // isRenderingTokenGroupCardProps={isRenderingMainTokenGroupCardProps}
             isBeautifyingTokenGroupCardLoadingProps={isBeautifyingMainTokenGroupCardLoadingProps}
           />
         </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 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>
           <TokenGroupCard
             address={tokensData.address}
             tokenCardsProps={mainNumberOverlayTokenCard}
             elementsClasses={mainNumberOverlayTokensCardElementsClasses}
-            isRenderingTokenGroupCardProps={mainNumberOverlayTokensCardRenderProps}
             isBeautifyingTokenGroupCardLoadingProps={mainNumberOverlayTokensCardPrettifyLoadingProps}
           />
         </div>
diff --git a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
index fccc4db..abe8a32 100644
--- a/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
+++ b/packages/nextjs/components/rep-tokens-demo/MainTokensCardConfig.tsx
@@ -1,3 +1,4 @@
+import { ImageProperties } from "../rep-tokens/cards/property-cards/ImageCard";
 import {
   IsBeautifyingTokenCardLoadingProps,
   IsRenderingTokenCardProps,
@@ -17,6 +18,75 @@ export const tokensCardPropertiesClasses = {
   },
 } as TokenGroupCardElementsClasses;
 
+export interface BaseConfigProp {
+  isRendering: boolean;
+  classes: {
+    container: string;
+    value: string;
+  };
+}
+
+export interface ImageConfigProp extends BaseConfigProp {
+  imageProperties: ImageProperties;
+}
+
+export interface TokenCardConfigProps {
+  balanceProps?: BaseConfigProp;
+  imageProps?: ImageConfigProp;
+  nameProps?: BaseConfigProp;
+  descriptionProps?: BaseConfigProp;
+  addressProps?: BaseConfigProp;
+}
+
+export const balanceProps = {
+  isRendering: true,
+  classes: {
+    container: "bg-slate-300",
+    value: "text-4xl mx-auto text-center",
+  },
+} as BaseConfigProp;
+
+export const imageProps = {
+  isRendering: true,
+  classes: {
+    container: "bg-slate-300 p-1",
+    value: "rounded mx-auto",
+  },
+  imageProperties: new ImageProperties("Token", 256, 256),
+} as ImageConfigProp;
+
+export const nameProps = {
+  isRendering: true,
+  classes: {
+    container: "bg-slate-300",
+    value: "text-1xl text-center object-center mx-auto font-bold break-all",
+  },
+} as BaseConfigProp;
+
+export const descriptionProps = {
+  isRendering: true,
+  classes: {
+    container: "bg-slate-300",
+    value: "text-1xl mx-auto text-center break-words",
+  },
+} as BaseConfigProp;
+
+export const addressProps = {
+  isRendering: true,
+  classes: {
+    container: "flex items-center justify-center bg-slate-300",
+    value: "rounded mx-auto",
+  },
+} as BaseConfigProp;
+
+export const tokenCardElementsProps = {
+  balanceProps,
+  imageProps,
+  nameProps,
+  descriptionProps,
+  addressProps,
+} as TokenCardConfigProps;
+
 export const tokenCardPropertiesClasses = {
   card: "bg-slate-600 p-5 m-4 w-64",
   baseTokenCardElementsClasses: {
diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx
index 2d8a62b..5e2c7b1 100644
--- a/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/property-cards/BalanceCard.tsx
@@ -1,4 +1,4 @@
-import { ElementClasses } from "../types/Types";
+import { ElementClasses } from "../../types/Types";
 
 type TBalanceCardProps = {
   value: bigint;
diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx
index 2ece819..cade74b 100644
--- a/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/property-cards/ImageCard.tsx
@@ -1,5 +1,5 @@
 import Image from "next/image";
-import { ElementClasses } from "../types/Types";
+import { ElementClasses } from "../../types/Types";
 
 type TImageCardProps = {
   value: string;
diff --git a/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx b/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx
index 8a13c25..abe1809 100644
--- a/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/property-cards/StringCard.tsx
@@ -1,4 +1,4 @@
-import { ElementClasses } from "../types/Types";
+import { ElementClasses } from "../../types/Types";
 
 type TStringCardProps = {
   value: string;
diff --git a/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
index d4eafed..31b14d4 100644
--- a/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/token-card/BaseTokenCard.tsx
@@ -1,18 +1,21 @@
 import { Token } from "../../hooks/Hooks";
+import { ElementClasses } from "../../types/Types";
 import { BalanceCard } from "../property-cards/BalanceCard";
 import { ImageCard } from "../property-cards/ImageCard";
 import { ImageProperties } from "../property-cards/ImageCard";
 import { StringCard } from "../property-cards/StringCard";
-import { ElementClasses } from "../types/Types";
 import { Address } from "~~/components/scaffold-eth";
 
 export interface BaseTokenCardProps {
   token: Token;
-  address?: string;
-  imageProperties?: ImageProperties;
-  elementsClasses?: BaseTokenCardElementsClasses;
-  isBeautifyLoadingElementsProps?: BaseTokenCardElementsSetOfBooleans;
-  // isRenderingElementsProps?: BaseTokenCardElementsSetOfBooleans;
+  balanceProp?: BalanceProp;
+  nameProp?: NameProp;
+  descriptionProp?: DescriptionProp;
+  imageProp?: ImageProp;
+  addressProp?: AddressProp;
+}
+
+export interface BaseTokenCardElementsProps {
   balanceProp?: BalanceProp;
   nameProp?: NameProp;
   descriptionProp?: DescriptionProp;
@@ -51,28 +54,7 @@ export interface AddressProp {
   isBeautifyLoading?: boolean;
 }
 
-export interface BaseTokenCardElementsClasses {
-  balance: ElementClasses;
-  name: ElementClasses;
-  description: ElementClasses;
-  image: ElementClasses;
-  address: ElementClasses;
-}
-
-export interface BaseTokenCardElementsSetOfBooleans {
-  balance: boolean;
-  name: boolean;
-  description: boolean;
-  image: boolean;
-  address: boolean;
-}
-
 export const BaseTokenCard = ({
-  // token,
-  address,
-  // imageProperties,
-  elementsClasses,
-  // isBeautifyLoadingElementsProps = { balance: false, image: false, name: false, description: false, address: false },
   balanceProp,
   nameProp,
   descriptionProp,
@@ -118,51 +100,7 @@ export const BaseTokenCard = ({
       ) : (
         <></>
       )}
-      {addressProp ? <Address address={address} propertyClasses={elementsClasses?.address} /> : <></>}
-
-      {/* {isRenderingElementsProps.balance ? (
-        <BalanceCard
-          value={token.balance}
-          elementClasses={elementsClasses?.balance}
-          prettifyLoading={isBeautifyLoadingElementsProps?.balance}
-        />
-      ) : (
-        <></>
-      )} */}
-
-      {/* {isRenderingElementsProps.image ? (
-        <ImageCard
-          value={token.image}
-          imageProperties={imageProperties}
-          elementClasses={elementsClasses?.image}
-          prettifyLoading={isBeautifyLoadingElementsProps?.image}
-        />
-      ) : (
-        <></>
-      )}
-      {isRenderingElementsProps.name ? (
-        <StringCard
-          value={token.name}
-          elementClasses={elementsClasses?.name}
-          prettifyLoading={isBeautifyLoadingElementsProps?.name}
-        />
-      ) : (
-        <></>
-      )}
-      {isRenderingElementsProps.description ? (
-        <StringCard
-          value={token.description}
-          elementClasses={elementsClasses?.description}
-          prettifyLoading={isBeautifyLoadingElementsProps?.description}
-        />
-      ) : (
-        <></>
-      )}
-      {isRenderingElementsProps.address ? (
-        <Address address={address} propertyClasses={elementsClasses?.address} />
-      ) : (
-        <></>
-      )} */}
+      {addressProp ? <Address address={addressProp.value} propertyClasses={addressProp?.classes} /> : <></>}
     </>
   );
 };
diff --git a/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx
index 6539dfe..2f5e3ac 100644
--- a/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/token-card/TokenCard.tsx
@@ -1,23 +1,19 @@
 import { Token } from "../../hooks/Hooks";
-import { ImageProperties } from "../property-cards/ImageCard";
+// import { ImageProperties } from "../property-cards/ImageCard";
 import {
   AddressProp,
   BalanceProp,
-  BaseTokenCard,
-  BaseTokenCardElementsClasses,
-  BaseTokenCardElementsSetOfBooleans,
+  BaseTokenCard, // BaseTokenCardElementsClasses,
+  // BaseTokenCardElementsSetOfBooleans,
   DescriptionProp,
   ImageProp,
-  NameProp,
+  NameProp, // BaseTokenCardElementsProps
 } from "./BaseTokenCard";
 
 export interface TokenCardProps {
   token: Token;
-  address?: string;
-  imageProperties?: ImageProperties;
   elementsClasses?: TokenCardElementsClasses;
   isBeautifyingTokenCardLoadingProps?: IsBeautifyingTokenCardLoadingProps;
-  // isRenderingTokenCardProps?: IsRenderingTokenCardProps;
   balanceProp?: BalanceProp;
   nameProp?: NameProp;
   descriptionProp?: DescriptionProp;
@@ -27,31 +23,25 @@ export interface TokenCardProps {
 
 export interface TokenCardElementsClasses {
   card: string;
-  baseTokenCardElementsClasses?: BaseTokenCardElementsClasses;
+  // baseTokenCardElementsClasses?: BaseTokenCardElementsClasses;
 }
 
 export interface IsRenderingTokenCardProps {
   card: boolean;
-  isRenderingElementsProps: BaseTokenCardElementsSetOfBooleans;
+  // isRenderingElementsProps: BaseTokenCardElementsSetOfBooleans;
 }
 
 export interface IsBeautifyingTokenCardLoadingProps {
   card: boolean;
-  isBeautifyLoadingElementsProps: BaseTokenCardElementsSetOfBooleans;
+  // isBeautifyLoadingElementsProps: BaseTokenCardElementsSetOfBooleans;
 }
 
 export const TokenCard = ({
   token,
-  address,
-  imageProperties,
   elementsClasses,
-  // isRenderingTokenCardProps = {
-  //   card: true,
-  //   isRenderingElementsProps: { balance: true, image: true, name: true, description: true, address: true },
-  // },
   isBeautifyingTokenCardLoadingProps = {
     card: false,
-    isBeautifyLoadingElementsProps: { balance: false, image: false, name: false, description: false, address: false },
+    // isBeautifyLoadingElementsProps: { balance: false, image: false, name: false, description: false, address: false },
   },
   balanceProp,
   nameProp,
@@ -63,10 +53,6 @@ export const TokenCard = ({
     <>
       <BaseTokenCard
         token={token}
-        address={address}
-        imageProperties={imageProperties}
-        elementsClasses={elementsClasses?.baseTokenCardElementsClasses}
-        isBeautifyLoadingElementsProps={isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps}
         balanceProp={balanceProp}
         nameProp={nameProp}
         descriptionProp={descriptionProp}
@@ -84,7 +70,7 @@ export const TokenCard = ({
           token?.balance !== undefined &&
           token?.name !== undefined &&
           token?.description !== undefined &&
-          address !== undefined ? (
+          addressProp?.value !== undefined ? (
             <div>{output}</div>
           ) : (
             <>Loading Token...</>
diff --git a/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx b/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx
index 8fe4625..2bc90b3 100644
--- a/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/token-group-card/TokenGroupCard.tsx
@@ -1,13 +1,12 @@
+import { ElementClasses } from "../../types/Types";
 import { TokenCard } from "../token-card/TokenCard";
 import { TokenCardProps } from "../token-card/TokenCard";
-import { ElementClasses } from "../types/Types";
 import { Address } from "~~/components/scaffold-eth";
 
 export interface TokenGroupProps {
   address?: string;
   tokenCardsProps: TokenCardProps[];
   elementsClasses?: TokenGroupCardElementsClasses;
-  // isRenderingTokenGroupCardProps?: IsRenderingTokenGroupCardProps;
   isBeautifyingTokenGroupCardLoadingProps?: IsBeautifyingTokenGroupCardLoadingProps;
 }
 
@@ -27,12 +26,12 @@ export const TokenGroupCard = ({
   elementsClasses,
   isBeautifyingTokenGroupCardLoadingProps,
 }: TokenGroupProps) => {
+  console.log(tokenCardsProps);
+
   const components = tokenCardsProps.map((props, index) => (
     <TokenCard
       key={`${props.token.id}+${index}`}
       token={props.token}
-      address={props.address}
-      imageProperties={props.imageProperties}
       elementsClasses={props.elementsClasses}
       isBeautifyingTokenCardLoadingProps={props.isBeautifyingTokenCardLoadingProps}
       balanceProp={props.balanceProp}
diff --git a/packages/nextjs/components/rep-tokens/cards/types/Types.tsx b/packages/nextjs/components/rep-tokens/types/Types.tsx
similarity index 100%
rename from packages/nextjs/components/rep-tokens/cards/types/Types.tsx
rename to packages/nextjs/components/rep-tokens/types/Types.tsx
diff --git a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
index 30a8e5f..4259e35 100644
--- a/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
+++ b/packages/nextjs/components/rep-tokens/utils/buildTokensCard.tsx
@@ -1,15 +1,36 @@
-import { ImageProperties } from "../cards/property-cards/ImageCard";
 import { IsBeautifyingTokenCardLoadingProps } from "../cards/token-card/TokenCard";
 import { TokenCardElementsClasses } from "../cards/token-card/TokenCard";
 import { TokenCardProps } from "../cards/token-card/TokenCard";
 import { Token } from "../hooks/Hooks";
+import { ElementClasses } from "../types/Types";
+import { TokenCardConfigProps } from "~~/components/rep-tokens-demo/MainTokensCardConfig";
+
+export interface TokenProps {
+  renderProps?: RenderProps;
+  elementsClasses?: TokenElementsClasses;
+}
+
+export interface RenderProps {
+  renderBalance?: boolean;
+  renderImage?: boolean;
+  renderName?: boolean;
+  renderDescription?: boolean;
+  renderAddress?: boolean;
+}
+
+export interface TokenElementsClasses {
+  balanceClasses?: ElementClasses;
+  imageClasses?: ElementClasses;
+  nameClasses?: ElementClasses;
+  descriptionClasses?: ElementClasses;
+  addressClasses?: ElementClasses;
+}
 
 export function buildTokenGroupCard(
   tokens: Token[],
   address?: string,
-  imageProperties?: ImageProperties,
+  tokenCardProps?: TokenCardConfigProps,
   elementsClasses?: TokenCardElementsClasses,
-  //   isRenderingTokenCardProps?: IsRenderingTokenCardProps,
   isBeautifyingTokenCardLoadingProps?: IsBeautifyingTokenCardLoadingProps,
 ) {
   const arr = [];
@@ -17,36 +38,44 @@ export function buildTokenGroupCard(
   for (let i = 0; i < tokens.length; i++) {
     const tokenCardProp: TokenCardProps = {
       token: tokens[i],
-      address,
-      imageProperties,
       isBeautifyingTokenCardLoadingProps,
       elementsClasses,
-      balanceProp: {
-        value: tokens[i].balance,
-        classes: elementsClasses?.baseTokenCardElementsClasses?.balance,
-        isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.balance,
-      },
-      nameProp: {
-        value: tokens[i].name,
-        classes: elementsClasses?.baseTokenCardElementsClasses?.name,
-        isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.name,
-      },
-      descriptionProp: {
-        value: tokens[i].description,
-        classes: elementsClasses?.baseTokenCardElementsClasses?.description,
-        isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.description,
-      },
-      imageProp: {
-        value: tokens[i].image,
-        properties: imageProperties,
-        classes: elementsClasses?.baseTokenCardElementsClasses?.image,
-        isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.image,
-      },
-      addressProp: {
-        value: address,
-        classes: elementsClasses?.baseTokenCardElementsClasses?.address,
-        isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.address,
-      },
+      balanceProp: tokenCardProps?.balanceProps?.isRendering
+        ? {
+            value: tokens[i].balance,
+            classes: tokenCardProps?.balanceProps?.classes,
+            // isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.balance,
+          }
+        : undefined,
+      nameProp: tokenCardProps?.nameProps?.isRendering
+        ? {
+            value: tokens[i].name,
+            classes: tokenCardProps?.nameProps?.classes,
+            // isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.name,
+          }
+        : undefined,
+      descriptionProp: tokenCardProps?.descriptionProps?.isRendering
+        ? {
+            value: tokens[i].description,
+            classes: tokenCardProps?.descriptionProps?.classes,
+            // isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.description,
+          }
+        : undefined,
+      imageProp: tokenCardProps?.imageProps?.isRendering
+        ? {
+            value: tokens[i].image,
+            properties: tokenCardProps?.imageProps?.imageProperties,
+            classes: tokenCardProps?.imageProps?.classes,
+            // isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.image,
+          }
+        : undefined,
+      addressProp: tokenCardProps?.addressProps?.isRendering
+        ? {
+            value: address,
+            classes: tokenCardProps?.addressProps?.classes,
+            // isBeautifyLoading: isBeautifyingTokenCardLoadingProps?.isBeautifyLoadingElementsProps.address,
+          }
+        : undefined,
     };
 
     arr.push(tokenCardProp);
diff --git a/packages/nextjs/components/scaffold-eth/Address.tsx b/packages/nextjs/components/scaffold-eth/Address.tsx
index df14626..bea630f 100644
--- a/packages/nextjs/components/scaffold-eth/Address.tsx
+++ b/packages/nextjs/components/scaffold-eth/Address.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useState } from "react";
 import Link from "next/link";
-import { ElementClasses } from "../rep-tokens/cards/types/Types";
+import { ElementClasses } from "../rep-tokens/types/Types";
 import { CopyToClipboard } from "react-copy-to-clipboard";
 import { isAddress } from "viem";
 import { hardhat } from "viem/chains";