diff --git a/frontend/src/app/home/Pet/Collection.tsx b/frontend/src/app/home/Pet/Collection.tsx
deleted file mode 100644
index 368ae8d6..00000000
--- a/frontend/src/app/home/Pet/Collection.tsx
+++ /dev/null
@@ -1,127 +0,0 @@
-"use client";
-
-import { useCallback, useState, useEffect } from "react";
-import { useWallet } from "@aptos-labs/wallet-adapter-react";
-import { padAddressIfNeeded } from "@/utils/address";
-import { getAptosClient } from "@/utils/aptosClient";
-import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "@/utils/env";
-
-const aptosClient = getAptosClient();
-
-export type Collection = {
-  collection_id: string;
-  collection_name: string;
-  creator_address: string;
-  uri: string;
-  current_supply: any;
-};
-
-export type CollectionHolder = {
-  owner_address: string;
-};
-
-export type CollectionResponse = {
-  current_collections_v2: Collection[];
-  current_collection_ownership_v2_view: CollectionHolder[];
-};
-
-export function Collection() {
-  const { account, network } = useWallet();
-  const [collection, setCollection] = useState<Collection>();
-  const [firstFewAptogotchiName, setFirstFewAptogotchiName] =
-    useState<string[]>();
-
-  const fetchCollection = useCallback(async () => {
-    if (!account?.address) return;
-
-    const aptogotchiCollectionIDResponse = (await aptosClient.view({
-      payload: {
-        function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::get_aptogotchi_collection_id`,
-        arguments: [],
-      },
-    })) as [`0x${string}`];
-
-    const collectionResponse: CollectionResponse =
-      await aptosClient.queryIndexer({
-        query: {
-          query: `
-            query MyQuery($collection_id: String) {
-              current_collections_v2(
-                where: { collection_id: { _eq: $collection_id } }
-              ) {
-                collection_id
-                collection_name
-                current_supply
-                description
-                creator_address
-                last_transaction_timestamp
-                max_supply
-                last_transaction_version
-                mutable_description
-                mutable_uri
-                token_standard
-                table_handle_v1
-                total_minted_v2
-                uri
-              }
-              current_collection_ownership_v2_view(
-                where: { collection_id: { _eq: $collection_id } }
-              ) {
-                owner_address
-              }
-            }
-          `,
-          variables: {
-            collection_id: padAddressIfNeeded(
-              aptogotchiCollectionIDResponse[0]
-            ),
-          },
-        },
-      });
-
-    const firstFewAptogotchi = await Promise.all(
-      collectionResponse.current_collection_ownership_v2_view
-        // TODO: change to limit 3 in gql after indexer fix limit
-        .slice(0, 3)
-        .map((holder) =>
-          aptosClient.view({
-            payload: {
-              function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::get_aptogotchi`,
-              arguments: [holder.owner_address],
-            },
-          })
-        )
-    );
-
-    setCollection(collectionResponse.current_collections_v2[0]);
-    setFirstFewAptogotchiName(firstFewAptogotchi.map((x) => x[0] as string));
-  }, [account?.address]);
-
-  useEffect(() => {
-    if (!account?.address || !network) return;
-
-    fetchCollection();
-  }, [account?.address, fetchCollection, network]);
-
-  const collectionComponent = (
-    <div className="nes-field">
-      <label htmlFor="owner_field">
-        Total Aptogotchi Minted: {collection?.current_supply}
-      </label>
-      <label htmlFor="owner_field">Fellow Aptogotchis:</label>
-      <ul className="nes-list is-disc">
-        <label>{`${firstFewAptogotchiName?.join(", ")}${
-          (firstFewAptogotchiName?.length || 0) < collection?.current_supply
-            ? "... and more"
-            : ""
-        } `}</label>
-      </ul>
-    </div>
-  );
-
-  return (
-    <div className="flex flex-col gap-8">
-      <div className="flex flex-col gap-2">{collectionComponent}</div>
-    </div>
-  );
-}
diff --git a/frontend/src/app/home/Pet/Summary.tsx b/frontend/src/app/home/Pet/Summary.tsx
index e1bcaa84..93a92842 100644
--- a/frontend/src/app/home/Pet/Summary.tsx
+++ b/frontend/src/app/home/Pet/Summary.tsx
@@ -25,7 +25,7 @@ export function Summary({ pet }: SummaryProps) {
   const typedText = useTypingEffect(text);
 
   return (
-    <div className="nes-container is-dark with-title h-[240px]">
+    <div className="nes-container is-dark with-title h-[160px]">
       <p className="title">Summary</p>
       <p>{typedText}</p>
     </div>
diff --git a/frontend/src/app/home/Pet/index.tsx b/frontend/src/app/home/Pet/index.tsx
index 5f3b59cb..29c3c12b 100644
--- a/frontend/src/app/home/Pet/index.tsx
+++ b/frontend/src/app/home/Pet/index.tsx
@@ -5,7 +5,7 @@ import { Actions, PetAction } from "./Actions";
 import { PetDetails } from "./Details";
 import { PetImage, bodies, ears, faces } from "./Image";
 import { Summary } from "./Summary";
-import { Collection } from "./Collection";
+import { AptogotchiCollection } from "@/components/AptogotchiCollection";
 
 export interface Pet {
   name: string;
@@ -22,30 +22,32 @@ export function Pet({ pet, setPet }: PetProps) {
   const [selectedAction, setSelectedAction] = useState<PetAction>("play");
 
   return (
-    <div className="flex flex-row self-center gap-12 m-8">
-      <div className="flex flex-col gap-4 w-[360px]">
-        <PetImage
-          pet={pet}
-          selectedAction={selectedAction}
-          petParts={{
-            body: bodies[pet.parts[0]],
-            ears: ears[pet.parts[1]],
-            face: faces[pet.parts[2]],
-          }}
-          avatarStyle
-        />
-        <PetDetails pet={pet} setPet={setPet} />
-        <Collection />
-      </div>
-      <div className="flex flex-col gap-8 w-[680px] h-full">
-        <Actions
-          selectedAction={selectedAction}
-          setSelectedAction={setSelectedAction}
-          setPet={setPet}
-          pet={pet}
-        />
-        <Summary pet={pet} />
+    <div className="flex flex-col self-center m-10">
+      <div className="flex flex-row self-center gap-12">
+        <div className="flex flex-col gap-4 w-[360px]">
+          <PetImage
+            pet={pet}
+            selectedAction={selectedAction}
+            petParts={{
+              body: bodies[pet.parts[0]],
+              ears: ears[pet.parts[1]],
+              face: faces[pet.parts[2]],
+            }}
+            avatarStyle
+          />
+          <PetDetails pet={pet} setPet={setPet} />
+        </div>
+        <div className="flex flex-col gap-8 w-[680px] h-full">
+          <Actions
+            selectedAction={selectedAction}
+            setSelectedAction={setSelectedAction}
+            setPet={setPet}
+            pet={pet}
+          />
+          <Summary pet={pet} />
+        </div>
       </div>
+      <AptogotchiCollection />
     </div>
   );
 }
diff --git a/frontend/src/components/AptogotchiCollection/index.tsx b/frontend/src/components/AptogotchiCollection/index.tsx
new file mode 100644
index 00000000..56d62789
--- /dev/null
+++ b/frontend/src/components/AptogotchiCollection/index.tsx
@@ -0,0 +1,27 @@
+import React, { useEffect } from "react";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import { useGetAptogotchiCollection } from "@/hooks/useGetAptogotchiCollection";
+
+export function AptogotchiCollection() {
+  const { account, network } = useWallet();
+  const { collection, firstFewAptogotchiName, loading, fetchCollection } =
+    useGetAptogotchiCollection();
+
+  useEffect(() => {
+    if (!account?.address || !network) return;
+    fetchCollection();
+  }, [account?.address, fetchCollection, network]);
+
+  if (loading || !collection) return null;
+
+  return (
+    <div className="nes-container with-title h-[100px]">
+      <p>{`There are a total of ${collection.current_supply} Aptogotchis in existence.`}</p>
+      <p>{`Meet your fellow Aptogotchis: ${firstFewAptogotchiName?.join(", ")}${
+        (firstFewAptogotchiName?.length || 0) < collection.current_supply
+          ? "..."
+          : ""
+      }`}</p>
+    </div>
+  );
+}
diff --git a/frontend/src/graphql/queryAptogotchiCollection.ts b/frontend/src/graphql/queryAptogotchiCollection.ts
new file mode 100644
index 00000000..494b68c4
--- /dev/null
+++ b/frontend/src/graphql/queryAptogotchiCollection.ts
@@ -0,0 +1,27 @@
+export const queryAptogotchiCollection = `
+query MyQuery($collection_id: String) {
+  current_collections_v2(
+    where: { collection_id: { _eq: $collection_id } }
+  ) {
+    collection_id
+    collection_name
+    current_supply
+    description
+    creator_address
+    last_transaction_timestamp
+    max_supply
+    last_transaction_version
+    mutable_description
+    mutable_uri
+    token_standard
+    table_handle_v1
+    total_minted_v2
+    uri
+  }
+  current_collection_ownership_v2_view(
+    where: { collection_id: { _eq: $collection_id } }
+  ) {
+    owner_address
+  }
+}
+`;
diff --git a/frontend/src/hooks/useGetAptogotchiCollection.ts b/frontend/src/hooks/useGetAptogotchiCollection.ts
new file mode 100644
index 00000000..e67bd011
--- /dev/null
+++ b/frontend/src/hooks/useGetAptogotchiCollection.ts
@@ -0,0 +1,83 @@
+import { useCallback, useState } from "react";
+import { useWallet } from "@aptos-labs/wallet-adapter-react";
+import { getAptosClient } from "@/utils/aptosClient";
+import { NEXT_PUBLIC_CONTRACT_ADDRESS } from "@/utils/env";
+import { queryAptogotchiCollection } from "@/graphql/queryAptogotchiCollection";
+import { padAddressIfNeeded } from "@/utils/address";
+
+const aptosClient = getAptosClient();
+
+type Collection = {
+  collection_id: string;
+  collection_name: string;
+  creator_address: string;
+  uri: string;
+  current_supply: any;
+};
+
+type CollectionHolder = {
+  owner_address: string;
+};
+
+type CollectionResponse = {
+  current_collections_v2: Collection[];
+  current_collection_ownership_v2_view: CollectionHolder[];
+};
+
+export function useGetAptogotchiCollection() {
+  const { account } = useWallet();
+  const [collection, setCollection] = useState<Collection>();
+  const [firstFewAptogotchiName, setFirstFewAptogotchiName] =
+    useState<string[]>();
+  const [loading, setLoading] = useState(false);
+
+  const fetchCollection = useCallback(async () => {
+    if (!account?.address) return;
+
+    try {
+      setLoading(true);
+
+      const aptogotchiCollectionIDResponse = (await aptosClient.view({
+        payload: {
+          function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::get_aptogotchi_collection_id`,
+          arguments: [],
+        },
+      })) as [`0x${string}`];
+
+      const collectionResponse: CollectionResponse =
+        await aptosClient.queryIndexer({
+          query: {
+            query: queryAptogotchiCollection,
+            variables: {
+              collection_id: padAddressIfNeeded(
+                aptogotchiCollectionIDResponse[0]
+              ),
+            },
+          },
+        });
+
+      const firstFewAptogotchi = await Promise.all(
+        collectionResponse.current_collection_ownership_v2_view
+          // TODO: change to limit 3 in gql after indexer fix limit
+          .slice(0, 3)
+          .map((holder) =>
+            aptosClient.view({
+              payload: {
+                function: `${NEXT_PUBLIC_CONTRACT_ADDRESS}::main::get_aptogotchi`,
+                arguments: [holder.owner_address],
+              },
+            })
+          )
+      );
+
+      setCollection(collectionResponse.current_collections_v2[0]);
+      setFirstFewAptogotchiName(firstFewAptogotchi.map((x) => x[0] as string));
+    } catch (error) {
+      console.error("Error fetching Aptogotchi collection:", error);
+    } finally {
+      setLoading(false);
+    }
+  }, [account?.address]);
+
+  return { collection, firstFewAptogotchiName, loading, fetchCollection };
+}