done searchbar but not final

few changes, mobile searchbar not done
Final
2026-03-31 14:49:20 +08:00 · 2026-03-30 17:21:09 +08:00 · 2026-03-26 17:22:32 +08:00 · 2026-03-26 15:17:54 +08:00 · 2026-03-25 10:48:32 +08:00 · 2026-03-25 10:17:10 +08:00
51 changed files with 396 additions and 295 deletions
--- a/frontend/src/app/agents/[agentsId]/page.jsx
+++ b/frontend/src/app/agents/[agentsId]/page.jsx
@@ -122,7 +122,7 @@ const ViewAgentPage = () => {
                    </div>
                  </>
                ) : (
-                  <div className={createAgentStyle.inputContainer}>
+                  <div className={createAgentStyle.agentInputContainer}>
                    <div className={createAgentStyle.labelContainer}>
                      <p>Agent Endpoint</p>
                      <p className={createAgentStyle.required}>*</p>
--- a/frontend/src/app/agents/[agentsId]/styles.module.css
+++ b/frontend/src/app/agents/[agentsId]/styles.module.css
@@ -50,7 +50,8 @@
  font-weight: 500;
  line-height: normal;
 }
-.inputContainer {
+.inputContainer,
+.agentInputContainer {
  display: flex;
  width: 500px;
  flex-direction: column;
@@ -126,9 +127,13 @@
  .lokiContainer {
    width: 100%;
  }
-  .inputContainer {
+  .inputContainer,
+  .agentInputContainer {
    width: 100%;
  }
+  .agentInputContainer {
+    padding-top: 8px;
+  }
  .headerTxt > p {
    font-size: 16px;
    font-weight: 400;
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -123,7 +123,7 @@ const AddAgentPage = () => {
                    </div>
                  </>
                ) : (
-                  <div className={createAgentStyle.inputContainer}>
+                  <div className={createAgentStyle.agentInputContainer}>
                    <div className={createAgentStyle.labelContainer}>
                      <p>Agent Endpoint</p>
                      <p className={createAgentStyle.required}>*</p>
--- a/frontend/src/app/agents/add/styles.module.css
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -44,7 +44,8 @@
  font-weight: 500;
  line-height: normal;
 }
-.inputContainer {
+.inputContainer,
+.agentInputContainer {
  display: flex;
  width: 500px;
  flex-direction: column;
@@ -59,7 +60,6 @@
 }
 .labelContainer > p {
  color: #d2d3e1;
-  color: color(display-p3 0.8235 0.8275 0.8784);
  font-family: Inter;
  font-size: 16px;
  font-style: normal;
@@ -120,9 +120,13 @@
  .lokiContainer {
    width: 100%;
  }
-  .inputContainer {
+  .inputContainer,
+  .agentInputContainer {
    width: 100%;
  }
+  .agentInputContainer {
+    padding-top: 8px;
+  }
  .headerTxt > p {
    font-size: 16px;
    font-weight: 400;
--- a/frontend/src/app/agents/card/Card.jsx
+++ b/frontend/src/app/agents/card/Card.jsx
@@ -4,7 +4,7 @@ import styles from "./styles.module.css";

 const Card = (props) => {
  return (
-    <div className={styles.cardContainer}>
+    <div className={styles.cardContainer} {...props}>
      <div className={styles.cardDetails}>
        <div className={styles.list}>
          <p>Name</p>
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -117,7 +117,13 @@ const AgentsPage = () => {
            <MobileSearchBar />
            {isMobile &&
              sampleData.map((data, key) => {
-                return <Card data={data} key={key} />;
+                return (
+                  <Card
+                    data={data}
+                    key={key}
+                    onClick={() => router.push(`/agents/${key}`)}
+                  />
+                );
              })}
          </div>

--- a/frontend/src/app/agents/styles.module.css
+++ b/frontend/src/app/agents/styles.module.css
@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -65,7 +65,7 @@
 .tableContainer > table > thead > tr > th {
  color: #85869b;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -113,7 +113,7 @@
  outline: none;
  color: white;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  outline: none;
  font-style: normal;
  font-weight: 400;
--- a/frontend/src/app/components/alerts/styles.module.css
+++ b/frontend/src/app/components/alerts/styles.module.css
@@ -75,7 +75,7 @@
 .headers > p {
  color: #fff;
  font-family: Inter;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 700;
  line-height: normal;
@@ -91,7 +91,7 @@
 .body > p {
  color: #fff;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
  line-height: 20px;
--- a/frontend/src/app/components/buttons/primarybutton/styles.module.css
+++ b/frontend/src/app/components/buttons/primarybutton/styles.module.css
@@ -8,7 +8,7 @@
  border: 0.5px solid #8187ff;
  background: rgba(83, 89, 242, 0.25);
  color: white;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/components/buttons/secondaryButton/styles.module.css
+++ b/frontend/src/app/components/buttons/secondaryButton/styles.module.css
@@ -9,7 +9,7 @@
  border: 0.5px solid #4e537e;
  cursor: pointer;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;

  font-style: normal;
  font-weight: 500;
--- a/frontend/src/app/components/customCheckbox/styles.module.css
+++ b/frontend/src/app/components/customCheckbox/styles.module.css
@@ -12,19 +12,18 @@
 }
 .checkbox {
  display: flex;
-  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
-    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
+  padding: 10px 12px;
  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
+  gap: 16px;
  flex: 1 0 0;
-  border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
+  border-radius: 8px;
  background: #1d1e2a;
 }
 .check {
  display: flex;
-  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
+  padding-top: 4px;
  align-items: flex-start;
-  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
+  gap: 10px;
 }
 .hiddenCheckbox {
  appearance: none;
@@ -37,29 +36,15 @@
  align-items: center;
  cursor: pointer;
  position: relative;
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Color, #e5e7eb);
+  border-radius: 4px;
+  border: 1px solid #e5e7eb;

-  background: var(--Basic-Forms-Checkbox-Check-Icon-Background-Bg-Color, #fff);
+  background: #fff;
 }
 .hiddenCheckbox:checked {
-  border-radius: var(--Basic-Forms-Checkbox-Check-Icon-Border-Radius, 4px);
-  border: 1px solid
-    var(--Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color, #0067fd);
-  border: 1px solid
-    var(
-      --Basic-Forms-Checkbox-Check-Icon-Border-Border-Active-Color,
-      color(display-p3 0.1451 0.3882 0.9216)
-    );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    #0067fd
-  );
-  background: var(
-    --Basic-Forms-Checkbox-Check-Icon-Background-Bg-Active-Color,
-    color(display-p3 0.1451 0.3882 0.9216)
-  );
+  border-radius: 4px;
+  border: 1px solid #0067fd;
+  background: #0067fd;
 }
 .hiddenCheckbox::after {
  content: "";
@@ -85,19 +70,19 @@
  align-self: stretch;
  color: #d2d3e1;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
-  line-height: 24px; /* 150% */
+  line-height: 24px;
  letter-spacing: 0.08px;
 }
 .secondaryTxt {
  align-self: stretch;
  color: #697281;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.75rem;
  font-style: normal;
  font-weight: 500;
-  line-height: 20px; /* 142.857% */
+  line-height: 20px;
  letter-spacing: 0.07px;
 }
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -12,7 +12,7 @@
  background-color: transparent;
  color: white;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  outline: none;
  font-style: normal;
  font-weight: 400;
@@ -27,7 +27,7 @@
 .input:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -38,7 +38,7 @@
 .input::placeholder {
  color: #85869b;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/components/icons/search.jsx
+++ b/frontend/src/app/components/icons/search.jsx
@@ -12,7 +12,7 @@ const SearchIcon = (props) => {
    >
      <path
        d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-        stroke="#858699"
+        stroke="currentColor" //858699
        strokeWidth={1.5}
        strokeLinecap="round"
        strokeLinejoin="round"
--- a/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
+++ b/frontend/src/app/components/mobileSearchBar/MobileSearchBar.jsx
@@ -1,12 +1,19 @@
-import React from "react";
+import React, { useState } from "react";
 import styles from "./styles.module.css";
 import SearchIcon from "../icons/search";
+
 const MobileSearchBar = (props) => {
+  const [open, setOpen] = useState(false);
  return (
-    <div className={styles.searchBarContainer}>
-      <input type="text" className={styles.searchBar} />
-      <SearchIcon className={styles.searchIcon} />
-    </div>
+    <form className={`${styles.searchBarContainer} ${open ? styles.open : ""}`}>
+      <input type="text" placeholder="Search" className={styles.searchBar} />
+      <div
+        className={styles.searchBtn}
+        onClick={() => setOpen((open) => !open)}
+      >
+        <SearchIcon />
+      </div>
+    </form>
  );
 };

--- a/frontend/src/app/components/mobileSearchBar/styles.module.css
+++ b/frontend/src/app/components/mobileSearchBar/styles.module.css
@@ -1,29 +1,68 @@
 .searchBarContainer {
  display: flex;
-
  align-items: center;
  gap: 10px;
  align-self: stretch;
  position: relative;
+  width: 100%;
+  border: 1px solid #31324a00;
+  transition: width 0.35s ease;
 }
-.searchBarContainer > input {
+.searchBar:focus-within {
+  background: #292a36;
+  border-radius: 6px;
+}
+
+.open {
+  display: flex;
+  align-items: center;
+  gap: 8px;
+  border-radius: 6px;
+  border: 1px solid #31324a;
+}
+
+.searchBar {
  width: 100%;
  padding: 11px 12px;
  padding-left: 40px;
  background-color: transparent;
  border: none;
+  opacity: 0;
+  transition: opacity 0.35s ease;
  outline: none;
-  background-color: transparent;
-  color: white;
+  color: #85869b;
+  text-align: start;
  font-family: Inter;
  font-size: 18px;
-  outline: none;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
+  letter-spacing: -0.09px;
  caret-color: #575bc7;
 }
-.searchIcon {
-  position: absolute;
-  left: 10;
+.searchBar::placeholder {
+  color: #85869b;
+  text-align: start;
+  font-family: Inter;
+  font-size: 18px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+  letter-spacing: -0.09px;
+}
+
+.open > .searchBar {
+  opacity: 1;
+  transition-delay: 0.1s;
+}
+.searchBtn {
+  position: absolute;
+  top: 50%;
+  left: 10px;
+  transform: translateY(-40%);
+  cursor: pointer;
+  color: #858699;
+}
+.searchBtn:hover {
+  color: #959aff;
 }
--- a/frontend/src/app/components/navbar/Navbar.jsx
+++ b/frontend/src/app/components/navbar/Navbar.jsx
@@ -16,6 +16,7 @@ import CredentialsIcon from "../icons/credentials";
 import AgentIcon from "../icons/agent";
 import DownloadIcon from "../icons/download";
 import useNavigations from "@/app/hooks/useNagivation";
+import { usePathname } from "next/navigation";

 const Navbar = () => {
  const [triggerDropDown, setTriggerDropDown] = useState(false);
@@ -27,11 +28,15 @@ const Navbar = () => {
    navToHome,
    navToOrganization,
    navToUsers,
-  } = useNavigations();
+  } = useNavigations(setTriggerDropDown);
+
+  const pathname = usePathname();

  const isMobile = useIsMobile();
  return (
-    <div className={styles.mainContainer}>
+    <div
+      className={`${styles.mainContainer} ${pathname.includes("/add") ? styles.onAdd : ""}`}
+    >
      {/* Mobile Hamburger Button */}
      <div className={styles.mobileHamburger}>
        <div className={styles.hamburgerMenu}>
--- a/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
+++ b/frontend/src/app/components/navbar/navleft/HeaderDropdown.jsx
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import CreateIcon from "../../icons/create";
 import styles from "./styles.module.css";
 import useIsMobile from "@/app/hooks/useIsMobile";
+import SearchIcon from "../../icons/search";

 const HeaderDropdown = ({
  setOpen,
@@ -30,7 +31,7 @@ const HeaderDropdown = ({
        </div>
        {/* Search */}
        <div className={styles.srchInputContainer}>
-          <div className={styles.srchInputGroup}>
+          <form className={styles.srchInputGroup}>
            <svg
              xmlns="http://www.w3.org/2000/svg"
              width="18"
@@ -67,7 +68,7 @@ const HeaderDropdown = ({
              id=""
              placeholder="Search"
            />
-          </div>
+          </form>
        </div>
      </div>

--- a/frontend/src/app/components/navbar/navleft/styles.module.css
+++ b/frontend/src/app/components/navbar/navleft/styles.module.css
@@ -255,7 +255,7 @@
    background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
    border-radius: 0;
    position: fixed;
-    top: 90px;
+    top: 80px;
    left: 0;
    width: 100%;
    margin-top: 0;
--- a/frontend/src/app/components/navbar/navright/styles.module.css
+++ b/frontend/src/app/components/navbar/navright/styles.module.css
@@ -169,7 +169,7 @@
    gap: 16px;
    background: linear-gradient(0deg, #2d3143 0%, #191a24 100%);
    position: fixed;
-    top: 90px;
+    top: 80px;
    left: 0;
    width: 100%;
    margin-top: 0;
--- a/frontend/src/app/components/navbar/styles.module.css
+++ b/frontend/src/app/components/navbar/styles.module.css
@@ -168,4 +168,7 @@
  .hamburgerMenu {
    display: flex;
  }
+  .onAdd {
+    display: none;
+  }
 }
--- a/frontend/src/app/components/searchbar/SearchBar.jsx
+++ b/frontend/src/app/components/searchbar/SearchBar.jsx
@@ -1,5 +1,6 @@
 import React, { useState } from "react";
 import searchBarStyle from "./styles.module.css";
+import SearchIcon from "../icons/search";

 const SearchBar = () => {
  const [open, setOpen] = useState(false);
@@ -19,21 +20,7 @@ const SearchBar = () => {
        className={searchBarStyle.searchBtn}
        onClick={() => setOpen((open) => !open)}
      >
-        <svg
-          xmlns="http://www.w3.org/2000/svg"
-          width={24}
-          height={24}
-          viewBox="0 0 24 24"
-          fill="none"
-        >
-          <path
-            d="M19.5527 19.5536L14.7064 14.7074M9.16822 16.7847C13.3741 16.7847 16.7837 13.3751 16.7837 9.1692C16.7837 4.96328 13.3741 1.55371 9.16822 1.55371C4.9623 1.55371 1.55273 4.96328 1.55273 9.1692C1.55273 13.3751 4.9623 16.7847 9.16822 16.7847Z"
-            stroke="currentColor"
-            strokeWidth={1.5}
-            strokeLinecap="round"
-            strokeLinejoin="round"
-          />
-        </svg>
+        <SearchIcon />
      </div>
    </form>
  );
--- a/frontend/src/app/components/searchbar/styles.module.css
+++ b/frontend/src/app/components/searchbar/styles.module.css
@@ -2,7 +2,7 @@
  display: flex;
  align-items: center;
  justify-content: space-between;
-  width: 40px; /*collapse width*/
+  width: 40px;
  border-radius: 6px;
  padding: 6px;
  height: auto;
@@ -10,18 +10,14 @@
  transition: width 0.35s ease;
  position: absolute;
 }
-
 .searchBarContainer:focus-within {
  background: #292a36;
-  background: color(display-p3 0.1608 0.1647 0.2078);
 }
-/* When the searchbar is opened */
 .open {
  width: 260px;
  padding: 6px 6px 6px 12px;
  justify-content: space-between;
  border: 1px solid #31324a;
-  border: 1px solid color(display-p3 0.1922 0.1961 0.2824);
  border-radius: 6px;
 }
 .input {
@@ -32,9 +28,8 @@
  opacity: 0; /*hide input kung collapse*/
  transition: opacity 0.35s ease;
  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -49,10 +44,9 @@

 .input::placeholder {
  color: #85869b;
-  color: color(display-p3 0.5216 0.5255 0.6);
  text-align: start;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/components/sidebar/styles.module.css
+++ b/frontend/src/app/components/sidebar/styles.module.css
@@ -64,18 +64,14 @@
 .logoDescription > p:nth-child(1) {
  color: #fff;
  color: color(display-p3 1 1 1);
-  font-size: 15px;
-  font-style: normal;
+  font-size: 0.94rem;
  font-weight: 500;
  line-height: 18px;
 }
 .logoDescription > p:nth-child(2) {
  color: #85869b;
  color: color(display-p3 0.5216 0.5255 0.6);
-  font-size: 10px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+  font-size: 0.63rem;
  letter-spacing: 0.05px;
  align-self: stretch;
 }
@@ -91,11 +87,7 @@
  align-items: center;
  cursor: pointer;
  gap: 16px;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+  font-size: 1rem;
  border-left: 2px solid #959aff00;
  align-self: stretch;
 }
@@ -112,11 +104,7 @@
  border-left: 2px solid #959aff;
  background: rgba(149, 154, 255, 0.05);
  color: #959aff;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
+  font-size: 1rem;
 }
 .active:hover path {
  stroke: #969af9;
@@ -153,11 +141,8 @@
 }
 .navFooterContainer > div > div > p {
  color: #d2d3e1;
-  font-family: Inter;
-  font-size: 16px;
-  font-style: normal;
+  font-size: 1rem;
  font-weight: 500;
-  line-height: normal;
 }
 .collapsed {
  width: 80px;
--- a/frontend/src/app/components/toast/success/styles.module.css
+++ b/frontend/src/app/components/toast/success/styles.module.css
@@ -9,7 +9,7 @@
  position: absolute;
  bottom: 25px;
  z-index: 11;
-  right: 20px;
+  right: 10px;
  animation-name: showToast;
  animation-duration: 0.15s;
  animation-timing-function: ease-in-out;
@@ -41,7 +41,7 @@
 .messageContainer p {
  color: #006929;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -47,8 +47,12 @@ const TopHeader = (props) => {
          editState={editState}
        />
      )}
-      <div className={styles.container}>
-        <div className={styles.title}>
+      <div
+        className={`${styles.container} ${pathName.includes("/add") ? styles.column : ""}`}
+      >
+        <div
+          className={`${styles.title} ${pathName.includes("/add") ? styles.fullWidth : ""}`}
+        >
          {props.requiredButtons.includes("back") && (
            <div onClick={() => router.back()}>
              <BackIcon />
@@ -56,7 +60,9 @@ const TopHeader = (props) => {
          )}
          <p>{props.topbarTitle}</p>
        </div>
-        <div className={styles.actionBar}>
+        <div
+          className={`${styles.actionBar}  ${pathName.includes("/add") ? styles.fullWidth : ""}`}
+        >
          {props?.requiredButtons.includes("search") && (
            <div className={styles.searchBarContainer}>
              {!isMobile && <SearchBar />}
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -3,6 +3,7 @@
  padding: 24px;
  justify-content: space-between;
  align-items: center;
+
  align-self: stretch;
  background: #21232f;
  transition: all 0.15s;
@@ -46,6 +47,7 @@
  display: flex;
  justify-content: flex-end;
  align-items: center;
+
  gap: 5px;
 }
 .searchBarContainer {
@@ -171,7 +173,19 @@
 }
@media (max-width: 768px) {
  .container {
-    background: #21232f00;
+    background: linear-gradient(180deg, #1c1d2b 0%, #191a24 100%);
+
    padding: 16px;
  }
+  .column {
+    flex-direction: column;
+    gap: 10px;
+  }
+  .fullWidth {
+    width: 100%;
+    justify-content: flex-start;
+  }
+  .fullWidth > button {
+    width: 100%;
+  }
 }
--- a/frontend/src/app/credentials/card/Card.jsx
+++ b/frontend/src/app/credentials/card/Card.jsx
@@ -12,7 +12,7 @@ const Card = (props) => {
        </div>
        <div className={styles.list}>
          <p>Organization ID</p>
-          <p>{props?.data?.organizationId}</p>
+          <p>{props?.data?.organizationID}</p>
        </div>
      </div>
      <div className={styles.cardAction}>
--- a/frontend/src/app/credentials/styles.module.css
+++ b/frontend/src/app/credentials/styles.module.css
@@ -31,7 +31,7 @@
 .tableContainer > table > tbody > tr > td {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -47,7 +47,7 @@
 .tableContainer > table > thead > tr > th {
  color: #85869b;
  font-family: Inter;
-  font-size: 13px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/globals.css
+++ b/frontend/src/app/globals.css
@@ -16,7 +16,6 @@ html,
 body {
  max-width: 100vw;
  overflow-x: hidden;
-  font-size: 16px;
 }

 body {
--- a/frontend/src/app/hooks/useNagivation.jsx
+++ b/frontend/src/app/hooks/useNagivation.jsx
@@ -1,36 +1,22 @@
 import { useRouter } from "next/navigation";
-const useNavigations = () => {
+
+export default function useNavigations(setTriggerDropDown) {
  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");
+
+  const handleNav = (path) => {
+    if (setTriggerDropDown) {
+      setTriggerDropDown(false);
+    }
+    router.push(path);
  };

  return {
-    navToHome,
-    navToAgents,
-    navToCredentials,
-    navToOrganization,
-    navToProject,
-    navToRoles,
-    navToUsers,
+    navToHome: () => handleNav("/home"),
+    navToAgents: () => handleNav("/agents"),
+    navToCredentials: () => handleNav("/credentials"),
+    navToProject: () => handleNav("/projects"),
+    navToRoles: () => handleNav("/roles"),
+    navToOrganization: () => handleNav("/organization"),
+    navToUsers: () => handleNav("/users"),
  };
-};
-export default useNavigations;
+}
--- a/frontend/src/app/organization/add/styles.module.css
+++ b/frontend/src/app/organization/add/styles.module.css
@@ -3,7 +3,8 @@
  flex-direction: column;
  align-items: center;
  gap: 48px;
-  flex: 1 0 0;
+
+  height: calc(100vh - 170px);
  align-self: stretch;
 }
 .upperToolTips {
@@ -24,7 +25,7 @@
  color: #191a24;
  text-align: center;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -107,7 +108,7 @@
 .labels > p {
  color: #d2d3e1;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -115,7 +116,7 @@
 .labels > p span {
  color: #85869b;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 300;
  line-height: normal;
@@ -136,7 +137,7 @@
 .inputLabel > p {
  color: #d2d3e1;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -164,7 +165,7 @@
 .prompts > p {
  color: #d49e3d;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/organization/card/styles.module.css
+++ b/frontend/src/app/organization/card/styles.module.css
@@ -23,7 +23,7 @@
 .list p {
  color: #85869b;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -32,7 +32,7 @@
 .list p:nth-child(2) {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-weight: 500;
 }
 .cardAction {
--- 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: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -46,7 +46,7 @@
 .tableContainer > table > thead > tr > th {
  color: #85869b;
  font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/add/styles.module.css
+++ b/frontend/src/app/projects/add/styles.module.css
@@ -34,7 +34,7 @@
  color: #d2d3e1;
  color: color(display-p3 0.8235 0.8275 0.8784);
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -42,7 +42,7 @@
 .label > p span {
  color: #cfb000;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 600;
  line-height: normal;
@@ -64,7 +64,7 @@
 .prompts > p {
  color: #d49e3d;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/project-card/styles.module.css
+++ b/frontend/src/app/projects/project-card/styles.module.css
@@ -24,7 +24,7 @@
 .list p {
  color: #85869b;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -33,7 +33,7 @@
 .list p:nth-child(2) {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-weight: 500;
 }
 .cardAction {
--- a/frontend/src/app/projects/styles.module.css
+++ b/frontend/src/app/projects/styles.module.css
@@ -36,7 +36,7 @@
 .tableContainer > table > tbody > tr > td {
  color: #eeeffd;
  font-family: Inter;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  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: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -68,7 +68,7 @@
  color: #50d85f;
  font-family: Inter;

-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -77,7 +77,7 @@
  color: #85869b;
  font-family: Inter;

-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/view/AddServicesModal/styles.module.css
+++ b/frontend/src/app/projects/view/AddServicesModal/styles.module.css
@@ -52,7 +52,7 @@
 }
 .header > div > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -64,7 +64,7 @@
  gap: 4px;
  align-self: stretch;
  color: #85869b;
-  font-size: 14px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -122,7 +122,7 @@
 }
 .listDetails > p {
  color: #85869b;
-  font-size: 13px;
+  font-size: 0.83rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -135,7 +135,7 @@
 }
 .listDetails > div > p {
  color: #d2d3e1;
-  font-size: 18px;
+  font-size: 1.2rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -153,7 +153,7 @@
 }
 .listDetails > div > div > p {
  color: #d2d3e1;
-  font-size: 14px;
+  font-size: 0.85rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/LogsModal/styles.module.css
@@ -62,7 +62,7 @@
  align-items: center;
  gap: 10px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -84,7 +84,7 @@
    "liga" off,
    "clig" off;
  font-family: Inter;
-  font-size: 12px;
+  font-size: 0.7rem;
  font-style: normal;
  font-weight: 500;
  line-height: 22px; /* 183.333% */
--- a/frontend/src/app/projects/view/[servicesId]/settings.jsx
+++ b/frontend/src/app/projects/view/[servicesId]/settings.jsx
@@ -1,6 +1,7 @@
 "use client";
 import React, { useState } from "react";
 import variableStyles from "./variableStyles.module.css";
+import DeleteIcon from "@/app/components/icons/delete";
 const Settings = ({
  setTriggerAddVariable,
  setTriggerAddVolume,
@@ -8,7 +9,29 @@ const Settings = ({
  ...props
 }) => {
  const [triggerVariableDropDown, setTriggerVariableDropDown] = useState(false);
-
+  const sampleData = [
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+    { id: 1, key: "REQUEST_SERVICE_GRPC", value: "request-service:50053" },
+    {
+      id: 2,
+      key: "DatabaseSettings:ConnectionString",
+      value:
+        "mongodb://databaseAdmin:d2OIxck4DHZgOJNuk1A@129.212.210.84:27017/?authSource=admin",
+    },
+  ];
  return (
    <div {...props}>
      <div className={variableStyles.variablesHeader}>
@@ -111,16 +134,19 @@ const Settings = ({
                </div>
              </div>
              <div className={variableStyles.variableList}>
-                <div className={variableStyles.emptyVariableList}>
+                {/*  <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> */}
+                {sampleData.map((data, key) => {
+                  return (
+                    <div className={variableStyles.variable}>
+                      <p>{data.key}</p>
+                      <p>{data.value}</p>
+                    </div>
+                  );
+                })}
              </div>
            </div>
          </div>
--- a/frontend/src/app/projects/view/[servicesId]/styles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/styles.module.css
@@ -41,7 +41,7 @@
  gap: 5px;
  color: #85869b;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;

  font-weight: 400;
 }
@@ -90,7 +90,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -98,6 +98,9 @@
  letter-spacing: 0.16px;
  outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
  border-radius: 6px;
  border: 1px solid #959aff;
@@ -106,7 +109,7 @@
 .textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -128,7 +131,7 @@
 }
 .projectDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -176,7 +179,7 @@
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -199,7 +202,7 @@
  border: 1px dashed #5980f1;
  color: #5980f1;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -250,7 +253,7 @@

 .additionalDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -287,7 +290,7 @@
 }
 .additionalDetailsFields p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -321,4 +324,10 @@
  .resourceFields .inputGroup div {
    width: 100%;
  }
+  .projectDetailsHeader {
+    display: none;
+  }
+  .fieldsContainerCreateNew {
+    padding-top: 0;
+  }
 }
--- a/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
+++ b/frontend/src/app/projects/view/[servicesId]/variableStyles.module.css
@@ -35,7 +35,7 @@
 .searchInputGroup input {
  color: white;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -105,7 +105,7 @@
  border-radius: 4px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -120,7 +120,7 @@
  gap: 12px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -151,26 +151,7 @@
  border-radius: 4px;
  background: #1d1e2a;
 }
-.variable {
-  display: flex;
-  padding: 8px 0;
-  align-items: center;
-  align-self: stretch;
-  border-bottom: 0.5px solid #2e3042;
-  width: 100%;
-}
-.variable p {
-  display: flex;
-  align-items: center;
-  flex: 1 0 0;
-  align-self: stretch;
-  color: #d2d3e1;
-  font-size: 15px;
-  font-style: normal;
-  font-weight: 400;
-  line-height: normal;
-  letter-spacing: 0.15px;
-}
+
 .environmentVariablesContainer {
  display: flex;
  min-height: 200px;
@@ -195,23 +176,25 @@
  flex: 1 0 0;
  color: #fff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
 }
 .envVariablesHeader {
  display: flex;
-  flex-direction: column;
+  padding: 12px 24px;
  align-items: flex-start;
+  width: 100%;
  align-self: stretch;
+  flex-direction: column;
+  border-bottom: 1px solid #2c2e3f;
 }
 .envVariablesHeader > div {
  display: flex;
-  padding: 12px 16px;
+
  align-items: flex-start;
  align-self: stretch;
-  border-bottom: 1px solid #2c2e3f;
 }
 .envVariablesHeader > div p {
  display: flex;
@@ -219,23 +202,50 @@
  flex: 1 0 0;
  color: #85869b;
  font-family: Inter;
-  font-size: 15px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
 }
 .variableList {
  display: flex;
-  padding: 0 16px 16px 16px;
+
+  padding: 24px 24px 0 24px;
+
+  padding-bottom: 24px;
  flex-direction: column;
-  align-items: center;
+  align-items: flex-start;
+  gap: 10px;
+  width: 100%;
+  flex: 1 0 0;
+}
+.variable {
+  display: flex;
+  align-items: flex-start;
  align-self: stretch;
+  justify-content: space-between;
+  gap: 5px;
+  width: 100%;
+}
+.variable p {
+  display: flex;
+  align-items: start;
+
+  flex: 1 0 0;
+  align-self: stretch;
+  overflow-wrap: anywhere;
+  color: #d2d3e1;
+  font-size: 0.9rem;
+  font-weight: 400;
+
+  letter-spacing: 0.15px;
 }
 .emptyVariableList {
  display: flex;
  padding: 24px 16px 0 16px;
  flex-direction: column;
  align-items: flex-start;
+  width: 100%;
  gap: 10px;
  flex: 1 0 0;
 }
@@ -243,6 +253,7 @@
  display: flex;
  justify-content: center;
  align-items: center;
+
  align-self: stretch;
 }
 .emptyVariableList > div > div {
@@ -252,7 +263,7 @@
  flex: 1 0 0;
  color: #85869b;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/view/add-from-scratch/styles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/styles.module.css
@@ -41,7 +41,7 @@
  gap: 5px;
  color: #85869b;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;

  font-weight: 400;
 }
@@ -80,7 +80,7 @@
 }
 .projectDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -121,7 +121,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -129,6 +129,9 @@
  letter-spacing: 0.16px;
  outline: none;
 }
+.textarea::placeholder {
+  color: #85869b;
+}
 .textarea:focus {
  border-radius: 6px;
  border: 1px solid #959aff;
@@ -137,7 +140,7 @@
 .textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -184,7 +187,7 @@
 .fieldsCreateNew > div > div p,
 .resourceFields > div > div p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -207,7 +210,7 @@
  border: 1px dashed #5980f1;
  color: #5980f1;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -258,7 +261,7 @@

 .additionalDetailsHeader p {
  color: #d2d3e1;
-  font-size: 20px;
+  font-size: 1.25rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -295,7 +298,7 @@
 }
 .additionalDetailsFields p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -329,4 +332,10 @@
  .resourceFields .inputGroup div {
    width: 100%;
  }
+  .projectDetailsHeader {
+    display: none;
+  }
+  .fieldsContainerCreateNew {
+    padding-top: 0;
+  }
 }
--- a/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
+++ b/frontend/src/app/projects/view/add-from-scratch/variableStyles.module.css
@@ -35,7 +35,7 @@
 .searchInputGroup input {
  color: white;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -105,7 +105,7 @@
  border-radius: 4px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -120,7 +120,7 @@
  gap: 12px;
  color: #acb0ff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -165,7 +165,7 @@
  flex: 1 0 0;
  align-self: stretch;
  color: #d2d3e1;
-  font-size: 15px;
+  font-size: 0.9rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -195,7 +195,7 @@
  flex: 1 0 0;
  color: #fff;
  font-family: Inter;
-  font-size: 18px;
+  font-size: 1.18rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -219,7 +219,7 @@
  flex: 1 0 0;
  color: #85869b;
  font-family: Inter;
-  font-size: 15px;
+  font-size: 0.93rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -252,7 +252,7 @@
  flex: 1 0 0;
  color: #85869b;
  text-align: center;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
--- a/frontend/src/app/projects/view/page.jsx
+++ b/frontend/src/app/projects/view/page.jsx
@@ -111,34 +111,36 @@ const AddProject = () => {
                "services-drop-down",
              ]}
            />
-            {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(`${pathName}/${data.id}`)}
                  />
                ))}
-              </div>
-            ) : (
-              <div className={styles.tableContainer}>
-                <table className={styles.table}>
-                  <thead>
-                    <tr>
-                      <th>Name</th>
-                      <th>Version</th>
-                      <th>Health</th>
-                      <th>Status</th>
-                      <th width="10%">Image</th>
-                      <th>Ingress</th>
-                      <th>Port</th>
-                      <th>Actions</th>
-                    </tr>
-                  </thead>
-                  <tbody>
-                    {sampleData.map((services, index) => {
+            </div>
+
+            <div className={styles.tableContainer}>
+              <table className={styles.table}>
+                <thead>
+                  <tr>
+                    <th>Name</th>
+                    <th>Version</th>
+                    <th>Health</th>
+                    <th>Status</th>
+                    <th width="10%">Image</th>
+                    <th>Ingress</th>
+                    <th>Port</th>
+                    <th>Actions</th>
+                  </tr>
+                </thead>
+                <tbody>
+                  {!isMobile &&
+                    sampleData.map((services, index) => {
                      return (
                        <tr
                          key={index}
@@ -380,10 +382,9 @@ const AddProject = () => {
                        </tr>
                      );
                    })}
-                  </tbody>
-                </table>
-              </div>
-            )}
+                </tbody>
+              </table>
+            </div>
          </div>
        </div>
      </div>
--- a/frontend/src/app/projects/view/service-card/styles.module.css
+++ b/frontend/src/app/projects/view/service-card/styles.module.css
@@ -24,7 +24,7 @@
 .list > p {
  color: #85869b;
  font-family: Inter;
-  font-size: 14px;
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -34,7 +34,7 @@
 .list > p:nth-child(2) {
  color: #eeeffd;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-weight: 500;
 }
 .cardAction {
@@ -63,7 +63,7 @@
  background: rgba(22, 159, 49, 0.05);
  color: #179f31;
  font-family: Inter;
-  font-size: 12px;
+  font-size: 0.63rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -91,7 +91,7 @@
  gap: 4px;
  color: #179f31;
  font-family: Inter;
-  font-size: 10px;
+  font-size: 0.6rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/styles.module.css
+++ b/frontend/src/app/projects/view/styles.module.css
@@ -19,7 +19,7 @@
  color: #85869b;
  font-family: Inter;
  z-index: 3;
-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -41,7 +41,7 @@
  font-family: Inter;
  overflow-wrap: anywhere;

-  font-size: var(--table-font-size);
+  font-size: 0.8rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -78,7 +78,7 @@
  background: rgba(22, 159, 49, 0.05);
  color: #179f31;
  font-family: Inter;
-  font-size: 12px;
+  font-size: 0.65rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -106,7 +106,7 @@
  gap: 4px;
  color: #179f31;
  font-family: Inter;
-  font-size: 10px;
+  font-size: 0.65rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -188,7 +188,7 @@
  opacity: 1;
 }
 .cardContainer {
-  display: flex;
+  display: none;
  padding: 0 16px;
  padding-bottom: 50px;
  height: calc(100vh - 170px);
@@ -198,3 +198,11 @@
  align-self: stretch;
  overflow: auto;
 }
+@media (max-width: 768px) {
+  .cardContainer {
+    display: flex;
+  }
+  .tableContainer {
+    display: none;
+  }
+}
--- a/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddConfigMap/styles.module.css
@@ -47,7 +47,7 @@

 .header > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -83,7 +83,7 @@
  align-items: flex-start;
  gap: 5px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -147,7 +147,7 @@
 }
 .verticalInput p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -168,7 +168,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -184,7 +184,7 @@
 .verticalInput textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -207,7 +207,7 @@
  display: flex;
  align-items: flex-start;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
+++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/AddVariableModal.jsx
@@ -112,6 +112,14 @@ const AddVariableModal = (props) => {
                        </div>
                      </div>
                    </div>
+                    <div className={styles.verticalInput}>
+                      <div>
+                        <div>
+                          <p>Custom Port (Optional)</p>
+                        </div>
+                        <TextField placeHolder="Leave empty to use service’s default port" />
+                      </div>
+                    </div>
                  </>
                )}
              </div>
--- a/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddVariableModal/styles.module.css
@@ -46,7 +46,7 @@

 .header > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -82,7 +82,7 @@
  align-items: flex-start;
  gap: 5px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -106,6 +106,9 @@
  align-items: flex-start;
  gap: 16px;
  align-self: stretch;
+  max-height: 400px;
+  overflow-y: scroll;
+  padding: 0px 5px;
 }
 .horizontalInput {
  display: flex;
@@ -146,7 +149,7 @@
 }
 .verticalInput p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -167,7 +170,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -183,7 +186,7 @@
 .verticalInput textarea:focus::placeholder {
  color: #4b4f6d;
  font-family: Inter;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -197,8 +200,7 @@
  align-self: stretch;
 }
 .authenticationContainer > p {
-  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
+++ b/frontend/src/app/projects/view/variableModals/AddVolumes/styles.module.css
@@ -45,7 +45,7 @@

 .header > p {
  color: #d2d3e1;
-  font-size: 24px;
+  font-size: 1.5rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -81,7 +81,7 @@
  align-items: flex-start;
  gap: 5px;
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 500;
  line-height: normal;
@@ -145,7 +145,7 @@
 }
 .verticalInput p {
  color: #d2d3e1;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
@@ -166,7 +166,7 @@
  border: 1px solid #4b4f6d;
  resize: none;
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-family: inter;
  font-style: normal;
  font-weight: 400;
@@ -187,7 +187,7 @@
 }
 .authenticationContainer > p {
  color: #85869b;
-  font-size: 16px;
+  font-size: 1rem;
  font-style: normal;
  font-weight: 400;
  line-height: normal;
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -71,7 +71,7 @@ const AddRolePage = () => {
                      </div>
                      <div className={addRoleStyle.inputField}>
                        <TextField
-                          placeHolder="Enter role name"
+                          placeHolder="Enter name"
                          {...register("roleName", { required: true })}
                          hasError={!!errors.roleName}
                        />
Author	SHA1	Message	Date
benzbarquilla	a4675c843d	done searchbar but not final	2026-03-31 14:49:20 +08:00
benzbarquilla	02d53f69ad	few changes, mobile searchbar not done	2026-03-30 17:21:09 +08:00
Laux Dev	992d01ba9b	Final	2026-03-26 17:22:32 +08:00
benzbarquilla	9f0392c9c2	fixed	2026-03-26 15:17:54 +08:00
benzbarquilla	6e54a9468b	fixed padding	2026-03-25 10:48:32 +08:00
Laux Dev	18524971f8	fixed	2026-03-25 10:17:10 +08:00
Laux Dev	395de5ef88	Merge branch 'DEVELOPMENT' of https://gitea.internship.project-moonshot.com/Laux/Frontend-Internal-Developer-Platform into DEVELOPMENT	2026-03-25 10:16:40 +08:00
Laux Dev	2c9f2d612b	Refactor	2026-03-19 18:57:20 +08:00