diff --git a/packages/nextjs/components/example-ui/ContractData.tsx b/packages/nextjs/components/example-ui/ContractData.tsx
index 4bb192b..38f883f 100644
--- a/packages/nextjs/components/example-ui/ContractData.tsx
+++ b/packages/nextjs/components/example-ui/ContractData.tsx
@@ -6,7 +6,8 @@ import {
   mainCardRenderProps,
   mainCardWithNumberOverlayPropertiesClasses,
   navBarPropertiesClasses,
-  navBarRenderProps, // prettifyLoadingProps,
+  navBarRenderProps,
+  prettifyLoadingProps,
 } from "./tokens/token-group-card/TokenGroupCardConfig";
 import { useAccount } from "wagmi";
 
@@ -19,8 +20,8 @@ export const ContractData = () => {
     tokens[i].image = tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
   }
 
-  const navBarCardImageProperties0 = new ImageProperties("Token 0", 64, 64);
-  const mainCardImageProperties0 = new ImageProperties("Token 0", 256, 256);
+  const navBarCardImageProperties = new ImageProperties("Token 0", 64, 64);
+  const mainCardImageProperties = new ImageProperties("Token 0", 256, 256);
 
   return (
     <>
@@ -28,9 +29,8 @@ export const ContractData = () => {
         <div>
           <DefaultTokenGroupCard
             tokens={tokens}
-            imageProperties={navBarCardImageProperties0}
-            // imageProperties1={navBarCardImageProperties1}
-            // prettifyLoadingProps={prettifyLoadingProps}
+            imageProperties={navBarCardImageProperties}
+            prettifyLoadingProps={prettifyLoadingProps}
             propertiesClasses={navBarPropertiesClasses}
             renderProps={navBarRenderProps}
           />
@@ -41,8 +41,8 @@ export const ContractData = () => {
         <div>
           <DefaultTokenGroupCard
             tokens={tokens}
-            imageProperties={mainCardImageProperties0}
-            // prettifyLoadingProps={prettifyLoadingProps}
+            imageProperties={mainCardImageProperties}
+            prettifyLoadingProps={prettifyLoadingProps}
             propertiesClasses={mainCardPropertiesClasses}
             renderProps={mainCardRenderProps}
           />
@@ -53,8 +53,8 @@ export const ContractData = () => {
         <div>
           <DefaultTokenGroupCard
             tokens={tokens}
-            imageProperties={mainCardImageProperties0}
-            // prettifyLoadingProps={prettifyLoadingProps}
+            imageProperties={mainCardImageProperties}
+            prettifyLoadingProps={prettifyLoadingProps}
             propertiesClasses={mainCardWithNumberOverlayPropertiesClasses}
             renderProps={mainCardRenderProps}
           />
diff --git a/packages/nextjs/components/example-ui/tokens/TokenInteractions.tsx b/packages/nextjs/components/example-ui/tokens/TokenInteractions.tsx
index f799b16..ec77317 100644
--- a/packages/nextjs/components/example-ui/tokens/TokenInteractions.tsx
+++ b/packages/nextjs/components/example-ui/tokens/TokenInteractions.tsx
@@ -13,6 +13,7 @@ export type Token = {
   name: string;
   description: string;
   id: number;
+  properties: any;
 };
 
 export interface Nft {
@@ -170,7 +171,7 @@ export const useRepTokens = (address?: string) => {
       description: responses[i]?.description,
       image: responses[i]?.image,
       properties: tokensProperties[i],
-    };
+    } as Token;
     tokens.push(token);
   }
 
diff --git a/packages/nextjs/components/example-ui/tokens/token-group-card/DefaultTokenGroupCard.tsx b/packages/nextjs/components/example-ui/tokens/token-group-card/DefaultTokenGroupCard.tsx
index 4b1c1f5..dcf71f5 100644
--- a/packages/nextjs/components/example-ui/tokens/token-group-card/DefaultTokenGroupCard.tsx
+++ b/packages/nextjs/components/example-ui/tokens/token-group-card/DefaultTokenGroupCard.tsx
@@ -8,7 +8,7 @@ type TTokenGroupCardProps = {
   tokens: Token[];
   imageProperties: ImageProperties;
   propertiesClasses?: TTokenCardGroupPropertiesClasses;
-  // prettifyLoadingProps?: TTokenGroupCardPrettifyLoadingProps;
+  prettifyLoadingProps?: TTokenGroupCardPrettifyLoadingProps;
   renderProps?: TBaseTokenCardBooleanSet;
 };
 
@@ -27,7 +27,7 @@ export const DefaultTokenGroupCard = ({
   tokens,
   imageProperties,
   propertiesClasses,
-  // prettifyLoadingProps,
+  prettifyLoadingProps,
   renderProps,
 }: TTokenGroupCardProps) => {
   const components = tokens.map((token, index) => (
@@ -36,16 +36,50 @@ export const DefaultTokenGroupCard = ({
       token={token}
       imageProperties={imageProperties}
       propertiesClasses={propertiesClasses?.tokenCardPropertyClasses}
-      // prettifyLoadingProps={prettifyLoadingProps?.tokenCardPrettifyLoadingProps}
+      prettifyLoadingProps={prettifyLoadingProps?.tokenCardPrettifyLoadingProps}
       renderProps={renderProps}
     ></DefaultTokenCard>
   ));
 
+  let output;
+
+  if (prettifyLoadingProps) {
+    if (prettifyLoadingProps?.card) {
+      let isLoaded = true;
+      for (let i = 0; i < tokens.length; i++) {
+        if (
+          tokens[i].balance === undefined &&
+          tokens[i].name === undefined &&
+          tokens[i].description === undefined &&
+          tokens[i].image === undefined &&
+          tokens[i].properties === undefined
+        ) {
+          isLoaded = false;
+          break;
+        }
+      }
+
+      if (tokens.length === 0) isLoaded = !isLoaded;
+
+      if (!isLoaded) {
+        output = <>Loading Reputation Tokens...</>;
+        console.log("output set");
+      } else output = components;
+    } else {
+      output = components;
+    }
+  } else {
+    output = components;
+  }
+
   return (
     <div className={propertiesClasses?.card}>
-      <div className={propertiesClasses?.container}>{components}</div>
+      <div className={propertiesClasses?.container}>{output}</div>
     </div>
     // <div className={propertiesClasses?.card}>
+    //   <div className={propertiesClasses?.container}>{components}</div>
+    // </div>
+    // <div className={propertiesClasses?.card}>
     //   {prettifyLoadingProps?.card ? (
     //     tokenGroup.token0.balance !== undefined &&
     //     tokenGroup.token0.name !== undefined &&