diff --git a/apps/web/package.json b/apps/web/package.json
index a1e2911..6e8a356 100644
--- a/apps/web/package.json
+++ b/apps/web/package.json
@@ -9,9 +9,10 @@
   },
   "dependencies": {
     "@rainbow-me/rainbowkit": "^2.1.5",
-    "@tanstack/react-query": "^5.55.4",
     "@repo/ui": "*",
+    "@tanstack/react-query": "^5.55.4",
     "ethereum-blockies-base64": "^1.0.2",
+    "graphql-request": "^7.1.0",
     "next": "14.2.8",
     "react": "^18",
     "react-dom": "^18",
diff --git a/apps/web/src/app/page.tsx b/apps/web/src/app/page.tsx
index 58bb1e6..5c0ac7f 100644
--- a/apps/web/src/app/page.tsx
+++ b/apps/web/src/app/page.tsx
@@ -1,12 +1,11 @@
 "use client";
 
-import { useQuery } from "@tanstack/react-query";
 import { useRouter } from "next/navigation";
 import { useEffect, useState } from "react";
 import { getAddress } from "viem";
 import { CouncilName } from "../components/CouncilName";
 import VotingCard from "../components/VotingCard";
-import { getGrantees } from "../utils/grantees";
+import { useCouncil } from "../hooks/useCouncil";
 
 const defaultCouncil = "0x5cE162b6e6Dd6B936B9dC183Df79F61DBf8c675f";
 
@@ -27,15 +26,13 @@ export default function Page() {
   }, [router]);
 
   // Fetch data when the council is available
-  const { data: grantees, isLoading } = useQuery({
-    queryKey: ["grantees", council],
-    queryFn: () => council && getGrantees(council),
-    enabled: !!council, // Only run query if council is defined
-  });
+  const { data: councilData, isLoading } = useCouncil(council);
+  const grantees = councilData?.grantees;
+
   return (
     <main>
       <CouncilName
-        council={council}
+        name={councilData?.councilName}
         className="h-12 text-4xl font-bold mb-4 text-accent"
       />
       <VotingCard
diff --git a/apps/web/src/components/CouncilName.tsx b/apps/web/src/components/CouncilName.tsx
index cb191f0..de77bc2 100644
--- a/apps/web/src/components/CouncilName.tsx
+++ b/apps/web/src/components/CouncilName.tsx
@@ -2,22 +2,11 @@
 
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
 import { cn } from "@repo/ui/lib/utils";
-import { parseAbi } from "viem";
-import { useReadContract } from "wagmi";
 
 export function CouncilName({
-  council,
+  name,
   className,
-}: { council: `0x${string}` | undefined; className?: string }) {
-  const { data: name, isLoading } = useReadContract({
-    address: council,
-    abi: parseAbi(["function name() view returns (string)"]),
-    functionName: "name",
-    query: {
-      enabled: !!council,
-    },
-  });
-  if (isLoading || !council)
-    return <Skeleton className={cn("w-1/3 ", className)} />;
+}: { name: string | undefined; className?: string }) {
+  if (!name) return <Skeleton className={cn("w-1/3 ", className)} />;
   return <h1 className={className}>{name}</h1>;
 }
diff --git a/apps/web/src/components/VotingCard.tsx b/apps/web/src/components/VotingCard.tsx
index 11e3722..0d60730 100644
--- a/apps/web/src/components/VotingCard.tsx
+++ b/apps/web/src/components/VotingCard.tsx
@@ -11,11 +11,10 @@ import {
 import { Input } from "@repo/ui/components/ui/input";
 import { Skeleton } from "@repo/ui/components/ui/skeleton";
 import React, { useState } from "react";
-import { useAccount } from "wagmi";
 import { useWriteAllocation } from "../hooks/useWriteAllocation";
 import VotingButton from "./VotingButton";
 
-type Project = { grantee: `0x${string}`; name: string };
+type Project = { account: `0x${string}`; name: string };
 
 const VotingCard = ({
   className,
@@ -31,7 +30,7 @@ const VotingCard = ({
   isLoading: boolean;
 }) => {
   const [votes, setVotes] = useState<{ [grantee: `0x${string}`]: number }>(
-    Object.fromEntries(projects.map((project) => [project.grantee, 0])),
+    Object.fromEntries(projects.map((project) => [project.account, 0])),
   );
 
   // Array of project addresses that have been voted on
@@ -68,17 +67,17 @@ const VotingCard = ({
               projects)
             </h4>
             {projects.map((project) => {
-              const voteCount = votes[project.grantee] || 0;
+              const voteCount = votes[project.account] || 0;
               return (
                 <div
-                  key={project.grantee}
+                  key={project.account}
                   className="flex items-center justify-between mb-3"
                 >
                   <span className="flex-grow">{project.name}</span>
                   <div className="flex items-center">
                     <Button
                       disabled={voteCount <= 0}
-                      onClick={() => handleVote(project.grantee, voteCount - 1)}
+                      onClick={() => handleVote(project.account, voteCount - 1)}
                       className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-r-none"
                     >
                       -
@@ -88,7 +87,7 @@ const VotingCard = ({
                       value={voteCount}
                       onChange={(e) =>
                         handleVote(
-                          project.grantee,
+                          project.account,
                           Number.parseInt(e.target.value),
                         )
                       }
@@ -97,9 +96,9 @@ const VotingCard = ({
                     <Button
                       disabled={
                         votedProjects.length >= maxVotedProjects &&
-                        !votes[project.grantee]
+                        !votes[project.account]
                       }
-                      onClick={() => handleVote(project.grantee, voteCount + 1)}
+                      onClick={() => handleVote(project.account, voteCount + 1)}
                       className="bg-gray-700 w-8 py-1 text-white hover:bg-gray-500 rounded-l-none"
                     >
                       +
diff --git a/apps/web/src/hooks/useCouncil.ts b/apps/web/src/hooks/useCouncil.ts
new file mode 100644
index 0000000..77da7a9
--- /dev/null
+++ b/apps/web/src/hooks/useCouncil.ts
@@ -0,0 +1,31 @@
+import { useQuery } from "@tanstack/react-query";
+import { gql, request } from "graphql-request";
+
+export const useCouncil = (council: `0x${string}` | undefined) => {
+  const url =
+    "https://api.goldsky.com/api/public/project_cm10r8z66lbri01se6301ddxj/subgraphs/councilhaus/0.0.1/gn";
+  const query = gql`
+      query CouncilNameAndGrantees($council: String) {
+        council(id: $council) {
+          councilName
+          grantees {
+            name
+            account
+          }
+        }
+      }`;
+  console.log(url, query, council);
+  const { data, isLoading } = useQuery<{
+    council: {
+      councilName: string;
+      grantees: { name: string; account: `0x${string}` }[];
+    };
+  }>({
+    queryKey: ["data"],
+    async queryFn() {
+      return await request(url, query, { council: council?.toLowerCase() });
+    },
+    enabled: !!council,
+  });
+  return { data: data?.council, isLoading };
+};
diff --git a/apps/web/src/utils/grantees.ts b/apps/web/src/utils/grantees.ts
deleted file mode 100644
index 0f7207e..0000000
--- a/apps/web/src/utils/grantees.ts
+++ /dev/null
@@ -1,86 +0,0 @@
-export async function getGrantees(
-  council: `0x${string}`,
-): Promise<{ name: string; grantee: `0x${string}` }[]> {
-  type AddedEvent = {
-    name: string;
-    grantee: `0x${string}`;
-    timestamp_: string;
-  };
-  type RemovedEvent = {
-    grantee: `0x${string}`;
-    timestamp_: string;
-  };
-  // Define the URL and the GraphQL query
-  const url =
-    "https://api.goldsky.com/api/public/project_cm10r8z66lbri01se6301ddxj/subgraphs/Council/1.0.0/gn";
-  const query = `
-{
-  granteeAddeds {
-    name
-    grantee
-    timestamp_
-  }
-  granteeRemoveds {
-    grantee
-    timestamp_
-  }
-}
-`;
-
-  // Set up the request payload
-  const payload = {
-    query: query,
-  };
-
-  // Fetch the data
-  return fetch(url, {
-    method: "POST",
-    headers: {
-      "Content-Type": "application/json",
-    },
-    body: JSON.stringify(payload),
-  })
-    .then((response) => response.json())
-    .then((data) => {
-      // Extract and merge the events
-      const granteeAddeds = data.data.granteeAddeds.map(
-        (event: AddedEvent) => ({
-          type: "added",
-          name: event.name,
-          grantee: event.grantee,
-          timestamp: Number.parseInt(event.timestamp_, 10),
-        }),
-      );
-
-      const granteeRemoveds = data.data.granteeRemoveds.map(
-        (event: RemovedEvent) => ({
-          type: "removed",
-          grantee: event.grantee,
-          timestamp: Number.parseInt(event.timestamp_, 10),
-        }),
-      );
-
-      // Combine the events into one list
-      const allEvents = [...granteeAddeds, ...granteeRemoveds];
-
-      // Sort the combined list by timestamp
-      allEvents.sort((a, b) => a.timestamp - b.timestamp);
-
-      // Reduce the list to get the current state of grantees with their names
-      const grantees: Map<
-        `0x${string}`,
-        { name: string; grantee: `0x${string}` }
-      > = allEvents.reduce((acc, event) => {
-        if (event.type === "added") {
-          acc.set(event.grantee, { name: event.name, grantee: event.grantee });
-        } else if (event.type === "removed") {
-          acc.delete(event.grantee);
-        }
-        return acc;
-      }, new Map());
-
-      // Convert the Map values to an array of {name, grantee} objects
-      const currentGrantees = Array.from(grantees.values());
-      return currentGrantees;
-    });
-}
diff --git a/bun.lockb b/bun.lockb
index 05117c0..e8fe064 100755
Binary files a/bun.lockb and b/bun.lockb differ