diff --git a/src/Pages/Investor_Management/InvestorDetails/BankDetails.jsx b/src/Pages/Investor_Management/InvestorDetails/BankDetails.jsx
index e69de29..87daa53 100644
--- a/src/Pages/Investor_Management/InvestorDetails/BankDetails.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/BankDetails.jsx
@@ -0,0 +1,244 @@
+import {
+  Badge,
+  Box,
+  Button,
+  HStack,
+  Input,
+  Text,
+  Tooltip,
+  useToast,
+} from "@chakra-ui/react";
+import React, { useContext, useEffect, useState } from "react";
+import { OPACITY_ON_LOAD } from "../../../Layout/animations";
+import {
+  Link,
+  Link as RouterLink,
+  useNavigate,
+  useParams,
+} from "react-router-dom";
+import { AddIcon, DeleteIcon, EditIcon, ViewIcon } from "@chakra-ui/icons";
+import Pagination from "../../../Components/Pagination";
+import GlobalStateContext from "../../../Contexts/GlobalStateContext";
+import CustomAlertDialog from "../../../Components/CustomAlertDialog";
+import NormalTable from "../../../Components/DataTable/NormalTable";
+import {
+  useDeleteInvestmentTypeMutation,
+  useGetInvestmentTypesQuery,
+} from "../../../Services/io.service";
+import { TABLE_PAGINATION } from "../../../Constants/Paginations";
+import { generateSerialNumber } from "../../../Constants/Constants";
+import { useGetInvestorsDetailsByIdQuery } from "../../../Services/investor.details.service";
+
+const formatDate = (date) => new Date(date).toLocaleDateString(); // Simple date formatter
+
+const BankDetails = () => {
+  const params = useParams();
+  const id = params?.id;
+  const navigate = useNavigate();
+  const toast = useToast();
+
+  // ======================== [Use State] =========================
+
+  const [searchTerm, setSearchTerm] = useState("");
+  // const [isLoading, setIsLoading] = useState(false);
+  const [deleteAlert, setDeleteAlert] = useState(false);
+  const [actionId, setActionId] = useState(false);
+  const { investmentType, setInvestmentType, slideFromRight } =
+    useContext(GlobalStateContext);
+
+  const [deleteInvestmentType] = useDeleteInvestmentTypeMutation();
+
+  // =========================== [Use State] =============================
+  const [pageSize, setPageSize] = useState(TABLE_PAGINATION?.size);
+  const [currentPage, setCurrentPage] = useState(TABLE_PAGINATION?.page);
+
+  // const {
+  //   data: investmentTypes,
+  //   isLoading: investmentTypesLoading,
+  //   error,
+  // } = useGetInvestmentTypesQuery({ page: currentPage, size: pageSize });
+  const { data, isLoading:bankDetailsLoading, errors, refetch } = useGetInvestorsDetailsByIdQuery(
+    id,
+    {
+      skip: !id,
+    }
+  );
+
+  console.log(data?.data?.bank_details);
+
+  const filteredData = data?.data?.bank_details?.filter((item) => {
+    const name = item.accountNumber;
+    const searchLower = searchTerm.toLowerCase();
+    const nameMatches = name.toLowerCase().includes(searchLower);
+
+    return nameMatches;
+  });
+
+  // ==================================================== [Table Setup] ================================================================
+
+  const tableHeadRow = [
+    "Sr No",
+    "bankNickName",
+    "IBAN",
+    "Account No",
+    "Bank Name",
+    "Account Name",
+    "Bank Address",
+    "SWIFT Code",
+  ];
+
+  const extractedArray = filteredData?.map((item, idx) => ({
+    "Sr No": (
+      <Text
+        w={"24px"}
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"gray.600"}
+        className="d-flex align-items-center fw-bold web-text-small"
+      >
+        {/* {item.id} */}
+        {generateSerialNumber(idx, currentPage, pageSize)}
+      </Text>
+    ),
+    "bankNickName": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        isTruncated={true}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.bankNickName}
+      </Text>
+    ),
+    IBAN: (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        isTruncated={true}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.IBANnumber}
+      </Text>
+    ),
+    "Account No": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        isTruncated={true}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.accountName}
+      </Text>
+    ),
+    "Bank Name": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        isTruncated={true}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.bankName}
+      </Text>
+    ),
+    "Account Name": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        isTruncated={true}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.accountNumber}
+      </Text>
+    ),
+    "Bank Address": (
+        <Text
+        w={"200px"}  // Set a width to constrain the text
+        justifyContent={slideFromRight ? "right" : "left"}
+        whiteSpace={"normal"}  // Allow wrapping
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.bankAddress}
+      </Text>
+    ),
+    "SWIFT Code": (
+      <Text
+        justifyContent={slideFromRight ? "right" : "left"}
+        as={"span"}
+        color={"teal.900"}
+        fontWeight={"500"}
+        isTruncated={true}
+        className="d-flex align-items-center web-text-small"
+      >
+        {item.swiftCode}
+      </Text>
+    ),
+  }));
+
+  // ==================== [Delete Function] =======================
+
+  const handleDelete = async () => {
+    console.log(actionId);
+    setIsLoading(true);
+    try {
+      const response = await deleteInvestmentType(actionId);
+      console.log(response);
+      setIsLoading(false);
+      setDeleteAlert(false);
+    } catch (error) {}
+  };
+
+  return (
+    <Box {...OPACITY_ON_LOAD} overflowY={"scroll"} height={"100vh"} pb={38}>
+      <Box bg="white.500">
+        <HStack
+          display={"flex"}
+          justifyContent={"space-between"}
+          ps={1}
+          pe={1}
+          pb={4}
+          pt={4}
+          spacing="24px"
+        >
+          {/* ======================= [Search Input] ======================== */}
+
+          <Input
+            type="search"
+            width={300}
+            placeholder="Search..."
+            size="sm"
+            rounded="sm"
+            focusBorderColor="green.500"
+            value={searchTerm}
+            onChange={(e) => setSearchTerm(e.target.value)}
+          />
+        </HStack>
+      </Box>
+
+      {/* ======================== [Data Table] ======================= */}
+
+      <NormalTable
+        emptyMessage={`We don't have any Investment type `}
+        tableHeadRow={tableHeadRow}
+        data={extractedArray}
+        isLoading={bankDetailsLoading}
+        viewActionId={actionId}
+        setViewActionId={setActionId}
+      />
+    </Box>
+  );
+};
+
+export default BankDetails;
diff --git a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
index 160e087..3d264a6 100644
--- a/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
+++ b/src/Pages/Investor_Management/InvestorDetails/ProfileView.jsx
@@ -21,6 +21,7 @@ import { LuWallet } from "react-icons/lu";
 import Transaction from "./Transaction";
 import FullscreenLoaders from "../../../Components/Loaders/FullscreenLoaders";
 import { useGetInvestorsDetailsByIdQuery } from "../../../Services/investor.details.service";
+import BankDetails from "./BankDetails";
 
 const ProfileView = () => {
   const navigate = useNavigate();
@@ -152,54 +153,54 @@ const ProfileView = () => {
       section: "Personal Details",
       width: "32%",
     },
-    {
-      label: "Account Name",
-      value: foundObject?.accountName,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-      width: "32%",
-    },
-    {
-      label: "Account No",
-      value: foundObject?.accountNumber,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-      width: "32%",
-    },
-    {
-      label: "IBAN",
-      value: foundObject?.IBANnumber,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-      width: "32%",
-    },
-    {
-      label: "SWIFT Code",
-      value: foundObject?.swiftCode,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-      width: "32%",
-    },
-    {
-      label: "Bank Name",
-      value: foundObject?.bankName,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-      width: "32%",
-    },
-    {
-      label: "Bank Address",
-      value: foundObject?.bankAddress,
-      type: "text",
-      isRequired: true,
-      section: "Bank Details",
-      width: "32%",
-    },
+    // {
+    //   label: "Account Name",
+    //   value: foundObject?.accountName,
+    //   type: "text",
+    //   isRequired: true,
+    //   section: "Bank Details",
+    //   width: "32%",
+    // },
+    // {
+    //   label: "Account No",
+    //   value: foundObject?.accountNumber,
+    //   type: "text",
+    //   isRequired: true,
+    //   section: "Bank Details",
+    //   width: "32%",
+    // },
+    // {
+    //   label: "IBAN",
+    //   value: foundObject?.IBANnumber,
+    //   type: "text",
+    //   isRequired: true,
+    //   section: "Bank Details",
+    //   width: "32%",
+    // },
+    // {
+    //   label: "SWIFT Code",
+    //   value: foundObject?.swiftCode,
+    //   type: "text",
+    //   isRequired: true,
+    //   section: "Bank Details",
+    //   width: "32%",
+    // },
+    // {
+    //   label: "Bank Name",
+    //   value: foundObject?.bankName,
+    //   type: "text",
+    //   isRequired: true,
+    //   section: "Bank Details",
+    //   width: "32%",
+    // },
+    // {
+    //   label: "Bank Address",
+    //   value: foundObject?.bankAddress,
+    //   type: "text",
+    //   isRequired: true,
+    //   section: "Bank Details",
+    //   width: "32%",
+    // },
   ];
 
   const groupedFields = formFields.reduce((groups, field) => {
@@ -335,6 +336,7 @@ const ProfileView = () => {
         <TabPanels>
           <TabPanel>
             <FormInputView width={"32%"} groupedFields={groupedFields} />
+            <BankDetails />
           </TabPanel>
           <TabPanel>
             <ViewInvestorDetails />