diff --git a/frontend/src/app/agents/[agentsId]/page.jsx b/frontend/src/app/agents/[agentsId]/page.jsx
index 9d482c0..bf6644d 100644
--- a/frontend/src/app/agents/[agentsId]/page.jsx
+++ b/frontend/src/app/agents/[agentsId]/page.jsx
@@ -11,8 +11,8 @@ import Alert from "@/app/components/alerts/Alert";
 import Checkbox from "@/app/components/customCheckbox/Checkbox";
 
 const ViewAgentPage = () => {
-  const [useVpn, setUseVpn] = useState(true);
-  const [enableLoki, setEnableLoki] = useState(true);
+  const [useVpn, setUseVpn] = useState(false);
+  const [enableLoki, setEnableLoki] = useState(false);
   const {
     register,
     handleSubmit,
@@ -90,35 +90,51 @@ const ViewAgentPage = () => {
                     </>
                   }
                 />
-                {/* Agent endpoint */}
-                <div className={createAgentStyle.inputContainer}>
-                  <div className={createAgentStyle.labelContainer}>
-                    <p>Tailscale Device Prefix</p>
-                    {/* <p className={createAgentStyle.required}>*</p> */}
+                {useVpn ? (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Device Prefix</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="doks-onecbdev-agent"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Port</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="6969"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                ) : (
+                  <div className={createAgentStyle.inputContainer}>
+                    <div className={createAgentStyle.labelContainer}>
+                      <p>Agent Endpoint</p>
+                      <p className={createAgentStyle.required}>*</p>
+                    </div>
+                    <TextField
+                      placeHolder="e.g., http://agent-01.example.com:8080"
+                      {...register("agentEndpoint", { required: true })}
+                      hasError={!!errors.agentEndpoint}
+                    />
+                    <Prompts show={false} />
                   </div>
-                  <TextField
-                    placeHolder="doks-onecbdev-agent"
-                    {...register("agentEndpoint", { required: true })}
-                    hasError={!!errors.agentEndpoint}
-                  />
-                  <Prompts show={false} />
-                </div>
-                <div className={createAgentStyle.inputContainer}>
-                  <div className={createAgentStyle.labelContainer}>
-                    <p>Tailscale Port</p>
-                    {/* <p className={createAgentStyle.required}>*</p> */}
-                  </div>
-                  <TextField
-                    placeHolder="6969"
-                    {...register("agentEndpoint", { required: true })}
-                    hasError={!!errors.agentEndpoint}
-                  />
-                  <Prompts show={false} />
-                </div>
+                )}
               </div>
 
               <div className={createAgentStyle.lokiContainer}>
-                {/* Header */}
                 <div className={createAgentStyle.headerContainer}>
                   <div className={createAgentStyle.headerTxt}>
                     <p>Loki Integration (Optional)</p>
diff --git a/frontend/src/app/agents/add/page.jsx b/frontend/src/app/agents/add/page.jsx
index f9abc0d..d361fdc 100644
--- a/frontend/src/app/agents/add/page.jsx
+++ b/frontend/src/app/agents/add/page.jsx
@@ -48,7 +48,6 @@ const AddAgentPage = () => {
             onSubmit={handleSubmit(onSubmit)}
           >
             <div className={createAgentStyle.createAgentContainer}>
-              <div className={createAgentStyle.div}></div>
               <div className={createAgentStyle.inputMainContainer}>
                 {/* AGENT FORM */}
                 <div className={createAgentStyle.headerContainer}>
@@ -93,19 +92,48 @@ const AddAgentPage = () => {
                     </>
                   }
                 />
-                {/* Agent endpoint */}
-                <div className={createAgentStyle.inputContainer}>
-                  <div className={createAgentStyle.labelContainer}>
-                    <p>Agent Endpoint</p>
-                    <p className={createAgentStyle.required}>*</p>
+                {useVpn ? (
+                  <>
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Device Prefix</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="doks-onecbdev-agent"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+
+                    <div className={createAgentStyle.inputContainer}>
+                      <div className={createAgentStyle.labelContainer}>
+                        <p>Tailscale Port</p>
+                        <p className={createAgentStyle.required}>*</p>
+                      </div>
+                      <TextField
+                        placeHolder="6969"
+                        {...register("agentEndpoint", { required: true })}
+                        hasError={!!errors.agentEndpoint}
+                      />
+                      <Prompts show={false} />
+                    </div>
+                  </>
+                ) : (
+                  <div className={createAgentStyle.inputContainer}>
+                    <div className={createAgentStyle.labelContainer}>
+                      <p>Agent Endpoint</p>
+                      <p className={createAgentStyle.required}>*</p>
+                    </div>
+                    <TextField
+                      placeHolder="e.g., http://agent-01.example.com:8080"
+                      {...register("agentEndpoint", { required: true })}
+                      hasError={!!errors.agentEndpoint}
+                    />
+                    <Prompts show={false} />
                   </div>
-                  <TextField
-                    placeHolder="e.g., http://agent-01.example.com:8080"
-                    {...register("agentEndpoint", { required: true })}
-                    hasError={!!errors.agentEndpoint}
-                  />
-                  <Prompts show={false} />
-                </div>
+                )}
               </div>
 
               <div className={createAgentStyle.lokiContainer}>
diff --git a/frontend/src/app/agents/add/styles.module.css b/frontend/src/app/agents/add/styles.module.css
index fd43530..b0b46f1 100644
--- a/frontend/src/app/agents/add/styles.module.css
+++ b/frontend/src/app/agents/add/styles.module.css
@@ -4,7 +4,6 @@
   align-items: flex-start;
   gap: 10px;
   flex: 1 0 0;
-  padding-top: 48px;
   align-self: stretch;
 }
 
@@ -14,9 +13,10 @@
   align-items: flex-start;
   align-self: stretch;
   /* Ibalhin ni ang padding sa formcontainer maoang nasa figma */
+  padding-top: 48px;
   gap: 16px;
   flex: 1 1 auto;
-  height: calc(100vh - 100px - 48px - 110px);
+  height: calc(100vh - 100px - 5px - 110px);
   overflow-y: auto;
   scrollbar-width: none;
 }
@@ -31,17 +31,9 @@
 .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; */
   align-self: stretch;