diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
new file mode 100644
index 0000000..ad14ad6
--- /dev/null
+++ b/frontend/src/app/agents/add/page.jsx
@@ -0,0 +1,42 @@
+import React 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";
+
+const page = () => {
+  return (
+    <div className={globalStyle.section}>
+      <div className={globalStyle.mainContainer}>
+        <div className={globalStyle.container}>
+          <TopHeader
+            buttonText="Save"
+            cancelButtonText="Cancel"
+            topbarTitle="Create New Agent"
+            state="add"
+          />
+          {/* Create Crediantial Container */}
+          <div className={createAgentStyle.createAgentContainer}>
+            <TopToolTip />
+            <div className={createAgentStyle.inputContainer}>
+              {/* Header */}
+              <div></div>
+              {/* Agent name input */}
+              <div></div>
+              {/* Kubernetes API input */}
+              <div></div>
+              {/* Checkbox */}
+              <div></div>
+              {/* Agent endpoint */}
+              <div></div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+export default page;
diff --git a/frontend/src/app/agents/add/styles.module.css b/frontend/src/app/agents/add/styles.module.css
new file mode 100644
index 0000000..5ad0f62
--- /dev/null
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -0,0 +1,17 @@
+.createAgentContainer {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  gap: 48px;
+  flex: 1 0 0;
+  align-self: stretch;
+}
+
+.inputContainer {
+  display: flex;
+  padding: 24px;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 24px;
+  border-radius: 8px;
+}
diff --git a/frontend/src/app/credentials/add/page.jsx b/frontend/src/app/credentials/add/page.jsx
index 4aac044..4d76d97 100644
--- a/frontend/src/app/credentials/add/page.jsx
+++ b/frontend/src/app/credentials/add/page.jsx
@@ -47,7 +47,7 @@ const Page = () => {
               <div className={createCredStyle.projectName}>
                 <div className={createCredStyle.label}>
                   <p className={createCredStyle.labelTxt}>Project Name</p>
-                  <p className={createCredStyle.required}>*</p>
+                  {/* <p className={createCredStyle.required}>*</p> */}
                 </div>
                 {/* Content */}
                 <div className={createCredStyle.credInputField}>
diff --git a/frontend/src/app/credentials/add/styles.module.css b/frontend/src/app/credentials/add/styles.module.css
index 8ed202a..79d7ed5 100644
--- a/frontend/src/app/credentials/add/styles.module.css
+++ b/frontend/src/app/credentials/add/styles.module.css
@@ -50,6 +50,51 @@
   gap: 8px;
   align-self: stretch;
 }
+.credInputField > input {
+  display: flex;
+  height: 44px;
+  padding: 12px 16px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  background: none;
+  gap: 10px;
+  align-self: stretch;
+  border-radius: 6px;
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+}
+.credInputField > input:hover {
+  border: 1px solid #616583;
+  border: 1px solid color(display-p3 0.3843 0.3961 0.5057);
+  background: rgba(75, 79, 109, 0.05);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.05);
+}
+
+.credInputField input:focus {
+  outline: none;
+  border-radius: 6px;
+  border: 1px solid #959aff;
+  border: 1px solid color(display-p3 0.5892 0.6031 0.9766);
+  background: rgba(75, 79, 109, 0.25);
+  background: color(display-p3 0.298 0.3098 0.4196 / 0.25);
+  caret-color: #959aff;
+}
+.credInputField input:focus::placeholder {
+  color: #4b4f6d;
+  color: color(display-p3 0.298 0.3098 0.4196);
+}
+
+.placeholderTxt::placeholder {
+  color: #85869b;
+  color: color(display-p3 0.5216 0.5255 0.6);
+  font-family: Inter;
+  font-size: 16px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: normal;
+}
+
 .uploadFile {
   display: flex;
   flex-direction: column;
diff --git a/frontend/src/app/credentials/page.jsx b/frontend/src/app/credentials/page.jsx
index ed9e0de..15558e5 100644
--- a/frontend/src/app/credentials/page.jsx
+++ b/frontend/src/app/credentials/page.jsx
@@ -3,6 +3,7 @@ import TopHeader from "../components/topHeader/TopHeader";
 import globalStyle from "../globalStyle.module.css";
 import styles from "./styles.module.css";
 import DeleteIcon from "../components/icons/delete";
+import SuccessToast from "../components/toast/success/successToast";
 const CredentialsPage = () => {
   const sampleData = [
     {
@@ -56,6 +57,7 @@ const CredentialsPage = () => {
   ];
   return (
     <div className={globalStyle.section}>
+      <SuccessToast message="New Credential added successfully!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add Credentials" topbarTitle="Credentials" />
diff --git a/frontend/src/app/roles/[rolesId]/page.jsx b/frontend/src/app/roles/[rolesId]/page.jsx
index 2bd3801..2ee9a55 100644
--- a/frontend/src/app/roles/[rolesId]/page.jsx
+++ b/frontend/src/app/roles/[rolesId]/page.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import editRoleStyle from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
 
 const page = () => {
   const sampleData = [
@@ -47,13 +48,8 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={editRoleStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="organization-owner" //static
-                          className={editRoleStyle.placeholderTxt}
-                        />
+                        {/* Static */}
+                        <TextField placeHolder="organization-owner" />
                       </div>
                     </div>
                   </div>
@@ -66,13 +62,8 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={editRoleStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="67160a5ae69144ff19aafb86" //static
-                          className={editRoleStyle.placeholderTxt}
-                        />
+                        {/* Static */}
+                        <TextField placeHolder="67160a5ae69144ff19aafb86" />
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/app/roles/add/page.jsx b/frontend/src/app/roles/add/page.jsx
index 3b9fbc5..b6aaf95 100644
--- a/frontend/src/app/roles/add/page.jsx
+++ b/frontend/src/app/roles/add/page.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import addRoleStyle from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
 
 const page = () => {
   return (
@@ -36,13 +37,7 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addRoleStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="Enter name"
-                          className={addRoleStyle.placeholderTxt}
-                        />
+                        <TextField placeHolder="Enter name" />
                       </div>
                     </div>
                   </div>
@@ -55,13 +50,7 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addRoleStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="Enter organization ID"
-                          className={addRoleStyle.placeholderTxt}
-                        />
+                        <TextField placeHolder="Enter organization ID" />
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/app/roles/page.jsx b/frontend/src/app/roles/page.jsx
index e9c7c29..3a40686 100644
--- a/frontend/src/app/roles/page.jsx
+++ b/frontend/src/app/roles/page.jsx
@@ -7,6 +7,7 @@ import styles from "./styles.module.css";
 import { useRouter } from "next/navigation";
 import ViewIcon from "../components/icons/view";
 import DeleteIcon from "../components/icons/delete";
+import SuccessToast from "../components/toast/success/successToast";
 
 const RolesPage = () => {
   const router = useRouter();
@@ -45,6 +46,7 @@ const RolesPage = () => {
   ];
   return (
     <div className={globalStyle.section}>
+      <SuccessToast message="New Role added successfully!" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add Role" topbarTitle="Roles" />
diff --git a/frontend/src/app/users/[usersId]/page.jsx b/frontend/src/app/users/[usersId]/page.jsx
index c12c06d..08e7a7f 100644
--- a/frontend/src/app/users/[usersId]/page.jsx
+++ b/frontend/src/app/users/[usersId]/page.jsx
@@ -4,6 +4,7 @@ import globalStyle from "../../globalStyle.module.css";
 import editUserStyle from "./styles.module.css";
 import Prompts from "@/app/components/prompts/Prompts";
 import { useState } from "react";
+import TextField from "@/app/components/fields/textfield";
 
 const Page = () => {
   const sampleData = [
@@ -23,8 +24,6 @@ const Page = () => {
     // { permission: "service.update" },
   ];
 
-  const [showPrompt, setShowPrompt] = useState(false);
-
   return (
     <div className={globalStyle.section}>
       <div className={globalStyle.mainContainer}>
@@ -73,15 +72,11 @@ const Page = () => {
                       </div>
                       {/* Input field */}
                       <div className={editUserStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="nino.moonshot@gmail.com" //static
-                          className={editUserStyle.placeholderTxt}
+                        <TextField
+                          placeHolder="nino.moonshot@gmail.com" //static
                         />
                       </div>
-                      <Prompts show={showPrompt} />
+                      <Prompts show={false} />
                     </div>
                   </div>
                   {/* Full Name */}
@@ -94,15 +89,11 @@ const Page = () => {
                       </div>
                       {/* Input field */}
                       <div className={editUserStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="Nino Paul Cervantes" //static
-                          className={editUserStyle.placeholderTxt}
+                        <TextField
+                          placeHolder="Nino Paul Cervantes" //static
                         />
                       </div>
-                      <Prompts show={showPrompt} />
+                      <Prompts show={false} />
                     </div>
                   </div>
                 </form>
diff --git a/frontend/src/app/users/add/page.jsx b/frontend/src/app/users/add/page.jsx
index 4b641be..e3b27b6 100644
--- a/frontend/src/app/users/add/page.jsx
+++ b/frontend/src/app/users/add/page.jsx
@@ -2,6 +2,7 @@ import React from "react";
 import TopHeader from "@/app/components/topHeader/TopHeader";
 import globalStyle from "../../globalStyle.module.css";
 import addUserStyle from "./styles.module.css";
+import TextField from "@/app/components/fields/textfield";
 
 const page = () => {
   return (
@@ -55,13 +56,7 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addUserStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="Enter Email"
-                          className={addUserStyle.placeholderTxt}
-                        />
+                        <TextField placeHolder="Enter email" />
                       </div>
                     </div>
                   </div>
@@ -74,13 +69,7 @@ const page = () => {
                       </div>
                       {/* Input field */}
                       <div className={addUserStyle.inputField}>
-                        <input
-                          type="text"
-                          name=""
-                          id=""
-                          placeholder="Enter full name"
-                          className={addUserStyle.placeholderTxt}
-                        />
+                        <TextField placeHolder="Enter full name" />
                       </div>
                     </div>
                   </div>
diff --git a/frontend/src/app/users/page.jsx b/frontend/src/app/users/page.jsx
index 39762b9..1aa6756 100644
--- a/frontend/src/app/users/page.jsx
+++ b/frontend/src/app/users/page.jsx
@@ -6,6 +6,7 @@ import styles from "./styles.module.css";
 import { useRouter } from "next/navigation";
 import ViewIcon from "../components/icons/view";
 import DeleteIcon from "../components/icons/delete";
+import SuccessToast from "../components/toast/success/successToast";
 
 const UsersPage = () => {
   const router = useRouter();
@@ -32,6 +33,7 @@ const UsersPage = () => {
   ];
   return (
     <div className={globalStyle.section}>
+      <SuccessToast message="New User added successfully" />
       <div className={globalStyle.mainContainer}>
         <div className={globalStyle.container}>
           <TopHeader buttonText="Add User" topbarTitle="Users" />