diff --git a/src/app/portfolio/[uid]/page.tsx b/src/app/portfolio/[uid]/page.tsx
index 367407b..75065d8 100644
--- a/src/app/portfolio/[uid]/page.tsx
+++ b/src/app/portfolio/[uid]/page.tsx
@@ -13,6 +13,12 @@ import {
   checkForInvest,
 } from "./hook";
 import CountUpComponent from "@/components/countUp";
+import {
+  Tooltip,
+  TooltipContent,
+  TooltipProvider,
+  TooltipTrigger,
+} from "@/components/ui/tooltip";
 import { RecentFunds } from "@/components/recent-funds";
 import { Card, CardContent, CardHeader, CardTitle } from "@/components/ui/card";
 import QuestionMarkIcon from "@/components/icon/questionMark";
@@ -66,18 +72,57 @@ export default async function Portfolio({
         <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>
-        <Overview graphType="bar" data={dayOfWeekData}></Overview>
+      <div className="flex flew-rows-3 gap-10 mt-5">
+        <Card className="w-[500px]">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-md font-bold">
+              Types of Businesses Invested In
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="mt-5">
+            <Overview graphType="line" data={overAllData}></Overview>
+          </CardContent>
+        </Card>
+        <Card className="w-[500px]">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-md font-bold">
+              Types of Businesses Invested In
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="mt-5">
+            <Overview graphType="bar" data={fourYearData}></Overview>
+          </CardContent>
+        </Card>
+        <Card className="w-[500px]">
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-md font-bold">
+              Types of Businesses Invested In
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="mt-5">
+            <Overview graphType="bar" data={dayOfWeekData}></Overview>
+          </CardContent>
+        </Card>
       </div>
-      <div className="flex flex-cols-3 w-96 gap-5">
+      <div className="flex flex-cols-3 w-96 gap-5 mt-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 />
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <QuestionMarkIcon />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    Displays the distribution of project tags in your <br />
+                    investments, highlighting areas of interest.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </CardHeader>
           <CardContent className="mt-5">
             <PieChart
@@ -94,9 +139,22 @@ export default async function Portfolio({
         <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
+              Types of Businesses Invested In
             </CardTitle>
-            <QuestionMarkIcon />
+            <TooltipProvider>
+              <Tooltip>
+                <TooltipTrigger>
+                  <QuestionMarkIcon />
+                </TooltipTrigger>
+                <TooltipContent>
+                  <p>
+                    Shows the breakdown of business types in your portfolio,{" "}
+                    <br />
+                    illustrating sector diversity.
+                  </p>
+                </TooltipContent>
+              </Tooltip>
+            </TooltipProvider>
           </CardHeader>
           <CardContent className="mt-5">
             <PieChart
@@ -106,7 +164,16 @@ export default async function Portfolio({
             />
           </CardContent>
         </Card>
-        <RecentFunds />
+        <Card>
+          <CardHeader className="flex flex-row items-center justify-between space-y-0 pb-2">
+            <CardTitle className="text-md font-bold">
+              Recent investment
+            </CardTitle>
+          </CardHeader>
+          <CardContent className="mt-5">
+            <RecentFunds />
+          </CardContent>
+        </Card>
       </div>
     </div>
   );
diff --git a/src/components/icon/questionMark.tsx b/src/components/icon/questionMark.tsx
index 0af645d..cfca4ce 100644
--- a/src/components/icon/questionMark.tsx
+++ b/src/components/icon/questionMark.tsx
@@ -7,6 +7,7 @@ export default function QuestionMarkIcon() {
       version="1.1"
       id="_x32_"
       viewBox="0 0 512 512"
+      fill="currentColor"
     >
       <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" />