changes in input fields

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;

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;
+}