diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx
new file mode 100644
index 0000000..072c370
--- /dev/null
+++ b/frontend/src/app/agents/[agentsId]/page.jsx
@@ -0,0 +1,105 @@
+"use client";
+import React, { useState } from "react";
+import TextField from "@/app/components/fields/textfield";
+import TopHeader from "@/app/components/topHeader/TopHeader";
+import TopToolTip from "@/app/components/topToolTip/TopToolTip";
+import globalStyle from "../../globalStyle.module.css";
+import createAgentStyle from "./styles.module.css";
+import Prompts from "@/app/components/prompts/Prompts";
+
+const Page = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = (e) => {
+    setIsChecked(e.target.checked);
+  };
+
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            topbarTitle="Update Agent"
+            state="add"
+          />
+          {/* Create agent Container */}
+          <div className={createAgentStyle.createAgentContainer}>
+            <TopToolTip />
+            <div className={createAgentStyle.inputMainContainer}>
+              {/* Header */}
+              <div className={createAgentStyle.headerContainer}>
+                <div className={createAgentStyle.headerTxt}>
+                  <p>Agent Details</p>
+                </div>
+              </div>
+              {/* Agent name input */}
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Agent Name</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="Enter agent name" />
+                <Prompts show={false} />
+              </div>
+              {/* Kubernetes API input */}
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Kubernetes API Proxy Name</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="Enter proxy name" />
+                <Prompts show={false} />
+              </div>
+              {/* Checkbox */}
+              <div className={createAgentStyle.checkboxMainContainer}>
+                <div className={createAgentStyle.checkboxContainer}>
+                  <div className={createAgentStyle.checkbox}>
+                    {/* Checkbox */}
+                    <div className={createAgentStyle.check}>
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        onChange={handleCheckboxChange}
+                        className={createAgentStyle.hiddenCheckbox}
+                      />
+                    </div>
+                    {/* List */}
+                    <div className={createAgentStyle.list}>
+                      <p className={createAgentStyle.placeholderTxt}>
+                        Use Tailscale VPN
+                      </p>
+                      <p className={createAgentStyle.secondaryTxt}>
+                        Enable Tailscale for secure private networking. When
+                        enabled, <br /> the endpoint will be automatically
+                        resolved from Tailscale.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+              {/* Agent endpoint */}
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Agent Endpoint</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="e.g., http://agent-01.example.com:8080" />
+                <Prompts show={false} />
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default Page;
diff --git a/frontend/src/app/agents/[agentsId]/styles.module.css b/frontend/src/app/agents/[agentsId]/styles.module.css
new file mode 100644
index 0000000..61b9327
--- /dev/null
+++ b/frontend/src/app/agents/[agentsId]/styles.module.css
@@ -0,0 +1,181 @@
+.createAgentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.inputMainContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+  height: calc(100vh - 260px);
+  position: relative;
+  overflow: auto;
+  scrollbar-width: none;
+}
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.headerContainer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+}
+.headerTxt > p {
+  width: 163px;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.inputContainer {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.labelContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.labelContainer > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.labelContainer > .required {
+  color: #cfb000;
+  font-weight: 600;
+}
+
+.checkboxMainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.checkbox {
+  display: flex;
+  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
+    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
+  align-items: flex-start;
+  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
+  flex: 1 0 0;
+  border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
+  background: #1d1e2a;
+  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+.check {
+  display: flex;
+  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
+  align-items: flex-start;
+  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
+}
+.hiddenCheckbox {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  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)
+    );
+  cursor: pointer;
+  position: relative;
+}
+.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)
+  );
+}
+.hiddenCheckbox::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0;
+}
+.hiddenCheckbox:checked::after {
+  opacity: 1;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+.placeholderTxt {
+  align-self: stretch;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.08px;
+}
+.secondaryTxt {
+  align-self: stretch;
+  color: #697281;
+  color: color(display-p3 0.4196 0.4471 0.502);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+  letter-spacing: 0.07px;
+}
diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
index ad14ad6..55c0a0a 100644
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -1,12 +1,19 @@
-import React from "react";
+"use client";
+import React, { useState } from "react";
 import TextField from "@/app/components/fields/textfield";
-// import Prompts from "@/app/components/prompts/Prompts";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import TopToolTip from "@/app/components/topToolTip/TopToolTip";
 import globalStyle from "../../globalStyle.module.css";
 import createAgentStyle from "./styles.module.css";
+import Prompts from "@/app/components/prompts/Prompts";
+
+const Page = () => {
+  const [isChecked, setIsChecked] = useState(false);
+
+  const handleCheckboxChange = (e) => {
+    setIsChecked(e.target.checked);
+  };
 
-const page = () => {
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -17,20 +24,76 @@ const page = () => {
             topbarTitle="Create New Agent"
             state="add"
           />
-          {/* Create Crediantial Container */}
+          {/* Create agent Container */}
           <div className={createAgentStyle.createAgentContainer}>
             <TopToolTip />
-            <div className={createAgentStyle.inputContainer}>
+            <div className={createAgentStyle.inputMainContainer}>
               {/* Header */}
-              <div></div>
+              <div className={createAgentStyle.headerContainer}>
+                <div className={createAgentStyle.headerTxt}>
+                  <p>Agent Details</p>
+                </div>
+              </div>
               {/* Agent name input */}
-              <div></div>
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Agent Name</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="Enter agent name" />
+                <Prompts show={false} />
+              </div>
               {/* Kubernetes API input */}
-              <div></div>
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Kubernetes API Proxy Name</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="Enter proxy name" />
+                <Prompts show={false} />
+              </div>
               {/* Checkbox */}
-              <div></div>
+              <div className={createAgentStyle.checkboxMainContainer}>
+                <div className={createAgentStyle.checkboxContainer}>
+                  <div className={createAgentStyle.checkbox}>
+                    {/* Checkbox */}
+                    <div className={createAgentStyle.check}>
+                      <input
+                        type="checkbox"
+                        checked={isChecked}
+                        onChange={handleCheckboxChange}
+                        className={createAgentStyle.hiddenCheckbox}
+                      />
+                    </div>
+                    {/* List */}
+                    <div className={createAgentStyle.list}>
+                      <p className={createAgentStyle.placeholderTxt}>
+                        Use Tailscale VPN
+                      </p>
+                      <p className={createAgentStyle.secondaryTxt}>
+                        Enable Tailscale for secure private networking. When
+                        enabled, <br /> the endpoint will be automatically
+                        resolved from Tailscale.
+                      </p>
+                    </div>
+                  </div>
+                </div>
+              </div>
               {/* Agent endpoint */}
-              <div></div>
+              <div className={createAgentStyle.inputContainer}>
+                {/* Label */}
+                <div className={createAgentStyle.labelContainer}>
+                  <p>Agent Endpoint</p>
+                  {/* <p className={createAgentStyle.required}>*</p> */}
+                </div>
+                {/* Input Field */}
+                <TextField placeHolder="e.g., http://agent-01.example.com:8080" />
+                <Prompts show={false} />
+              </div>
             </div>
           </div>
         </div>
@@ -39,4 +102,4 @@ const page = () => {
   );
 };
 
-export default page;
+export default Page;
diff --git a/frontend/src/app/agents/add/styles.module.css b/frontend/src/app/agents/add/styles.module.css
index 5ad0f62..b110389 100644
--- a/frontend/src/app/agents/add/styles.module.css
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -7,11 +7,176 @@
   align-self: stretch;
 }
 
-.inputContainer {
+.inputMainContainer {
   display: flex;
   padding: 24px;
   flex-direction: column;
   align-items: flex-start;
   gap: 24px;
   border-radius: 8px;
+  /* Remove ni kung mo ingon si sir grills */
+  height: calc(100vh - 260px);
+  position: relative;
+  overflow: auto;
+  scrollbar-width: none;
+}
+.headerContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 17px;
+  align-self: stretch;
+}
+.headerContainer > div {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 5px;
+  flex: 1 0 0;
+}
+.headerTxt > p {
+  width: 163px;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: normal;
+}
+.inputContainer {
+  display: flex;
+  width: 500px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 12px;
+}
+.labelContainer {
+  display: flex;
+  align-items: flex-start;
+  gap: 2px;
+  align-self: stretch;
+}
+.labelContainer > p {
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+.labelContainer > .required {
+  color: #cfb000;
+  font-weight: 600;
+}
+
+.checkboxMainContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.checkboxContainer {
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.checkbox {
+  display: flex;
+  padding: var(--Basic-Forms-Checkbox-Input-Sizing-Y-SM, 10px)
+    var(--Basic-Forms-Checkbox-Input-Sizing-X-SM, 12px);
+  align-items: flex-start;
+  gap: var(--Basic-Forms-Checkbox-Gap-Between, 16px);
+  flex: 1 0 0;
+  border-radius: var(--Basic-Forms-Checkbox-Border-Radius, 8px);
+  background: #1d1e2a;
+  background: color(display-p3 0.1137 0.1176 0.1608);
+}
+.check {
+  display: flex;
+  padding-top: var(--Basic-Forms-Checkbox-Inline-Y, 4px);
+  align-items: flex-start;
+  gap: var(--Basic-Forms-Checkbox-Inline-Gap-Between, 10px);
+}
+.hiddenCheckbox {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 16px;
+  height: 16px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  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)
+    );
+  cursor: pointer;
+  position: relative;
+}
+.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)
+  );
+}
+.hiddenCheckbox::after {
+  content: "";
+  position: absolute;
+  inset: 0;
+  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='11' height='8' viewBox='0 0 11 8' fill='none'%3E%3Cpath d='M9.83333 0.5L3.41667 6.91667L0.5 4' stroke='white' style='stroke:white;stroke-opacity:1;' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
+  background-repeat: no-repeat;
+  background-position: center;
+  opacity: 0;
+}
+.hiddenCheckbox:checked::after {
+  opacity: 1;
+}
+
+.list {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 4px;
+  flex: 1 0 0;
+}
+.placeholderTxt {
+  align-self: stretch;
+  color: #d2d3e1;
+  color: color(display-p3 0.8235 0.8275 0.8784);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 24px; /* 150% */
+  letter-spacing: 0.08px;
+}
+.secondaryTxt {
+  align-self: stretch;
+  color: #697281;
+  color: color(display-p3 0.4196 0.4471 0.502);
+  font-family: Inter;
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 500;
+  line-height: 20px; /* 142.857% */
+  letter-spacing: 0.07px;
 }
diff --git a/frontend/src/app/agents/page.jsx b/frontend/src/app/agents/page.jsx
index 8b5097c..7ff6eb7 100644
--- a/frontend/src/app/agents/page.jsx
+++ b/frontend/src/app/agents/page.jsx
@@ -1,8 +1,14 @@
+"use client";
+
 import React from "react";
 import styles from "./styles.module.css";
 import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
+import { useRouter } from "next/navigation";
+
 const AgentsPage = () => {
+  const router = useRouter();
+
   const sampleData = [
     {
       name: "DOKS OneCB Dev",
@@ -111,7 +117,10 @@ const AgentsPage = () => {
               <tbody>
                 {sampleData.map((org, index) => {
                   return (
-                    <tr key={index}>
+                    <tr
+                      key={index}
+                      onClick={() => router.push(`/agents/${org.name}`)}
+                    >
                       <td>{org.name}</td>
                       <td>{org.endPoint}</td>
                       <td>
diff --git a/frontend/src/app/components/fields/styles.module.css b/frontend/src/app/components/fields/styles.module.css
index 1fd8258..3286a49 100644
--- a/frontend/src/app/components/fields/styles.module.css
+++ b/frontend/src/app/components/fields/styles.module.css
@@ -1,6 +1,6 @@
 .input {
   display: flex;
-  padding: 12px;
+  padding: 12px 16px;
   flex-direction: column;
   justify-content: center;
   align-items: flex-start;
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index 08e7a7f..e02e17c 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -47,7 +47,7 @@ const Page = () => {
                     <div className={editUserStyle.inputContainer}>
                       <div className={editUserStyle.label}>
                         <p>Role</p>
-                        <p className={editUserStyle.required}>*</p>
+                        {/* <p className={editUserStyle.required}>*</p> */}
                       </div>
                       <div className={editUserStyle.inputField}>
                         <select