diff --git a/apps/hub/src/app/governance/[genre]/components/delegate-modal.tsx b/apps/hub/src/app/governance/[genre]/components/delegate-modal.tsx
index 48bfca5e0..9f5b92a70 100644
--- a/apps/hub/src/app/governance/[genre]/components/delegate-modal.tsx
+++ b/apps/hub/src/app/governance/[genre]/components/delegate-modal.tsx
@@ -20,7 +20,7 @@ import { Icons } from "@bera/ui/icons";
 import { Address, isAddress } from "viem";
 import { Skeleton } from "@bera/ui/skeleton";
 import Identicon from "@bera/shared-ui/src/identicon";
-import { useGovernance } from "../../components/governance-provider";
+import { useGovernance } from "./governance-provider";
 import { InputWithLabel } from "@bera/ui/input";
 
 export const DelegateModal = ({
diff --git a/apps/hub/src/app/governance/[genre]/components/go-to-if-has-voting-power.tsx b/apps/hub/src/app/governance/[genre]/components/go-to-if-has-voting-power.tsx
index 7ca9213f0..79c13102a 100644
--- a/apps/hub/src/app/governance/[genre]/components/go-to-if-has-voting-power.tsx
+++ b/apps/hub/src/app/governance/[genre]/components/go-to-if-has-voting-power.tsx
@@ -5,7 +5,7 @@ import { ActionButton } from "@bera/shared-ui";
 import { Address } from "viem";
 import Link from "next/link";
 import { governanceTokenAddress } from "@bera/config";
-import { useGovernance } from "../../components/governance-provider";
+import { useGovernance } from "./governance-provider";
 
 export const GoToIfHasVotingPower = ({
   governorAddress,
diff --git a/apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx b/apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx
index fbe63aa26..1a36bc8a1 100755
--- a/apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx
+++ b/apps/hub/src/app/governance/[genre]/components/governance-by-status.tsx
@@ -1,21 +1,18 @@
+"use client";
+
 import React from "react";
 import Link from "next/link";
+import { governorAddress } from "@bera/config";
 import { Button } from "@bera/ui/button";
 import { Icons } from "@bera/ui/icons";
 
-import { Address } from "viem";
-import { Dapp } from "../../governance-genre-helper";
+import { GoToIfHasVotingPower } from "./go-to-if-has-voting-power";
+import { useGovernance } from "./governance-provider";
 import { ProposalsList } from "./proposals-list";
 import { UserVotingPower } from "./user-voting-power";
-import { GoToIfHasVotingPower } from "./go-to-if-has-voting-power";
 
-export default function GovernanceByStatus({
-  dapp,
-  governorAddress,
-}: {
-  dapp: Dapp;
-  governorAddress: Address;
-}) {
+export default function GovernanceByStatus() {
+  const { dappConfig } = useGovernance();
   return (
     <div className="pb-32">
       <Link
@@ -27,17 +24,17 @@ export default function GovernanceByStatus({
       </Link>
       <div
         className="font-bold uppercase tracking-widest"
-        style={{ color: dapp.color }}
+        style={{ color: dappConfig.color }}
       >
-        {dapp.name}
+        {dappConfig.name}
       </div>
-      <div className="text-foreground text-3xl font-bold leading-9 sm:text-5xl sm:leading-[48px]">
+      <div className="text-3xl font-bold leading-9 text-foreground sm:text-5xl sm:leading-[48px]">
         Vote on proposals <br />
         or create your own
       </div>
       <div className="mx-auto my-8 flex   flex-col gap-3 sm:w-full sm:flex-row">
         <GoToIfHasVotingPower
-          href={`/governance/${dapp.link}/create`}
+          href={`/governance/${dappConfig.slug}/create`}
           governorAddress={governorAddress}
         />
         <Button variant="secondary" className="w-fit">
diff --git a/apps/hub/src/app/governance/components/governance-provider.tsx b/apps/hub/src/app/governance/[genre]/components/governance-provider.tsx
similarity index 85%
rename from apps/hub/src/app/governance/components/governance-provider.tsx
rename to apps/hub/src/app/governance/[genre]/components/governance-provider.tsx
index 005832098..143655046 100644
--- a/apps/hub/src/app/governance/components/governance-provider.tsx
+++ b/apps/hub/src/app/governance/[genre]/components/governance-provider.tsx
@@ -1,6 +1,7 @@
 "use client";
-import BigNumber from "bignumber.js";
 
+import { createContext, useContext, useEffect, useState } from "react";
+import { notFound } from "next/navigation";
 import { ApolloProvider } from "@apollo/client";
 import {
   useBeraJs,
@@ -8,15 +9,20 @@ import {
   usePollProposalThreshold,
   usePollUserDelegates,
 } from "@bera/berajs";
-import { bgtClient } from "@bera/graphql";
-import { createContext, useContext, useEffect, useState } from "react";
+import { bgtTokenAddress, governorAddress } from "@bera/config";
+import { getClient } from "@bera/graphql";
+import BigNumber from "bignumber.js";
 import { Address } from "viem";
+
 import {
-  governanceTokenAddress,
-  governorAddress as governorAddressFromEnv,
-} from "@bera/config";
+  GovernanceTopic,
+  PROPOSAL_GENRE,
+  getDappByGenre,
+  isValidGenre,
+} from "../../governance-genre-helper";
+import { DelegateModal } from "./delegate-modal";
 import { NotEnoughVotingPower } from "./not-enough-voting-power";
-import { DelegateModal } from "../[genre]/components/delegate-modal";
+
 type GovernanceContextType = {
   canPropose: boolean;
   votesThreshold?: string;
@@ -36,6 +42,7 @@ type GovernanceContextType = {
     onClose?: () => void;
     isOpen?: boolean;
   }) => void;
+  dappConfig: GovernanceTopic;
 };
 
 const GovernanceContext = createContext<GovernanceContextType | undefined>(
@@ -51,14 +58,20 @@ export const useGovernance = () => {
 };
 
 // Provides a context for the governance page
-const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
-  // TODO: update this if we want to support multiple governors
-  const [governorAddress, setGovernorAddress] = useState<Address>(
-    governorAddressFromEnv,
-  );
+export const GovernanceProvider = ({
+  genre,
+  children,
+}: {
+  genre: PROPOSAL_GENRE;
+  children: React.ReactNode;
+}) => {
+  if (!isValidGenre(genre)) return notFound();
+  const dappConfig = getDappByGenre(genre);
+  const client = getClient(dappConfig!.subgraph);
+
   const { account } = useBeraJs();
   const { data: tokenBalanceData, isLoading: isLoadingTokenBalance } =
-    usePollBalance({ address: governanceTokenAddress });
+    usePollBalance({ address: bgtTokenAddress });
 
   const [isDialogOpen, setIsDialogOpen] = useState<{
     isOpen: boolean;
@@ -99,6 +112,7 @@ const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
       setIsDialogOpen((prev) => ({ ...prev, isOpen: false }));
     }
   }, [canPropose]);
+
   return (
     <GovernanceContext.Provider
       value={
@@ -112,6 +126,7 @@ const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
           isLoading:
             isLoadingVotes || isLoadingVotesThreshold || isLoadingTokenBalance,
           governorAddress,
+          dappConfig,
           delegatedByOthers,
           delegatedToThemselves,
           tokenBalance: tokenBalanceData?.formattedBalance,
@@ -151,17 +166,7 @@ const _GovernanceProvider = ({ children }: { children: React.ReactNode }) => {
           }));
         }}
       />
-      {children}
+      <ApolloProvider client={client}>{children}</ApolloProvider>
     </GovernanceContext.Provider>
   );
 };
-
-export const GovernanceProvider = ({
-  children,
-}: { children: React.ReactNode }) => {
-  return (
-    <ApolloProvider client={bgtClient}>
-      <_GovernanceProvider>{children}</_GovernanceProvider>
-    </ApolloProvider>
-  );
-};
diff --git a/apps/hub/src/app/governance/components/not-enough-voting-power.tsx b/apps/hub/src/app/governance/[genre]/components/not-enough-voting-power.tsx
similarity index 100%
rename from apps/hub/src/app/governance/components/not-enough-voting-power.tsx
rename to apps/hub/src/app/governance/[genre]/components/not-enough-voting-power.tsx
diff --git a/apps/hub/src/app/governance/[genre]/components/user-voting-power.tsx b/apps/hub/src/app/governance/[genre]/components/user-voting-power.tsx
index 89ca1944a..deccf2966 100644
--- a/apps/hub/src/app/governance/[genre]/components/user-voting-power.tsx
+++ b/apps/hub/src/app/governance/[genre]/components/user-voting-power.tsx
@@ -11,7 +11,7 @@ import { Skeleton } from "@bera/ui/skeleton";
 import { DelegateModal } from "./delegate-modal";
 import { Button } from "@bera/ui/button";
 import { useState } from "react";
-import { useGovernance } from "../../components/governance-provider";
+import { useGovernance } from "./governance-provider";
 import { governanceTokenAddress } from "@bera/config";
 
 export const UserVotingPower = () => {
diff --git a/apps/hub/src/app/governance/[genre]/create/components/erc20-transfer.tsx b/apps/hub/src/app/governance/[genre]/create/components/erc20-transfer.tsx
index f46762f5b..e3bbe2a9a 100644
--- a/apps/hub/src/app/governance/[genre]/create/components/erc20-transfer.tsx
+++ b/apps/hub/src/app/governance/[genre]/create/components/erc20-transfer.tsx
@@ -10,9 +10,9 @@ import {
   ProposalErrorCodes,
   ProposalTypeEnum,
 } from "~/app/governance/types";
-import { useGovernance } from "~/app/governance/components/governance-provider";
 import { formatUnits, isAddress, parseUnits } from "viem";
 import { checkProposalField } from "~/hooks/useCreateProposal";
+import { useGovernance } from "../../components/governance-provider";
 
 export function Erc20Transfer({
   idx,
diff --git a/apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx b/apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx
index 8215deb86..9bb26e065 100755
--- a/apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx
+++ b/apps/hub/src/app/governance/[genre]/create/components/new-proposal.tsx
@@ -1,24 +1,17 @@
 "use client";
 
+import { useEffect } from "react";
 import Link from "next/link";
+import { useParams, useRouter } from "next/navigation";
+import { useBeraJs } from "@bera/berajs";
+import { governorAddress } from "@bera/config";
 import { Icons } from "@bera/ui/icons";
 
-import {
-  PROPOSAL_GENRE,
-  getDappByGenre,
-} from "../../../governance-genre-helper";
+import { PROPOSAL_GENRE } from "../../../governance-genre-helper";
+import { useGovernance } from "../../components/governance-provider";
 import { CreateProposal } from "./create-proposal";
-import { governorAddress } from "@bera/config";
 
-import { useParams, useRouter } from "next/navigation";
-import { useGovernance } from "~/app/governance/components/governance-provider";
-import { useEffect } from "react";
-import { useBeraJs } from "@bera/berajs";
-export default function NewProposal({
-  genre,
-}: {
-  genre: PROPOSAL_GENRE;
-}) {
+export default function NewProposal({ genre }: { genre: PROPOSAL_GENRE }) {
   // const dapp = getDappByGenre(genre);
   const { account } = useBeraJs();
   const params = useParams();
@@ -42,10 +35,10 @@ export default function NewProposal({
   }, [canPropose, account, isLoading]);
 
   return (
-    <div className="pb-16 col-span-12 xl:col-span-8 xl:col-start-3">
+    <div className="col-span-12 pb-16 xl:col-span-8 xl:col-start-3">
       <Link
         href={`/governance/${params.genre}`}
-        className="flex mb-8 items-center gap-1 text-sm font-medium text-muted-foreground"
+        className="mb-8 flex items-center gap-1 text-sm font-medium text-muted-foreground"
       >
         <Icons.arrowLeft className="h-4 w-4" />
         All Proposals
diff --git a/apps/hub/src/app/governance/[genre]/layout.tsx b/apps/hub/src/app/governance/[genre]/layout.tsx
new file mode 100755
index 000000000..f9f22552b
--- /dev/null
+++ b/apps/hub/src/app/governance/[genre]/layout.tsx
@@ -0,0 +1,14 @@
+import { PROPOSAL_GENRE } from "../governance-genre-helper";
+import { GovernanceProvider } from "./components/governance-provider";
+
+export default function Layout({
+  children,
+  params,
+}: {
+  children: React.ReactNode;
+  params: { genre: PROPOSAL_GENRE };
+}) {
+  return (
+    <GovernanceProvider genre={params.genre}>{children}</GovernanceProvider>
+  );
+}
diff --git a/apps/hub/src/app/governance/[genre]/page.tsx b/apps/hub/src/app/governance/[genre]/page.tsx
index b79dc48c7..b225be311 100755
--- a/apps/hub/src/app/governance/[genre]/page.tsx
+++ b/apps/hub/src/app/governance/[genre]/page.tsx
@@ -1,27 +1,6 @@
-"use client";
-
 import React from "react";
-import { notFound } from "next/navigation";
-
-import {
-  PROPOSAL_GENRE,
-  getDappByGenre,
-  isValidGenre,
-} from "../governance-genre-helper";
 import GovernanceByStatus from "./components/governance-by-status";
-import { governorAddress } from "@bera/config";
-
-export default function Page({
-  params,
-}: {
-  params: { genre: PROPOSAL_GENRE };
-}) {
-  if (!isValidGenre(params.genre)) return notFound();
 
-  return (
-    <GovernanceByStatus
-      governorAddress={governorAddress}
-      dapp={getDappByGenre(params.genre)!}
-    />
-  );
+export default function Page() {
+  return <GovernanceByStatus />;
 }
diff --git a/apps/hub/src/app/governance/components/home-page.tsx b/apps/hub/src/app/governance/components/home-page.tsx
index 89c370eaf..4245c8d07 100644
--- a/apps/hub/src/app/governance/components/home-page.tsx
+++ b/apps/hub/src/app/governance/components/home-page.tsx
@@ -1,6 +1,10 @@
 import Link from "next/link";
 
-import { Dapp, NativeDapps, Others } from "../governance-genre-helper";
+import {
+  GovernanceTopic,
+  NativeDapps,
+  Others,
+} from "../governance-genre-helper";
 
 export const HomePage = () => {
   return (
@@ -19,11 +23,11 @@ export const HomePage = () => {
           NATIVE dAPPS
         </div>
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {NativeDapps.map((dapp: Dapp) => (
+          {NativeDapps.map((dapp: GovernanceTopic) => (
             <Link
               className="w-full cursor-pointer overflow-hidden rounded-lg border border-border transition-all hover:scale-105"
               key={dapp.name}
-              href={`governance/${dapp.link}`}
+              href={`governance/${dapp.slug}`}
             >
               <div
                 className="flex justify-center border-b border-border p-1"
@@ -42,11 +46,11 @@ export const HomePage = () => {
           OTHER
         </div>
         <div className="grid gap-6 sm:grid-cols-2 lg:grid-cols-4">
-          {Others.map((dapp: Dapp) => (
+          {Others.map((dapp: GovernanceTopic) => (
             <Link
               className="w-full cursor-pointer overflow-hidden rounded-lg border border-border transition-all hover:scale-105"
               key={dapp.name}
-              href={`governance/${dapp.link}`}
+              href={`governance/${dapp.slug}`}
             >
               <div
                 className="flex justify-center border-b border-border p-1"
diff --git a/apps/hub/src/app/governance/governance-genre-helper.tsx b/apps/hub/src/app/governance/governance-genre-helper.tsx
index 17eede127..7be2dd983 100644
--- a/apps/hub/src/app/governance/governance-genre-helper.tsx
+++ b/apps/hub/src/app/governance/governance-genre-helper.tsx
@@ -1,60 +1,73 @@
+import { governanceSubgraphUrl } from "@bera/config";
 import { Icons } from "@bera/ui/icons";
 
 export type PROPOSAL_GENRE = "berahub" | "honey" | "bend" | "berps" | "general";
 
-export type Dapp = {
+export type GovernanceTopic = {
+  id: PROPOSAL_GENRE;
   color: string;
   icon: React.ReactNode;
   name: string;
-  link: string;
+  slug: string;
+  subgraph: string;
 };
 
-export const NativeDapps: Dapp[] = [
+export const NativeDapps: GovernanceTopic[] = [
   {
+    id: "berahub",
     color: "#E6B434",
     icon: <Icons.hubFav className="h-16 w-16" />,
     name: "BeraHub",
-    link: "berahub",
+    slug: "berahub",
+    subgraph: governanceSubgraphUrl,
   },
   {
+    id: "honey",
     color: "#EC8A19",
     icon: <Icons.honeyFav className="h-16 w-16" />,
     name: "Honey",
-    link: "honey",
+    slug: "honey",
+    subgraph: governanceSubgraphUrl,
   },
   {
+    id: "bend",
     color: "#7464E5",
     icon: <Icons.bendFav className="h-16 w-16" />,
     name: "BEND",
-    link: "bend",
+    slug: "bend",
+    subgraph: governanceSubgraphUrl,
   },
   {
+    id: "berps",
     color: "#41D6E0",
     icon: <Icons.berpsFav className="h-16 w-16" />,
     name: "BERPS",
-    link: "berps",
+    slug: "berps",
+    subgraph: governanceSubgraphUrl,
   },
 ];
 
-export const Others: Dapp[] = [
+export const Others: GovernanceTopic[] = [
   {
+    id: "general",
     color: "#2F2F2F",
     icon: <Icons.ecoFav className="h-16 w-16" />,
     name: "General",
-    link: "general",
+    slug: "general",
+    subgraph: governanceSubgraphUrl,
   },
 ];
 
 export const getDappByGenre = (genre: PROPOSAL_GENRE) => {
   return (
-    NativeDapps.find((dapp) => dapp.link === genre) ||
-    Others.find((dapp) => dapp.link === genre)
+    NativeDapps.find((dapp) => dapp.id === genre) ||
+    Others.find((dapp) => dapp.id === genre)
   );
 };
 
 export const isValidGenre = (genre: any): genre is PROPOSAL_GENRE => {
   return (
-    NativeDapps.some((dapp) => dapp.link === genre) ||
-    Others.some((dapp) => dapp.link === genre)
+    NativeDapps.some((dapp) => dapp.id === genre) ||
+    Others.some((dapp) => dapp.id === genre)
   );
 };
diff --git a/apps/hub/src/app/governance/layout.tsx b/apps/hub/src/app/governance/layout.tsx
index f5595c6b9..d005cfa79 100755
--- a/apps/hub/src/app/governance/layout.tsx
+++ b/apps/hub/src/app/governance/layout.tsx
@@ -1,9 +1,3 @@
-import { GovernanceProvider } from "./components/governance-provider";
-
 export default function Layout({ children }: { children: React.ReactNode }) {
-  return (
-    <GovernanceProvider>
-      <section className="container">{children}</section>
-    </GovernanceProvider>
-  );
+  return <section className="container">{children}</section>;
 }
diff --git a/packages/berajs/src/constants/defaultBeraConfig.ts b/packages/berajs/src/constants/defaultBeraConfig.ts
index eec514110..57db22e7f 100755
--- a/packages/berajs/src/constants/defaultBeraConfig.ts
+++ b/packages/berajs/src/constants/defaultBeraConfig.ts
@@ -1,10 +1,16 @@
 import {
   beraTokenAddress,
+  bgtEndpointUrl,
+  bgtSubgraphUrl,
+  bgtTokenAddress,
   crocDexAddress,
   crocIndexerEndpoint,
   crocMultiSwapAddress,
   crocRouterEndpoint,
   crocSubgraphEndpoint,
+  governanceSubgraphUrl,
+  governanceTimelockAddress,
+  governorAddress,
   honeyRouterAddress,
   honeySubgraphUrl,
   lendOracleAddress,
@@ -13,15 +19,11 @@ import {
   lendRewardsAddress,
   lendSubgraphUrl,
   lendUIDataProviderAddress,
+  marketListUrl,
   multicallAddress,
   tokenListUrl,
   tradingContractAddress,
   validatorListUrl,
-  bgtEndpointUrl,
-  bgtTokenAddress,
-  marketListUrl,
-  bgtSubgraphUrl,
-  governanceSubgraphUrl,
 } from "@bera/config";
 
 import { BeraConfig } from "..";
@@ -56,5 +58,27 @@ export const defaultBeraConfig: BeraConfig = {
     lendRewardsAggregatorAddress: lendRewardsAddress,
     honeyRouterAddress: honeyRouterAddress,
     perpsTradingContractAddress: tradingContractAddress,
+    governance: {
+      berahub: {
+        governor: governorAddress,
+        timelock: governanceTimelockAddress,
+      },
+      honey: {
+        governor: governorAddress,
+        timelock: governanceTimelockAddress,
+      },
+      bend: {
+        governor: governorAddress,
+        timelock: governanceTimelockAddress,
+      },
+      berps: {
+        governor: governorAddress,
+        timelock: governanceTimelockAddress,
+      },
+      general: {
+        governor: governorAddress,
+        timelock: governanceTimelockAddress,
+      },
+    },
   },
 };
diff --git a/packages/berajs/src/types/global.ts b/packages/berajs/src/types/global.ts
index fc126ec24..817c34ed1 100755
--- a/packages/berajs/src/types/global.ts
+++ b/packages/berajs/src/types/global.ts
@@ -33,6 +33,13 @@ export interface BeraConfig {
     lendRewardsAggregatorAddress?: Address;
     honeyRouterAddress?: Address;
     perpsTradingContractAddress?: Address;
+    governance: {
+      berahub?: { governor: Address; timelock: Address };
+      honey?: { governor: Address; timelock: Address };
+      bend?: { governor: Address; timelock: Address };
+      berps?: { governor: Address; timelock: Address };
+      general?: { governor: Address; timelock: Address };
+    };
   };
 }
 
diff --git a/packages/config/env/index.ts b/packages/config/env/index.ts
index 5aa22a73e..70fdc5c9d 100755
--- a/packages/config/env/index.ts
+++ b/packages/config/env/index.ts
@@ -206,7 +206,7 @@ export const governorAddress = process.env
 export const governanceTokenAddress = process.env
   .NEXT_PUBLIC_GOVERNANCE_TOKEN_ADDRESS as Address;
 export const governanceTimelockAddress = process.env
-  .NEXT_PUBLIC_GOVERNANCE_TIMELOCK_ADDRESS as string;
+  .NEXT_PUBLIC_GOVERNANCE_TIMELOCK_ADDRESS as Address;
 export const beraChefAddress = process.env
   .NEXT_PUBLIC_BERA_CHEF_ADDRESS as Address;
 export const governanceOrganizationId = process.env
diff --git a/packages/graphql/src/modules/clients/get-client.ts b/packages/graphql/src/modules/clients/get-client.ts
new file mode 100644
index 000000000..7f602c754
--- /dev/null
+++ b/packages/graphql/src/modules/clients/get-client.ts
@@ -0,0 +1,14 @@
+import { ApolloClient, InMemoryCache } from "@apollo/client";
+
+export const getClient = (subgraphEndpoint: string) =>
+  new ApolloClient({
+    uri: subgraphEndpoint,
+    cache: new InMemoryCache(),
+  });
+
+export const getSSRClient = (subgraphEndpoint: string) =>
+  new ApolloClient({
+    ssrMode: true,
+    uri: subgraphEndpoint,
+    cache: new InMemoryCache(),
+  });
diff --git a/packages/graphql/src/modules/clients/index.ts b/packages/graphql/src/modules/clients/index.ts
index 6132ac19c..4b0124379 100755
--- a/packages/graphql/src/modules/clients/index.ts
+++ b/packages/graphql/src/modules/clients/index.ts
@@ -2,3 +2,4 @@ export * from "./dex-client";
 export * from "./honey-client";
 export * from "./lend-client";
 export * from "./bgt-client";
+export * from "./get-client";