diff --git a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
index c441ae6..06a4825 100644
--- a/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
+++ b/packages/nextjs/app/rep-tokens-demo/_components/RepTokensDemo.tsx
@@ -12,6 +12,7 @@ import { useAccount } from "wagmi";
 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 { StylizedAddressCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedAddressCard";
 import { StylizedBalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard";
 import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedImageCard";
 import { StylizedStringCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedStringCard";
@@ -170,85 +171,42 @@ export function RepTokensDemo() {
   //   </>
   // );
 
-  console.log(tokensData.tokens[0]?.image);
+  const mainComponents = [
+    "Balance",
+    "Image",
+    "Name",
+    "Description",
+    "Address",
+    "IsSoulbound",
+    "IsRedeemable",
+    "MaxMintAmountPerTx",
+  ];
 
   return (
     <>
       <div className="py-5 space-y-5 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] ">
         <StylizedTokenCard>
           <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
-          <StylizedImageCard src={tokensData.tokens[0]?.image}></StylizedImageCard>
-          <StylizedStringCard value={tokensData.tokens[0]?.name} color={"violet"} />
-          <StylizedStringCard value={tokensData.tokens[0]?.description} color={"lime"} />
-          <div className="rounded-lg flex items-center justify-center bg-pink-300">
-            <Address address={tokensData.address} textColor="black" />
-          </div>{" "}
-          <StylizedStringCard value={`Is Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-          <StylizedStringCard value={`Is Redeemable: ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`} />
+          <StylizedImageCard src={tokensData.tokens[0]?.image} />
+          <StylizedStringCard value={tokensData.tokens[0]?.name} color="violet" type="bold" />
+          <StylizedStringCard value={tokensData.tokens[0]?.description} color="lime" />
+          <StylizedAddressCard address={tokensData.tokens[0]?.address} color="pink" />
           <StylizedStringCard
-            value={`Max Mint Amount Per Tx: ${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
-            color={"teal"}
+            value={`Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`}
+            color="blue"
+          />
+          <StylizedStringCard
+            value={`Redeemable: \n ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`}
+            color="yellow"
+          />
+          <StylizedStringCard
+            value={`Max Mint Amount Per Tx \n${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
+            color="teal"
           />
         </StylizedTokenCard>
 
-        <StylizedTokenGroupCard>
-          <div className="rounded-lg my-5 flex items-center justify-center bg-slate-300">
-            <Address address={tokensData.address} textColor="black" />
-          </div>
-          <div className={`rounded-lg bg-slate-800 flex justify-center p-5`}>
-            <StylizedTokenCard>
-              <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
-              <StylizedImageCard src={tokensData.tokens[0]?.image}></StylizedImageCard>
-              <StylizedStringCard value={tokensData.tokens[0]?.name} color={"violet"} />
-              <StylizedStringCard value={tokensData.tokens[0]?.description} color={"lime"} />
-              <div className="rounded-lg flex items-center justify-center bg-pink-300">
-                <Address address={tokensData.address} textColor="black" />
-              </div>{" "}
-              <StylizedStringCard value={`Is Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-              <StylizedStringCard
-                value={`Is Redeemable: ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`}
-              />
-              <StylizedStringCard
-                value={`Max Mint Amount Per Tx: ${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
-                color={"teal"}
-              />
-            </StylizedTokenCard>
-            <StylizedTokenCard>
-              <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
-              <StylizedImageCard src={tokensData.tokens[0]?.image}></StylizedImageCard>
-              <StylizedStringCard value={tokensData.tokens[0]?.name} color={"violet"} />
-              <StylizedStringCard value={tokensData.tokens[0]?.description} color={"lime"} />
-              <div className="rounded-lg flex items-center justify-center bg-pink-300">
-                <Address address={tokensData.address} textColor="black" />
-              </div>{" "}
-              <StylizedStringCard value={`Is Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-              <StylizedStringCard
-                value={`Is Redeemable: ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`}
-              />
-              <StylizedStringCard
-                value={`Max Mint Amount Per Tx: ${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
-                color={"teal"}
-              />
-            </StylizedTokenCard>
-
-            <StylizedTokenCard>
-              <StylizedBalanceCard value={Number(tokensData.tokens[0]?.balance)} />
-              <StylizedImageCard src={tokensData.tokens[0]?.image}></StylizedImageCard>
-              <StylizedStringCard value={tokensData.tokens[0]?.name} color={"violet"} />
-              <StylizedStringCard value={tokensData.tokens[0]?.description} color={"lime"} />
-              <div className="rounded-lg flex items-center justify-center bg-pink-300">
-                <Address address={tokensData.address} textColor="black" />
-              </div>{" "}
-              <StylizedStringCard value={`Is Soulbound: ${tokensData.tokens[0]?.properties.isSoulbound.toString()}`} />
-              <StylizedStringCard
-                value={`Is Redeemable: ${tokensData.tokens[0]?.properties.isRedeemable.toString()}`}
-              />
-              <StylizedStringCard
-                value={`Max Mint Amount Per Tx: ${tokensData.tokens[0]?.properties.maxMintAmountPerTx.toString()}`}
-                color={"teal"}
-              />
-            </StylizedTokenCard>
-          </div>
+        <StylizedTokenGroupCard tokens={tokensData.tokens} components={mainComponents}>
+          <StylizedAddressCard address={tokensData.address} isGroup={true} />
         </StylizedTokenGroupCard>
 
         <p>Faucet Balance:</p>
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/Stylized.ts b/packages/nextjs/components/rep-tokens/cards/stylized-cards/Stylized.ts
index cdd322b..e883b44 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/Stylized.ts
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/Stylized.ts
@@ -1 +1,12 @@
-export type Color = "lime" | "slate" | "violet" | "red" | "teal" | "pink" | "white" | "black" | "cyan";
+export type Color =
+  | "lime"
+  | "slate"
+  | "violet"
+  | "red"
+  | "teal"
+  | "pink"
+  | "white"
+  | "black"
+  | "cyan"
+  | "yellow"
+  | "blue";
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedAddressCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedAddressCard.tsx
new file mode 100644
index 0000000..5a0d40b
--- /dev/null
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedAddressCard.tsx
@@ -0,0 +1,22 @@
+import { Color } from "./Stylized";
+import { Address } from "~~/components/scaffold-eth";
+
+type AddressCardProps = {
+  address: string;
+  color?: Color;
+  textColor?: Color;
+  isGroup?: boolean;
+};
+
+export const StylizedAddressCard = ({
+  address,
+  color = "slate",
+  textColor = "black",
+  isGroup = false,
+}: AddressCardProps) => {
+  return (
+    <div className={`rounded-lg flex items-center justify-center bg-${color}-300 ${isGroup ? "mx-4 mt-4" : ""}`}>
+      <Address address={address} textColor={textColor} />
+    </div>
+  );
+};
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedStringCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedStringCard.tsx
index 92c99bd..cab9b33 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedStringCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedStringCard.tsx
@@ -3,15 +3,16 @@ import { Color } from "./Stylized";
 type StringProps = {
   value: string;
   color?: Color;
-  type?: "description" | "title";
+
+  type?: "default" | "bold";
 };
 
-export const StylizedStringCard = ({ type = "description", color = "slate", value }: StringProps) => {
+export const StylizedStringCard = ({ value, color = "slate", type = "default" }: StringProps) => {
   let textClassName;
-  if (type === "description") {
-    textClassName = "text-1xl mx-auto text-center break-words text-black";
-  } else {
-    textClassName = "text-1xl text-center object-center mx-auto font-bold break-all text-black";
+  if (type === "default") {
+    textClassName = "text-black text-1xl mx-auto text-center break-words";
+  } else if (type === "bold") {
+    textClassName = "text-black text-1xl mx-auto text-center break-all object-center font-bold";
   }
 
   return (
diff --git a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
index cc18392..586f52a 100644
--- a/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
+++ b/packages/nextjs/components/rep-tokens/cards/stylized-cards/StylizedTokenGroupCard.tsx
@@ -1,9 +1,98 @@
 import { Color } from "./Stylized";
+import { StylizedAddressCard } from "./StylizedAddressCard";
+import { StylizedBalanceCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedBalanceCard";
+import { StylizedImageCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedImageCard";
+import { StylizedStringCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedStringCard";
+import { StylizedTokenCard } from "~~/components/rep-tokens/cards/stylized-cards/StylizedTokenCard";
 
 export interface TokenCardInternalProps {
+  tokens: any[];
+  components?: ReputationComponent[];
   color?: Color;
 }
 
-export const StylizedTokenGroupCard = ({ color = "slate", children }: any) => {
-  return <div className={`text-white rounded-lg bg-${color}-900 flex flex-col items-center p-5`}>{children}</div>;
+export type ReputationComponent =
+  | "Balance"
+  | "Image"
+  | "Name"
+  | "Description"
+  | "Address"
+  | "IsSoulbound"
+  | "IsRedeemable"
+  | "MaxMintAmountPerTx";
+
+export const StylizedTokenGroupCard = ({
+  tokens,
+  components = [
+    "Balance",
+    "Image",
+    "Name",
+    "Description",
+    "Address",
+    "IsSoulbound",
+    "IsRedeemable",
+    "MaxMintAmountPerTx",
+  ],
+  color = "slate",
+
+  children,
+}: any) => {
+  const output: any[] = [];
+
+  for (let i = 0; i < tokens?.length; i++) {
+    const cardContent: any[] = [];
+
+    for (let j = 0; j < components?.length; j++) {
+      if (components[j] === "Balance") {
+        cardContent.push(<StylizedBalanceCard key={j} value={Number(tokens[i]?.balance)} />);
+      }
+
+      if (components[j] === "Image") {
+        cardContent.push(<StylizedImageCard key={j} src={tokens[i]?.image} />);
+      }
+
+      if (components[j] === "Name") {
+        cardContent.push(<StylizedStringCard key={j} value={tokens[i]?.name} type="bold" />);
+      }
+
+      if (components[j] === "Description") {
+        cardContent.push(<StylizedStringCard key={j} value={tokens[i]?.description} />);
+      }
+
+      if (components[j] === "IsSoulbound") {
+        cardContent.push(
+          <StylizedStringCard key={j} value={`Soulbound: ${tokens[i]?.properties.isSoulbound.toString()}`} />,
+        );
+      }
+
+      if (components[j] === "IsRedeemable") {
+        cardContent.push(
+          <StylizedStringCard key={j} value={`Redeemable: ${tokens[i]?.properties.isRedeemable.toString()}`} />,
+        );
+      }
+
+      if (components[j] === "MaxMintAmountPerTx") {
+        cardContent.push(
+          <StylizedStringCard
+            key={j}
+            value={`Max Mint Amount Per Tx: ${tokens[i]?.properties.maxMintAmountPerTx.toString()}`}
+          />,
+        );
+      }
+
+      if (components[j] === "Address") {
+        cardContent.push(<StylizedAddressCard key={j} address={tokens[i].address} />);
+      }
+    }
+
+    const card = <StylizedTokenCard key={i}>{cardContent}</StylizedTokenCard>;
+    output.push(card);
+  }
+
+  return (
+    <div className={`bg-${color}-800 flex flex-col rounded-lg`}>
+      {children}
+      <div className={`flex justify-center`}>{output}</div>
+    </div>
+  );
 };
diff --git a/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx b/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
index 40ceba8..d4c2d8d 100644
--- a/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
+++ b/packages/nextjs/components/rep-tokens/hooks/Hooks.tsx
@@ -14,6 +14,7 @@ export type Token = {
   description: string;
   id: number;
   properties: any;
+  address: string;
 };
 
 export interface Nft {
@@ -174,6 +175,7 @@ export const useRepTokens = (address?: string) => {
       description: responses[i]?.description,
       image: responses[i]?.image,
       properties: tokensProperties[i],
+      address: repTokensInstance?.address,
     } as Token;
     tokens.push(token);
   }
diff --git a/packages/nextjs/contracts/deployedContracts.ts b/packages/nextjs/contracts/deployedContracts.ts
index 40eb76c..59ea1d2 100644
--- a/packages/nextjs/contracts/deployedContracts.ts
+++ b/packages/nextjs/contracts/deployedContracts.ts
@@ -7,7 +7,7 @@ import { GenericContractsDeclaration } from "~~/utils/scaffold-eth/contract";
 const deployedContracts = {
   31337: {
     ReputationTokensStandalone: {
-      address: "0xa82fF9aFd8f496c3d6ac40E2a0F282E47488CFc9",
+      address: "0x5FbDB2315678afecb367f032d93F642f64180aa3",
       abi: [
         {
           type: "constructor",
@@ -1649,7 +1649,7 @@ const deployedContracts = {
       },
     },
     ReputationFaucet: {
-      address: "0x36C02dA8a0983159322a80FFE9F24b1acfF8B570",
+      address: "0x0DCd1Bf9A1b36cE34237eEaFef220932846BCD82",
       abi: [
         {
           type: "constructor",
@@ -1673,7 +1673,7 @@ const deployedContracts = {
       inheritedFunctions: {},
     },
     Hats: {
-      address: "0xcbEAF3BDe82155F56486Fb5a1072cb8baAf547cc",
+      address: "0x7a2088a1bFc9d81c55368AE168C2C02570cB814F",
       abi: [
         {
           type: "constructor",
@@ -3634,7 +3634,7 @@ const deployedContracts = {
       },
     },
     MultiClaimsHatter: {
-      address: "0x162A433068F51e18b7d13932F27e66a3f99E6890",
+      address: "0x67d269191c92Caf3cD7723F116c85e6E9bf55933",
       abi: [
         {
           type: "constructor",
@@ -3960,7 +3960,7 @@ const deployedContracts = {
       },
     },
     ActiveModule: {
-      address: "0x5081a39b8A5f0E35a8D959395a630b68B74Dd30f",
+      address: "0xc3e53F4d16Ae77Db1c982e75a937B9f60FE63690",
       abi: [
         {
           type: "function",
@@ -3990,7 +3990,7 @@ const deployedContracts = {
       inheritedFunctions: {},
     },
     ERC1155EligibiltiyModule: {
-      address: "0x1fA02b2d6A771842690194Cf62D91bdd92BfE28d",
+      address: "0x84eA74d481Ee0A5332c457a4d796187F6Ba67fEB",
       abi: [
         {
           type: "constructor",