diff --git a/src/app/api/generalApi.ts b/src/app/api/generalApi.ts
index aa7c50b..ceeebe7 100644
--- a/src/app/api/generalApi.ts
+++ b/src/app/api/generalApi.ts
@@ -34,6 +34,23 @@ async function clearFolder(
   return errors;
 }
 
+export async function getProjectTag(projectId: number) {
+  return supabase
+    .from("project_tag")
+    .select("tag_id")
+    .in("item_id", [projectId]);
+}
+export async function getTagName(tagId: number) {
+  return supabase.from("tag").select("value").in("id", [tagId]);
+}
+export async function getInvestorDeal(userId: string) {
+  return supabase
+    .from("investment_deal")
+    .select("*")
+    .in("investor_id", [userId])
+    .order("created_time", { ascending: true });
+}
+
 async function uploadToFolder(
   bucketName: string,
   filePath: string,
diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx
index 5fc290c..db22942 100644
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@@ -1,20 +1,78 @@
+"use client";
 import { Overview } from "@/components/ui/overview";
-import { createSupabaseClient } from "@/lib/supabase/serverComponentClient";
-import { getInvestorDeal } from "@/lib/data/query";
+import {
+  getInvestorDeal,
+  getProjectTag,
+  getTagName,
+} from "@/app/api/generalApi";
+import { useQuery } from "@supabase-cache-helpers/postgrest-react-query";
 import PieChart from "@/components/pieChart";
 
-export default async function Portfolio({
+export default function Portfolio({
   params,
 }: {
   params: { uid: string };
 }) {
-  const supabase = createSupabaseClient();
   const daysOfWeek = ["Sun", "Mon", "Tue", "Wed", "Thu", "Fri", "Sat"];
   const dayOfWeekData = daysOfWeek.map((day) => ({ name: day, value: 0 }));
-  const { data: deals, error } = await getInvestorDeal(supabase, params.uid);
-  if (error) {
-    console.error(error);
+  const { data: deals, error: investorDealError } = useQuery(
+    getInvestorDeal(params.uid)
+  );
+
+  const projectTag = async () => {
+    const uniqueProjectIds = Array.from(
+      new Set(deals?.map((deal) => deal.project_id))
+    );
+
+    const tagIds = (
+      await Promise.all(
+        uniqueProjectIds.map(async (projectId: number) => {
+          const { data: tagIdsArray, error: tagError } =
+            await getProjectTag(projectId);
+          if (tagError) {
+            console.error(tagError);
+            return [];
+          }
+          return tagIdsArray?.map((tag) => tag.tag_id) || [];
+        })
+      )
+    ).flat();
+
+    // console.log(tagIds);
+    const tagNames = await Promise.all(
+      tagIds
+        .filter((tagId) => tagId !== null)
+        .map(async (id: number) => {
+          const { data: tagName, error: nameError } = await getTagName(id);
+          if (nameError) {
+            console.error(nameError);
+            return null;
+          }
+          return tagName;
+        })
+    );
+
+    return tagNames.filter((tagName) => tagName !== null);
+  };
+  const countTags = (tags: any[]) => {
+    const tagCounts = tags.flat().reduce((acc, tag) => {
+      const tagName = tag.value;
+      acc[tagName] = (acc[tagName] || 0) + 1;
+      return acc;
+    }, {});
+
+    return Object.entries(tagCounts).map(([name, count]) => ({
+      name,
+      count: count as number,
+    }));
+  };
+  const {data:tags, error: projectTagError, isLoading: projectTagLoading} = useQuery(projectTag());
+  const tagCount = countTags(tags);
+
+  if (investorDealError) {
+    console.error(investorDealError);
   }
+
   const yearAgo = (num: number) => {
     const newDate = new Date();
     newDate.setFullYear(newDate.getFullYear() - num);
@@ -75,6 +133,7 @@ export default async function Portfolio({
     return date.toLocaleString("default", { weekday: "short" });
   };
 
+  let totalInvest = 0;
   if (deals) {
     deals
       .filter((item) => new Date(item.created_time) >= yearAgo(1))
@@ -85,21 +144,34 @@ export default async function Portfolio({
           dayEntry.value += item.deal_amount;
         }
       });
+    totalInvest = deals.reduce((acc, item) => acc + item.deal_amount, 0);
   }
 
   return (
     <div>
       {/* {JSON.stringify(params.uid)} */}
+      {JSON.stringify(tagCount)}
       {/* {JSON.stringify(deals)} */}
       {/* {JSON.stringify(dayOfWeekData)} */}
       {/* {JSON.stringify(overAllGraphData)} */}
       {/* {JSON.stringify(threeYearGraphData)} */}
+      {/* {JSON.stringify(uniqueProjectIds)} */}
+      {/* <div className="flex flex-row">
+        <h1>Total Invest :  </h1>
+        <div>{totalInvest}</div>
+      </div> */}
       <div className="flex w-full gap-10">
         <Overview graphType="line" data={overAllGraphData}></Overview>
         <Overview graphType="bar" data={threeYearGraphData}></Overview>
         <Overview graphType="bar" data={dayOfWeekData}></Overview>
       </div>
-      {/* <PieChart /> */}
+      <PieChart
+        labels={tagCount.map((item: { name: string }) => {
+          return item.name;
+        })}
+        data={tagCount.map((item: { count: number }) => item.count)}
+        header="Ratio of Investment's project category"
+      />
     </div>
   );
 }
diff --git a/src/components/pieChart.tsx b/src/components/pieChart.tsx
index be988fb..5bd121f 100644
--- a/src/components/pieChart.tsx
+++ b/src/components/pieChart.tsx
@@ -5,7 +5,7 @@ ChartJS.register(ArcElement, Tooltip, Legend);
 
 interface PieChartProps {
   labels: string[];
-  data: string[];
+  data: number[];
   header:string
 }
 
diff --git a/src/lib/data/query.ts b/src/lib/data/query.ts
index 9a06cd1..b0ee842 100644
--- a/src/lib/data/query.ts
+++ b/src/lib/data/query.ts
@@ -44,19 +44,28 @@ function getInvestmentCounts(client: SupabaseClient, projectIds: string[]) {
     .in("project_id", projectIds);
 }
 
-function getInvestorDeal(client: SupabaseClient, userId: string) {
-  return client
-    .from("investment_deal")
-    .select("*")
-    .in("investor_id", [userId])
-    .order("created_time", { ascending: true });
-}
+// function getInvestorDeal(client: SupabaseClient, userId: string) {
+//   return client
+//     .from("investment_deal")
+//     .select("*")
+//     .in("investor_id", [userId])
+//     .order("created_time", { ascending: true });
+// }
 
+// function getProjectTag(client: SupabaseClient, projectId: number) {
+//   return client.from("project_tag").select("tag_id").in("item_id", [projectId]);
+// }
+
+// function getTagName(client: SupabaseClient, tagId: number){ 
+//   return client.from("tag").select("value").in("id", [tagId]); 
+// }
 
 export {
   getBusinesses,
   getInvestmentCounts,
   getProjects,
   getTags,
-  getInvestorDeal,
+  // getInvestorDeal,
+  // getProjectTag,
+  // getTagName,
 };