From 3eb0ee06fbd945bc801a9fd53b686baccdfb075f Mon Sep 17 00:00:00 2001
From: Laux Dev <2201104208@student.buksu.edu.ph>
Date: Tue, 3 Mar 2026 09:53:57 +0800
Subject: [PATCH] Fixed top header to more dynamic

---
 frontend/src/app/agents/[agentsId]/page.jsx   |   1 +
 frontend/src/app/agents/add/page.jsx          |   1 +
 frontend/src/app/agents/page.jsx              |   6 +-
 .../buttons/primarybutton/PrimaryButton.jsx   |   4 +-
 .../buttons/primarybutton/styles.module.css   |   8 +-
 frontend/src/app/components/icons/edit.jsx    |  33 ++++++
 .../app/components/icons/outlineDownload.jsx  |  26 +++++
 frontend/src/app/components/icons/restart.jsx |  26 +++++
 frontend/src/app/components/icons/update.jsx  |  35 ++++++
 .../app/components/topHeader/TopHeader.jsx    | 100 +++++++++++++-----
 .../components/topHeader/styles.module.css    |   4 +-
 frontend/src/app/credentials/add/page.jsx     |   1 +
 frontend/src/app/credentials/page.jsx         |   6 +-
 frontend/src/app/organization/page.jsx        |   6 +-
 frontend/src/app/projects/page.jsx            |   6 +-
 .../app/projects/view/[servicesId]/page.jsx   |   1 +
 .../projects/view/add-from-scratch/page.jsx   |   1 +
 frontend/src/app/projects/view/page.jsx       |   7 ++
 frontend/src/app/roles/[rolesId]/page.jsx     |   7 +-
 frontend/src/app/roles/add/page.jsx           |   1 +
 frontend/src/app/roles/page.jsx               |   6 +-
 frontend/src/app/users/[usersId]/page.jsx     |   7 +-
 frontend/src/app/users/add/page.jsx           |   1 +
 frontend/src/app/users/page.jsx               |   7 +-
 24 files changed, 260 insertions(+), 41 deletions(-)
 create mode 100644 frontend/src/app/components/icons/edit.jsx
 create mode 100644 frontend/src/app/components/icons/outlineDownload.jsx
 create mode 100644 frontend/src/app/components/icons/restart.jsx
 create mode 100644 frontend/src/app/components/icons/update.jsx

diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx
index 072c370..f930854 100644
--- a/frontend/src/app/agents/[agentsId]/page.jsx
+++ b/frontend/src/app/agents/[agentsId]/page.jsx
@@ -23,6 +23,7 @@ const Page = () => {
             cancelButtonText="Cancel"
             topbarTitle="Update Agent"
             state="add"
+            requiredButtons={["update", "title"]}
           />
           {/* Create agent Container */}
           <div className={createAgentStyle.createAgentContainer}>
diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
index 55c0a0a..2e181be 100644
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -23,6 +23,7 @@ const Page = () => {
             cancelButtonText="Cancel"
             topbarTitle="Create New Agent"
             state="add"
+            requiredButtons={["title", "save"]}
           />
           {/* Create agent Container */}
           <div className={createAgentStyle.createAgentContainer}>
diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx
index 7ff6eb7..f27f0bd 100644
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -99,7 +99,11 @@ const AgentsPage = () => {
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add Agents" topbarTitle="Agents" />
+          <TopHeader
+            buttonText="Add Agents"
+            topbarTitle="Agents"
+            requiredButtons={["title", "add", "search"]}
+          />
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead>
diff --git a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
index 25e077b..4aa1e3e 100644
--- a/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
+++ b/frontend/src/app/components/buttons/primarybutton/PrimaryButton.jsx
@@ -4,8 +4,8 @@ import AddIcon from "../../icons/add";
 const PrimaryButton = (props) => {
   return (
     <button className={styles.button} {...props}>
-      <AddIcon width={20} height={20} />
-      Add
+      {props?.icon}
+      {props.text}
     </button>
   );
 };
diff --git a/frontend/src/app/components/buttons/primarybutton/styles.module.css b/frontend/src/app/components/buttons/primarybutton/styles.module.css
index 6285de4..6f004fc 100644
--- a/frontend/src/app/components/buttons/primarybutton/styles.module.css
+++ b/frontend/src/app/components/buttons/primarybutton/styles.module.css
@@ -1,14 +1,14 @@
 .button {
   display: flex;
-  padding: 8px 24px;
+  padding: 7px 15px;
   justify-content: center;
   align-items: center;
-  gap: 8px;
-  font-family: inter;
+  gap: 10px;
+  border-radius: 6px;
   border-radius: 6px;
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
-  color: #fff;
+  color: white;
   font-size: 16px;
   font-style: normal;
   font-weight: 500;
diff --git a/frontend/src/app/components/icons/edit.jsx b/frontend/src/app/components/icons/edit.jsx
new file mode 100644
index 0000000..80b7d78
--- /dev/null
+++ b/frontend/src/app/components/icons/edit.jsx
@@ -0,0 +1,33 @@
+const EditIcon = ({ width = 20, height = 20, color = "white", ...props }) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M5.83398 5.83301H5.00065C4.55862 5.83301 4.1347 6.0086 3.82214 6.32116C3.50958 6.63372 3.33398 7.05765 3.33398 7.49967V14.9997C3.33398 15.4417 3.50958 15.8656 3.82214 16.1782C4.1347 16.4907 4.55862 16.6663 5.00065 16.6663H12.5007C12.9427 16.6663 13.3666 16.4907 13.6792 16.1782C13.9917 15.8656 14.1673 15.4417 14.1673 14.9997V14.1663"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M16.9875 5.48759C17.3157 5.15938 17.5001 4.71424 17.5001 4.25009C17.5001 3.78594 17.3157 3.34079 16.9875 3.01259C16.6593 2.68438 16.2142 2.5 15.75 2.5C15.2858 2.5 14.8407 2.68438 14.5125 3.01259L7.5 10.0001V12.5001H10L16.9875 5.48759Z"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M13.334 4.16699L15.834 6.66699"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default EditIcon;
diff --git a/frontend/src/app/components/icons/outlineDownload.jsx b/frontend/src/app/components/icons/outlineDownload.jsx
new file mode 100644
index 0000000..e94d17b
--- /dev/null
+++ b/frontend/src/app/components/icons/outlineDownload.jsx
@@ -0,0 +1,26 @@
+const OutlineDownloadIcon = ({
+  width = 24,
+  height = 24,
+  color = "#D2D3E0",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M4.33398 16.7913V18.708C4.33398 19.2163 4.53592 19.7039 4.89536 20.0633C5.25481 20.4227 5.74232 20.6247 6.25065 20.6247H17.7507C18.259 20.6247 18.7465 20.4227 19.1059 20.0633C19.4654 19.7039 19.6673 19.2163 19.6673 18.708V16.7913M7.20898 11.0413L12.0007 15.833M12.0007 15.833L16.7923 11.0413M12.0007 15.833V4.33301"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default OutlineDownloadIcon;
diff --git a/frontend/src/app/components/icons/restart.jsx b/frontend/src/app/components/icons/restart.jsx
new file mode 100644
index 0000000..4972a4e
--- /dev/null
+++ b/frontend/src/app/components/icons/restart.jsx
@@ -0,0 +1,26 @@
+const RestartIcon = ({
+  width = 24,
+  height = 24,
+  color = "#D2D3E0",
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 24 24"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M19.6673 11.0417C19.4329 9.35521 18.6506 7.79259 17.4408 6.59452C16.2309 5.39645 14.6608 4.62938 12.9721 4.41149C11.2834 4.1936 9.56996 4.53697 8.09564 5.3887C6.62132 6.24043 5.46793 7.55328 4.81315 9.125M4.33398 5.29167V9.125H8.16732M4.33398 12.9583C4.56835 14.6448 5.35071 16.2074 6.56054 17.4055C7.77037 18.6036 9.34055 19.3706 11.0292 19.5885C12.7179 19.8064 14.4313 19.463 15.9057 18.6113C17.38 17.7596 18.5334 16.4467 19.1882 14.875M19.6673 18.7083V14.875H15.834"
+        stroke={color}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default RestartIcon;
diff --git a/frontend/src/app/components/icons/update.jsx b/frontend/src/app/components/icons/update.jsx
new file mode 100644
index 0000000..a52821c
--- /dev/null
+++ b/frontend/src/app/components/icons/update.jsx
@@ -0,0 +1,35 @@
+const UpdateIcon = ({
+  width = 20,
+  height = 20,
+  color = "white",
+  strokeWidth = 1.5,
+  ...props
+}) => {
+  return (
+    <svg
+      xmlns="http://www.w3.org/2000/svg"
+      width={width}
+      height={height}
+      viewBox="0 0 20 20"
+      fill="none"
+      {...props}
+    >
+      <path
+        d="M16.25 9.2188C16.0589 7.84397 15.4211 6.57009 14.4349 5.5934C13.4486 4.61671 12.1686 3.99139 10.7919 3.81376C9.4153 3.63613 8.01845 3.91605 6.81656 4.61039C5.61467 5.30474 4.67441 6.375 4.14062 7.6563M3.75 4.5313V7.6563H6.875"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+      <path
+        d="M3.75 10.7812C3.94106 12.1561 4.57885 13.43 5.56513 14.4066C6.5514 15.3833 7.83144 16.0087 9.20807 16.1863C10.5847 16.3639 11.9815 16.084 13.1834 15.3897C14.3853 14.6953 15.3256 13.6251 15.8594 12.3437M16.25 15.4687V12.3437H13.125"
+        stroke={color}
+        strokeWidth={strokeWidth}
+        strokeLinecap="round"
+        strokeLinejoin="round"
+      />
+    </svg>
+  );
+};
+
+export default UpdateIcon;
diff --git a/frontend/src/app/components/topHeader/TopHeader.jsx b/frontend/src/app/components/topHeader/TopHeader.jsx
index 1db9e0b..e098566 100644
--- a/frontend/src/app/components/topHeader/TopHeader.jsx
+++ b/frontend/src/app/components/topHeader/TopHeader.jsx
@@ -13,6 +13,12 @@ import RobotIcon from "../icons/robot";
 import KeyIcon from "../icons/key";
 import ManageEnvIcon from "../icons/manageEnv";
 import Alert from "../alerts/Alert";
+import DownloadIcon from "../icons/download";
+import OutlineDownloadIcon from "../icons/outlineDownload";
+import RestartIcon from "../icons/restart";
+import PrimaryButton from "../buttons/primarybutton/PrimaryButton";
+import EditIcon from "../icons/edit";
+import UpdateIcon from "../icons/update";
 
 const TopHeader = (props) => {
   const [triggerDropDownMenu, setTriggerDropDownMenu] = useState(false);
@@ -28,9 +34,7 @@ const TopHeader = (props) => {
       {triggerAlert && <Alert setTriggerAlert={setTriggerAlert} />}
       <div className={styles.container}>
         <div className={styles.title}>
-          {((pathName.includes("/view") && props.state === "view") ||
-            params.usersId ||
-            params.rolesId) && (
+          {props.requiredButtons.includes("back") && (
             <div onClick={() => router.back()}>
               <BackIcon />
             </div>
@@ -38,35 +42,39 @@ const TopHeader = (props) => {
           <p>{props.topbarTitle}</p>
         </div>
         <div className={styles.actionBar}>
-          {(pathName === "/projects/view" || !props.state) && (
+          {props.requiredButtons.includes("search") && (
             <div className={styles.searchBarContainer}>
               <SearchIcon />
             </div>
           )}
-          {pathName === "/credentials" ? (
+          {props.requiredButtons.includes("env") && (
             <div className={styles.mngEnvKeyButton}>
               <EnviromentIcon />
               <p>Manage Env. Key</p>
             </div>
-          ) : (
-            ""
           )}
-          {pathName === "/projects/view" && (
-            <div
-              className={styles.button}
+          {props.requiredButtons.includes("add-services") && (
+            <PrimaryButton
+              icon={<AddIcon />}
+              text={props.buttonText}
               onClick={() => props.trigger(!props.triggerState)}
-            >
-              <AddIcon />
-              <p>{props.buttonText}</p>
-            </div>
+            />
           )}
-          {!props.state && (
-            <div className={styles.button} onClick={handleNavigateToAdd}>
-              <AddIcon />
-              <p>{props.buttonText}</p>
-            </div>
+          {props.requiredButtons.includes("edit") && (
+            <PrimaryButton
+              icon={<EditIcon />}
+              text="Edit"
+              onClick={() => props.trigger(!props.triggerState)}
+            />
           )}
-          {props.state === "add" ? (
+          {props.requiredButtons.includes("add") && (
+            <PrimaryButton
+              icon={<AddIcon />}
+              text={props.buttonText}
+              onClick={handleNavigateToAdd}
+            />
+          )}
+          {props.requiredButtons.includes("save") && (
             <>
               <div
                 className={styles.button}
@@ -82,11 +90,22 @@ const TopHeader = (props) => {
                 <p>{props.cancelButtonText}</p>
               </div>
             </>
-          ) : (
-            ""
           )}
-          {/* Projects 3 dots menu */}
-          {pathName === "/projects/view" && (
+          {props.requiredButtons.includes("update") && (
+            <>
+              <PrimaryButton
+                icon={<UpdateIcon color="white" />}
+                text="Update"
+              />
+              <div
+                className={styles.cancelButton}
+                onClick={() => router.back()}
+              >
+                <p>{props.cancelButtonText}</p>
+              </div>
+            </>
+          )}
+          {props?.requiredButtons?.includes("services-drop-down") && (
             <div
               className={styles.menu}
               onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
@@ -124,6 +143,39 @@ const TopHeader = (props) => {
               )}
             </div>
           )}
+
+          {props.requiredButtons.includes("download") && (
+            <div
+              className={styles.menu}
+              onClick={() => setTriggerDropDownMenu(!triggerDropDownMenu)}
+            >
+              <div className={styles.dotMenu}>
+                <MenuIcon />
+              </div>
+              {triggerDropDownMenu && (
+                <div className={styles.dropDown}>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Compose</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <OutlineDownloadIcon />
+                      <p>Download Config</p>
+                    </div>
+                  </div>
+                  <div>
+                    <div>
+                      <RestartIcon />
+                      <p>Restart</p>
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          )}
         </div>
       </div>
     </>
diff --git a/frontend/src/app/components/topHeader/styles.module.css b/frontend/src/app/components/topHeader/styles.module.css
index ffdcd7b..07d0f2b 100644
--- a/frontend/src/app/components/topHeader/styles.module.css
+++ b/frontend/src/app/components/topHeader/styles.module.css
@@ -63,6 +63,7 @@
   border-radius: 6px;
   border: 0.5px solid #8187ff;
   background: rgba(83, 89, 242, 0.25);
+  color: white;
   cursor: pointer;
 }
 .button:hover {
@@ -126,7 +127,7 @@
 }
 .dotMenu {
   display: flex;
-  padding: 8px;
+  padding: 7px;
   align-items: center;
   gap: 12px;
   border-radius: 6px;
@@ -167,7 +168,6 @@
 .dropDown > div:hover {
   border-radius: 4px;
   background: #3c4159;
-  background: color(display-p3 0.2392 0.2549 0.3412);
   color: white;
 }
 .dropDown > div:hover p {
diff --git a/frontend/src/app/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx
index 4d76d97..1ac4d3b 100644
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -38,6 +38,7 @@ const Page = () => {
             cancelButtonText="Cancel"
             topbarTitle="Create Credential"
             state="add"
+            requiredButtons={["title", "save"]}
           />
           {/* Create Crediantial Container */}
           <div className={createCredStyle.createCredContainer}>
diff --git a/frontend/src/app/credentials/page.jsx b/frontend/src/app/credentials/page.jsx
index 15558e5..ab7bc33 100644
--- a/frontend/src/app/credentials/page.jsx
+++ b/frontend/src/app/credentials/page.jsx
@@ -60,7 +60,11 @@ const CredentialsPage = () => {
       <SuccessToast message="New Credential added successfully!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
+          <TopHeader
+            buttonText="Add Credentials"
+            topbarTitle="Credentials"
+            requiredButtons={["title", "add", "search", "env"]}
+          />
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead>
diff --git a/frontend/src/app/organization/page.jsx b/frontend/src/app/organization/page.jsx
index b5e3367..2affdad 100644
--- a/frontend/src/app/organization/page.jsx
+++ b/frontend/src/app/organization/page.jsx
@@ -58,7 +58,11 @@ const OrganizationPage = () => {
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add Organization" topbarTitle="Organization" />
+          <TopHeader
+            buttonText="Add Organization"
+            topbarTitle="Organization"
+            requiredButtons={["title", "add", "search"]}
+          />
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead>
diff --git a/frontend/src/app/projects/page.jsx b/frontend/src/app/projects/page.jsx
index 79484d3..f6fd662 100644
--- a/frontend/src/app/projects/page.jsx
+++ b/frontend/src/app/projects/page.jsx
@@ -171,7 +171,11 @@ const ProjectsPage = () => {
       <SuccessToast message="Project successfully added!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Create Project" topbarTitle="Project" />
+          <TopHeader
+            buttonText="Create Project"
+            topbarTitle="Project"
+            requiredButtons={["title", "add", "search"]}
+          />
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead>
diff --git a/frontend/src/app/projects/view/[servicesId]/page.jsx b/frontend/src/app/projects/view/[servicesId]/page.jsx
index 809b5ab..07f46d2 100644
--- a/frontend/src/app/projects/view/[servicesId]/page.jsx
+++ b/frontend/src/app/projects/view/[servicesId]/page.jsx
@@ -42,6 +42,7 @@ const AddServices = () => {
             cancelButtonText="Cancel"
             state="view"
             topbarTitle="View Services"
+            requiredButtons={["back", "title", "edit", "download"]}
           />
           <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 83355f2..ad9d51e 100644
--- a/frontend/src/app/projects/view/add-from-scratch/page.jsx
+++ b/frontend/src/app/projects/view/add-from-scratch/page.jsx
@@ -34,6 +34,7 @@ const AddServices = () => {
             cancelButtonText="Cancel"
             state="add"
             topbarTitle="Create New Services"
+            requiredButtons={["title", "save"]}
           />
           <div className={styles.contentContainer}>
             <div className={styles.fieldsContainerCreateNew}>
diff --git a/frontend/src/app/projects/view/page.jsx b/frontend/src/app/projects/view/page.jsx
index 871e0d8..2587121 100644
--- a/frontend/src/app/projects/view/page.jsx
+++ b/frontend/src/app/projects/view/page.jsx
@@ -99,6 +99,13 @@ const AddProject = () => {
               topbarTitle="Services"
               trigger={setTriggerAddServicesModal}
               triggerState={triggerAddServicesModal}
+              requiredButtons={[
+                "title",
+                "back",
+                "add-services",
+                "search",
+                "services-drop-down",
+              ]}
             />
             <div className={styles.tableContainer}>
               <table className={styles.table}>
diff --git a/frontend/src/app/roles/[rolesId]/page.jsx b/frontend/src/app/roles/[rolesId]/page.jsx
index 2ee9a55..892ef68 100644
--- a/frontend/src/app/roles/[rolesId]/page.jsx
+++ b/frontend/src/app/roles/[rolesId]/page.jsx
@@ -25,7 +25,12 @@ const page = () => {
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="" topbarTitle="View" state="view" />
+          <TopHeader
+            buttonText=""
+            topbarTitle="View"
+            state="view"
+            requiredButtons={["back", "title", "edit", "download"]}
+          />
           <div className={editRoleStyle.addRoleContainer}>
             {/* Input fields Container  */}
             <div className={editRoleStyle.inputFieldContainer}>
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx
index b6aaf95..27e5530 100644
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -14,6 +14,7 @@ const page = () => {
             cancelButtonText="Cancel"
             topbarTitle="Add Role"
             state="add"
+            requiredButtons={["title", "save"]}
           />
           <div className={addRoleStyle.addUserContainer}>
             {/* Input fields Container  */}
diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index 3a40686..6f40df1 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -49,7 +49,11 @@ const RolesPage = () => {
       <SuccessToast message="New Role added successfully!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add Role" topbarTitle="Roles" />
+          <TopHeader
+            buttonText="Add Role"
+            topbarTitle="Roles"
+            requiredButtons={["title", "add", "search"]}
+          />
           {/* Users Table */}
           <div className={styles.tableContainer}>
             <table className={styles.table}>
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index e02e17c..72f1a51 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -28,7 +28,12 @@ const Page = () => {
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="" topbarTitle="View" state="view" />
+          <TopHeader
+            buttonText=""
+            topbarTitle="View"
+            state="view"
+            requiredButtons={["back", "title", "edit", "download"]}
+          />
           <div className={editUserStyle.addUserContainer}>
             {/* Input fields Container  */}
             <div className={editUserStyle.inputFieldContainer}>
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index e3b27b6..9549814 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -14,6 +14,7 @@ const page = () => {
             cancelButtonText="Cancel"
             topbarTitle="Add User"
             state="add"
+            requiredButtons={["title", "save"]}
           />
           <div className={addUserStyle.addUserContainer}>
             {/* Input fields Container  */}
diff --git a/frontend/src/app/users/page.jsx b/frontend/src/app/users/page.jsx
index 1aa6756..a1ac40f 100644
--- a/frontend/src/app/users/page.jsx
+++ b/frontend/src/app/users/page.jsx
@@ -36,8 +36,11 @@ const UsersPage = () => {
       <SuccessToast message="New User added successfully" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
-          <TopHeader buttonText="Add User" topbarTitle="Users" />
-          {/* Users Table */}
+          <TopHeader
+            buttonText="Add User"
+            topbarTitle="Users"
+            requiredButtons={["title", "add", "search"]}
+          />
           <div className={styles.tableContainer}>
             <table className={styles.table}>
               <thead className={styles.tableHeader}>