diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index 390cef4..f0ac222 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -7,10 +7,10 @@ import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards
 import { StylizedStringCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedStringCard";
 import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard";
 import { StylizedTokenCard2 } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard2";
-import {
-  ReputationComponent,
-  StylizedTokenGroupCard,
-} from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
+// import {
+//   ReputationComponent,
+//   StylizedTokenGroupCard,
+// } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
 import { AddressCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/AddressCard";
 import { BalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/BalanceCard";
 // import { StylizedTokenGroupCard2 } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard2";
@@ -20,47 +20,53 @@ import { MaxMintAmountPerTxCard } from "~~/components/rep-tokens/cards/stylized-
 import { NameCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/NameCard";
 import { RedeemableCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/RedeemableCard";
 import { SoulboundCard } from "~~/components/rep-tokens/cards/stylized-cards/token-properties/SoulboundCard";
-import { useRepTokens } from "~~/components/rep-tokens/hooks/Hooks";
-import { useScaffoldContract, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
+import { useGetRepToken } from "~~/components/rep-tokens/hooks/Hooks";
+
+// import { useScaffoldContract, useScaffoldContractWrite } from "~~/hooks/scaffold-eth";
 
 export function RepTokensDemo() {
   const { address } = useAccount();
-  const { tokensData, refetchBalances: refetchUserBalances } = useRepTokens(address);
 
-  for (let i = 0; i < tokensData.tokens.length; i++) {
-    tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
-  }
+  const { token } = useGetRepToken(address, BigInt(0));
+
+  token.image = token?.image?.replace("ipfs://", "https://ipfs.io/ipfs/");
+
+  // const { tokensData, refetchBalances: refetchUserBalances } = useRepTokens(address);
 
-  const { writeAsync: claim } = useScaffoldContractWrite({
-    contractName: "ReputationFaucet",
-    functionName: "claim",
-  });
+  // for (let i = 0; i < tokensData.tokens.length; i++) {
+  //   tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
+  // }
 
-  const { data: faucet } = useScaffoldContract({ contractName: "ReputationFaucet" });
+  // const { writeAsync: claim } = useScaffoldContractWrite({
+  //   contractName: "ReputationFaucet",
+  //   functionName: "claim",
+  // });
 
-  const { tokensData: faucetTokensData, refetchBalances: refetchFaucetBalances } = useRepTokens(faucet?.address);
+  // const { data: faucet } = useScaffoldContract({ contractName: "ReputationFaucet" });
 
-  for (let i = 0; i < faucetTokensData.tokens.length; i++) {
-    faucetTokensData.tokens[i].image = faucetTokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
-  }
+  // const { tokensData: faucetTokensData, refetchBalances: refetchFaucetBalances } = useRepTokens(faucet?.address);
 
-  const mainComponents: ReputationComponent[] = [
-    "Balance",
-    "Image",
-    "Name",
-    "Description",
-    "Address",
-    "IsSoulbound",
-    "IsRedeemable",
-    "MaxMintAmountPerTx",
-  ];
+  // for (let i = 0; i < faucetTokensData.tokens.length; i++) {
+  //   faucetTokensData.tokens[i].image = faucetTokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
+  // }
 
-  const widgetComponents: ReputationComponent[] = ["Balance", "Image"];
+  // const mainComponents: ReputationComponent[] = [
+  //   "Balance",
+  //   "Image",
+  //   "Name",
+  //   "Description",
+  //   "Address",
+  //   "IsSoulbound",
+  //   "IsRedeemable",
+  //   "MaxMintAmountPerTx",
+  // ];
+
+  // const widgetComponents: ReputationComponent[] = ["Balance", "Image"];
 
   return (
     <>
       <div className="py-5 space-y-5 flex flex-col justify-center items-center bg-[length:100%_100%] py-1 px-5 sm:px-0 lg:py-auto max-w-[100vw] ">
-        <StylizedTokenGroupCard
+        {/* <StylizedTokenGroupCard
           tokens={faucetTokensData.tokens}
           components={widgetComponents}
           isBalanceOverlayed={true}
@@ -77,7 +83,7 @@ export function RepTokensDemo() {
           }}
         >
           Claim Tokens
-        </button>
+        </button> */}
 
         {/* <StylizedTokenGroupCard2 tokens={tokensData.tokens} components={mainComponents}>
           <StylizedAddressCard address={tokensData.address} isGroup={true} />
@@ -86,50 +92,48 @@ export function RepTokensDemo() {
         <div className="flex">
           <div>
             <p className="text-center text-4xl">Individual Components 1</p>
-            <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
-            <StylizedImageCard src={tokensData.tokens[0]?.image} />
-            <StylizedStringCard value={tokensData.tokens[0]?.name} type="bold" />
-            <StylizedStringCard value={tokensData.tokens[0]?.description} />
-            <StylizedAddressCard address={tokensData.tokens[0]?.address} />
-            <StylizedStringCard value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-            <StylizedStringCard value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`} />
+            <StylizedBalanceCard value={Number(token?.balance)} />
+            <StylizedImageCard src={token?.image} />
+            <StylizedStringCard value={token?.name} type="bold" />
+            <StylizedStringCard value={token?.description} />
+            <StylizedAddressCard address={token?.address} />
+            <StylizedStringCard value={`Soulbound: ${token?.properties?.isSoulbound?.toString()}`} />
+            <StylizedStringCard value={`Redeemable: \n ${token?.properties?.isRedeemable?.toString()}`} />
             <StylizedStringCard
-              value={`Max Mint Amount Per Tx: \n${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
+              value={`Max Mint Amount Per Tx: \n${token?.properties?.maxMintAmountPerTx?.toString()}`}
             />
           </div>
           <div>
             <p className="text-center text-4xl">Individual Components 2</p>
-            <BalanceCard token={tokensData.tokens[0]} />
-            <ImageCard token={tokensData.tokens[0]} />
-            <NameCard token={tokensData.tokens[0]} />
-            <DescriptionCard token={tokensData.tokens[0]} />
-            <AddressCard token={tokensData.tokens[0]} />
-            <SoulboundCard token={tokensData.tokens[0]} />
-            <RedeemableCard token={tokensData.tokens[0]} />
-            <MaxMintAmountPerTxCard token={tokensData.tokens[0]} />
+            <BalanceCard token={token} />
+            <ImageCard token={token} />
+            <NameCard token={token} />
+            <DescriptionCard token={token} />
+            <AddressCard token={token} />
+            <SoulboundCard token={token} />
+            <RedeemableCard token={token} />
+            <MaxMintAmountPerTxCard token={token} />
           </div>
         </div>
 
         <div className="flex">
           <div>
             <p className="text-center text-4xl">Single Card 1</p>
-            <StylizedTokenCard token={tokensData.tokens[0]} components={["Balance", "Image", "Name", "Description"]} />
+            <StylizedTokenCard token={token} />
           </div>
           <div>
             <p className="text-center text-4xl">Single Card 2</p>
             <StylizedTokenCard2>
-              <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
-              <StylizedImageCard src={tokensData.tokens[0]?.image} />
-
-              <StylizedStringCard value={tokensData.tokens[0]?.name} type="bold" />
-              <StylizedStringCard value={tokensData.tokens[0]?.description} />
-              <StylizedAddressCard address={tokensData.tokens[0]?.address} />
-              <StylizedStringCard value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-              <StylizedStringCard
-                value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`}
-              />
+              <StylizedBalanceCard value={Number(token?.balance)} />
+              <StylizedImageCard src={token?.image} />
+
+              <StylizedStringCard value={token?.name} type="bold" />
+              <StylizedStringCard value={token?.description} />
+              <StylizedAddressCard address={token?.address} />
+              <StylizedStringCard value={`Soulbound: ${token?.properties?.isSoulbound?.toString()}`} />
+              <StylizedStringCard value={`Redeemable: \n ${token?.properties?.isRedeemable?.toString()}`} />
               <StylizedStringCard
-                value={`Max Mint Amount Per Tx \n${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
+                value={`Max Mint Amount Per Tx \n${token?.properties?.maxMintAmountPerTx?.toString()}`}
               />
             </StylizedTokenCard2>
           </div>
@@ -137,19 +141,19 @@ export function RepTokensDemo() {
           <div>
             <p className="text-center text-4xl">Single Card 3</p>
             <StylizedTokenCard2>
-              <BalanceCard token={tokensData.tokens[0]} />
-              <ImageCard token={tokensData.tokens[0]} />
-              <NameCard token={tokensData.tokens[0]} />
-              <DescriptionCard token={tokensData.tokens[0]} />
-              <AddressCard token={tokensData.tokens[0]} />
-              <SoulboundCard token={tokensData.tokens[0]} />
-              <RedeemableCard token={tokensData.tokens[0]} />
-              <MaxMintAmountPerTxCard token={tokensData.tokens[0]} />
+              <BalanceCard token={token} />
+              <ImageCard token={token} />
+              <NameCard token={token} />
+              <DescriptionCard token={token} />
+              <AddressCard token={token} />
+              <SoulboundCard token={token} />
+              <RedeemableCard token={token} />
+              <MaxMintAmountPerTxCard token={token} />
             </StylizedTokenCard2>
           </div>
         </div>
 
-        <p className="text-center text-4xl">Multi-Card</p>
+        {/* <p className="text-center text-4xl">Multi-Card</p>
 
         <StylizedTokenGroupCard tokens={tokensData.tokens} components={mainComponents}>
           <StylizedAddressCard address={tokensData.address} isGroup={true} />
@@ -177,7 +181,7 @@ export function RepTokensDemo() {
           components={widgetComponents}
           isBalanceOverlayed={true}
           size="xs"
-        />
+        /> */}
       </div>
     </>
   );
diff --git a/packages/nextjs/components/Header.tsx b/packages/nextjs/components/Header.tsx
index aed830a..0f57880 100644
--- a/packages/nextjs/components/Header.tsx
+++ b/packages/nextjs/components/Header.tsx
@@ -4,10 +4,10 @@ import React, { useCallback, useRef, useState } from "react";
 import Image from "next/image";
 import Link from "next/link";
 import { usePathname } from "next/navigation";
-import { StylizedTokenGroupCard } from "./rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
-import { ReputationComponent } from "./rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
-import { useRepTokens } from "./rep-tokens/hooks/Hooks";
-import { useAccount } from "wagmi";
+// import { StylizedTokenGroupCard } from "./rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
+// import { ReputationComponent } from "./rep-tokens/cards/stylized-cards/StylizedTokenGroupCard";
+// import { useRepTokens } from "./rep-tokens/hooks/Hooks";
+// import { useAccount } from "wagmi";
 import { Bars3Icon, BugAntIcon } from "@heroicons/react/24/outline";
 import { FaucetButton, RainbowKitCustomConnectButton } from "~~/components/scaffold-eth";
 import { useOutsideClick } from "~~/hooks/scaffold-eth";
@@ -71,15 +71,15 @@ export const Header = () => {
     useCallback(() => setIsDrawerOpen(false), []),
   );
 
-  const { address } = useAccount();
+  // const { address } = useAccount();
 
-  const { tokensData } = useRepTokens(address);
+  // const { tokensData } = useRepTokens(address);
 
-  for (let i = 0; i < tokensData.tokens.length; i++) {
-    tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
-  }
+  // for (let i = 0; i < tokensData.tokens.length; i++) {
+  //   tokensData.tokens[i].image = tokensData.tokens[i].image?.replace("ipfs://", "https://ipfs.io/ipfs/");
+  // }
 
-  const widgetComponents: ReputationComponent[] = ["Balance", "Image"];
+  // const widgetComponents: ReputationComponent[] = ["Balance", "Image"];
 
   return (
     <div className="sticky lg:static top-0 navbar bg-base-100 min-h-0 flex-shrink-0 justify-between z-20 shadow-md shadow-secondary px-0 sm:px-2">
@@ -120,12 +120,12 @@ export const Header = () => {
         </ul>
       </div>
       <div className="navbar-end flex-grow mr-4">
-        <StylizedTokenGroupCard
+        {/* <StylizedTokenGroupCard
           tokens={tokensData.tokens}
           components={widgetComponents}
           isBalanceOverlayed={true}
           size="xs"
-        />
+        /> */}
         <RainbowKitCustomConnectButton />
         <FaucetButton />
       </div>
diff --git a/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx b/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
index 9e69ded..325e2d0 100644
--- a/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
+++ b/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
@@ -1,4 +1,5 @@
-import { useEffect, useMemo, useState } from "react";
+import { useCallback, useEffect, useState } from "react";
+import { useFetch } from "usehooks-ts";
 // import { useFetch } from "usehooks-ts";
 import { useScaffoldContract, useScaffoldContractRead } from "~~/hooks/scaffold-eth";
 
@@ -39,28 +40,48 @@ export const useBalanceOf = (address?: string, tokenId?: number) => {
   });
 };
 
-export function useUris(repTokensInstance: any, tokenIds: bigint[]) {
+export function useUris(contract: any, tokenIds: bigint[]) {
   const [uris, setUris] = useState<string[]>([]);
 
+  const refetch = useCallback(async () => {
+    if (!contract) return;
+
+    const arr = [];
+    for (let i = 0; i < tokenIds.length; i++) {
+      const result = await contract.read.uri([tokenIds[i]]);
+      arr.push(result);
+    }
+
+    setUris([...arr]);
+  }, [contract?.address, tokenIds, uris.length]);
+
   useEffect(() => {
     async function get() {
-      if (!repTokensInstance || tokenIds.length === 0) return;
+      await refetch();
+    }
 
-      const arr = [];
-      for (let i = 0; i < tokenIds.length; i++) {
-        const result = await repTokensInstance.read.uri([tokenIds[i]]);
-        if (result !== undefined) arr.push(result);
-      }
+    get();
+    // eslint-disable-next-line react-hooks/exhaustive-deps
+  }, [contract?.address, tokenIds, uris.length, refetch]);
 
-      setUris([...arr]);
-    }
+  return { uris, setUris, refetch };
+}
 
-    if (uris.length === 0) {
-      get();
+export function useGetTokenProperties(repTokensInstance: any, tokenId: bigint) {
+  const [tokenProperties, setTokenProperties] = useState<string[]>([]);
+
+  useEffect(() => {
+    async function get() {
+      if (!repTokensInstance) return;
+
+      const result = await repTokensInstance.read.getTokenProperties([tokenId]);
+      setTokenProperties(result);
     }
-  }, [repTokensInstance, tokenIds, uris.length]);
 
-  return { uris, setUris };
+    get();
+  }, [repTokensInstance?.address, tokenId]);
+
+  return { tokenProperties, setTokenProperties };
 }
 
 export function useGetTokensProperties(repTokensInstance: any, tokenIds: bigint[]) {
@@ -88,101 +109,140 @@ export function useGetTokensProperties(repTokensInstance: any, tokenIds: bigint[
   return { tokensProperties, setTokensProperties };
 }
 
-export function useFetches(uris: string[]) {
-  const [responses, setResponses] = useState<Nft[]>([]);
+// function useFetches(uris: string[]) {
+//   const [responses, setResponses] = useState<any[]>([]);
 
-  useEffect(() => {
-    async function getJson() {
-      if (uris.length === 0) return;
+//   const refetch = useCallback(async () => {
+//     const arr = [];
+//     for (let i = 0; i < uris.length; i++) {
+//       const response = await fetch(uris[i]);
+//       const responseJson = await response.json();
+//       arr.push(responseJson);
+//     }
 
-      const arr = [];
-      for (let i = 0; i < uris.length; i++) {
-        try {
-          const response = await fetch(uris[i]);
-          const responseJson = await response.json();
-          arr.push(responseJson);
-        } catch (e) {}
-      }
+//     setResponses([...arr]);
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [uris.length]);
 
-      setResponses([...arr]);
-    }
+//   useEffect(() => {
+//     async function get() {
+//       await refetch();
+//     }
 
-    if (responses.length === 0) getJson();
-  }, [uris, uris.length, responses.length]);
+//     get();
+//     // eslint-disable-next-line react-hooks/exhaustive-deps
+//   }, [uris.length, refetch]);
 
-  return { responses };
-}
+//   return { responses, refetch };
+// }
 
-export const useRepTokens = (address?: string) => {
+export const useGetRepToken = (address?: string, tokenId?: bigint) => {
   const { data: repTokensInstance } = useScaffoldContract({ contractName: "ReputationTokensStandalone" });
 
-  const { data: numOfTokens } = useScaffoldContractRead({
+  const { data: balanceOf, refetch: refetchBalance } = useScaffoldContractRead({
     contractName: "ReputationTokensStandalone",
-    functionName: "getNumOfTokenTypes",
+    functionName: "balanceOf",
+    args: [address, tokenId],
   });
 
-  const { addresses } = useMemo(() => {
-    const addresses: string[] = [];
-
-    if (numOfTokens) {
-      for (let i = 0; i < numOfTokens; i++) {
-        if (address) {
-          addresses.push(address);
-        }
-      }
-    }
-
-    return { addresses };
-  }, [numOfTokens, address]);
+  const { tokenProperties } = useGetTokenProperties(repTokensInstance, tokenId || BigInt(0));
 
-  const { tokenIds } = useMemo(() => {
-    const tokenIds: bigint[] = [];
-
-    if (numOfTokens) {
-      for (let i = 0; i < numOfTokens; i++) {
-        tokenIds.push(BigInt(i));
-      }
-    }
-
-    return { tokenIds };
-  }, [numOfTokens]);
-
-  const { data: balanceOfBatch, refetch: refetchBalances } = useScaffoldContractRead({
+  const { data: uri } = useScaffoldContractRead({
     contractName: "ReputationTokensStandalone",
-    functionName: "balanceOfBatch",
-    args: [addresses, tokenIds],
+    functionName: "uri",
+    args: [tokenId],
   });
 
-  const { tokensProperties } = useGetTokensProperties(repTokensInstance, tokenIds);
-
-  const { uris } = useUris(repTokensInstance, tokenIds);
+  const formattedURI = uri?.replace("ipfs://", "https://nftstorage.link/ipfs/");
 
-  for (let i = 0; i < uris.length; i++) {
-    uris[i] = uris[i].replace("ipfs://", "https://nftstorage.link/ipfs/");
-    // uris[i] = uris[i].replace("ipfs://", "https://ipfs.io/ipfs/");
-  }
+  const { data: result } = useFetch<any>(formattedURI);
+  console.log(result);
+  console.log("Re-rendered");
 
-  const { responses } = useFetches(uris);
+  const token = {
+    id: Number(tokenId),
+    balance: balanceOf,
+    name: result?.name,
+    description: result?.description,
+    image: result?.image,
+    properties: tokenProperties,
+    address: repTokensInstance?.address,
+  } as Token;
 
-  const tokens: Token[] = [];
-  for (let i = 0; i < responses.length; i++) {
-    let balance = BigInt(0);
-    if (balanceOfBatch) {
-      balance = balanceOfBatch[i];
-    }
-    const token = {
-      id: i,
-      balance: balance,
-      name: responses[i]?.name,
-      description: responses[i]?.description,
-      image: responses[i]?.image,
-      properties: tokensProperties[i],
-      address: repTokensInstance?.address,
-    } as Token;
-    tokens.push(token);
-  }
-
-  const addr = repTokensInstance?.address ?? "";
-
-  return { tokensData: { address: addr, tokens: tokens }, refetchBalances };
+  console.log(token);
+  return { token, refetchBalance };
 };
+
+// export const useRepTokens = (address?: string) => {
+//   const { data: repTokensInstance } = useScaffoldContract({ contractName: "ReputationTokensStandalone" });
+
+//   const { data: numOfTokens } = useScaffoldContractRead({
+//     contractName: "ReputationTokensStandalone",
+//     functionName: "getNumOfTokenTypes",
+//   });
+
+//   const { addresses } = useMemo(() => {
+//     const addresses: string[] = [];
+
+//     if (numOfTokens) {
+//       for (let i = 0; i < numOfTokens; i++) {
+//         if (address) {
+//           addresses.push(address);
+//         }
+//       }
+//     }
+
+//     return { addresses };
+//   }, [numOfTokens, address]);
+
+//   const { tokenIds } = useMemo(() => {
+//     const tokenIds: bigint[] = [];
+
+//     if (numOfTokens) {
+//       for (let i = 0; i < numOfTokens; i++) {
+//         tokenIds.push(BigInt(i));
+//       }
+//     }
+
+//     return { tokenIds };
+//   }, [numOfTokens]);
+
+//   const { data: balanceOfBatch, refetch: refetchBalances } = useScaffoldContractRead({
+//     contractName: "ReputationTokensStandalone",
+//     functionName: "balanceOfBatch",
+//     args: [addresses, tokenIds],
+//   });
+
+//   const { tokensProperties } = useGetTokensProperties(repTokensInstance, tokenIds);
+
+//   const { uris } = useUris(repTokensInstance, tokenIds);
+
+//   for (let i = 0; i < uris.length; i++) {
+//     uris[i] = uris[i].replace("ipfs://", "https://nftstorage.link/ipfs/");
+//     // uris[i] = uris[i].replace("ipfs://", "https://ipfs.io/ipfs/");
+//   }
+
+//   const { responses } = useFetches(uris);
+
+//   const tokens: Token[] = [];
+//   for (let i = 0; i < responses.length; i++) {
+//     let balance = BigInt(0);
+//     if (balanceOfBatch) {
+//       balance = balanceOfBatch[i];
+//     }
+//     const token = {
+//       id: i,
+//       balance: balance,
+//       name: responses[i]?.name,
+//       description: responses[i]?.description,
+//       image: responses[i]?.image,
+//       properties: tokensProperties[i],
+//       address: repTokensInstance?.address,
+//     } as Token;
+//     tokens.push(token);
+//   }
+
+//   const addr = repTokensInstance?.address ?? "";
+
+//   return { tokensData: { address: addr, tokens: tokens }, refetchBalances };
+// };