diff --git a/src/app/portfolio/[uid]/hook.ts b/src/app/portfolio/[uid]/hook.ts
index 676dfb3..93f293d 100644
--- a/src/app/portfolio/[uid]/hook.ts
+++ b/src/app/portfolio/[uid]/hook.ts
@@ -1,6 +1,27 @@
 import { SupabaseClient } from "@supabase/supabase-js";
 import { getProjectTag, getTagName } from "@/lib/data/query";
 
+async function getBusinessId(supabase: SupabaseClient, projectId: number) {
+  let { data: project, error } = await supabase
+    .from("project")
+    .select("business_id")
+    .eq("id", projectId);
+  if (error) {
+    console.error(error);
+  }
+  return project?.[0]?.business_id;
+}
+async function getBusinessType(supabase: SupabaseClient, businessId: number) {
+  let { data: business, error } = await supabase
+    .from("business")
+    .select("business_type")
+    .eq("id", businessId);
+  if (error) {
+    console.error(error);
+  }
+  return business?.[0]?.business_type;
+}
+
 // only use deal that were made at most year ago
 interface Deal {
   created_time: string | number | Date;
@@ -173,4 +194,6 @@ export {
   dayOftheWeekData,
   getInvestorProjectTag,
   countTags,
+  getBusinessId,
+  getBusinessType,
 };
diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx
index c4fde36..b13a9d0 100644
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@@ -8,7 +8,10 @@ import {
   dayOftheWeekData,
   getInvestorProjectTag,
   countTags,
+  getBusinessId,
+  getBusinessType,
 } from "./hook";
+import CountUpComponent from "@/components/countUp";
 
 export default async function Portfolio({
   params,
@@ -28,16 +31,23 @@ export default async function Portfolio({
   const dayOfWeekData = deals ? dayOftheWeekData(deals) : [];
   const tags = deals ? await getInvestorProjectTag(supabase, deals) : [];
   const tagCount = countTags(tags);
-
+  // get business id from project id
+  const investedBusinessIds = deals
+    ? await Promise.all(
+        deals.map(
+          async (item) => await getBusinessId(supabase, item.project_id)
+        )
+      )
+    : [];
+  console.log(investedBusinessIds);
   // console.log(tags);
 
   // console.log(tagCount);
-
   return (
     <div>
       {/* {JSON.stringify(params.uid)} */}
       {/* {JSON.stringify(tagCount)} */}
-      {/* {JSON.stringify(deals)} */}
+      {JSON.stringify(deals)}
       {/* {JSON.stringify(dayOfWeekData)} */}
       {/* {JSON.stringify(overAllGraphData)} */}
       {/* {JSON.stringify(threeYearGraphData)} */}
@@ -46,6 +56,7 @@ export default async function Portfolio({
         <h1>Total Invest :  </h1>
         <div>{totalInvest}</div>
       </div> */}
+      {/* <CountUpComponent end={100} duration={3} /> */}
       <div className="flex w-full gap-10">
         <Overview graphType="line" data={overAllData}></Overview>
         <Overview graphType="bar" data={fourYearData}></Overview>
diff --git a/src/components/countUp.tsx b/src/components/countUp.tsx
new file mode 100644
index 0000000..ed33a3b
--- /dev/null
+++ b/src/components/countUp.tsx
@@ -0,0 +1,19 @@
+"use client";
+import CountUp from "react-countup";
+
+interface CountUpComponentProps {
+  end: number;
+  duration: number;
+}
+
+export default function CountUpComponent(props: CountUpComponentProps) {
+  return (
+    <>
+      <CountUp
+        end={props.end}
+        duration={props.duration}
+        start={props.end / 2}
+      />
+    </>
+  );
+}