diff --git a/src/ui/components/Multistaking/BsnFinalityProviderField/BsnFinalityProviderField.tsx b/src/ui/components/Multistaking/BsnFinalityProviderField/BsnFinalityProviderField.tsx
index d0ffb4f1c..85247b7da 100644
--- a/src/ui/components/Multistaking/BsnFinalityProviderField/BsnFinalityProviderField.tsx
+++ b/src/ui/components/Multistaking/BsnFinalityProviderField/BsnFinalityProviderField.tsx
@@ -30,8 +30,9 @@ export function BsnFinalityProviderField({
     disabled,
   });
 
-  const handleAdd = () => {
-    // TODO: Implement provider selection logic
+  const handleAdd = (providerPk: string) => {
+    // Add selected provider ID to list
+    onChange([...selectedProviderIds, providerPk]);
     onClose();
   };
 
@@ -62,7 +63,12 @@ export function BsnFinalityProviderField({
           />
         )}
       </div>
-      <BsnModal open={open} onAdd={handleAdd} onClose={onClose} />
+      <BsnModal
+        open={open}
+        onAdd={handleAdd}
+        onClose={onClose}
+        selectedProviderIds={selectedProviderIds}
+      />
     </SubSection>
   );
 }
diff --git a/src/ui/components/Multistaking/BsnFinalityProviderField/BsnModal.tsx b/src/ui/components/Multistaking/BsnFinalityProviderField/BsnModal.tsx
index a6a2ef69b..78e159174 100644
--- a/src/ui/components/Multistaking/BsnFinalityProviderField/BsnModal.tsx
+++ b/src/ui/components/Multistaking/BsnFinalityProviderField/BsnModal.tsx
@@ -1,30 +1,87 @@
-import { DialogBody, DialogHeader } from "@babylonlabs-io/core-ui";
+import { useEffect, useMemo, useState } from "react";
 
 import { ResponsiveDialog } from "@/ui/components/Modals/ResponsiveDialog";
+import { ChainSelectionModal } from "@/ui/components/Multistaking/ChainSelectionModal/ChainSelectionModal";
+import { FinalityProviderModal } from "@/ui/components/Multistaking/FinalityProviderField/FinalityProviderModal";
+import {
+  FinalityProviderBsnState,
+  useFinalityProviderBsnState,
+} from "@/ui/state/FinalityProviderBsnState";
 
 interface Props {
   open: boolean;
-  defaultFinalityProvider?: string;
-  onAdd: () => void;
+  onAdd: (selectedProviderPk: string) => void;
   onClose: () => void;
+  selectedProviderIds: string[];
 }
 
-export function BsnModal({
-  open,
-  // defaultFinalityProvider,
-  // onAdd,
-  onClose,
-}: Props) {
+enum BsnModalPage {
+  CHAIN = "CHAIN",
+  FP = "FP",
+}
+
+export function BsnModal({ open, onAdd, onClose, selectedProviderIds }: Props) {
+  const [selectedChainId, setSelectedChainId] = useState<string | null>(null);
+  const [page, setPage] = useState<BsnModalPage>(BsnModalPage.CHAIN);
+
+  const { getRegisteredFinalityProvider } = useFinalityProviderBsnState();
+
+  const hasBabylonProvider = useMemo(
+    () =>
+      selectedProviderIds.some((pk) => {
+        const fp = getRegisteredFinalityProvider(pk);
+        return !fp?.bsnId;
+      }),
+    [selectedProviderIds, getRegisteredFinalityProvider],
+  );
+
+  const disabledChainIds = useMemo(() => {
+    const set = new Set<string>();
+    selectedProviderIds.forEach((pk) => {
+      const fp = getRegisteredFinalityProvider(pk);
+      set.add(fp?.bsnId || "");
+    });
+    return Array.from(set);
+  }, [selectedProviderIds, getRegisteredFinalityProvider]);
+
+  useEffect(() => {
+    if (!open) {
+      return;
+    }
+    setPage(BsnModalPage.CHAIN);
+    setSelectedChainId(null);
+  }, [open]);
+
+  const handleChainNext = (chainId: string) => {
+    setSelectedChainId(chainId);
+    setPage(BsnModalPage.FP);
+  };
+
+  const handleProviderAdd = (providerPk: string) => {
+    onAdd(providerPk);
+  };
+
   return (
     <ResponsiveDialog open={open} onClose={onClose} className="w-[52rem]">
-      <DialogHeader
-        title="Select BSN and Finality Provider"
-        onClose={onClose}
-        className="text-accent-primary"
-      />
-      <DialogBody className="flex flex-col mb-4 mt-4 text-accent-primary">
-        {/* TODO: Implement BSN selection functionality */}
-      </DialogBody>
+      {page === BsnModalPage.CHAIN && (
+        <ChainSelectionModal
+          onNext={handleChainNext}
+          onClose={onClose}
+          disableNonBabylon={!hasBabylonProvider}
+          disabledChainIds={disabledChainIds}
+        />
+      )}
+      {page === BsnModalPage.FP && selectedChainId !== null && (
+        <FinalityProviderBsnState bsnId={selectedChainId}>
+          <FinalityProviderModal
+            open={true}
+            defaultFinalityProvider=""
+            onClose={onClose}
+            onAdd={handleProviderAdd}
+            onBack={() => setPage(BsnModalPage.CHAIN)}
+          />
+        </FinalityProviderBsnState>
+      )}
     </ResponsiveDialog>
   );
 }
diff --git a/src/ui/components/Multistaking/ChainSelectionModal/ChainSelectionModal.tsx b/src/ui/components/Multistaking/ChainSelectionModal/ChainSelectionModal.tsx
index c2a010f31..5e0528514 100644
--- a/src/ui/components/Multistaking/ChainSelectionModal/ChainSelectionModal.tsx
+++ b/src/ui/components/Multistaking/ChainSelectionModal/ChainSelectionModal.tsx
@@ -5,10 +5,12 @@ import {
   DialogHeader,
   Text,
 } from "@babylonlabs-io/core-ui";
+import { useQuery } from "@tanstack/react-query";
 import { PropsWithChildren, useState } from "react";
 import { MdOutlineInfo } from "react-icons/md";
 import { twMerge } from "tailwind-merge";
 
+import { getBSNs } from "@/ui/api/getBsn";
 import { chainLogos } from "@/ui/constants";
 
 const SubSection = ({
@@ -80,12 +82,21 @@ const ChainButton = ({
 export const ChainSelectionModal = ({
   onNext,
   onClose,
+  disableNonBabylon = false,
+  disabledChainIds = [],
 }: {
   onNext: (selectedChain: string) => void;
   onClose: () => void;
+  disableNonBabylon?: boolean;
+  disabledChainIds?: string[];
 }) => {
   const [selected, setSelected] = useState<string | null>(null);
 
+  const { data: bsns, isLoading } = useQuery({
+    queryKey: ["API_BSN_LIST"],
+    queryFn: getBSNs,
+  });
+
   return (
     <>
       <DialogHeader
@@ -101,47 +112,48 @@ export const ChainSelectionModal = ({
           rewards.
         </div>
         <div className="overflow-x-auto flex flex-col gap-2 mt-10">
-          <ChainButton
-            logo={chainLogos.babylon}
-            title="Babylon"
-            selected={selected === "babylon"}
-            onClick={() => setSelected("babylon")}
-          />
-          <ChainButton
-            logo={chainLogos.cosmos}
-            title="Cosmos"
-            disabled
-            onClick={() => setSelected("cosmos")}
-          />
-          <ChainButton
-            logo={chainLogos.ethereum}
-            title="Ethereum"
-            disabled
-            onClick={() => setSelected("ethereum")}
-          />
-          <ChainButton
-            logo={chainLogos.sui}
-            title="Sui"
-            disabled
-            onClick={() => setSelected("sui")}
-          />
+          {isLoading && <div>Loading...</div>}
+          {bsns?.map((bsn) => {
+            const logo =
+              bsn.id === ""
+                ? chainLogos.babylon
+                : (chainLogos as Record<string, string>)[bsn.id] ||
+                  chainLogos.placeholder;
+
+            const isDisabled =
+              (disableNonBabylon && bsn.id !== "") ||
+              disabledChainIds.includes(bsn.id);
+
+            return (
+              <ChainButton
+                key={bsn.id}
+                logo={logo}
+                title={bsn.name}
+                selected={selected === bsn.id}
+                disabled={isDisabled}
+                onClick={() => !isDisabled && setSelected(bsn.id)}
+              />
+            );
+          })}
         </div>
-        <SubSection className="text-base text-[#387085] gap-3 flex-row mt-4">
-          <div>
-            <MdOutlineInfo size={22} />
-          </div>
-          <div>
-            Babylon must be the first BSN you add before selecting others. Once
-            added, you can choose additional BSNs to multistake.
-          </div>
-        </SubSection>
+        {disableNonBabylon && (
+          <SubSection className="text-base text-[#387085] gap-3 flex-row mt-4">
+            <div>
+              <MdOutlineInfo size={22} />
+            </div>
+            <div>
+              Babylon must be the first BSN you add before selecting others.
+              Once added, you can choose additional BSNs to multistake.
+            </div>
+          </SubSection>
+        )}
       </DialogBody>
 
       <DialogFooter className="flex justify-end">
         <Button
           variant="contained"
-          onClick={() => selected && onNext(selected)}
-          disabled={!selected}
+          onClick={() => selected !== null && onNext(selected)}
+          disabled={selected === null}
         >
           Next
         </Button>
diff --git a/src/ui/components/Multistaking/FinalityProviderField/FinalityProviders.tsx b/src/ui/components/Multistaking/FinalityProviderField/FinalityProviders.tsx
index 843d03a5a..fc9dc0003 100644
--- a/src/ui/components/Multistaking/FinalityProviderField/FinalityProviders.tsx
+++ b/src/ui/components/Multistaking/FinalityProviderField/FinalityProviders.tsx
@@ -1,6 +1,6 @@
-import { FinalityProviderFilter } from "@/ui/components/Staking/FinalityProviders/FinalityProviderFilter";
-import { FinalityProviderSearch } from "@/ui/components/Staking/FinalityProviders/FinalityProviderSearch";
-import { FinalityProviderTable } from "@/ui/components/Staking/FinalityProviders/FinalityProviderTable";
+import { FinalityProviderFilter } from "@/ui/components/Multistaking/FinalityProviders/FinalityProviderFilter";
+import { FinalityProviderSearch } from "@/ui/components/Multistaking/FinalityProviders/FinalityProviderSearch";
+import { FinalityProviderTable } from "@/ui/components/Multistaking/FinalityProviders/FinalityProviderTable";
 
 interface Props {
   selectedFP: string;
diff --git a/src/ui/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx b/src/ui/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
new file mode 100644
index 000000000..9cc8ad1e3
--- /dev/null
+++ b/src/ui/components/Multistaking/FinalityProviders/FinalityProviderFilter.tsx
@@ -0,0 +1,23 @@
+import { Select } from "@babylonlabs-io/core-ui";
+
+import { useFinalityProviderBsnState } from "@/ui/state/FinalityProviderBsnState";
+
+const options = [
+  { value: "active", label: "Active" },
+  { value: "inactive", label: "Inactive" },
+];
+
+export const FinalityProviderFilter = () => {
+  const { filter, handleFilter } = useFinalityProviderBsnState();
+
+  return (
+    <Select
+      options={options}
+      onSelect={(value) => handleFilter("status", value.toString())}
+      placeholder="Select Status"
+      value={filter.search ? "" : filter.status}
+      disabled={Boolean(filter.search)}
+      renderSelectedOption={(option) => `Showing ${option.label}`}
+    />
+  );
+};
diff --git a/src/ui/components/Multistaking/FinalityProviders/FinalityProviderSearch.tsx b/src/ui/components/Multistaking/FinalityProviders/FinalityProviderSearch.tsx
new file mode 100644
index 000000000..7d9358892
--- /dev/null
+++ b/src/ui/components/Multistaking/FinalityProviders/FinalityProviderSearch.tsx
@@ -0,0 +1,43 @@
+import { Input } from "@babylonlabs-io/core-ui";
+import { useCallback } from "react";
+import { MdCancel } from "react-icons/md";
+import { RiSearchLine } from "react-icons/ri";
+
+import { useFinalityProviderBsnState } from "@/ui/state/FinalityProviderBsnState";
+
+export const FinalityProviderSearch = () => {
+  const { filter, handleFilter } = useFinalityProviderBsnState();
+
+  const onSearchChange = useCallback(
+    (e: React.ChangeEvent<HTMLInputElement>) => {
+      handleFilter("search", e.target.value);
+    },
+    [handleFilter],
+  );
+
+  const onClearSearch = useCallback(() => {
+    handleFilter("search", "");
+  }, [handleFilter]);
+
+  const searchSuffix = filter.search ? (
+    <button
+      onClick={onClearSearch}
+      className="opacity-60 hover:opacity-100 transition-opacity"
+    >
+      <MdCancel size={18} className="text-secondary-strokeDark" />
+    </button>
+  ) : (
+    <span className="text-secondary-strokeDark">
+      <RiSearchLine size={20} />
+    </span>
+  );
+
+  return (
+    <Input
+      placeholder="Search by Name or Public Key"
+      suffix={searchSuffix}
+      value={filter.search}
+      onChange={onSearchChange}
+    />
+  );
+};
diff --git a/src/ui/components/Multistaking/FinalityProviders/FinalityProviderTable.tsx b/src/ui/components/Multistaking/FinalityProviders/FinalityProviderTable.tsx
new file mode 100644
index 000000000..8cc988f3d
--- /dev/null
+++ b/src/ui/components/Multistaking/FinalityProviders/FinalityProviderTable.tsx
@@ -0,0 +1,145 @@
+/**
+ * Import polyfill for array.toSorted
+ */
+import "core-js/features/array/to-sorted";
+
+import { Button, Loader } from "@babylonlabs-io/core-ui";
+
+import warningOctagon from "@/ui/assets/warning-octagon.svg";
+import warningTriangle from "@/ui/assets/warning-triangle.svg";
+import { FinalityProviderLogo } from "@/ui/components/Staking/FinalityProviders/FinalityProviderLogo";
+import { StatusView } from "@/ui/components/Staking/FinalityProviders/FinalityProviderTableStatusView";
+import { getNetworkConfigBTC } from "@/ui/config/network/btc";
+import { useFinalityProviderBsnState } from "@/ui/state/FinalityProviderBsnState";
+import { FinalityProviderStateLabels } from "@/ui/types/finalityProviders";
+import { satoshiToBtc } from "@/ui/utils/btc";
+import { maxDecimals } from "@/ui/utils/maxDecimals";
+
+const { coinSymbol } = getNetworkConfigBTC();
+
+interface Props {
+  selectedFP?: string;
+  onSelectRow?: (btcPk: string) => void;
+}
+
+export const FinalityProviderTable = ({ selectedFP, onSelectRow }: Props) => {
+  const { isFetching, finalityProviders, hasError, isRowSelectable } =
+    useFinalityProviderBsnState();
+
+  const errorView = (
+    <StatusView
+      icon={<img src={warningTriangle} alt="Warning" width={88} height={88} />}
+      title="Failed to Load"
+      description={
+        <>
+          The finality provider list failed to load. Please check <br />
+          your internet connection or try again later.
+        </>
+      }
+    />
+  );
+
+  const loadingView = (
+    <StatusView
+      icon={<Loader className="text-primary-light" />}
+      title="Loading Finality Providers"
+    />
+  );
+
+  const noMatchesView = (
+    <StatusView
+      icon={<img src={warningOctagon} alt="Warning" width={160} height={160} />}
+      title="No Matches Found"
+    />
+  );
+
+  if (hasError) {
+    return errorView;
+  }
+
+  if (isFetching && (!finalityProviders || finalityProviders.length === 0)) {
+    return loadingView;
+  }
+
+  if (!isFetching && (!finalityProviders || finalityProviders.length === 0)) {
+    return noMatchesView;
+  }
+
+  const handleSelect = (btcPk: string) => {
+    if (onSelectRow) {
+      onSelectRow(btcPk);
+    }
+  };
+
+  return (
+    <div className="grid grid-cols-2 gap-4 w-full h-[500px] overflow-scroll">
+      {finalityProviders.map((fp) => {
+        const isSelected = selectedFP === fp.btcPk;
+        const isSelectable = isRowSelectable(fp);
+        const totalDelegation = maxDecimals(
+          satoshiToBtc(fp.activeTVLSat || 0),
+          8,
+        );
+        const commission = maxDecimals((Number(fp.commission) || 0) * 100, 2);
+        const status = FinalityProviderStateLabels[fp.state] || "Unknown";
+
+        return (
+          <div
+            key={fp.btcPk}
+            className={`bg-[#F9F9F9] h-[316px] overflow-hidden p-4 flex flex-col rounded justify-between`}
+          >
+            <div className="flex gap-2 items-center">
+              <FinalityProviderLogo
+                logoUrl={fp.logo_url}
+                rank={fp.rank}
+                moniker={fp.description?.moniker}
+                className="w-10 h-10"
+              />
+              <div className="flex flex-col">
+                <div className="text-xs text-[#387085]">
+                  {fp.btcPk
+                    ? `${fp.btcPk.slice(0, 6)}...${fp.btcPk.slice(-6)}`
+                    : ""}
+                </div>
+                <div className="text-base font-medium">
+                  {fp.description?.moniker || "Unnamed Provider"}
+                </div>
+              </div>
+            </div>
+            <div className="w-full h-px bg-[#D1DFE1]" />
+            <div className="text-sm flex flex-row justify-between">
+              <div>Status</div>
+              <div className="text-[#387085] font-medium">{status}</div>
+            </div>
+            <div className="text-sm flex flex-row justify-between">
+              <div>{coinSymbol} PK</div>
+              <div className="text-[#387085] font-medium">
+                {fp.btcPk
+                  ? `${fp.btcPk.slice(0, 5)}...${fp.btcPk.slice(-5)}`
+                  : ""}
+              </div>
+            </div>
+            <div className="text-sm flex flex-row justify-between">
+              <div>Total Delegation</div>
+              <div className="text-[#387085] font-medium">
+                {totalDelegation} {coinSymbol}
+              </div>
+            </div>
+            <div className="text-sm flex flex-row justify-between">
+              <div>Commission</div>
+              <div className="text-[#387085] font-medium">{commission}%</div>
+            </div>
+            <Button
+              className="mt-4"
+              onClick={() => handleSelect(fp.btcPk)}
+              disabled={!isSelectable}
+              variant={isSelected ? "contained" : "outlined"}
+            >
+              {isSelected ? "Selected" : "Select"}
+            </Button>
+          </div>
+        );
+      })}
+    </div>
+  );
+};
diff --git a/src/ui/state/FinalityProviderBsnState.tsx b/src/ui/state/FinalityProviderBsnState.tsx
index a03859e1a..e16522df7 100644
--- a/src/ui/state/FinalityProviderBsnState.tsx
+++ b/src/ui/state/FinalityProviderBsnState.tsx
@@ -30,6 +30,8 @@ interface FinalityProviderBsnState {
   finalityProviderMap: Map<string, FinalityProvider>;
   isFetching: boolean;
   hasError: boolean;
+  hasNextPage: boolean;
+  fetchNextPage: () => void;
   // BSN
   bsnList: Bsn[];
   bsnLoading: boolean;
@@ -85,6 +87,8 @@ const defaultState: FinalityProviderBsnState = {
   finalityProviders: [],
   isFetching: false,
   hasError: false,
+  hasNextPage: false,
+  fetchNextPage: () => {},
   bsnList: [],
   bsnLoading: false,
   bsnError: false,
@@ -102,7 +106,10 @@ const defaultState: FinalityProviderBsnState = {
 const { StateProvider, useState: useFpBsnState } =
   createStateUtils<FinalityProviderBsnState>(defaultState);
 
-export function FinalityProviderBsnState({ children }: PropsWithChildren) {
+export function FinalityProviderBsnState({
+  children,
+  bsnId,
+}: PropsWithChildren & { bsnId?: string }) {
   const params = useSearchParams();
   const fpParam = params.get("fp");
   const [stakingModalPage, setStakingModalPage] = useState<StakingModalPage>(
@@ -116,11 +123,13 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
   const [sortState, setSortState] = useState<SortState>({});
   const debouncedSearch = useDebounce(filter.search, 300);
 
-  const { data, isFetching, isError } = useFinalityProvidersV2({
-    sortBy: sortState.field,
-    order: sortState.direction,
-    name: debouncedSearch,
-  });
+  const { data, isFetching, isError, hasNextPage, fetchNextPage } =
+    useFinalityProvidersV2({
+      sortBy: sortState.field,
+      order: sortState.direction,
+      name: debouncedSearch,
+      bsnId,
+    });
 
   const { data: dataV1 } = useFinalityProviders();
   const {
@@ -134,7 +143,17 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
   const finalityProviders = useMemo(() => {
     if (!data?.finalityProviders) return [];
 
-    return data.finalityProviders
+    const filteredByBsn = (data.finalityProviders ?? []).filter((fp) => {
+      if (bsnId === undefined) return true;
+
+      if (bsnId === "") {
+        return (fp.bsnId ?? "") === "";
+      }
+
+      return fp.bsnId === bsnId;
+    });
+
+    return filteredByBsn
       .sort((a, b) => {
         const condition = FP_STATUSES[b.state] - FP_STATUSES[a.state];
 
@@ -149,7 +168,7 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
         rank: i + 1,
         id: fp.btcPk,
       }));
-  }, [data?.finalityProviders]);
+  }, [data?.finalityProviders, bsnId]);
 
   const finalityProviderMap = useMemo(
     () =>
@@ -226,6 +245,8 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       bsnList,
       bsnLoading,
       bsnError,
+      hasNextPage,
+      fetchNextPage,
       // selectedBsnId: null, // TODO: Uncomment when implementing BSN selection
       isFetching,
       hasError: isError,
@@ -244,6 +265,8 @@ export function FinalityProviderBsnState({ children }: PropsWithChildren) {
       bsnList,
       bsnLoading,
       bsnError,
+      hasNextPage,
+      fetchNextPage,
       isFetching,
       isError,
       finalityProviderMap,
diff --git a/src/ui/state/MultistakingState.tsx b/src/ui/state/MultistakingState.tsx
index 217d5415c..43732c76a 100644
--- a/src/ui/state/MultistakingState.tsx
+++ b/src/ui/state/MultistakingState.tsx
@@ -1,10 +1,19 @@
 import { useMemo, useState, type PropsWithChildren } from "react";
-import { number, object, ObjectSchema, ObjectShape, Schema, string } from "yup";
+import {
+  array,
+  number,
+  object,
+  ObjectSchema,
+  ObjectShape,
+  Schema,
+  string,
+} from "yup";
 
 import { validateDecimalPoints } from "@/ui/components/Staking/Form/validation/validation";
 import { getNetworkConfigBTC } from "@/ui/config/network/btc";
 import { useBTCWallet } from "@/ui/context/wallet/BTCWalletProvider";
 import { useNetworkInfo } from "@/ui/hooks/client/api/useNetworkInfo";
+import { useFinalityProviderBsnState } from "@/ui/state/FinalityProviderBsnState";
 import { satoshiToBtc } from "@/ui/utils/btc";
 import { createStateUtils } from "@/ui/utils/createStateUtils";
 import { formatNumber, formatStakingAmount } from "@/ui/utils/formTransforms";
@@ -40,7 +49,7 @@ const { StateProvider, useState: useMultistakingState } =
   createStateUtils<MultistakingState>({
     stakingModalPage: StakingModalPage.DEFAULT,
     setStakingModalPage: () => {},
-    MAX_FINALITY_PROVIDERS: 1,
+    MAX_FINALITY_PROVIDERS: 3,
     validationSchema: undefined,
     formFields: [],
   });
@@ -54,6 +63,7 @@ export function MultistakingState({ children }: PropsWithChildren) {
   const { publicKeyNoCoord } = useBTCWallet();
   const { stakableBtcBalance } = useBalanceState();
   const { stakingInfo } = useStakingState();
+  const { getRegisteredFinalityProvider } = useFinalityProviderBsnState();
 
   const formFields: FieldOptions[] = useMemo(
     () =>
@@ -145,8 +155,34 @@ export function MultistakingState({ children }: PropsWithChildren) {
             .required("Staking fee amount is the required field.")
             .moreThan(0, "Staking fee amount must be greater than 0."),
         },
+        {
+          field: "selectedProviders",
+          schema: array()
+            .of(string())
+            .min(1, "Add at least one finality provider.")
+            .test(
+              "hasBabylonProvider",
+              "Add a Babylon finality provider first",
+              (list) =>
+                (list as string[] | undefined)?.some(
+                  (pk) =>
+                    typeof pk === "string" &&
+                    getRegisteredFinalityProvider(pk)?.bsnId === "",
+                ) ?? false,
+            )
+            .max(
+              MAX_FINALITY_PROVIDERS,
+              `Maximum ${MAX_FINALITY_PROVIDERS} finality providers allowed.`,
+            ),
+        },
       ] as const,
-    [publicKeyNoCoord, stakingInfo, stakableBtcBalance],
+    [
+      publicKeyNoCoord,
+      stakingInfo,
+      stakableBtcBalance,
+      getRegisteredFinalityProvider,
+      MAX_FINALITY_PROVIDERS,
+    ],
   );
 
   const validationSchema = useMemo(() => {