diff --git a/src/app/portfolio/[uid]/hook.ts b/src/app/portfolio/[uid]/hook.ts
index ac145ab..d624cbf 100644
--- a/src/app/portfolio/[uid]/hook.ts
+++ b/src/app/portfolio/[uid]/hook.ts
@@ -5,7 +5,7 @@ async function checkForInvest(supabase: SupabaseClient, userId: string) {
   let { count, error } = await supabase
     .from("investment_deal")
     .select("*", { count: "exact" })
-    .eq("investor_id", "8as1761d2");
+    .eq("investor_id", userId);
   if (error) {
     console.error(error);
     return false;
diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx
index 5917e6c..367407b 100644
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@@ -14,6 +14,8 @@ import {
 } from "./hook";
 import CountUpComponent from "@/components/countUp";
 import { RecentFunds } from "@/components/recent-funds";
+import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
+import QuestionMarkIcon from "@/components/icon/questionMark";
 
 export default async function Portfolio({
   params,
@@ -21,7 +23,9 @@ export default async function Portfolio({
   params: { uid: string };
 }) {
   const supabase = createSupabaseClient();
-  await checkForInvest(supabase, params.uid);
+  //  if user hasn't invest in anything
+  if (!(await checkForInvest(supabase, params.uid))) {
+  }
   const { data: deals, error: investorDealError } = await getInvestorDeal(
     supabase,
     params.uid
@@ -67,27 +71,41 @@ export default async function Portfolio({
         <Overview graphType="bar" data={fourYearData}></Overview>
         <Overview graphType="bar" data={dayOfWeekData}></Overview>
       </div>
-      <div className="flex flex-cols-3 w-96">
-        <div className="">
-          <h1>Project tag</h1>
-          <PieChart
-            data={tagCount.map(
-              (item: { name: string; count: number }) => item.count
-            )}
-            labels={tagCount.map(
-              (item: { name: string; count: number }) => item.name
-            )}
-            header="Total"
-          />
-        </div>
-        <div className="">
-          <h1>Business Type</h1>
-          <PieChart
-            data={Object.values(countedBusinessType)}
-            labels={Object.keys(countedBusinessType)}
-            header="Total"
-          />
-        </div>
+      <div className="flex flex-cols-3 w-96 gap-5">
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-md font-bold">
+              Categories of Invested Projects
+            </CardTitle>
+            <QuestionMarkIcon />
+          </CardHeader>
+          <CardContent className="mt-5">
+            <PieChart
+              data={tagCount.map(
+                (item: { name: string; count: number }) => item.count
+              )}
+              labels={tagCount.map(
+                (item: { name: string; count: number }) => item.name
+              )}
+              header="Total"
+            />
+          </CardContent>
+        </Card>
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-md font-bold">
+              Categories of Invested Projects
+            </CardTitle>
+            <QuestionMarkIcon />
+          </CardHeader>
+          <CardContent className="mt-5">
+            <PieChart
+              data={Object.values(countedBusinessType)}
+              labels={Object.keys(countedBusinessType)}
+              header="Total"
+            />
+          </CardContent>
+        </Card>
         <RecentFunds />
       </div>
     </div>
diff --git a/src/components/icon/questionMark.tsx b/src/components/icon/questionMark.tsx
new file mode 100644
index 0000000..0af645d
--- /dev/null
+++ b/src/components/icon/questionMark.tsx
@@ -0,0 +1,16 @@
+export default function QuestionMarkIcon() {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      height="18px"
+      width="18px"
+      version="1.1"
+      id="_x32_"
+      viewBox="0 0 512 512"
+    >
+      <g>
+        <path d="M256,0C114.616,0,0,114.612,0,256s114.616,256,256,256s256-114.612,256-256S397.385,0,256,0z M207.678,378.794   c0-17.612,14.281-31.893,31.893-31.893c17.599,0,31.88,14.281,31.88,31.893c0,17.595-14.281,31.884-31.88,31.884   C221.959,410.678,207.678,396.389,207.678,378.794z M343.625,218.852c-3.596,9.793-8.802,18.289-14.695,25.356   c-11.847,14.148-25.888,22.718-37.442,29.041c-7.719,4.174-14.533,7.389-18.769,9.769c-2.905,1.604-4.479,2.95-5.256,3.826   c-0.768,0.926-1.029,1.306-1.496,2.826c-0.273,1.009-0.558,2.612-0.558,5.091c0,6.868,0,12.512,0,12.512   c0,6.472-5.248,11.728-11.723,11.728h-28.252c-6.475,0-11.732-5.256-11.732-11.728c0,0,0-5.645,0-12.512   c0-6.438,0.752-12.744,2.405-18.777c1.636-6.008,4.215-11.718,7.508-16.694c6.599-10.083,15.542-16.802,23.984-21.48   c7.401-4.074,14.723-7.455,21.516-11.281c6.789-3.793,12.843-7.91,17.302-12.372c2.988-2.975,5.31-6.05,7.087-9.52   c2.335-4.628,3.955-10.067,3.992-18.389c0.012-2.463-0.698-5.702-2.632-9.405c-1.926-3.686-5.066-7.694-9.264-11.29   c-8.45-7.248-20.843-12.545-35.054-12.521c-16.285,0.058-27.186,3.876-35.587,8.62c-8.36,4.776-11.029,9.595-11.029,9.595   c-4.268,3.718-10.603,3.85-15.025,0.314l-21.71-17.397c-2.719-2.173-4.322-5.438-4.396-8.926c-0.063-3.479,1.425-6.81,4.061-9.099   c0,0,6.765-10.43,22.451-19.38c15.62-8.992,36.322-15.488,61.236-15.429c20.215,0,38.839,5.562,54.268,14.661   c15.434,9.148,27.897,21.744,35.851,36.876c5.281,10.074,8.525,21.43,8.533,33.38C349.211,198.042,347.248,209.058,343.625,218.852   z" />
+      </g>
+    </svg>
+  );
+}