Fixed

frontend/src/app/projects/page.jsx

@@ -10,6 +10,7 @@ import ViewIcon from "../components/icons/view";
 import ActionButton from "../components/actionButton/ActionButton";
 import useIsMobile from "../hooks/useIsMobile";
 import Card from "./project-card/Card";
+import MobileSearchBar from "../components/mobileSearchBar/MobileSearchBar";
 const ProjectsPage = () => {
   const router = useRouter();
   const isMobile = useIsMobile();
@@ -182,10 +183,10 @@ const ProjectsPage = () => {
           />
           {isMobile ? (
             <div className={styles.cardContainer}>
-              <Card />
-              <Card />
-              <Card />
-              <Card />
+              <MobileSearchBar />
+              {sampleData.map((data, key) => (
+                <Card data={data} key={key} />
+              ))}
             </div>
           ) : (
             <div className={styles.tableContainer}>

frontend/src/app/projects/project-card/Card.jsx

@@ -2,38 +2,38 @@ import DeleteIcon from "@/app/components/icons/delete";
 import React from "react";
 import styles from "./styles.module.css";
 
-const Card = () => {
+const Card = (props) => {
   return (
     <div className={styles.cardContainer}>
       <div className={styles.cardDetails}>
         <div className={styles.list}>
           <p>Name</p>
-          <p>DOKS One Cooperative Bank Backend Develop</p>
+          <p>{props?.data?.name}</p>
         </div>
         <div className={styles.list}>
           <p>CPU Used/Limit</p>
           <p>
-            <span className={styles.used}>13500</span> /{" "}
-            <span className={styles.limit}>20000</span>
+            <span className={styles.used}>{props?.data?.cpuUsed}</span> /{" "}
+            <span className={styles.limit}>{props?.data?.cpuLimit}</span>
           </p>
         </div>
         <div className={styles.list}>
           <p>Memory Used/Limit</p>
           <p>
-            <span className={styles.used}>13500</span> /{" "}
-            <span className={styles.limit}>20000</span>
+            <span className={styles.used}>{props?.data?.memoryUsed}</span> /{" "}
+            <span className={styles.limit}>{props?.data?.memoryLimit}</span>
           </p>
         </div>
         <div className={styles.list}>
           <p>Storage Used/Limit</p>
           <p>
-            <span className={styles.used}>10000</span> /{" "}
-            <span className={styles.limit}>1000000</span>
+            <span className={styles.used}>{props?.data?.storageUsed}</span> /{" "}
+            <span className={styles.limit}>{props?.data?.storageLimit}</span>
           </p>
         </div>
         <div className={styles.list}>
           <p>Date Created</p>
-          <p>2025-11-07 01:43:18.313 +0000 UTC</p>
+          <p>{props?.data?.dateCreated}</p>
         </div>
       </div>
       <div className={styles.cardAction}>

frontend/src/app/projects/view/styles.module.css

@@ -177,6 +177,7 @@
   box-shadow: 0 0 10px 0 #000;
   color: black;
   opacity: 0;
+  text-wrap: nowrap;
 }
 .imageText > p {
   height: 100%;