From a220230d0b7a669e00611292185e3e7de279b72e Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Tue, 17 Mar 2026 17:02:41 +0800
Subject: [PATCH 1/2] add

---
 frontend/src/app/agents/page.jsx              |  49 +++---
 frontend/src/app/agents/styles.module.css     |  11 +-
 .../src/app/components/icons/hamburger.jsx    |   5 +-
 frontend/src/app/components/navbar/Navbar.jsx |  84 +++++++++-
 .../navbar/navleft/styles.module.css          |   2 +-
 .../components/navbar/navright/Profile.jsx    |  51 +++---
 .../navbar/navright/styles.module.css         |  10 +-
 .../app/components/navbar/styles.module.css   | 145 +++++++++++++++++-
 .../src/app/components/sidebar/Sidebar.jsx    |  32 ++--
 frontend/src/app/globals.css                  |   2 +-
 frontend/src/app/hooks/useIsMobile.jsx        |   2 +-
 frontend/src/app/hooks/useNagivation.jsx      |  36 +++++
 frontend/src/app/organization/page.jsx        |  45 +++---
 .../src/app/organization/styles.module.css    |   9 ++
 frontend/src/app/projects/page.jsx            |  51 +++---
 frontend/src/app/projects/styles.module.css   |   9 ++
 16 files changed, 412 insertions(+), 131 deletions(-)
 create mode 100644 frontend/src/app/hooks/useNagivation.jsx

diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx
index cf12780..d5269ea 100644
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -112,30 +112,32 @@ const AgentsPage = () => {
             topbarTitle="Agents"
             requiredButtons={["title", "add", "search"]}
           />
-          {isMobile ? (
-            <div className={styles.cardContainer}>
-              <MobileSearchBar />
-              {sampleData.map((data, key) => {
+
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => {
                 return <Card data={data} key={key} />;
               })}
-            </div>
-          ) : (
-            <div className={styles.tableContainer}>
-              <table className={styles.table}>
-                <thead>
-                  <tr>
-                    <th width="25%">Name</th>
-                    <th>Endpoint</th>
-                    <th>Type</th>
-                    <th>Proxy Name</th>
-                    <th>Date Created</th>
+          </div>
 
-                    <th width="10%"></th>
-                  </tr>
-                </thead>
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th width="25%">Name</th>
+                  <th>Endpoint</th>
+                  <th>Type</th>
+                  <th>Proxy Name</th>
+                  <th>Date Created</th>
 
-                <tbody>
-                  {sampleData.map((org, index) => {
+                  <th width="10%"></th>
+                </tr>
+              </thead>
+
+              <tbody>
+                {!isMobile &&
+                  sampleData.map((org, index) => {
                     return (
                       <tr
                         key={index}
@@ -161,10 +163,9 @@ const AgentsPage = () => {
                       </tr>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/agents/styles.module.css b/frontend/src/app/agents/styles.module.css
index 2c9f896..67caf4b 100644
--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -86,7 +86,15 @@
   align-items: flex-start;
   gap: 12px;
   align-self: stretch;
-  overflow: auto;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
 }
 .searchBarContainer {
   display: flex;
@@ -103,7 +111,6 @@
   background-color: transparent;
   border: none;
   outline: none;
-  background-color: transparent;
   color: white;
   font-family: Inter;
   font-size: 16px;
diff --git a/frontend/src/app/components/icons/hamburger.jsx b/frontend/src/app/components/icons/hamburger.jsx
index 8ff361a..67d9c05 100644
--- a/frontend/src/app/components/icons/hamburger.jsx
+++ b/frontend/src/app/components/icons/hamburger.jsx
@@ -1,6 +1,6 @@
 import React from "react";
 
-const hamburger = () => {
+const hamburger = (props) => {
   return (
     <svg
       xmlns="http://www.w3.org/2000/svg"
@@ -8,10 +8,11 @@ const hamburger = () => {
       height={24}
       viewBox="0 0 24 24"
       fill="none"
+      {...props}
     >
       <path
         d="M3 4H21V6H3V4ZM3 11H15V13H3V11ZM3 18H21V20H3V18Z"
-        fill="white"
+        fill="currentColor"
         style={{ fillOpacity: 1 }}
       />
     </svg>
diff --git a/frontend/src/app/components/navbar/Navbar.jsx b/frontend/src/app/components/navbar/Navbar.jsx
index 9008eb9..1961f12 100644
--- a/frontend/src/app/components/navbar/Navbar.jsx
+++ b/frontend/src/app/components/navbar/Navbar.jsx
@@ -1,19 +1,99 @@
 "use client";
 
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 import NavLeft from "./navleft/Header";
 import NavRight from "./navright/Profile";
 import HamburgerIcon from "../../components/icons/hamburger";
 import useIsMobile from "@/app/hooks/useIsMobile";
+import LogoIcon from "../icons/logo";
+import HomeIcon from "../icons/home";
+import OrganizationIcon from "../icons/organization";
+import ProjectIcon from "../icons/project";
+import UserIcon from "../icons/user";
+import RolesIcon from "../icons/roles";
+import CredentialsIcon from "../icons/credentials";
+import AgentIcon from "../icons/agent";
+import DownloadIcon from "../icons/download";
+import useNavigations from "@/app/hooks/useNagivation";
 
 const Navbar = () => {
+  const [triggerDropDown, setTriggerDropDown] = useState(false);
+  const {
+    navToAgents,
+    navToCredentials,
+    navToProject,
+    navToRoles,
+    navToHome,
+    navToOrganization,
+    navToUsers,
+  } = useNavigations();
+
   const isMobile = useIsMobile();
   return (
     <div className={styles.mainContainer}>
       {/* Mobile Hamburger Button */}
       <div className={styles.mobileHamburger}>
-        {isMobile && <HamburgerIcon />}
+        <div className={styles.hamburgerMenu}>
+          <HamburgerIcon
+            onClick={() => setTriggerDropDown(!triggerDropDown)}
+            className={triggerDropDown ? styles.active : ""}
+          />
+          {triggerDropDown && (
+            <div className={styles.dropDownMenu}>
+              <div className={styles.headings}>
+                <div>
+                  <div className={styles.logoContainer}>
+                    <LogoIcon />
+                  </div>
+                  <div className={styles.info}>
+                    <p>Internal Developer Platform</p>
+                    <p>By Project Moonshot Inc.</p>
+                  </div>
+                </div>
+              </div>
+              <div className={styles.navs}>
+                <div className={styles.nav} onClick={navToHome}>
+                  <HomeIcon />
+                  <p>Home</p>
+                </div>
+                <div className={styles.nav} onClick={navToOrganization}>
+                  <OrganizationIcon />
+                  <p>Organization</p>
+                </div>
+                <div className={styles.nav} onClick={navToProject}>
+                  <ProjectIcon />
+                  <p>Project</p>
+                </div>
+                <div className={styles.nav} onClick={navToUsers}>
+                  <UserIcon />
+                  <p>Users</p>
+                </div>
+                <div className={styles.nav} onClick={navToRoles}>
+                  <RolesIcon />
+                  <p>Roles</p>
+                </div>
+                <div className={styles.nav} onClick={navToCredentials}>
+                  <CredentialsIcon />
+                  <p>Credentials</p>
+                </div>
+                <div className={styles.nav} onClick={navToAgents}>
+                  <AgentIcon />
+                  <p>Agents</p>
+                </div>
+              </div>
+              <div className={styles.footer}>
+                <div>
+                  <div>
+                    <p>Download ICTL v3</p>
+                    <DownloadIcon />
+                  </div>
+                </div>
+              </div>
+            </div>
+          )}
+        </div>
+
         <NavLeft />
       </div>
       {/* Mobile Menu Button */}
diff --git a/frontend/src/app/components/navbar/navleft/styles.module.css b/frontend/src/app/components/navbar/navleft/styles.module.css
index a1570a0..09043f0 100644
--- a/frontend/src/app/components/navbar/navleft/styles.module.css
+++ b/frontend/src/app/components/navbar/navleft/styles.module.css
@@ -91,7 +91,7 @@
   background: #2d3143;
   box-shadow: 0 2px 15px 0 rgba(0, 0, 0, 0.25);
   position: absolute;
-  z-index: 1;
+  z-index: 4;
   top: 100%;
   margin-top: 8px;
   left: 0;
diff --git a/frontend/src/app/components/navbar/navright/Profile.jsx b/frontend/src/app/components/navbar/navright/Profile.jsx
index 107b235..c88ffe7 100644
--- a/frontend/src/app/components/navbar/navright/Profile.jsx
+++ b/frontend/src/app/components/navbar/navright/Profile.jsx
@@ -19,35 +19,36 @@ const Profile = () => {
       {/* Profile Section */}
       <div className={styles.profileContainer}>
         {/* Profile */}
-        {!isMobile && (
-          <div className={styles.profileBadge} onClick={() => setOpen(!open)}>
-            {/* Username and Role*/}
-            {sampleData.map((data, index) => {
-              return (
-                <div className={styles.nameRole} key={index}>
-                  <p className={styles.userName}>{data.name}</p>
-                  <p className={styles.userRole}>{data.role}</p>
-                </div>
-              );
-            })}
 
-            {/* User profile*/}
-            <div className={styles.userImgContainer}>
-              <div className={styles.userPic}></div>
-              <EllipsisIcon />
-            </div>
+        <div
+          className={styles.profileBadgeButton}
+          onClick={() => setOpen(!open)}
+        >
+          {/* Username and Role*/}
+          {sampleData.map((data, index) => {
+            return (
+              <div className={styles.nameRole} key={index}>
+                <p className={styles.userName}>{data.name}</p>
+                <p className={styles.userRole}>{data.role}</p>
+              </div>
+            );
+          })}
+
+          {/* User profile*/}
+          <div className={styles.userImgContainer}>
+            <div className={styles.userPic}></div>
+            <EllipsisIcon />
           </div>
-        )}
+        </div>
 
         {/* Mobile Ellipsis */}
-        {isMobile && (
-          <div
-            className={`${styles.mobileEllipsis} ${open ? styles.active : ""}`}
-            onClick={() => setOpen(!open)}
-          >
-            <EllipsisIcon style={isMobile ? styles.rotated : ""} />
-          </div>
-        )}
+
+        <div
+          className={`${styles.mobileEllipsis} ${open ? styles.active : ""}`}
+          onClick={() => setOpen(!open)}
+        >
+          <EllipsisIcon style={isMobile ? styles.rotated : ""} />
+        </div>
 
         {/* Dropdown */}
         {open && <ProfileDropdown isMobile={isMobile} user={sampleData[0]} />}
diff --git a/frontend/src/app/components/navbar/navright/styles.module.css b/frontend/src/app/components/navbar/navright/styles.module.css
index ab949f0..288f9d3 100644
--- a/frontend/src/app/components/navbar/navright/styles.module.css
+++ b/frontend/src/app/components/navbar/navright/styles.module.css
@@ -7,7 +7,8 @@
   cursor: pointer;
   position: relative;
 }
-.profileBadge {
+.profileBadge,
+.profileBadgeButton {
   display: flex;
   padding: 6px 0 6px 8px;
   justify-content: flex-end;
@@ -153,6 +154,9 @@
 .rotated {
   transform: rotate(90deg);
 }
+.mobileEllipsis {
+  display: none;
+}
 .mobileEllipsis.active {
   color: #959aff;
 }
@@ -183,7 +187,9 @@
     cursor: pointer;
     color: #85869b;
   }
-
+  .profileBadgeButton {
+    display: none;
+  }
   .profileBadge {
     display: flex;
     padding: 12px 16px;
diff --git a/frontend/src/app/components/navbar/styles.module.css b/frontend/src/app/components/navbar/styles.module.css
index a834977..ad94451 100644
--- a/frontend/src/app/components/navbar/styles.module.css
+++ b/frontend/src/app/components/navbar/styles.module.css
@@ -9,14 +9,154 @@
 }
 
 /* Mobile */
+
+.hamburgerMenu {
+  display: none;
+  height: 61px;
+  padding-left: 16px;
+  align-items: center;
+  gap: 10px;
+  flex-shrink: 0;
+  cursor: pointer;
+}
+.active path {
+  color: #8187ff;
+}
+.dropDownMenu {
+  display: flex;
+  width: 100vw;
+  flex-direction: column;
+  align-items: center;
+  position: absolute;
+  background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
+  left: 0;
+  z-index: 2;
+  top: 60px;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+.headings {
+  display: flex;
+  padding: 32px 16px 16px 16px;
+  flex-direction: column;
+  align-items: center;
+  gap: 24px;
+  align-self: stretch;
+}
+.headings > div {
+  display: flex;
+  padding-right: 6px;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+}
+.logoContainer {
+  display: flex;
+  width: 50px;
+  height: 50px;
+  justify-content: center;
+  align-items: center;
+  gap: 9px;
+  aspect-ratio: 1/1;
+}
+
+.info {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+
+.info p {
+  color: #85869b;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.07px;
+}
+.info > p:nth-child(1) {
+  color: #fff;
+  font-size: 18px;
+  font-weight: 500;
+  line-height: 18px; /* 100% */
+}
+.navs {
+  display: flex;
+  padding: 16px 0;
+  flex-direction: column;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.nav {
+  display: flex;
+  padding: 8px 16px;
+  align-items: center;
+  gap: 16px;
+  align-self: stretch;
+}
+.nav:hover {
+  background: rgba(149, 154, 255, 0.05);
+}
+.nav path {
+  stroke: #858699;
+}
+.nav:hover path {
+  stroke: #d2d3e0;
+}
+.nav p {
+  color: #d2d3e1;
+  font-size: 18px;
+  font-weight: 400;
+  line-height: normal;
+}
+.footer {
+  display: flex;
+  padding: 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.footer > div {
+  display: flex;
+  padding: 12px 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  align-self: stretch;
+  border-radius: 8px;
+  background: #1d1e2c;
+}
+.footer > div > div {
+  display: flex;
+  height: 24px;
+  justify-content: space-between;
+  align-items: center;
+  align-self: stretch;
+}
+
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-5%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
 @media (max-width: 768px) {
   .mobileHamburger {
     display: flex;
     height: 61px;
-    padding-left: 16px;
+
     align-items: center;
     gap: 10px;
     flex-shrink: 0;
+    position: relative;
   }
 
   .mainContainer {
@@ -25,4 +165,7 @@
     align-items: center;
     border-bottom: none;
   }
+  .hamburgerMenu {
+    display: flex;
+  }
 }
diff --git a/frontend/src/app/components/sidebar/Sidebar.jsx b/frontend/src/app/components/sidebar/Sidebar.jsx
index b10e182..79b6fc1 100644
--- a/frontend/src/app/components/sidebar/Sidebar.jsx
+++ b/frontend/src/app/components/sidebar/Sidebar.jsx
@@ -13,31 +13,19 @@ import AgentIcon from "../icons/agent";
 import DownloadIcon from "../icons/download";
 import LogoIcon from "../icons/logo";
 import ArrowDownIcon from "../icons/arrowDown";
+import useNavigations from "@/app/hooks/useNagivation";
 
 const Sidebar = () => {
-  const router = useRouter();
   const [isCollapsed, setIsCollapsed] = useState(false);
-  const navToHome = () => {
-    router.push("/home");
-  };
-  const navToOrganization = () => {
-    router.push("/organization");
-  };
-  const navToProject = () => {
-    router.push("/projects");
-  };
-  const navToUsers = () => {
-    router.push("/users");
-  };
-  const navToRoles = () => {
-    router.push("/roles");
-  };
-  const navToCredentials = () => {
-    router.push("/credentials");
-  };
-  const navToAgents = () => {
-    router.push("/agents");
-  };
+  const {
+    navToAgents,
+    navToCredentials,
+    navToProject,
+    navToRoles,
+    navToHome,
+    navToOrganization,
+    navToUsers,
+  } = useNavigations();
 
   const pathname = usePathname();
   return (
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 3bf291a..73a4924 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -55,7 +55,7 @@ a {
 }
 @media (max-width: 900px) {
   :root {
-    --table-font-size: 9px;
+    --table-font-size: 10px;
   }
 }
 @media (max-width: 500px) {
diff --git a/frontend/src/app/hooks/useIsMobile.jsx b/frontend/src/app/hooks/useIsMobile.jsx
index 32b0027..c174472 100644
--- a/frontend/src/app/hooks/useIsMobile.jsx
+++ b/frontend/src/app/hooks/useIsMobile.jsx
@@ -1,7 +1,7 @@
 import { useState, useEffect } from "react";
 
 export default function useIsMobile(breakpoint = 768) {
-  const [isMobile, setIsMobile] = useState(false);
+  const [isMobile, setIsMobile] = useState(true);
 
   useEffect(() => {
     const checkScreen = () => {
diff --git a/frontend/src/app/hooks/useNagivation.jsx b/frontend/src/app/hooks/useNagivation.jsx
new file mode 100644
index 0000000..c857141
--- /dev/null
+++ b/frontend/src/app/hooks/useNagivation.jsx
@@ -0,0 +1,36 @@
+import { useRouter } from "next/navigation";
+const useNavigations = () => {
+  const router = useRouter();
+  const navToHome = () => {
+    router.push("/home");
+  };
+  const navToOrganization = () => {
+    router.push("/organization");
+  };
+  const navToProject = () => {
+    router.push("/projects");
+  };
+  const navToUsers = () => {
+    router.push("/users");
+  };
+  const navToRoles = () => {
+    router.push("/roles");
+  };
+  const navToCredentials = () => {
+    router.push("/credentials");
+  };
+  const navToAgents = () => {
+    router.push("/agents");
+  };
+
+  return {
+    navToHome,
+    navToAgents,
+    navToCredentials,
+    navToOrganization,
+    navToProject,
+    navToRoles,
+    navToUsers,
+  };
+};
+export default useNavigations;
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index 8ea1c70..be07122 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -68,26 +68,26 @@ const OrganizationPage = () => {
             topbarTitle="Organization"
             requiredButtons={["title", "add", "search"]}
           />
-          {isMobile ? (
-            <div className={styles.cardContainer}>
-              <MobileSearchBar />
-              {sampleData.map((data, key) => (
-                <Card data={data} key={key} />
-              ))}
-            </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>
-                  {sampleData.map((org, index) => {
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => <Card data={data} key={key} />)}
+          </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>
+                {!isMobile &&
+                  sampleData.map((org, index) => {
                     return (
                       <tr key={index}>
                         <td>{org.organizationName}</td>
@@ -100,10 +100,9 @@ const OrganizationPage = () => {
                       </tr>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/organization/styles.module.css b/frontend/src/app/organization/styles.module.css
index e9672e7..23c8fcd 100644
--- a/frontend/src/app/organization/styles.module.css
+++ b/frontend/src/app/organization/styles.module.css
@@ -61,4 +61,13 @@
   gap: 12px;
   align-self: stretch;
   overflow: auto;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
 }
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
index 02e20d9..5ea212b 100644
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -181,33 +181,35 @@ const ProjectsPage = () => {
             topbarTitle="Project"
             requiredButtons={["title", "add", "search"]}
           />
-          {isMobile ? (
-            <div className={styles.cardContainer}>
-              <MobileSearchBar />
-              {sampleData.map((data, key) => (
+
+          <div className={styles.cardContainer}>
+            <MobileSearchBar />
+            {isMobile &&
+              sampleData.map((data, key) => (
                 <Card
                   data={data}
                   key={key}
                   onClick={() => router.push("/projects/view")}
                 />
               ))}
-            </div>
-          ) : (
-            <div className={styles.tableContainer}>
-              <table className={styles.table}>
-                <thead>
-                  <tr>
-                    <th>Name</th>
-                    <th>Version</th>
-                    <th>CPU Used/Limit</th>
-                    <th>Memory Used/Limit</th>
-                    <th>Storage Used/Limit</th>
-                    <th>Date Created</th>
-                    <th></th>
-                  </tr>
-                </thead>
-                <tbody>
-                  {sampleData.map((project, index) => {
+          </div>
+
+          <div className={styles.tableContainer}>
+            <table className={styles.table}>
+              <thead>
+                <tr>
+                  <th>Name</th>
+                  <th>Version</th>
+                  <th>CPU Used/Limit</th>
+                  <th>Memory Used/Limit</th>
+                  <th>Storage Used/Limit</th>
+                  <th>Date Created</th>
+                  <th></th>
+                </tr>
+              </thead>
+              <tbody>
+                {!isMobile &&
+                  sampleData.map((project, index) => {
                     return (
                       <tr
                         key={index}
@@ -256,10 +258,9 @@ const ProjectsPage = () => {
                       </tr>
                     );
                   })}
-                </tbody>
-              </table>
-            </div>
-          )}
+              </tbody>
+            </table>
+          </div>
         </div>
       </div>
     </div>
diff --git a/frontend/src/app/projects/styles.module.css b/frontend/src/app/projects/styles.module.css
index e57aab3..c0047e3 100644
--- a/frontend/src/app/projects/styles.module.css
+++ b/frontend/src/app/projects/styles.module.css
@@ -92,4 +92,13 @@
   gap: 12px;
   align-self: stretch;
   overflow: auto;
+  display: none;
+}
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
 }

From d7f65cb1a7b4431948a24bc2ba2e760cdb71bca4 Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Tue, 17 Mar 2026 20:13:43 +0800
Subject: [PATCH 2/2] fixed

---
 .../app/components/topHeader/TopHeader.jsx    |   2 +-
 frontend/src/app/globals.css                  |   1 +
 .../view/AddServicesModal/styles.module.css   |   4 +-
 .../view/[servicesId]/LogsModal/logsModas.jsx |  74 +++
 .../[servicesId]/LogsModal/styles.module.css  | 152 ++++++
 .../app/projects/view/[servicesId]/page.jsx   |   6 +
 .../projects/view/add-from-scratch/page.jsx   | 488 ++----------------
 .../view/add-from-scratch/projectDetails.jsx  | 295 +++++++++++
 .../view/add-from-scratch/settings.jsx        | 170 ++++++
 .../view/add-from-scratch/styles.module.css   |  52 +-
 .../variableStyles.module.css                 |   2 +-
 .../src/app/projects/view/styles.module.css   |   2 +-
 12 files changed, 786 insertions(+), 462 deletions(-)
 create mode 100644 frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx
 create mode 100644 frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx
 create mode 100644 frontend/src/app/projects/view/add-from-scratch/settings.jsx

diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index 3f83cac..2eb3cf9 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -171,7 +171,7 @@ const TopHeader = (props) => {
               </div>
               {triggerDropDownMenu && (
                 <div className={styles.dropDown}>
-                  <div>
+                  <div onClick={() => props?.setTriggerLogsModal?.(true)}>
                     <div>
                       <ViewLogsIcon />
                       <p>View Logs</p>
diff --git a/frontend/src/app/globals.css b/frontend/src/app/globals.css
index 73a4924..99ad07d 100644
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -16,6 +16,7 @@ html,
 body {
   max-width: 100vw;
   overflow-x: hidden;
+  font-size: 16px;
 }
 
 body {
diff --git a/frontend/src/app/projects/view/AddServicesModal/styles.module.css b/frontend/src/app/projects/view/AddServicesModal/styles.module.css
index 19262a9..e6946f3 100644
--- a/frontend/src/app/projects/view/AddServicesModal/styles.module.css
+++ b/frontend/src/app/projects/view/AddServicesModal/styles.module.css
@@ -8,11 +8,13 @@
   display: flex;
   align-items: center;
   justify-content: center;
+  padding: 5px;
   background-color: #00000037;
 }
 .modal {
   display: inline-flex;
   padding: 24px 24px 32px 24px;
+
   flex-direction: column;
   align-items: flex-start;
   gap: 48px;
@@ -70,7 +72,7 @@
 }
 .content {
   display: flex;
-  width: 545px;
+
   flex-direction: column;
   align-items: flex-start;
   gap: 16px;
diff --git a/frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx b/frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx
new file mode 100644
index 0000000..5563cdd
--- /dev/null
+++ b/frontend/src/app/projects/view/[servicesId]/LogsModal/logsModas.jsx
@@ -0,0 +1,74 @@
+import CloseIcon from "@/app/components/icons/close";
+import React from "react";
+import styles from "./styles.module.css";
+
+const LogsModal = (props) => {
+  return (
+    <div className={styles.modalContainer}>
+      <div className={styles.container}>
+        <div className={styles.header}>
+          <div className={styles.statusContainer}>
+            <div>
+              <p>Server Logs: gateway-api</p>
+              <div>
+                <svg
+                  xmlns="http://www.w3.org/2000/svg"
+                  width={6}
+                  height={6}
+                  viewBox="0 0 6 6"
+                  fill="none"
+                >
+                  <circle
+                    cx={3}
+                    cy={3}
+                    r={3}
+                    fill="#98FA8D"
+                    style={{
+                      fill: "#98FA8D",
+                      fillColor: "color(display-p3 0.5952 0.9819 0.5537)",
+                      fillOpacity: 1,
+                    }}
+                  />
+                </svg>
+                <p>Connected</p>
+              </div>
+            </div>
+          </div>
+          <CloseIcon
+            className={styles.close}
+            onClick={() => props?.setTriggerLogsModal?.(false)}
+          />
+        </div>
+        <div className={styles.logContentContainer}></div>
+        <div className={styles.footer}>
+          <div>
+            <div className={styles.autoScroll}>
+              <input type="checkbox" />
+              <p>Auto Scroll</p>
+            </div>
+            <div className={styles.linesCount}>
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width={18}
+                height={18}
+                viewBox="0 0 18 18"
+                fill="none"
+              >
+                <path
+                  d="M5.25 6L2.25 9L5.25 12M12.75 6L15.75 9L12.75 12M10.5 3L7.5 15"
+                  stroke="white"
+                  style={{ stroke: "white", strokeOpacity: 1 }}
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+              <p>124 Lines</p>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default LogsModal;
diff --git a/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
new file mode 100644
index 0000000..4e575f9
--- /dev/null
+++ b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
@@ -0,0 +1,152 @@
+.modalContainer {
+  width: 100vw;
+  height: 100vh;
+  position: absolute;
+  z-index: 50;
+  left: 0;
+  top: 0;
+  display: flex;
+  align-items: center;
+  padding: 10px;
+  justify-content: center;
+  background-color: #0000004d;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  width: 100%;
+  max-width: 1200px;
+  border-radius: 6px;
+  background: #21232f;
+  height: 100%;
+  animation-name: dropDownAnimation;
+  animation-duration: 200ms;
+}
+@keyframes dropDownAnimation {
+  0% {
+    opacity: 0;
+    transform: translateY(-5%);
+  }
+  100% {
+    opacity: 1;
+    transform: translateY(0);
+  }
+}
+.header {
+  display: flex;
+  padding: 12px 12px 12px 16px;
+  justify-content: space-between;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.close {
+  cursor: pointer;
+}
+.statusContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 8px;
+  flex: 1 0 0;
+}
+.statusContainer > div {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 6px;
+}
+.statusContainer > div > p {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 10px;
+  color: #d2d3e1;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+
+.statusContainer > div > div {
+  display: flex;
+  padding: 1px 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 100px;
+  background: rgba(66, 180, 78, 0.1);
+}
+.statusContainer > div > div > p {
+  color: #72fd7f;
+  text-align: center;
+  font-feature-settings:
+    "liga" off,
+    "clig" off;
+  font-family: Inter;
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 22px; /* 183.333% */
+}
+.logContentContainer {
+  width: 100%;
+  background-color: rebeccapurple;
+  flex: 1;
+  overflow-y: auto;
+}
+.footer {
+  display: flex;
+  padding: 12px 16px;
+  align-items: center;
+  gap: 48px;
+  align-self: stretch;
+}
+.footer > div {
+  display: flex;
+  align-items: center;
+  justify-content: space-between;
+  gap: 24px;
+  flex: 1 0 0;
+}
+.autoScroll {
+  display: flex;
+  align-items: center;
+  gap: 12px;
+}
+.autoScroll input[type="checkbox"] {
+  accent-color: #5980f1;
+  height: 16px;
+  width: 16px;
+  background: white;
+}
+
+.autoScroll p {
+  color: #fff;
+
+  /* Base/Medium */
+  font-family: Inter;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.08px;
+}
+.linesCount {
+  display: flex;
+  padding: 4px 8px;
+  justify-content: center;
+  align-items: center;
+  gap: 6px;
+  border-radius: 6px;
+  background: rgba(0, 101, 244, 0.1);
+}
+.linesCount p {
+  color: #fff;
+  font-family: Inter;
+  font-size: 0.9rem;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px;
+  letter-spacing: 0.07px;
+}
diff --git a/frontend/src/app/projects/view/[servicesId]/page.jsx b/frontend/src/app/projects/view/[servicesId]/page.jsx
index 0dc3ed6..a6b69b8 100644
--- a/frontend/src/app/projects/view/[servicesId]/page.jsx
+++ b/frontend/src/app/projects/view/[servicesId]/page.jsx
@@ -12,11 +12,13 @@ import CustomCheckbox from "@/app/components/checkbox/CheckBox";
 import DeleteIcon from "@/app/components/icons/delete";
 import SelectField from "@/app/components/select/SelectField";
 import ActionButton from "@/app/components/actionButton/ActionButton";
+import LogsModal from "./LogsModal/logsModas";
 const AddServices = () => {
   const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
   const [triggeAddConfigMap, setTriggerAddConfigMap] = useState(false);
+  const [triggerLogsModal, setTriggerLogsModal] = useState(false);
   const sampleData = [
     { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
     { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
@@ -27,6 +29,9 @@ const AddServices = () => {
   ];
   return (
     <div className={globalStyle.section}>
+      {triggerLogsModal && (
+        <LogsModal setTriggerLogsModal={setTriggerLogsModal} />
+      )}
       {triggerAddVariable && (
         <AddVariableModal setTriggerAddVariable={setTriggerAddVariable} />
       )}
@@ -44,6 +49,7 @@ const AddServices = () => {
             state="view"
             topbarTitle="View Services"
             requiredButtons={["back", "title", "edit", "download"]}
+            setTriggerLogsModal={setTriggerLogsModal}
           />
           <div className={styles.contentContainer}>
             <div className={styles.fieldsContainerCreateNew}>
diff --git a/frontend/src/app/projects/view/add-from-scratch/page.jsx b/frontend/src/app/projects/view/add-from-scratch/page.jsx
index 0c3a0d1..1a4a182 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -3,18 +3,14 @@ import React, { useState } from "react";
 import globalStyle from "@/app/globalStyle.module.css";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import styles from "./styles.module.css";
-import variableStyles from "./variableStyles.module.css";
-import TextField from "@/app/components/fields/textfield";
 import AddVariableModal from "../variableModals/AddVariableModal/AddVariableModal";
 import AddVolumeModal from "../variableModals/AddVolumes/AddVolumeModal";
 import AddConfigMapModal from "../variableModals/AddConfigMap/AddConfigMapModal";
-import DeleteIcon from "@/app/components/icons/delete";
-import CustomCheckbox from "@/app/components/checkbox/CheckBox";
-import SelectField from "@/app/components/select/SelectField";
 import useServicesForm from "@/app/hooks/useServicesForm";
 import Alert from "@/app/components/alerts/Alert";
+import ProjectDetails from "./projectDetails";
+import Settings from "./settings";
 const AddServices = () => {
-  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
   const [triggerAddVariable, setTriggerAddVariable] = useState(false);
   const [triggerAddVolume, setTriggerAddVolume] = useState(false);
   const [triggerAddConfigMap, setTriggerAddConfigMap] = useState(false);
@@ -67,456 +63,40 @@ const AddServices = () => {
             topbarTitle="Create New Services"
             requiredButtons={["title", "save"]}
           />
-          <div className={styles.contentContainer}>
-            <form
-              className={styles.fieldsContainerCreateNew}
-              id="form"
-              onSubmit={handleSubmit(onSubmit)}
-            >
-              <div className={styles.projectDetails}>
-                <div className={styles.projectDetailsHeader}>
-                  <p>Project Details</p>
-                </div>
-                <div className={styles.fieldsCreateNew}>
-                  <div>
-                    <div>
-                      <p>
-                        Repository <span>(Optional)</span>
-                      </p>
-                      <label className={styles.repositoryForm} htmlFor="#repo">
-                        + Link Repository
-                      </label>
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Name</p>
-                      <TextField
-                        placeHolder="Enter service name"
-                        {...register("serviceName", { required: true })}
-                        hasError={!!errors.serviceName}
-                      />
-                    </div>
-                    <div>
-                      <p>Version</p>
-                      <TextField
-                        placeHolder="Service version"
-                        {...register("serviceVersion", { required: true })}
-                        hasError={!!errors.serviceVersion}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>
-                        Image <span>(Optional)</span>
-                      </p>
-                      <TextField
-                        placeHolder="Enter image name"
-                        {...register("imageName", { required: false })}
-                        hasError={!!errors.imageName}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Port</p>
-                      <TextField
-                        placeHolder="Enter port"
-                        {...register("port", { required: true })}
-                        hasError={!!errors.port}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Ingress</p>
-                      <SelectField
-                        label="Select"
-                        options={[
-                          { label: "Option", value: "option" },
-                          { label: "Option 1", value: "option 1" },
-                          { label: "Option 2", value: "option 2" },
-                        ]}
-                      />
-                    </div>
-                    <div>
-                      <p>Ingress</p>
-                      <SelectField
-                        label="Select"
-                        options={[
-                          { label: "Option", value: "option" },
-                          { label: "Option 1", value: "option 1" },
-                          { label: "Option 2", value: "option 2" },
-                        ]}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className={styles.resource}>
-                <div className={styles.projectDetailsHeader}>
-                  <p>Resource</p>
-                </div>
-                <div className={styles.resourceFields}>
-                  <div>
-                    <div>
-                      <p>CPU Request (MB)</p>
-                      <TextField
-                        placeHolder="250"
-                        {...register("cpuRequest", { required: true })}
-                        hasError={!!errors.cpuRequest}
-                      />
-                    </div>
-                    <div>
-                      <p>CPU Limit (MB)</p>
-                      <TextField
-                        placeHolder="250"
-                        {...register("cpuLimit", { required: true })}
-                        hasError={!!errors.cpuLimit}
-                      />
-                    </div>
-                  </div>
-                  <div>
-                    <div>
-                      <p>Memory Request (MB)</p>
-                      <TextField
-                        placeHolder="250"
-                        {...register("memoryRequest", { required: true })}
-                        hasError={!!errors.memoryRequest}
-                      />
-                    </div>
-                    <div>
-                      <p>Memory Limit (MB)</p>
-                      <TextField
-                        placeHolder="500"
-                        {...register("memoryLimit", { required: true })}
-                        hasError={!!errors.memoryLimit}
-                      />
-                    </div>
-                  </div>
-                </div>
-              </div>
-              <div className={styles.additionalDetails}>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Auto Scaling</p>
-                        <CustomCheckbox
-                          id="scalingCheckBox"
-                          setChecked={() => setDisableScaling(!disableScaling)}
-                        />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Minimum pods</p>
-
-                            <TextField
-                              placeHolder="1"
-                              disabled={disableScaling}
-                              {...register("minPods", {
-                                required:
-                                  maxPods.trim() !== "" && !disableScaling,
-                              })}
-                              hasError={!!errors.minPods}
-                            />
-                          </div>
-                          <div>
-                            <p>Maximum pods</p>
-                            <TextField
-                              placeHolder="1"
-                              disabled={disableScaling}
-                              {...register("maxPods", {
-                                required:
-                                  minPods.trim() !== "" && !disableScaling,
-                              })}
-                              hasError={!!errors.maxPods}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Readiness</p>
-                        <CustomCheckbox
-                          id="readiNessCheckBox"
-                          setChecked={() =>
-                            setDisableReadiness(!disableReadiness)
-                          }
-                        />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Readiness Path</p>
-
-                            <TextField
-                              placeHolder="Enter Readiness path"
-                              disabled={disableReadiness}
-                              {...register("readinessPath", {
-                                required:
-                                  readinessPort.trim() !== "" &&
-                                  !disableReadiness,
-                              })}
-                              hasError={!!errors.readinessPath}
-                            />
-                          </div>
-                          <div>
-                            <p>Readiness Port</p>
-                            <TextField
-                              placeHolder="Enter Readiness port"
-                              disabled={disableReadiness}
-                              {...register("readinessPort", {
-                                required:
-                                  readinessPath.trim() !== "" &&
-                                  !disableReadiness,
-                              })}
-                              hasError={!!errors.readinessPort}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-                <div>
-                  <div>
-                    <div className={styles.additionalDetailsHeader}>
-                      <div>
-                        <p>Liveness</p>
-                        <CustomCheckbox
-                          id="liveNessCheckBox"
-                          setChecked={() =>
-                            setDisableLiveness(!disableLiveness)
-                          }
-                        />
-                      </div>
-                    </div>
-                    <div className={styles.additionalDetailsFields}>
-                      <div>
-                        <div>
-                          <div>
-                            <p>Liveness Path</p>
-                            <TextField
-                              placeHolder="Enter liveness path"
-                              disabled={disableLiveness}
-                              {...register("livenessPath", {
-                                required:
-                                  livenessPort.trim() !== "" &&
-                                  !disableLiveness,
-                              })}
-                              hasError={!!errors.livenessPath}
-                            />
-                          </div>
-                          <div>
-                            <p>Liveness Port</p>
-                            <TextField
-                              placeHolder="Enter liveness port"
-                              disabled={disableLiveness}
-                              {...register("livenessPort", {
-                                required:
-                                  livenessPath.trim() !== "" &&
-                                  !disableLiveness,
-                              })}
-                              hasError={!!errors.livenessPort}
-                            />
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
-              </div>
-            </form>
-            <div className={variableStyles.variables}>
-              <div className={variableStyles.variablesHeader}>
-                <div>
-                  <div className={variableStyles.searchContainer}>
-                    <div className={variableStyles.searchInputGroup}>
-                      <svg
-                        width="20"
-                        height="20"
-                        viewBox="0 0 20 20"
-                        fill="none"
-                      >
-                        <g clipPath="url(#clip0)">
-                          <path
-                            d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                          <path
-                            d="M18.7051 18.7061L14.0176 14.0186"
-                            stroke="currentColor"
-                            strokeWidth="2"
-                            strokeLinecap="round"
-                            strokeLinejoin="round"
-                          />
-                        </g>
-                      </svg>
-                      <input type="text" placeholder="Search" />
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesHeaderDropDown}>
-                    <div
-                      className={variableStyles.variableHeaderDropdownButton}
-                      onClick={() =>
-                        setTriggerVariableDropDown(!triggerVariableDropDown)
-                      }
-                    >
-                      <svg
-                        xmlns="http://www.w3.org/2000/svg"
-                        width="24"
-                        height="24"
-                        viewBox="0 0 24 24"
-                        fill="none"
-                      >
-                        <path
-                          d="M12 5.29199V18.7087"
-                          stroke="white"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                        <path
-                          d="M5.29102 12H18.7077"
-                          stroke="white"
-                          strokeWidth="2"
-                          strokeLinecap="round"
-                          strokeLinejoin="round"
-                        />
-                      </svg>
-                    </div>
-                    {triggerVariableDropDown && (
-                      <div className={variableStyles.dropDownContainer}>
-                        <div
-                          onClick={() => {
-                            setTriggerAddVariable(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Environment Variables</p>
-                        </div>
-                        <div
-                          onClick={() => {
-                            setTriggerAddVolume(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Volumes</p>
-                        </div>
-                        <div
-                          onClick={() => {
-                            setTriggerAddConfigMap(true);
-                            setTriggerVariableDropDown(
-                              !triggerVariableDropDown,
-                            );
-                          }}
-                        >
-                          <p>Config Maps</p>
-                        </div>
-                      </div>
-                    )}
-                  </div>
-                </div>
-              </div>
-              <div className={variableStyles.variablesContentContainer}>
-                <div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Environment Variables</p>
-                      </div>
-                      <div className={variableStyles.envVariablesHeader}>
-                        <div>
-                          <p>Key</p>
-                          <p>Value</p>
-                        </div>
-                      </div>
-                      <div className={variableStyles.variableList}>
-                        <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No Environment Variables added</p>
-                          </div>
-                        </div>
-                        {/* <div className={variableStyles.variable}>
-                          <p>REQUEST_SERVICE_GRPC</p>
-                          <p>request-service:50053</p>
-                          <DeleteIcon />
-                        </div> */}
-                      </div>
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Volumes</p>
-                      </div>
-                      <div className={variableStyles.envVariablesHeader}>
-                        <div>
-                          <p>Name</p>
-                          <p>Path</p>
-                          <p>Size/Type</p>
-                          <p>Access Mode</p>
-                          <p>Storage Class</p>
-                        </div>
-                      </div>
-                      <div className={variableStyles.variableList}>
-                        <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No volume added</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                  <div className={variableStyles.variablesContent}>
-                    <div
-                      className={variableStyles.environmentVariablesContainer}
-                    >
-                      <div
-                        className={variableStyles.environmentVariablesHeader}
-                      >
-                        <p>Config maps</p>
-                      </div>
-
-                      <div className={variableStyles.variableList}>
-                        <div className={variableStyles.emptyVariableList}>
-                          <div>
-                            <p>No config map added</p>
-                          </div>
-                        </div>
-                      </div>
-                    </div>
-                  </div>
-                </div>
+          <div className={styles.content}>
+            <div className={styles.heading}>
+              <div>
+                <p>Project Details</p>
+                <p>Settings</p>
               </div>
             </div>
+            <div className={styles.contentContainer}>
+              <ProjectDetails
+                register={register}
+                handleSubmit={handleSubmit}
+                errors={errors}
+                onSubmit={onSubmit}
+                triggerAlert={triggerAlert}
+                disableScaling={disableScaling}
+                disableReadiness={disableReadiness}
+                disableLiveness={disableLiveness}
+                setDisableScaling={setDisableScaling}
+                setDisableReadiness={setDisableReadiness}
+                setDisableLiveness={setDisableLiveness}
+                setTriggerAlert={setTriggerAlert}
+                minPods={minPods}
+                maxPods={maxPods}
+                readinessPath={readinessPath}
+                readinessPort={readinessPort}
+                livenessPort={livenessPort}
+                livenessPath={livenessPath}
+              />
+              <Settings
+                setTriggerAddConfigMap={setTriggerAddConfigMap}
+                setTriggerAddVariable={setTriggerAddVariable}
+                setTriggerAddVolume={setTriggerAddVolume}
+              />
+            </div>
           </div>
         </div>
       </div>
diff --git a/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx b/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx
new file mode 100644
index 0000000..0be6b74
--- /dev/null
+++ b/frontend/src/app/projects/view/add-from-scratch/projectDetails.jsx
@@ -0,0 +1,295 @@
+"use client";
+import React, { useState } from "react";
+import styles from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
+import CustomCheckbox from "@/app/components/checkbox/CheckBox";
+import SelectField from "@/app/components/select/SelectField";
+
+const ProjectDetails = ({
+  register,
+  handleSubmit,
+  errors,
+  onSubmit,
+  triggerAlert,
+  disableScaling,
+  disableReadiness,
+  disableLiveness,
+  setDisableScaling,
+  setDisableReadiness,
+  setDisableLiveness,
+  setTriggerAlert,
+  minPods,
+  maxPods,
+  readinessPath,
+  readinessPort,
+  livenessPort,
+  livenessPath,
+}) => {
+  return (
+    <form
+      className={styles.fieldsContainerCreateNew}
+      id="form"
+      onSubmit={handleSubmit(onSubmit)}
+    >
+      <div>
+        <div className={styles.projectDetails}>
+          <div className={styles.projectDetailsHeader}>
+            <p>Project Details</p>
+          </div>
+          <div className={styles.fieldsCreateNew}>
+            <div>
+              <div>
+                <p>
+                  Repository <span>(Optional)</span>
+                </p>
+                <label className={styles.repositoryForm} htmlFor="#repo">
+                  + Link Repository
+                </label>
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>Name</p>
+                <TextField
+                  placeHolder="Enter service name"
+                  {...register("serviceName", { required: true })}
+                  hasError={!!errors.serviceName}
+                />
+              </div>
+              <div>
+                <p>Version</p>
+                <TextField
+                  placeHolder="Service version"
+                  {...register("serviceVersion", { required: true })}
+                  hasError={!!errors.serviceVersion}
+                />
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>
+                  Image <span>(Optional)</span>
+                </p>
+                <TextField
+                  placeHolder="Enter image name"
+                  {...register("imageName", { required: false })}
+                  hasError={!!errors.imageName}
+                />
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>Port</p>
+                <TextField
+                  placeHolder="Enter port"
+                  {...register("port", { required: true })}
+                  hasError={!!errors.port}
+                />
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>Ingress</p>
+                <SelectField
+                  label="Select"
+                  options={[
+                    { label: "Option", value: "option" },
+                    { label: "Option 1", value: "option 1" },
+                    { label: "Option 2", value: "option 2" },
+                  ]}
+                />
+              </div>
+              <div>
+                <p>Ingress</p>
+                <SelectField
+                  label="Select"
+                  options={[
+                    { label: "Option", value: "option" },
+                    { label: "Option 1", value: "option 1" },
+                    { label: "Option 2", value: "option 2" },
+                  ]}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.resource}>
+          <div className={styles.projectDetailsHeader}>
+            <p>Resource</p>
+          </div>
+          <div className={styles.resourceFields}>
+            <div>
+              <div>
+                <p>CPU Request (MB)</p>
+                <TextField
+                  placeHolder="250"
+                  {...register("cpuRequest", { required: true })}
+                  hasError={!!errors.cpuRequest}
+                />
+              </div>
+              <div>
+                <p>CPU Limit (MB)</p>
+                <TextField
+                  placeHolder="250"
+                  {...register("cpuLimit", { required: true })}
+                  hasError={!!errors.cpuLimit}
+                />
+              </div>
+            </div>
+            <div>
+              <div>
+                <p>Memory Request (MB)</p>
+                <TextField
+                  placeHolder="250"
+                  {...register("memoryRequest", { required: true })}
+                  hasError={!!errors.memoryRequest}
+                />
+              </div>
+              <div>
+                <p>Memory Limit (MB)</p>
+                <TextField
+                  placeHolder="500"
+                  {...register("memoryLimit", { required: true })}
+                  hasError={!!errors.memoryLimit}
+                />
+              </div>
+            </div>
+          </div>
+        </div>
+        <div className={styles.additionalDetails}>
+          <div>
+            <div>
+              <div className={styles.additionalDetailsHeader}>
+                <div>
+                  <p>Auto Scaling</p>
+                  <CustomCheckbox
+                    id="scalingCheckBox"
+                    setChecked={() => setDisableScaling(!disableScaling)}
+                  />
+                </div>
+              </div>
+              <div className={styles.additionalDetailsFields}>
+                <div>
+                  <div>
+                    <div>
+                      <p>Minimum pods</p>
+
+                      <TextField
+                        placeHolder="1"
+                        disabled={disableScaling}
+                        {...register("minPods", {
+                          required: maxPods.trim() !== "" && !disableScaling,
+                        })}
+                        hasError={!!errors.minPods}
+                      />
+                    </div>
+                    <div>
+                      <p>Maximum pods</p>
+                      <TextField
+                        placeHolder="1"
+                        disabled={disableScaling}
+                        {...register("maxPods", {
+                          required: minPods.trim() !== "" && !disableScaling,
+                        })}
+                        hasError={!!errors.maxPods}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div>
+              <div className={styles.additionalDetailsHeader}>
+                <div>
+                  <p>Readiness</p>
+                  <CustomCheckbox
+                    id="readiNessCheckBox"
+                    setChecked={() => setDisableReadiness(!disableReadiness)}
+                  />
+                </div>
+              </div>
+              <div className={styles.additionalDetailsFields}>
+                <div>
+                  <div>
+                    <div>
+                      <p>Readiness Path</p>
+
+                      <TextField
+                        placeHolder="Enter Readiness path"
+                        disabled={disableReadiness}
+                        {...register("readinessPath", {
+                          required:
+                            readinessPort.trim() !== "" && !disableReadiness,
+                        })}
+                        hasError={!!errors.readinessPath}
+                      />
+                    </div>
+                    <div>
+                      <p>Readiness Port</p>
+                      <TextField
+                        placeHolder="Enter Readiness port"
+                        disabled={disableReadiness}
+                        {...register("readinessPort", {
+                          required:
+                            readinessPath.trim() !== "" && !disableReadiness,
+                        })}
+                        hasError={!!errors.readinessPort}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div>
+            <div>
+              <div className={styles.additionalDetailsHeader}>
+                <div>
+                  <p>Liveness</p>
+                  <CustomCheckbox
+                    id="liveNessCheckBox"
+                    setChecked={() => setDisableLiveness(!disableLiveness)}
+                  />
+                </div>
+              </div>
+              <div className={styles.additionalDetailsFields}>
+                <div>
+                  <div>
+                    <div>
+                      <p>Liveness Path</p>
+                      <TextField
+                        placeHolder="Enter liveness path"
+                        disabled={disableLiveness}
+                        {...register("livenessPath", {
+                          required:
+                            livenessPort.trim() !== "" && !disableLiveness,
+                        })}
+                        hasError={!!errors.livenessPath}
+                      />
+                    </div>
+                    <div>
+                      <p>Liveness Port</p>
+                      <TextField
+                        placeHolder="Enter liveness port"
+                        disabled={disableLiveness}
+                        {...register("livenessPort", {
+                          required:
+                            livenessPath.trim() !== "" && !disableLiveness,
+                        })}
+                        hasError={!!errors.livenessPort}
+                      />
+                    </div>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </form>
+  );
+};
+
+export default ProjectDetails;
diff --git a/frontend/src/app/projects/view/add-from-scratch/settings.jsx b/frontend/src/app/projects/view/add-from-scratch/settings.jsx
new file mode 100644
index 0000000..a288f4d
--- /dev/null
+++ b/frontend/src/app/projects/view/add-from-scratch/settings.jsx
@@ -0,0 +1,170 @@
+"use client";
+import React, { useState } from "react";
+import variableStyles from "./variableStyles.module.css";
+const Settings = ({
+  setTriggerAddVariable,
+  setTriggerAddVolume,
+  setTriggerAddConfigMap,
+}) => {
+  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
+
+  return (
+    <div className={variableStyles.variables}>
+      <div className={variableStyles.variablesHeader}>
+        <div>
+          <div className={variableStyles.searchContainer}>
+            <div className={variableStyles.searchInputGroup}>
+              <svg width="20" height="20" viewBox="0 0 20 20" fill="none">
+                <g clipPath="url(#clip0)">
+                  <path
+                    d="M8.66099 16.0271C12.7292 16.0271 16.0271 12.7292 16.0271 8.66099C16.0271 4.59282 12.7292 1.29492 8.66099 1.29492C4.59282 1.29492 1.29492 4.59282 1.29492 8.66099C1.29492 12.7292 4.59282 16.0271 8.66099 16.0271Z"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                  <path
+                    d="M18.7051 18.7061L14.0176 14.0186"
+                    stroke="currentColor"
+                    strokeWidth="2"
+                    strokeLinecap="round"
+                    strokeLinejoin="round"
+                  />
+                </g>
+              </svg>
+              <input type="text" placeholder="Search" />
+            </div>
+          </div>
+          <div className={variableStyles.variablesHeaderDropDown}>
+            <div
+              className={variableStyles.variableHeaderDropdownButton}
+              onClick={() =>
+                setTriggerVariableDropDown(!triggerVariableDropDown)
+              }
+            >
+              <svg
+                xmlns="http://www.w3.org/2000/svg"
+                width="24"
+                height="24"
+                viewBox="0 0 24 24"
+                fill="none"
+              >
+                <path
+                  d="M12 5.29199V18.7087"
+                  stroke="white"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+                <path
+                  d="M5.29102 12H18.7077"
+                  stroke="white"
+                  strokeWidth="2"
+                  strokeLinecap="round"
+                  strokeLinejoin="round"
+                />
+              </svg>
+            </div>
+            {triggerVariableDropDown && (
+              <div className={variableStyles.dropDownContainer}>
+                <div
+                  onClick={() => {
+                    setTriggerAddVariable(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Environment Variables</p>
+                </div>
+                <div
+                  onClick={() => {
+                    setTriggerAddVolume(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Volumes</p>
+                </div>
+                <div
+                  onClick={() => {
+                    setTriggerAddConfigMap(true);
+                    setTriggerVariableDropDown(!triggerVariableDropDown);
+                  }}
+                >
+                  <p>Config Maps</p>
+                </div>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className={variableStyles.variablesContentContainer}>
+        <div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Environment Variables</p>
+              </div>
+              <div className={variableStyles.envVariablesHeader}>
+                <div>
+                  <p>Key</p>
+                  <p>Value</p>
+                </div>
+              </div>
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No Environment Variables added</p>
+                  </div>
+                </div>
+                {/* <div className={variableStyles.variable}>
+                          <p>REQUEST_SERVICE_GRPC</p>
+                          <p>request-service:50053</p>
+                          <DeleteIcon />
+                        </div> */}
+              </div>
+            </div>
+          </div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Volumes</p>
+              </div>
+              <div className={variableStyles.envVariablesHeader}>
+                <div>
+                  <p>Name</p>
+                  <p>Path</p>
+                  <p>Size/Type</p>
+                  <p>Access Mode</p>
+                  <p>Storage Class</p>
+                </div>
+              </div>
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No volume added</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+          <div className={variableStyles.variablesContent}>
+            <div className={variableStyles.environmentVariablesContainer}>
+              <div className={variableStyles.environmentVariablesHeader}>
+                <p>Config maps</p>
+              </div>
+
+              <div className={variableStyles.variableList}>
+                <div className={variableStyles.emptyVariableList}>
+                  <div>
+                    <p>No config map added</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Settings;
diff --git a/frontend/src/app/projects/view/add-from-scratch/styles.module.css b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
index 0e062b5..ae940e1 100644
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -1,24 +1,68 @@
+.content {
+  display: flex;
+  padding: 0 16px;
+  flex-direction: column;
+  align-items: flex-start;
+  height: calc(100vh - 170px);
+  /* ✅ fills remaining space */
+  min-height: 0;
+  align-self: stretch;
+}
 .contentContainer {
   display: flex;
   align-items: flex-start;
-  flex: 1 0 0;
+  flex: 1;
+  background-color: red;
   align-self: stretch;
 }
+
+.heading {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 16px;
+  padding: 0 16px;
+  align-self: stretch;
+  background: #191a24;
+}
+.heading > div {
+  display: flex;
+  align-items: flex-start;
+  gap: 16px;
+  align-self: stretch;
+}
+.heading p {
+  display: flex;
+  padding: 24px 4px 16px 4px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  color: #85869b;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: 0.18px;
+}
 .fieldsContainerCreateNew {
   display: flex;
   padding-top: 36px;
   flex-direction: column;
-  width: 550px;
   align-items: flex-start;
   gap: 36px;
   background: #191a24;
-  height: calc(100vh - 175px);
+  height: 100%;
+  min-height: 0;
+  background-color: red;
   overflow-y: scroll;
   scrollbar-width: none;
 }
+
 .projectDetails {
   display: flex;
-  padding: 0 36px;
+  padding: 0 20px;
   flex-direction: column;
   align-items: flex-start;
   gap: 10px;
diff --git a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
index bb0ea1e..e28c2b5 100644
--- a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
@@ -23,7 +23,7 @@
 }
 .searchContainer > div {
   display: flex;
-  width: 310px;
+  width: 100%;
   padding: 8px 12px;
   align-items: center;
   gap: 9px;
diff --git a/frontend/src/app/projects/view/styles.module.css b/frontend/src/app/projects/view/styles.module.css
index db6bc8c..da6a197 100644
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -18,7 +18,7 @@
   text-wrap: nowrap;
   color: #85869b;
   font-family: Inter;
-  z-index: 5;
+  z-index: 3;
   font-size: var(--table-font-size);
   font-style: normal;
   font-weight: 500;