add responsiveness

2026-03-13 14:38:46 +08:00
parent 4478a74ece
commit f44258d134
28 changed files with 617 additions and 150 deletions
--- a/frontend/src/app/components/buttons/primarybutton/styles.module.css
+++ b/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;
--- a/frontend/src/app/components/icons/publish.jsx
+++ b/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;
--- a/frontend/src/app/components/icons/viewLogs.jsx
+++ b/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;
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/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>
--- a/frontend/src/app/components/sidebar/styles.module.css
+++ b/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;
+  }
+}
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/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 />
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/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;
 }
--- a/frontend/src/app/credentials/card/Card.jsx
+++ b/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;
--- a/frontend/src/app/credentials/card/styles.module.css
+++ b/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;
+}
--- a/frontend/src/app/credentials/page.jsx
+++ b/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,6 +70,15 @@ const CredentialsPage = () => {
            topbarTitle="Credentials"
            requiredButtons={["title", "add", "search", "env"]}
          />
+          {isMobile ? (
+            <div className={styles.cardContainer}>
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+            </div>
+          ) : (
            <div className={styles.tableContainer}>
              <table className={styles.table}>
                <thead>
@@ -93,6 +106,7 @@ const CredentialsPage = () => {
                </tbody>
              </table>
            </div>
+          )}
        </div>
      </div>
    </div>
--- a/frontend/src/app/credentials/styles.module.css
+++ b/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;
+}
--- a/frontend/src/app/globals.css
+++ b/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;
+  }
+}
--- a/frontend/src/app/hooks/useIsMobile.jsx
+++ b/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;
+}
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/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;
--- a/frontend/src/app/organization/card/Card.jsx
+++ b/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;
--- a/frontend/src/app/organization/card/styles.module.css
+++ b/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;
+}
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -1,13 +1,16 @@
-"use-client";
-import React from "react";
+"use client";
+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,6 +67,17 @@ const OrganizationPage = () => {
            topbarTitle="Organization"
            requiredButtons={["title", "add", "search"]}
          />
+          {isMobile ? (
+            <div className={styles.cardContainer}>
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+            </div>
+          ) : (
            <div className={styles.tableContainer}>
              <table className={styles.table}>
                <thead>
@@ -91,6 +105,7 @@ const OrganizationPage = () => {
                </tbody>
              </table>
            </div>
+          )}
        </div>
      </div>
    </div>
--- a/frontend/src/app/organization/styles.module.css
+++ b/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;
+}
--- a/frontend/src/app/projects/add/styles.module.css
+++ b/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;
--- a/frontend/src/app/projects/page.jsx
+++ b/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,6 +180,14 @@ const ProjectsPage = () => {
            topbarTitle="Project"
            requiredButtons={["title", "add", "search"]}
          />
+          {isMobile ? (
+            <div className={styles.cardContainer}>
+              <Card />
+              <Card />
+              <Card />
+              <Card />
+            </div>
+          ) : (
            <div className={styles.tableContainer}>
              <table className={styles.table}>
                <thead>
@@ -198,10 +209,15 @@ const ProjectsPage = () => {
                        onClick={() => router.push("/projects/view")}
                      >
                        <td>{project.name}</td>
-                      <td style={{ textAlign: "center" }}>{project.version}</td>
+                        <td style={{ textAlign: "center" }}>
+                          {project.version}
+                        </td>
                        <td>
-                        <span className={styles.used}>{project.cpuUsed}</span> /{" "}
-                        <span className={styles.limit}>{project.cpuLimit}</span>
+                          <span className={styles.used}>{project.cpuUsed}</span>{" "}
+                          /{" "}
+                          <span className={styles.limit}>
+                            {project.cpuLimit}
+                          </span>
                        </td>
                        <td>
                          <span className={styles.used}>
@@ -238,6 +254,7 @@ const ProjectsPage = () => {
                </tbody>
              </table>
            </div>
+          )}
        </div>
      </div>
    </div>
--- a/frontend/src/app/projects/project-card/Card.jsx
+++ b/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;
--- a/frontend/src/app/projects/project-card/styles.module.css
+++ b/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;
+}
--- a/frontend/src/app/projects/styles.module.css
+++ b/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;
+}
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/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}>
--- a/frontend/src/app/projects/view/page.jsx
+++ b/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>
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/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 {
--- a/frontend/src/app/projects/view/variableModals/AddConfigMap/AddConfigMapModal.jsx
+++ b/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>
--- a/frontend/src/app/projects/view/variableModals/AddVolumes/AddVolumeModal.jsx
+++ b/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>