add responsiveness

frontend/src/app/components/buttons/primarybutton/styles.module.css

@@ -1,6 +1,6 @@
 .button {
   display: flex;
-  padding: 7px 15px;
+  padding: 8px 12px;
   justify-content: center;
   align-items: center;
   gap: 10px;

frontend/src/app/components/icons/publish.jsx

@@ -0,0 +1,22 @@
+import React from "react";
+
+const PublishIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M20 8L20 6C20 5.46957 19.7893 4.96086 19.4142 4.58579C19.0391 4.21071 18.5304 4 18 4L6 4C5.46957 4 4.96086 4.21072 4.58579 4.58579C4.21071 4.96086 4 5.46957 4 6L4 8M17 14L12 9M12 9L7 14M12 9L12 21"
+        stroke="#D2D3E0"
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default PublishIcon;

frontend/src/app/components/icons/viewLogs.jsx

@@ -0,0 +1,23 @@
+import React from "react";
+
+const ViewLogsIcon = () => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width="24"
+      height="24"
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        d="M14.5 4H17C17.7956 4 18.5587 4.31607 19.1213 4.87868C19.6839 5.44129 20 6.20435 20 7V17C20 17.7956 19.6839 18.5587 19.1213 19.1213C18.5587 19.6839 17.7956 20 17 20H7C6.20435 20 5.44129 19.6839 4.87868 19.1213C4.31607 18.5587 4 17.7956 4 17V12M6 5L4 7L6 9M10 9L12 7L10 5"
+        stroke="#D2D3E0"
+        style={{ stroke: "#D2D3E0", strokeOpacity: 1 }}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default ViewLogsIcon;

frontend/src/app/components/sidebar/Sidebar.jsx

@@ -1,5 +1,5 @@
 "use client";
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 
 import { usePathname, useRouter } from "next/navigation";
@@ -15,6 +15,7 @@ import LogoIcon from "../icons/logo";
 
 const Sidebar = () => {
   const router = useRouter();
+  const [isCollapsed, setIsCollapsed] = useState(false);
   const navToHome = () => {
     router.push("/home");
   };
@@ -40,15 +41,19 @@ const Sidebar = () => {
   const pathname = usePathname();
   console.log(pathname);
   return (
-    <div className={styles.mainContainer}>
+    <div
+      className={`${styles.mainContainer} ${isCollapsed ? styles.collapsed : ""}`}
+    >
       <div className={styles.topContainer}>
         {/* Logo Container */}
         <div className={styles.logoContainer}>
           <div>
             <div className={styles.logoIconContainer}>
-              <LogoIcon />
+              <LogoIcon onClick={() => setIsCollapsed(!isCollapsed)} />
             </div>
-            <div className={styles.logoDescription}>
+            <div
+              className={`${styles.logoDescription} ${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
               <p>Internal Developer Platform</p>
               <p>By Project Moonshot Inc.</p>
             </div>
@@ -61,49 +66,77 @@ const Sidebar = () => {
             onClick={navToHome}
           >
             <HomeIcon />
-            <p>Home</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Home
+            </p>
           </div>
           <div
             className={`${styles.nav} ${pathname.includes("/organization") ? styles.active : ""}`}
             onClick={navToOrganization}
           >
             <OrganizationIcon />
-            <p>Organization</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Organization
+            </p>
           </div>
           <div
             onClick={navToProject}
             className={`${styles.nav} ${pathname.includes("/projects") ? styles.active : ""}`}
           >
             <ProjectIcon />
-            <p>Project</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Project
+            </p>
           </div>
           <div
             onClick={navToUsers}
             className={`${styles.nav} ${pathname.includes("/users") ? styles.active : ""}`}
           >
             <UserIcon />
-            <p>Users</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Users
+            </p>
           </div>
           <div
             onClick={navToRoles}
             className={`${styles.nav} ${pathname.includes("/roles") ? styles.active : ""}`}
           >
             <RolesIcon />
-            <p>Roles</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Roles
+            </p>
           </div>
           <div
             onClick={navToCredentials}
             className={`${styles.nav} ${pathname.includes("/credentials") ? styles.active : ""}`}
           >
             <CredentialsIcon />
-            <p>Credentials</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Credentials
+            </p>
           </div>
           <div
             onClick={navToAgents}
             className={`${styles.nav} ${pathname.includes("/agents") ? styles.active : ""}`}
           >
             <AgentIcon />
-            <p>Agents</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Agents
+            </p>
           </div>
         </div>
       </div>
@@ -111,7 +144,11 @@ const Sidebar = () => {
       <div className={styles.navFooterContainer}>
         <div>
           <div>
-            <p>Download ICTL v3</p>
+            <p
+              className={`${styles.label} ${isCollapsed ? styles.noDisplay : styles.blockDisplay}`}
+            >
+              Download ICTL v3
+            </p>
             <DownloadIcon />
           </div>
         </div>

frontend/src/app/components/sidebar/styles.module.css

@@ -11,6 +11,7 @@
   user-select: none;
   border-right: 1px solid #2c2d3d;
   background: #191a24;
+  transition: all 150ms;
 }
 .topContainer {
   display: flex;
@@ -142,7 +143,7 @@
 }
 .navFooterContainer > div > div {
   display: flex;
-  width: 186px;
+  width: 100%;
   justify-content: space-between;
   align-items: center;
   flex: 1 0 0;
@@ -155,3 +156,28 @@
   font-weight: 500;
   line-height: normal;
 }
+.collapsed {
+  width: 80px;
+}
+.noDisplay {
+  display: none;
+}
+.blockDisplay {
+  display: block;
+}
+@media (max-width: 1050px) {
+  .mainContainer {
+    width: 80px;
+  }
+  .label {
+    display: none;
+  }
+}
+@media (max-width: 768px) {
+  .mainContainer {
+    display: none;
+  }
+  .label {
+    display: none;
+  }
+}

frontend/src/app/components/topHeader/TopHeader.jsx

@@ -21,6 +21,9 @@ import EditIcon from "../icons/edit";
 import UpdateIcon from "../icons/update";
 import SecondaryButton from "../buttons/secondaryButton/SecondaryButton";
 import SearchBar from "../searchbar/SearchBar";
+import ViewLogsIcon from "../icons/viewLogs";
+import PublishIcon from "../icons/publish";
+import useIsMobile from "@/app/hooks/useIsMobile";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -32,6 +35,7 @@ const TopHeader = (props) => {
   const handleNavigateToAdd = () => {
     router.push(`${pathName}/add`);
   };
+  const isMobile = useIsMobile();
   return (
     <>
       {triggerAlert && (
@@ -83,7 +87,7 @@ const TopHeader = (props) => {
           {props?.requiredButtons.includes("add") && (
             <PrimaryButton
               icon={<AddIcon />}
-              text={props?.buttonText}
+              text={isMobile ? "" : props?.buttonText}
               onClick={handleNavigateToAdd}
             />
           )}
@@ -167,6 +171,18 @@ const TopHeader = (props) => {
               </div>
               {triggerDropDownMenu && (
                 <div className={styles.dropDown}>
+                  <div>
+                    <div>
+                      <ViewLogsIcon />
+                      <p>View Logs</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <PublishIcon />
+                      <p>Publish Service</p>
+                    </div>
+                  </div>
                   <div>
                     <div>
                       <OutlineDownloadIcon />

frontend/src/app/components/topHeader/styles.module.css

@@ -35,9 +35,9 @@
 .title > div:hover path {
   stroke: white;
 }
-.title > p {
+.title p {
   color: #d2d3e1;
-  font-size: 24px;
+  font-size: var(--title-font-size);
   font-style: normal;
   font-weight: 400;
   line-height: normal;
@@ -120,7 +120,7 @@
   flex-direction: column;
   align-items: flex-start;
   gap: 6px;
-  z-index: 2;
+  z-index: 11;
   border-radius: 6px;
   background: #2d3144;
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
@@ -167,4 +167,5 @@
   font-style: normal;
   font-weight: 500;
   line-height: normal;
+  z-index: 13;
 }

frontend/src/app/credentials/card/Card.jsx

@@ -0,0 +1,25 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>mongo tls ca crt</p>
+        </div>
+        <div className={styles.list}>
+          <p>Organization ID</p>
+          <p>67160a5ae69144ff19aafb86</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/credentials/card/styles.module.css

@@ -0,0 +1,42 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}

frontend/src/app/credentials/page.jsx

@@ -1,3 +1,4 @@
+"use client";
 import React from "react";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
@@ -5,7 +6,10 @@ import styles from "./styles.module.css";
 import DeleteIcon from "../components/icons/delete";
 import SuccessToast from "../components/toast/success/successToast";
 import ActionButton from "../components/actionButton/ActionButton";
+import useIsMobile from "../hooks/useIsMobile";
+import Card from "./card/Card";
 const CredentialsPage = () => {
+  const isMobile = useIsMobile();
   const sampleData = [
     {
       name: "mongo tls ca crt",
@@ -66,33 +70,43 @@ const CredentialsPage = () => {
             topbarTitle="Credentials"
             requiredButtons={["title", "add", "search", "env"]}
           />
-          <div className={styles.tableContainer}>
+          {isMobile ? (
-            <table className={styles.table}>
+            <div className={styles.cardContainer}>
-              <thead>
+              <Card />
-                <tr>
+              <Card />
-                  <th width="45%">Name</th>
+              <Card />
-                  <th width="45%">Organization ID</th>
+              <Card />
-                  <th width="10%"></th>
+              <Card />
-                </tr>
+            </div>
-              </thead>
+          ) : (
+            <div className={styles.tableContainer}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th width="45%">Name</th>
+                    <th width="45%">Organization ID</th>
+                    <th width="10%"></th>
+                  </tr>
+                </thead>
 
-              <tbody>
+                <tbody>
-                {sampleData.map((org, index) => {
+                  {sampleData.map((org, index) => {
-                  return (
+                    return (
-                    <tr key={index}>
+                      <tr key={index}>
-                      <td>{org.name}</td>
+                        <td>{org.name}</td>
-                      <td>{org.organizationID}</td>
+                        <td>{org.organizationID}</td>
-                      <td className={styles.actions}>
+                        <td className={styles.actions}>
-                        <div>
+                          <div>
-                          <ActionButton icon={<DeleteIcon />} />
+                            <ActionButton icon={<DeleteIcon />} />
-                        </div>
+                          </div>
-                      </td>
+                        </td>
-                    </tr>
+                      </tr>
-                  );
+                    );
-                })}
+                  })}
-              </tbody>
+                </tbody>
-            </table>
+              </table>
-          </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

frontend/src/app/credentials/styles.module.css

@@ -52,3 +52,14 @@
   font-weight: 500;
   line-height: normal;
 }
+.cardContainer {
+  display: flex;
+  padding: 0 16px;
+  padding-bottom: 50px;
+  height: calc(100vh - 170px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  overflow: auto;
+}

frontend/src/app/globals.css

@@ -1,6 +1,8 @@
 :root {
   --background: #d2d3e0;
   --foreground: #191a24;
+  --table-font-size: 13px;
+  --title-font-size: 24px;
 }
 
 @media (prefers-color-scheme: dark) {
@@ -51,3 +53,13 @@ a {
   border-radius: 2px;
   background: #34384c;
 }
+@media (max-width: 900px) {
+  :root {
+    --table-font-size: 11px;
+  }
+}
+@media (max-width: 500px) {
+  :root {
+    --title-font-size: 18px;
+  }
+}

frontend/src/app/hooks/useIsMobile.jsx

@@ -0,0 +1,15 @@
+import { useState, useEffect } from "react";
+
+export default function useIsMobile(breakpoint = 768) {
+  const [isMobile, setIsMobile] = useState(window.innerWidth <= breakpoint);
+
+  useEffect(() => {
+    const handleResize = () => {
+      setIsMobile(window.innerWidth <= breakpoint);
+    };
+    window.addEventListener("resize", handleResize);
+    return () => window.removeEventListener("resize", handleResize);
+  }, [breakpoint]);
+
+  return isMobile;
+}

frontend/src/app/organization/add/styles.module.css

@@ -36,6 +36,7 @@
   justify-content: center;
   align-items: center;
   gap: 32px;
+  width: min(100%, 500px);
 }
 .organizationBadgeContainer {
   display: flex;
@@ -105,7 +106,6 @@
 }
 .labels > p {
   color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
   font-family: Inter;
   font-size: 16px;
   font-style: normal;
@@ -122,10 +122,10 @@
 }
 .inputGroup {
   display: flex;
-  width: 500px;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;
+  width: 100%;
 }
 .inputLabel {
   display: flex;

frontend/src/app/organization/card/Card.jsx

@@ -0,0 +1,25 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = (props) => {
+  return (
+    <div className={styles.cardContainer}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Organization Name</p>
+          <p>ProjectMoonShot Inc.</p>
+        </div>
+        <div className={styles.list}>
+          <p>Date Created</p>
+          <p>2024-10-21 08:01:30.556 +0000 UTC</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/organization/card/styles.module.css

@@ -0,0 +1,42 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}

frontend/src/app/organization/page.jsx

@@ -1,13 +1,16 @@
-"use-client";
+"use client";
-import React from "react";
+import React, { useEffect, useState } from "react";
 import styles from "./styles.module.css";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import SuccessToast from "../components/toast/success/successToast";
 import DeleteIcon from "../components/icons/delete";
 import ActionButton from "../components/actionButton/ActionButton";
+import Card from "./card/Card";
+import useIsMobile from "../hooks/useIsMobile";
 
 const OrganizationPage = () => {
+  const isMobile = useIsMobile();
   const sampleData = [
     {
       organizationName: "Project Moonshot Inc.",
@@ -64,33 +67,45 @@ const OrganizationPage = () => {
             topbarTitle="Organization"
             requiredButtons={["title", "add", "search"]}
           />
-          <div className={styles.tableContainer}>
+          {isMobile ? (
-            <table className={styles.table}>
+            <div className={styles.cardContainer}>
-              <thead>
+              <Card />
-                <tr>
+              <Card />
-                  <th width="45%">Organization Name</th>
+              <Card />
-                  <th width="45%">Date Created</th>
+              <Card />
-                  <th width="10%"></th>
+              <Card />
-                </tr>
+              <Card />
-              </thead>
+              <Card />
+            </div>
+          ) : (
+            <div className={styles.tableContainer}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th width="45%">Organization Name</th>
+                    <th width="45%">Date Created</th>
+                    <th width="10%"></th>
+                  </tr>
+                </thead>
 
-              <tbody>
+                <tbody>
-                {sampleData.map((org, index) => {
+                  {sampleData.map((org, index) => {
-                  return (
+                    return (
-                    <tr key={index}>
+                      <tr key={index}>
-                      <td>{org.organizationName}</td>
+                        <td>{org.organizationName}</td>
-                      <td>{org.dateCreated}</td>
+                        <td>{org.dateCreated}</td>
-                      <td className={styles.actions}>
+                        <td className={styles.actions}>
-                        <div>
+                          <div>
-                          <ActionButton icon={<DeleteIcon />} />
+                            <ActionButton icon={<DeleteIcon />} />
-                        </div>
+                          </div>
-                      </td>
+                        </td>
-                    </tr>
+                      </tr>
-                  );
+                    );
-                })}
+                  })}
-              </tbody>
+                </tbody>
-            </table>
+              </table>
-          </div>
+            </div>
+          )}
         </div>
       </div>
     </div>

frontend/src/app/organization/styles.module.css

@@ -30,7 +30,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -46,8 +46,19 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
+.cardContainer {
+  display: flex;
+  padding: 0 16px;
+  padding-bottom: 50px;
+  height: calc(100vh - 170px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  overflow: auto;
+}

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

@@ -14,10 +14,12 @@
   align-items: center;
   gap: 24px;
   border-radius: 8px;
+
+  width: min(100%, 500px);
 }
 .inputGroup {
   display: flex;
-  width: 500px;
+  width: 100%;
   flex-direction: column;
   align-items: flex-start;
   gap: 12px;

frontend/src/app/projects/page.jsx

@@ -8,8 +8,11 @@ import SuccessToast from "../components/toast/success/successToast";
 import DeleteIcon from "../components/icons/delete";
 import ViewIcon from "../components/icons/view";
 import ActionButton from "../components/actionButton/ActionButton";
+import useIsMobile from "../hooks/useIsMobile";
+import Card from "./project-card/Card";
 const ProjectsPage = () => {
   const router = useRouter();
+  const isMobile = useIsMobile();
   const sampleData = [
     {
       name: "DOKS One Cooperative Bank Backend Develop",
@@ -177,67 +180,81 @@ const ProjectsPage = () => {
             topbarTitle="Project"
             requiredButtons={["title", "add", "search"]}
           />
-          <div className={styles.tableContainer}>
+          {isMobile ? (
-            <table className={styles.table}>
+            <div className={styles.cardContainer}>
-              <thead>
+              <Card />
-                <tr>
+              <Card />
-                  <th>Name</th>
+              <Card />
-                  <th>Version</th>
+              <Card />
-                  <th>CPU Used/Limit</th>
+            </div>
-                  <th>Memory Used/Limit</th>
+          ) : (
-                  <th>Storage Used/Limit</th>
+            <div className={styles.tableContainer}>
-                  <th>Date Created</th>
+              <table className={styles.table}>
-                  <th></th>
+                <thead>
-                </tr>
+                  <tr>
-              </thead>
+                    <th>Name</th>
-              <tbody>
+                    <th>Version</th>
-                {sampleData.map((project, index) => {
+                    <th>CPU Used/Limit</th>
-                  return (
+                    <th>Memory Used/Limit</th>
-                    <tr
+                    <th>Storage Used/Limit</th>
-                      key={index}
+                    <th>Date Created</th>
-                      onClick={() => router.push("/projects/view")}
+                    <th></th>
-                    >
+                  </tr>
-                      <td>{project.name}</td>
+                </thead>
-                      <td style={{ textAlign: "center" }}>{project.version}</td>
+                <tbody>
-                      <td>
+                  {sampleData.map((project, index) => {
-                        <span className={styles.used}>{project.cpuUsed}</span> /{" "}
+                    return (
-                        <span className={styles.limit}>{project.cpuLimit}</span>
+                      <tr
-                      </td>
+                        key={index}
-                      <td>
+                        onClick={() => router.push("/projects/view")}
-                        <span className={styles.used}>
+                      >
-                          {project.memoryUsed}
+                        <td>{project.name}</td>
-                        </span>{" "}
+                        <td style={{ textAlign: "center" }}>
-                        /{" "}
+                          {project.version}
-                        <span className={styles.limit}>
+                        </td>
-                          {project.memoryLimit}
+                        <td>
-                        </span>
+                          <span className={styles.used}>{project.cpuUsed}</span>{" "}
-                      </td>
+                          /{" "}
-                      <td>
+                          <span className={styles.limit}>
-                        <span className={styles.used}>
+                            {project.cpuLimit}
-                          {project.storageUsed}
+                          </span>
-                        </span>{" "}
+                        </td>
-                        /{" "}
+                        <td>
-                        <span className={styles.limit}>
+                          <span className={styles.used}>
-                          {project.storageLimit}
+                            {project.memoryUsed}
-                        </span>
+                          </span>{" "}
-                      </td>
+                          /{" "}
-                      <td>{project.dateCreated}</td>
+                          <span className={styles.limit}>
-                      <td>
+                            {project.memoryLimit}
-                        <div className={styles.actions}>
+                          </span>
-                          <div>
+                        </td>
-                            <ActionButton icon={<ViewIcon />} />
+                        <td>
+                          <span className={styles.used}>
+                            {project.storageUsed}
+                          </span>{" "}
+                          /{" "}
+                          <span className={styles.limit}>
+                            {project.storageLimit}
+                          </span>
+                        </td>
+                        <td>{project.dateCreated}</td>
+                        <td>
+                          <div className={styles.actions}>
+                            <div>
+                              <ActionButton icon={<ViewIcon />} />
+                            </div>
+                            <div>
+                              <ActionButton icon={<DeleteIcon />} />
+                            </div>
                           </div>
-                          <div>
+                        </td>
-                            <ActionButton icon={<DeleteIcon />} />
+                      </tr>
-                          </div>
+                    );
-                        </div>
+                  })}
-                      </td>
+                </tbody>
-                    </tr>
+              </table>
-                  );
+            </div>
-                })}
+          )}
-              </tbody>
-            </table>
-          </div>
         </div>
       </div>
     </div>

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

@@ -0,0 +1,46 @@
+import DeleteIcon from "@/app/components/icons/delete";
+import React from "react";
+import styles from "./styles.module.css";
+
+const Card = () => {
+  return (
+    <div className={styles.cardContainer}>
+      <div className={styles.cardDetails}>
+        <div className={styles.list}>
+          <p>Name</p>
+          <p>DOKS One Cooperative Bank Backend Develop</p>
+        </div>
+        <div className={styles.list}>
+          <p>CPU Used/Limit</p>
+          <p>
+            <span className={styles.used}>13500</span> /{" "}
+            <span className={styles.limit}>20000</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>
+          </p>
+        </div>
+        <div className={styles.list}>
+          <p>Storage Used/Limit</p>
+          <p>
+            <span className={styles.used}>10000</span> /{" "}
+            <span className={styles.limit}>1000000</span>
+          </p>
+        </div>
+        <div className={styles.list}>
+          <p>Date Created</p>
+          <p>2025-11-07 01:43:18.313 +0000 UTC</p>
+        </div>
+      </div>
+      <div className={styles.cardAction}>
+        <DeleteIcon />
+      </div>
+    </div>
+  );
+};
+
+export default Card;

frontend/src/app/projects/project-card/styles.module.css

@@ -0,0 +1,48 @@
+.cardContainer {
+  display: flex;
+  padding: 16px 0;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+  border-bottom: 1px solid #2c2d3d;
+}
+.cardDetails {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 5px;
+  align-self: stretch;
+}
+.list p {
+  color: #85869b;
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
+.list p:nth-child(2) {
+  color: #eeeffd;
+  font-family: Inter;
+  font-size: 16px;
+  font-weight: 500;
+}
+.cardAction {
+  display: flex;
+  align-items: center;
+  gap: 17px;
+}
+.used {
+  color: #50d85f;
+}
+.limit {
+  color: #85869b;
+}

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

@@ -19,7 +19,7 @@
 }
 
 .tableContainer > table > thead > tr > th {
-  text-wrap: nowrap;
+  text-wrap: wrap;
 }
 
 .tableContainer > table > thead > tr > th,
@@ -36,7 +36,7 @@
 .tableContainer > table > tbody > tr > td {
   color: #eeeffd;
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -52,7 +52,7 @@
 .tableContainer > table > thead > tr > th {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -67,7 +67,8 @@
 .used {
   color: #50d85f;
   font-family: Inter;
-  font-size: 13px;
+
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -75,8 +76,20 @@
 .limit {
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
 }
+.cardContainer {
+  display: flex;
+  padding: 0 16px;
+  padding-bottom: 50px;
+  height: calc(100vh - 170px);
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+  align-self: stretch;
+  overflow: auto;
+}

frontend/src/app/projects/view/add-from-scratch/page.jsx

@@ -17,7 +17,7 @@ const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
-  const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
 
   const {
     register,
@@ -55,7 +55,7 @@ const AddServices = () => {
       {triggerAddVolume && (
         <AddVolumeModal setTriggerAddVolume={setTriggerAddVolume} />
       )}
-      {triggeAddConfigMap && (
+      {triggerAddConfigMap && (
         <AddConfigMapModal setTriggerAddConfigMap={setTriggerAddConfigMap} />
       )}
       <div className={globalStyle.mainContainer}>

frontend/src/app/projects/view/page.jsx

@@ -116,7 +116,7 @@ const AddProject = () => {
                     <th>Version</th>
                     <th>Health</th>
                     <th>Status</th>
-                    <th width="15%">Image</th>
+                    <th width="10%">Image</th>
                     <th>Ingress</th>
                     <th>Port</th>
                     <th>Actions</th>

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

@@ -18,7 +18,8 @@
   text-wrap: nowrap;
   color: #85869b;
   font-family: Inter;
-  font-size: 13px;
+  z-index: 5;
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -39,7 +40,8 @@
   color: #eeeffd;
   font-family: Inter;
   overflow-wrap: anywhere;
-  font-size: 13px;
+
+  font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;
   line-height: normal;
@@ -56,8 +58,9 @@
 .servicesHealth,
 .servicesStatus {
   display: flex;
-  align-items: center;
+  align-items: start;
   gap: 4px;
+  width: 100%;
   align-self: stretch;
 }
 .servicesHealth > div,
@@ -128,6 +131,7 @@
   display: flex;
   align-items: center;
   gap: 10px;
+
   align-self: stretch;
 }
 .iconButton {

frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx

@@ -69,7 +69,7 @@ const AddConfigMapModal = (props) => {
           </div>
         </div>
         <div className={styles.addButtonContainer}>
-          <PrimaryButton />
+          <PrimaryButton text="  Add " icon={<AddIcon />} />
         </div>
       </div>
     </div>

frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx

@@ -61,7 +61,7 @@ const AddVolumeModal = (props) => {
           </div>
         </div>
         <div className={styles.addButtonContainer}>
-          <PrimaryButton />
+          <PrimaryButton text="  Add " icon={<AddIcon />} />
         </div>
       </div>
     </div>