diff --git a/web/src/App.tsx b/web/src/App.tsx
index ae9a0aa9..501f4910 100644
--- a/web/src/App.tsx
+++ b/web/src/App.tsx
@@ -12,12 +12,16 @@ import {
   Installation,
   S3,
 } from '@/pages';
+import { AnsibleLayout } from './pages/ansible/components/layout';
+import DockerAnsible from './pages/ansible/docker/docker';
+import NginxAnsible from './pages/ansible/nginx/nginx';
+import KubernetesAnsible from './pages/ansible/kuber/kuber';
 
 function App() {
   const location = useLocation();
   return (
     <div>
-      <div className="container mx-auto border-l border-r border-gray-700 h-dvh max-w-7xl">
+      <div className="container mx-auto h-dvh max-w-7xl border-l border-r border-gray-700">
         <Routes location={location}>
           <Route element={<MainLayout />}>
             <Route index element={<Basic />} />
@@ -30,6 +34,11 @@ function App() {
               <Route path="iam" element={<IAM />} />
               <Route path="argocd" element={<Argocd />} />
             </Route>
+            <Route path="ansible-template" element={<AnsibleLayout />}>
+              <Route path="docker" element={<DockerAnsible />} />
+              <Route path="nginx" element={<NginxAnsible />} />
+              <Route path="kuber" element={<KubernetesAnsible />} />
+            </Route>
             <Route path="installation" element={<Installation />} />
           </Route>
         </Routes>
diff --git a/web/src/components/form/form-input.tsx b/web/src/components/form/form-input.tsx
index 50eb4c90..be46e833 100644
--- a/web/src/components/form/form-input.tsx
+++ b/web/src/components/form/form-input.tsx
@@ -4,7 +4,15 @@ import { FormFieldProps } from '../../types/form.types';
 import { getNestedValue } from '@/lib/helper';
 import { cn } from '@/lib/utils';
 
-export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
+export const FormInput = ({
+  name,
+  label,
+  error,
+  isNumber,
+  inputType,
+  inputClass,
+  ...props
+}: FormFieldProps) => {
   const {
     register,
     formState: { errors },
@@ -21,20 +29,27 @@ export const FormInput = ({ name, label, error, ...props }: FormFieldProps) => {
       name={name}
     >
       {label && (
-        <div className="mb-2 flex items-baseline justify-between">
-          <Form.Label className="form-label">{label} :</Form.Label>
+        <div className="flex items-baseline justify-between mb-1">
+          <Form.Label className="form-label">{label}</Form.Label>
         </div>
       )}
       <Form.Control asChild>
         <input
-          className="w-full rounded-md border border-gray-200 px-3 py-2 outline-none dark:border-none"
-          {...register(name)}
+          type={inputType}
+          className={cn(
+            'w-full rounded-md border border-gray-500 px-3 py-2 outline-none transition-all focus:border-orange-base',
+            props.className,
+            {
+              'border-red-500 dark:border': errorMessage,
+            },
+          )}
+          {...register(name, { ...(isNumber && { valueAsNumber: true }) })}
           {...props}
         />
       </Form.Control>
       {errorMessage && (
         <div className="absolute left-0 top-full">
-          <Form.Message className="form-message ml-auto text-sm text-red-500">
+          <Form.Message className="ml-auto text-sm text-red-500 form-message">
             {errorMessage}
           </Form.Message>
         </div>
diff --git a/web/src/components/form/form-select.tsx b/web/src/components/form/form-select.tsx
index 25b0b513..e7591938 100644
--- a/web/src/components/form/form-select.tsx
+++ b/web/src/components/form/form-select.tsx
@@ -4,9 +4,9 @@ import { Controller, useFormContext } from 'react-hook-form';
 import { FormFieldProps } from '../../types/form.types';
 import Select from 'react-select';
 import { getNestedValue } from '@/lib/helper';
-import { selectStyle } from '@/pages/helm-template/styles/helm-template.style';
 import { useStyle } from '@/hooks';
 import { cn } from '@/lib/utils';
+import { selectStyle } from '@/styles/select.styles';
 
 interface OptionType {
   value: string;
@@ -46,8 +46,8 @@ export const FormSelect = ({
       name={name}
     >
       {label && (
-        <div className="mb-2 flex items-baseline justify-between">
-          <Form.Label className="form-label">{label} :</Form.Label>
+        <div className="mb-1 flex items-baseline justify-between">
+          <Form.Label className="form-label">{label}</Form.Label>
         </div>
       )}
       <Form.Control asChild>
@@ -61,7 +61,7 @@ export const FormSelect = ({
               placeholder={placeholder}
               className="w-full"
               {...props}
-              styles={selectStyle(darkMode)}
+              styles={selectStyle(darkMode, !!errorMessage)}
             />
           )}
         />
diff --git a/web/src/components/form/form-wrapper.tsx b/web/src/components/form/form-wrapper.tsx
index d3e92c95..a37eb225 100644
--- a/web/src/components/form/form-wrapper.tsx
+++ b/web/src/components/form/form-wrapper.tsx
@@ -16,7 +16,7 @@ export const FormWrapper = <T extends z.ZodType>({
   methods,
 }: FormWrapperProps<T>) => {
   return (
-    <FormProvider {...methods} >
+    <FormProvider {...methods}>
       <Form.Root
         onSubmit={methods.handleSubmit(onSubmit)}
         className="text-black dark:text-white"
diff --git a/web/src/components/navbar/navbar.tsx b/web/src/components/navbar/navbar.tsx
index be296d75..25dbec08 100644
--- a/web/src/components/navbar/navbar.tsx
+++ b/web/src/components/navbar/navbar.tsx
@@ -11,18 +11,22 @@ const navbar = [
     url: '/bug-fix',
     title: 'Bug Fix',
   },
-  {
-    url: '/terraform-template',
-    title: 'Terraform Template',
-  },
   {
     url: '/installation',
     title: 'Installation',
   },
+  {
+    url: '/terraform-template',
+    title: 'Terraform Template',
+  },
   {
     url: '/helm-template',
     title: 'Helm Template',
   },
+  {
+    url: '/ansible-template',
+    title: 'Ansible Template',
+  },
 ];
 
 const Navbar: FC = () => {
diff --git a/web/src/enums/api.enums.ts b/web/src/enums/api.enums.ts
index 029e3c7b..1d8f7fb6 100644
--- a/web/src/enums/api.enums.ts
+++ b/web/src/enums/api.enums.ts
@@ -12,3 +12,9 @@ export enum API {
   Installation = '/IaC-install',
   HelmTemplate = '/Helm-template',
 }
+
+export enum AnsibleTemplateAPI {
+  Docker = '/ansible-install/docker',
+  Nginx = '/ansible-install/nginx',
+  Kubernetes = '/ansible-install/kuber',
+}
diff --git a/web/src/pages/ansible/components/layout.tsx b/web/src/pages/ansible/components/layout.tsx
new file mode 100644
index 00000000..d7f1abc7
--- /dev/null
+++ b/web/src/pages/ansible/components/layout.tsx
@@ -0,0 +1,40 @@
+import { FC } from 'react';
+import { NavLink, Outlet } from 'react-router';
+
+const menu = [
+  {
+    url: 'nginx',
+    title: 'Nginx Service',
+  },
+  {
+    url: 'docker',
+    title: 'Docker Service',
+  },
+  {
+    url: 'kuber',
+    title: 'Kubernetes Service',
+  },
+];
+
+export const AnsibleLayout: FC = () => {
+  return (
+    <div className="flex h-[calc(100vh-56px)] items-center">
+      <div className="flex h-full w-full max-w-96 flex-col items-center justify-center divide-y divide-gray-500 border-r border-gray-500">
+        {menu.map((link) => (
+          <NavLink
+            key={link.url}
+            to={link.url}
+            className={({ isActive }) =>
+              `block w-full p-4 text-center text-black outline-none transition-all dark:text-white ${isActive ? 'bg-orange-base text-white' : ''}`
+            }
+          >
+            {link.title}
+          </NavLink>
+        ))}
+      </div>
+      <div className="flex h-full w-2/3 items-center justify-center">
+        <Outlet />
+      </div>
+    </div>
+  );
+};
diff --git a/web/src/pages/ansible/docker/components/hosts-fields.tsx b/web/src/pages/ansible/docker/components/hosts-fields.tsx
new file mode 100644
index 00000000..33e1f399
--- /dev/null
+++ b/web/src/pages/ansible/docker/components/hosts-fields.tsx
@@ -0,0 +1,46 @@
+import { FormInput } from '@/components/form/form-input';
+import { Plus, Trash2 } from 'lucide-react';
+import { FC } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+const HostsField: FC = () => {
+  const { control } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'hosts',
+  });
+
+  return (
+    <div>
+      <div className="flex items-center mb-2">
+        <p className="text-lg font-bold">Hosts</p>
+        <button type="button" onClick={append} className="ml-4 btn btn-xs">
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="space-y-2">
+        {fields.map((_, hostIdx) => (
+          <div className="relative" key={hostIdx}>
+            <FormInput
+              id={`hosts_input.${hostIdx}`}
+              name={`hosts.${hostIdx}.value`}
+              label=""
+              placeholder="www.example.com"
+            />
+            {hostIdx > 0 && (
+              <button
+                onClick={() => remove(hostIdx)}
+                className="absolute right-3 top-3"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HostsField;
diff --git a/web/src/pages/ansible/docker/data/select-options.ts b/web/src/pages/ansible/docker/data/select-options.ts
new file mode 100644
index 00000000..f87f0f4a
--- /dev/null
+++ b/web/src/pages/ansible/docker/data/select-options.ts
@@ -0,0 +1,13 @@
+export const OSOptions = [
+  {
+    value: 'ubuntu',
+    label: 'Ubuntu',
+  },
+];
+
+export const versionOptions = [
+  {
+    label: 'Latest',
+    value: 'latest',
+  },
+];
diff --git a/web/src/pages/ansible/docker/docker.tsx b/web/src/pages/ansible/docker/docker.tsx
new file mode 100644
index 00000000..d4617770
--- /dev/null
+++ b/web/src/pages/ansible/docker/docker.tsx
@@ -0,0 +1,129 @@
+import { FC } from 'react';
+import {
+  dockerAnsibleSchema,
+  type DockerAnsible,
+  type DockerAnsibleBody,
+  type DockerAnsibleResponse,
+  type dockerTemplateValidationError,
+} from './docker.types';
+import { AnsibleTemplateAPI } from '@/enums/api.enums';
+import { useDownload } from '@/hooks';
+import { usePost } from '@/core/react-query';
+import { isAxiosError } from 'axios';
+import { toast } from 'sonner';
+import { useForm } from 'react-hook-form';
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FormWrapper } from '@/components/form/form-wrapper';
+import { FormInput } from '@/components/form/form-input';
+import HostsField from './components/hosts-fields';
+import { FormSelect } from '@/components/form/form-select';
+import { OSOptions, versionOptions } from './data/select-options';
+
+const DockerAnsible: FC = () => {
+  const defaultValues = {
+    ansible_user: '',
+    os: { label: 'Ubuntu', value: 'ubuntu' },
+    hosts: [{ value: '' }],
+    version: {
+      label: 'Latest',
+      value: 'latest',
+    },
+  };
+
+  const methods = useForm<DockerAnsible>({
+    resolver: zodResolver(dockerAnsibleSchema),
+    defaultValues,
+  });
+
+  const { mutateAsync: dockerAnsibleMutate, isPending: dockerAnsiblePending } =
+    usePost<DockerAnsibleResponse, DockerAnsibleBody>(
+      AnsibleTemplateAPI.Docker,
+      'ansible-docker',
+    );
+
+  const { download, isPending: downloadPending } = useDownload({
+    downloadFileName: 'DockerAnsible',
+    source: 'docker',
+    folderName: 'MyAnsible',
+  });
+
+  const handleSubmit = async (data: DockerAnsible) => {
+    try {
+      const body = {
+        ...data,
+        hosts: data.hosts.map((host) => host.value),
+        os: data.os.value,
+        version: data.version.value,
+      };
+
+      await dockerAnsibleMutate(body);
+      await download();
+    } catch (error) {
+      console.log(error);
+      if (isAxiosError<dockerTemplateValidationError>(error)) {
+        toast.error(
+          `${error.response?.data.detail[0].loc[error.response?.data.detail[0].loc.length - 1]} ${error.response?.data.detail[0].msg}`,
+        );
+      } else {
+        toast.error('Something went wrong');
+      }
+    }
+  };
+
+  return (
+    <div className="w-full max-w-96 text-black dark:text-white">
+      <FormWrapper methods={methods} onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_user"
+            name={`ansible_user`}
+            label="User"
+            placeholder="root"
+          />
+        </div>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_port"
+            name={`ansible_port`}
+            label="Port"
+            placeholder="22"
+            inputType={'number'}
+            isNumber={true}
+          />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`os`}
+            label="OS"
+            placeholder="Select..."
+            options={OSOptions}
+          />
+        </div>
+        <div className="mb-4">
+          <HostsField />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`version`}
+            label="Version"
+            placeholder="Select..."
+            options={versionOptions}
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={dockerAnsiblePending}
+          className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
+        >
+          {dockerAnsiblePending
+            ? 'Generating...'
+            : downloadPending
+              ? 'Downloading...'
+              : 'Generate'}
+        </button>
+      </FormWrapper>
+    </div>
+  );
+};
+
+export default DockerAnsible;
diff --git a/web/src/pages/ansible/docker/docker.types.ts b/web/src/pages/ansible/docker/docker.types.ts
new file mode 100644
index 00000000..b4a2a5f2
--- /dev/null
+++ b/web/src/pages/ansible/docker/docker.types.ts
@@ -0,0 +1,48 @@
+import { z as zod } from 'zod';
+
+export interface DockerAnsibleResponse {
+  output: string;
+}
+
+export interface DockerAnsibleBody {
+  ansible_user: string;
+  ansible_port: number;
+  os: string;
+  hosts: string[];
+  version: string;
+}
+
+export interface dockerTemplateValidationError {
+  detail: [
+    {
+      type: string;
+      loc: string[];
+      msg: string;
+      input: null;
+    },
+  ];
+}
+
+export const dockerAnsibleSchema = zod.object({
+  ansible_user: zod.string().min(1, 'User is required!'),
+  ansible_port: zod
+    .number({ invalid_type_error: 'Port is required!' })
+    .min(1, 'Port is required!'),
+  os: zod.object({
+    label: zod.string(),
+    value: zod.string(),
+  }),
+  hosts: zod
+    .array(
+      zod.object({
+        value: zod.string().min(1, 'Host is required!'),
+      }),
+    )
+    .min(1),
+  version: zod.object({
+    label: zod.string(),
+    value: zod.string(),
+  }),
+});
+
+export type DockerAnsible = zod.infer<typeof dockerAnsibleSchema>;
diff --git a/web/src/pages/ansible/kuber/components/k8s-master-nodes.tsx b/web/src/pages/ansible/kuber/components/k8s-master-nodes.tsx
new file mode 100644
index 00000000..2ac9bf28
--- /dev/null
+++ b/web/src/pages/ansible/kuber/components/k8s-master-nodes.tsx
@@ -0,0 +1,46 @@
+import { FormInput } from '@/components/form/form-input';
+import { Plus, Trash2 } from 'lucide-react';
+import { FC } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+const K8SMasterNodes: FC = () => {
+  const { control } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'k8s_master_nodes',
+  });
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center">
+        <p className="text-lg font-bold">K8s Master Nodes</p>
+        <button type="button" onClick={append} className="btn btn-xs ml-4">
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="space-y-2">
+        {fields.map((_, nodeIdx) => (
+          <div className="relative" key={nodeIdx}>
+            <FormInput
+              id={`k8s_master_nodes.${nodeIdx}`}
+              name={`k8s_master_nodes.${nodeIdx}.value`}
+              placeholder="www.example.com"
+              label=""
+            />
+            {nodeIdx > 0 && (
+              <button
+                onClick={() => remove(nodeIdx)}
+                className="absolute right-3 top-3"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default K8SMasterNodes;
diff --git a/web/src/pages/ansible/kuber/components/k8s-worker-nodes.tsx b/web/src/pages/ansible/kuber/components/k8s-worker-nodes.tsx
new file mode 100644
index 00000000..3a7ee574
--- /dev/null
+++ b/web/src/pages/ansible/kuber/components/k8s-worker-nodes.tsx
@@ -0,0 +1,46 @@
+import { FormInput } from '@/components/form/form-input';
+import { Plus, Trash2 } from 'lucide-react';
+import { FC } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+const K8SWorkerNodes: FC = () => {
+  const { control } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'k8s_worker_nodes',
+  });
+
+  return (
+    <div>
+      <div className="mb-2 flex items-center">
+        <p className="text-lg font-bold">K8s Worker Nodes</p>
+        <button type="button" onClick={append} className="btn btn-xs ml-4">
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="space-y-2">
+        {fields.map((_, nodeIdx) => (
+          <div className="relative" key={nodeIdx}>
+            <FormInput
+              id={`k8s_worker_nodes.${nodeIdx}`}
+              name={`k8s_worker_nodes.${nodeIdx}.value`}
+              placeholder="www.example.com"
+              label=""
+            />
+            {nodeIdx > 0 && (
+              <button
+                onClick={() => remove(nodeIdx)}
+                className="absolute right-3 top-3"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default K8SWorkerNodes;
diff --git a/web/src/pages/ansible/kuber/data/select-options.ts b/web/src/pages/ansible/kuber/data/select-options.ts
new file mode 100644
index 00000000..01c1cf70
--- /dev/null
+++ b/web/src/pages/ansible/kuber/data/select-options.ts
@@ -0,0 +1,21 @@
+export const OSOptions = [
+  {
+    value: 'ubuntu',
+    label: 'Ubuntu',
+  },
+];
+
+export const versionOptions = [
+  {
+    label: '1.31',
+    value: '1.31',
+  },
+  {
+    label: '1.30',
+    value: '1.30',
+  },
+  {
+    label: '1.29',
+    value: '1.29',
+  },
+];
diff --git a/web/src/pages/ansible/kuber/kuber.tsx b/web/src/pages/ansible/kuber/kuber.tsx
new file mode 100644
index 00000000..b76a06a8
--- /dev/null
+++ b/web/src/pages/ansible/kuber/kuber.tsx
@@ -0,0 +1,131 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  KuberAnsible,
+  KuberAnsibleBody,
+  KuberAnsibleResponse,
+  kuberAnsibleSchema,
+  kuberTemplateValidationError,
+} from './kuber.types';
+import { FormWrapper } from '@/components/form/form-wrapper';
+import { FormInput } from '@/components/form/form-input';
+import { FormSelect } from '@/components/form/form-select';
+import { usePost } from '@/core/react-query';
+import { AnsibleTemplateAPI } from '@/enums/api.enums';
+import { OSOptions, versionOptions } from './data/select-options';
+import { useDownload } from '@/hooks';
+import { isAxiosError } from 'axios';
+import { toast } from 'sonner';
+import K8SMasterNodes from './components/k8s-master-nodes';
+import K8SWorkerNodes from './components/k8s-worker-nodes';
+
+const KubernetesAnsible: FC = () => {
+  const { mutateAsync: kuberAnsibleMutate, isPending: kuberAnsiblePending } =
+    usePost<KuberAnsibleResponse, KuberAnsibleBody>(
+      AnsibleTemplateAPI.Kubernetes,
+      'ansible-docker',
+    );
+
+  const { download, isPending: downloadPending } = useDownload({
+    downloadFileName: 'KubernetesAnsible',
+    source: 'kubernetes',
+    folderName: 'MyAnsible',
+  });
+
+  const defaultValues = {
+    ansible_user: '',
+    os: { label: 'Ubuntu', value: 'ubuntu' },
+    k8s_worker_nodes: [{ value: '' }],
+    k8s_master_nodes: [{ value: '' }],
+  };
+
+  const methods = useForm<KuberAnsible>({
+    resolver: zodResolver(kuberAnsibleSchema),
+    defaultValues,
+  });
+
+  const handleSubmit = async (data: KuberAnsible) => {
+    try {
+      const body = {
+        ...data,
+        k8s_worker_nodes: data.k8s_worker_nodes.map((worker) => worker.value),
+        k8s_master_nodes: data.k8s_master_nodes.map((master) => master.value),
+        os: data.os.value,
+        version: data.version.value,
+      };
+
+      await kuberAnsibleMutate(body);
+      await download();
+    } catch (error) {
+      console.log(error);
+      if (isAxiosError<kuberTemplateValidationError>(error)) {
+        toast.error(
+          `${error.response?.data.detail[0].loc[error.response?.data.detail[0].loc.length - 1]} ${error.response?.data.detail[0].msg}`,
+        );
+      } else {
+        toast.error('Something went wrong');
+      }
+    }
+  };
+
+  return (
+    <div className="w-full max-w-96 text-black dark:text-white">
+      <FormWrapper methods={methods} onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_user"
+            name={`ansible_user`}
+            label="User"
+            placeholder="root"
+          />
+        </div>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_port"
+            name={`ansible_port`}
+            label="Port"
+            placeholder="22"
+            inputType={'number'}
+            isNumber={true}
+          />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`os`}
+            label="OS"
+            placeholder="Select..."
+            options={OSOptions}
+          />
+        </div>
+        <div className="mb-4">
+          <K8SMasterNodes />
+        </div>
+        <div className="mb-4">
+          <K8SWorkerNodes />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`version`}
+            label="Version"
+            placeholder="Select..."
+            options={versionOptions}
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={kuberAnsiblePending}
+          className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
+        >
+          {kuberAnsiblePending
+            ? 'Generating...'
+            : downloadPending
+              ? 'Downloading...'
+              : 'Generate'}
+        </button>
+      </FormWrapper>
+    </div>
+  );
+};
+
+export default KubernetesAnsible;
diff --git a/web/src/pages/ansible/kuber/kuber.types.ts b/web/src/pages/ansible/kuber/kuber.types.ts
new file mode 100644
index 00000000..25bd1f76
--- /dev/null
+++ b/web/src/pages/ansible/kuber/kuber.types.ts
@@ -0,0 +1,54 @@
+import { z as zod } from 'zod';
+
+export interface KuberAnsibleResponse {
+  output: string;
+}
+
+export interface KuberAnsibleBody {
+  ansible_user: string;
+  ansible_port: number;
+  os: string;
+  k8s_worker_nodes: string[];
+  k8s_master_nodes: string[];
+  version: string;
+}
+
+export interface kuberTemplateValidationError {
+  detail: [
+    {
+      type: string;
+      loc: string[];
+      msg: string;
+      input: null;
+    },
+  ];
+}
+
+export const kuberAnsibleSchema = zod.object({
+  ansible_user: zod.string().min(1, 'User is required!'),
+  ansible_port: zod
+    .number({ invalid_type_error: 'Port is required!' })
+    .min(1, 'Port is required!'),
+  os: zod.object({
+    label: zod.string(),
+    value: zod.string(),
+  }),
+  k8s_worker_nodes: zod
+    .array(
+      zod.object({
+        value: zod.string().min(1, 'Required!').default('www.example.com'),
+      }),
+    )
+    .min(1),
+  k8s_master_nodes: zod.array(
+    zod.object({
+      value: zod.string().min(1, 'Required!').default('www.example.com'),
+    }),
+  ),
+  version: zod.object({
+    label: zod.string().min(1, 'Required!'),
+    value: zod.string().min(1, 'Required!'),
+  }),
+});
+
+export type KuberAnsible = zod.infer<typeof kuberAnsibleSchema>;
diff --git a/web/src/pages/ansible/nginx/components/hosts-field.tsx b/web/src/pages/ansible/nginx/components/hosts-field.tsx
new file mode 100644
index 00000000..33e1f399
--- /dev/null
+++ b/web/src/pages/ansible/nginx/components/hosts-field.tsx
@@ -0,0 +1,46 @@
+import { FormInput } from '@/components/form/form-input';
+import { Plus, Trash2 } from 'lucide-react';
+import { FC } from 'react';
+import { useFieldArray, useFormContext } from 'react-hook-form';
+
+const HostsField: FC = () => {
+  const { control } = useFormContext();
+
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: 'hosts',
+  });
+
+  return (
+    <div>
+      <div className="flex items-center mb-2">
+        <p className="text-lg font-bold">Hosts</p>
+        <button type="button" onClick={append} className="ml-4 btn btn-xs">
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="space-y-2">
+        {fields.map((_, hostIdx) => (
+          <div className="relative" key={hostIdx}>
+            <FormInput
+              id={`hosts_input.${hostIdx}`}
+              name={`hosts.${hostIdx}.value`}
+              label=""
+              placeholder="www.example.com"
+            />
+            {hostIdx > 0 && (
+              <button
+                onClick={() => remove(hostIdx)}
+                className="absolute right-3 top-3"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default HostsField;
diff --git a/web/src/pages/ansible/nginx/data/select-options.ts b/web/src/pages/ansible/nginx/data/select-options.ts
new file mode 100644
index 00000000..fdde30b8
--- /dev/null
+++ b/web/src/pages/ansible/nginx/data/select-options.ts
@@ -0,0 +1,29 @@
+export const OSOptions = [
+  {
+    value: 'ubuntu',
+    label: 'Ubuntu',
+  },
+];
+
+export const VersionOptions = [
+  {
+    value: 'latest',
+    label: 'Latest',
+  },
+  {
+    value: '1.27.3-1',
+    label: '1.27.3-1',
+  },
+  {
+    value: '1.25.5-1',
+    label: '1.25.5-1',
+  },
+  {
+    value: '1.23.4-1',
+    label: '1.23.4-1',
+  },
+  {
+    value: '1.21.6-1',
+    label: '1.21.6-1',
+  },
+];
diff --git a/web/src/pages/ansible/nginx/nginx.tsx b/web/src/pages/ansible/nginx/nginx.tsx
new file mode 100644
index 00000000..0affb759
--- /dev/null
+++ b/web/src/pages/ansible/nginx/nginx.tsx
@@ -0,0 +1,129 @@
+import { zodResolver } from '@hookform/resolvers/zod';
+import { FC } from 'react';
+import { useForm } from 'react-hook-form';
+import {
+  NginxAnsibleBody,
+  NginxAnsibleResponse,
+  nginxAnsibleSchema,
+  nginxTemplateValidationError,
+} from './nginx.types';
+import { AnsibleTemplateAPI } from '@/enums/api.enums';
+import { usePost } from '@/core/react-query';
+import { useDownload } from '@/hooks';
+import { isAxiosError } from 'axios';
+import { toast } from 'sonner';
+import { FormWrapper } from '@/components/form/form-wrapper';
+import { FormInput } from '@/components/form/form-input';
+import { FormSelect } from '@/components/form/form-select';
+import HostsField from './components/hosts-field';
+import { OSOptions, VersionOptions } from './data/select-options';
+import type { NginxAnsible } from './nginx.types';
+
+const NginxAnsible: FC = () => {
+  const defaultValues = {
+    ansible_user: '',
+    os: { label: 'Ubuntu', value: 'ubuntu' },
+    hosts: [{ value: '' }],
+    version: {
+      label: 'Latest',
+      value: 'latest',
+    },
+  };
+
+  const methods = useForm<NginxAnsible>({
+    resolver: zodResolver(nginxAnsibleSchema),
+    defaultValues,
+  });
+
+  const { mutateAsync: nginxAnsibleMutate, isPending: nginxAnsiblePending } =
+    usePost<NginxAnsibleResponse, NginxAnsibleBody>(
+      AnsibleTemplateAPI.Nginx,
+      'ansible-nginx',
+    );
+
+  const { download, isPending: downloadPending } = useDownload({
+    downloadFileName: 'NginxAnsible',
+    source: 'nginx',
+    folderName: 'MyAnsible',
+  });
+
+  const handleSubmit = async (data: NginxAnsible) => {
+    try {
+      const body = {
+        ...data,
+        hosts: data.hosts.map((host) => host.value),
+        os: data.os.value,
+        version: data.version.value,
+      };
+
+      await nginxAnsibleMutate(body);
+      await download();
+    } catch (error) {
+      console.log(error);
+      if (isAxiosError<nginxTemplateValidationError>(error)) {
+        toast.error(
+          `${error.response?.data.detail[0].loc[error.response?.data.detail[0].loc.length - 1]} ${error.response?.data.detail[0].msg}`,
+        );
+      } else {
+        toast.error('Something went wrong');
+      }
+    }
+  };
+
+  return (
+    <div className="w-full max-w-96 text-black dark:text-white">
+      <FormWrapper methods={methods} onSubmit={handleSubmit}>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_user"
+            name={`ansible_user`}
+            label="User"
+            placeholder="root"
+          />
+        </div>
+        <div className="mb-4">
+          <FormInput
+            id="ansible_port"
+            name={`ansible_port`}
+            label="Port"
+            placeholder="22"
+            inputType={'number'}
+            isNumber={true}
+          />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`os`}
+            label="OS"
+            placeholder="Select..."
+            options={OSOptions}
+          />
+        </div>
+        <div className="mb-4">
+          <HostsField />
+        </div>
+        <div className="mb-4">
+          <FormSelect
+            name={`version`}
+            label="Version"
+            placeholder="Select..."
+            options={VersionOptions}
+          />
+        </div>
+        <button
+          type="submit"
+          disabled={nginxAnsiblePending}
+          className="btn mt-3 w-full bg-orange-base text-white hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
+        >
+          {nginxAnsiblePending
+            ? 'Generating...'
+            : downloadPending
+              ? 'Downloading...'
+              : 'Generate'}
+        </button>
+      </FormWrapper>
+    </div>
+  );
+};
+
+export default NginxAnsible;
diff --git a/web/src/pages/ansible/nginx/nginx.types.ts b/web/src/pages/ansible/nginx/nginx.types.ts
new file mode 100644
index 00000000..77324d00
--- /dev/null
+++ b/web/src/pages/ansible/nginx/nginx.types.ts
@@ -0,0 +1,48 @@
+import { z as zod } from 'zod';
+
+export interface NginxAnsibleResponse {
+  output: string;
+}
+
+export interface NginxAnsibleBody {
+  ansible_user: string;
+  ansible_port: number;
+  os: string;
+  hosts: string[];
+  version: string;
+}
+
+export interface nginxTemplateValidationError {
+  detail: [
+    {
+      type: string;
+      loc: string[];
+      msg: string;
+      input: null;
+    },
+  ];
+}
+
+export const nginxAnsibleSchema = zod.object({
+  ansible_user: zod.string().min(1, 'User is required!'),
+  ansible_port: zod
+    .number({ invalid_type_error: 'Port is required!' })
+    .min(1, 'Port is required!'),
+  os: zod.object({
+    label: zod.string(),
+    value: zod.string(),
+  }),
+  hosts: zod
+    .array(
+      zod.object({
+        value: zod.string().min(1, 'Host is required!'),
+      }),
+    )
+    .min(1),
+  version: zod.object({
+    label: zod.string(),
+    value: zod.string(),
+  }),
+});
+
+export type NginxAnsible = zod.infer<typeof nginxAnsibleSchema>;
diff --git a/web/src/pages/basic/basic.tsx b/web/src/pages/basic/basic.tsx
index 5657b210..6d78b223 100644
--- a/web/src/pages/basic/basic.tsx
+++ b/web/src/pages/basic/basic.tsx
@@ -60,7 +60,7 @@ const Basic: FC = () => {
 
   return (
     <div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
-      <div className="w-full max-w-[768px]">
+      <div className="w-full max-w-[1024px]">
         <div className="w-full rounded-md p-2">
           <div className="flex h-full w-full items-center justify-center gap-3">
             <div className="flex w-full flex-col">
@@ -72,7 +72,7 @@ const Basic: FC = () => {
                 type="number"
                 value={minToken}
                 onChange={(e) => setMinToken(e.target.value)}
-                className="dark:bg-black-1 w-full rounded-md bg-gray-200 p-3 outline-none"
+                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
               />
             </div>
             <div className="flex w-full flex-col">
@@ -84,7 +84,7 @@ const Basic: FC = () => {
                 type="number"
                 value={maxToken}
                 onChange={(e) => setMaxToken(e.target.value)}
-                className="dark:bg-black-1 w-full rounded-md bg-gray-200 p-3 outline-none"
+                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
               />
             </div>
             <div className="flex w-full flex-col">
@@ -96,14 +96,14 @@ const Basic: FC = () => {
                 type="text"
                 value={service}
                 onChange={(e) => setService(e.target.value)}
-                className="dark:bg-black-1 w-full rounded-md bg-gray-200 p-3 outline-none"
+                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
               />
             </div>
           </div>
           <div className="mt-4">
             <div
               ref={messagesRef}
-              className="h-96 w-full overflow-y-auto rounded-md bg-slate-900 p-3 scrollbar-thin scrollbar-track-transparent scrollbar-corner-transparent"
+              className="h-[550px] w-full overflow-y-auto rounded-md bg-slate-900 p-3 scrollbar-thin scrollbar-track-transparent scrollbar-corner-transparent"
             >
               {messages.map((message) =>
                 message.role === 'user' ? (
@@ -131,7 +131,7 @@ const Basic: FC = () => {
               value={input}
               onChange={(e) => setInput(e.target.value)}
               rows={2}
-              className="dark:bg-black-1 w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none"
+              className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
             />
             <button
               disabled={!input}
diff --git a/web/src/pages/bug-fix/bug-fix.tsx b/web/src/pages/bug-fix/bug-fix.tsx
index 7e990807..1187022a 100644
--- a/web/src/pages/bug-fix/bug-fix.tsx
+++ b/web/src/pages/bug-fix/bug-fix.tsx
@@ -65,7 +65,7 @@ const BugFix: FC = () => {
 
   return (
     <div className="flex h-[calc(100vh-56px)] w-full items-center justify-center text-black dark:text-white">
-      <div className="w-full max-w-[768px]">
+      <div className="w-full max-w-[1024px]">
         <div className="w-full rounded-md p-2">
           <div className="flex h-full w-full items-center justify-center gap-3">
             <div className="flex w-full flex-col">
@@ -77,7 +77,7 @@ const BugFix: FC = () => {
                 type="number"
                 value={minToken}
                 onChange={(e) => setMinToken(e.target.value)}
-                className="dark:bg-black-1 w-full rounded-md bg-gray-200 p-3 outline-none"
+                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
               />
             </div>
             <div className="flex w-full flex-col">
@@ -89,7 +89,7 @@ const BugFix: FC = () => {
                 type="number"
                 value={maxToken}
                 onChange={(e) => setMaxToken(e.target.value)}
-                className="dark:bg-black-1 w-full rounded-md bg-gray-200 p-3 outline-none"
+                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
               />
             </div>
             <div className="flex w-full flex-col">
@@ -101,7 +101,7 @@ const BugFix: FC = () => {
                 type="text"
                 value={service}
                 onChange={(e) => setService(e.target.value)}
-                className="dark:bg-black-1 w-full rounded-md bg-gray-200 p-3 outline-none"
+                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
               />
             </div>
             <div className="flex w-full flex-col">
@@ -113,14 +113,14 @@ const BugFix: FC = () => {
                 type="text"
                 value={version}
                 onChange={(e) => setVersion(e.target.value)}
-                className="dark:bg-black-1 w-full rounded-md bg-gray-200 p-3 outline-none"
+                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
               />
             </div>
           </div>
           <div className="mt-4">
             <div
               ref={messagesRef}
-              className="h-96 w-full overflow-y-auto rounded-md bg-slate-900 p-3 scrollbar-thin scrollbar-track-transparent scrollbar-corner-transparent"
+              className="h-[550px] w-full overflow-y-auto rounded-md bg-slate-900 p-3 scrollbar-thin scrollbar-track-transparent scrollbar-corner-transparent"
             >
               {messages.map((message) =>
                 message.role === 'user' ? (
@@ -148,7 +148,7 @@ const BugFix: FC = () => {
               value={bugDescription}
               onChange={(e) => setBugDescription(e.target.value)}
               rows={2}
-              className="dark:bg-black-1 w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none"
+              className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
             />
             <button
               disabled={!bugDescription}
diff --git a/web/src/pages/helm-template/components/pod-environment-fields.tsx b/web/src/pages/helm-template/components/pod-environment-fields.tsx
new file mode 100644
index 00000000..2a1192f1
--- /dev/null
+++ b/web/src/pages/helm-template/components/pod-environment-fields.tsx
@@ -0,0 +1,76 @@
+import { useFieldArray, useFormContext } from 'react-hook-form';
+import { Plus, Trash2 } from 'lucide-react';
+import { FormInput } from '@/components/form/form-input';
+import { cn } from '@/lib/utils';
+import { FC } from 'react';
+
+type PodEnvironmentFieldsProps = {
+  podIndex: number;
+};
+
+const PodEnvironmentFields: FC<PodEnvironmentFieldsProps> = ({ podIndex }) => {
+  const { control } = useFormContext();
+  const { fields, append, remove } = useFieldArray({
+    control,
+    name: `pods.${podIndex}.environment`,
+  });
+
+  return (
+    <div className="mb-2 mt-6">
+      <div className="mb-2 flex items-center">
+        <p className="text-base font-bold">Environments</p>
+
+        <button
+          type="button"
+          onClick={() => append({ name: '', value: '' })}
+          className="btn btn-xs ml-4"
+        >
+          Add <Plus className="size-3" />
+        </button>
+      </div>
+      <div className="grid grid-cols-2 gap-4">
+        {fields.map((field, envIdx) => (
+          <div
+            className={cn(
+              'mb-4 flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0',
+              {
+                'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
+                  control.getFieldState(
+                    `pods.${podIndex}.environment.${envIdx}.name`,
+                  ).invalid,
+              },
+            )}
+            key={field.id}
+          >
+            <FormInput
+              id={`env_name_${envIdx}`}
+              name={`pods.${podIndex}.environment.${envIdx}.name`}
+              label=""
+              placeholder="Env"
+              className="h-12 w-full rounded-s-md px-2 outline-none"
+            />
+            <FormInput
+              id={`env_value_${envIdx}`}
+              name={`pods.${podIndex}.environment.${envIdx}.value`}
+              label=""
+              placeholder="Hi"
+              className={cn('h-12 w-full rounded-s-md px-2 outline-none', {
+                'rounded-e-md': envIdx === 0,
+              })}
+            />
+            {envIdx > 0 && (
+              <button
+                onClick={() => remove(envIdx)}
+                className="btn btn-error rounded-e-md rounded-s-none"
+              >
+                <Trash2 />
+              </button>
+            )}
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};
+
+export default PodEnvironmentFields;
diff --git a/web/src/pages/helm-template/helm-template.tsx b/web/src/pages/helm-template/helm-template.tsx
index f008ef3d..4ff61952 100644
--- a/web/src/pages/helm-template/helm-template.tsx
+++ b/web/src/pages/helm-template/helm-template.tsx
@@ -6,7 +6,6 @@ import { API } from '@/enums/api.enums';
 import {
   HelmTemplateBody,
   HelmTemplateResponse,
-  HelmTemplateSchema,
   helmTemplateSchema,
   helmTemplateValidationError,
 } from './helm-template.types';
@@ -14,13 +13,15 @@ import { toast } from 'sonner';
 import { isAxiosError } from 'axios';
 import { accessModesOptions, sizeOptions } from './data/select-options';
 import { useDownload } from '@/hooks';
-import { useFieldArray, useForm, useFormContext } from 'react-hook-form';
+import { useFieldArray, useForm } from 'react-hook-form';
 
 import { FormWrapper } from '@/components/form/form-wrapper';
 import { zodResolver } from '@hookform/resolvers/zod';
 import { FormInput } from '@/components/form/form-input';
 import { FormCheckbox } from '@/components/form/form-checkbox';
 import { FormSelect } from '@/components/form/form-select';
+import PodEnvironmentFields from './components/pod-environment-fields';
+import type { THelmTemplate } from './helm-template.types';
 
 const HelmTemplate: FC = () => {
   const { mutateAsync: helmTemplateMutate, isPending: helmTemplatePending } =
@@ -41,8 +42,7 @@ const HelmTemplate: FC = () => {
       {
         name: '',
         image: '',
-        target_port: null,
-        replicas: "",
+        replicas: '',
         persistance: {},
         environment: [
           {
@@ -82,7 +82,7 @@ const HelmTemplate: FC = () => {
     remove(index);
   };
 
-  const handleSubmit = async (data: HelmTemplateSchema) => {
+  const handleSubmit = async (data: THelmTemplate) => {
     try {
       const body_data = data.pods.map((data) => {
         const { mode, accessModes, size } = data.persistance;
@@ -97,7 +97,7 @@ const HelmTemplate: FC = () => {
       });
 
       const body: HelmTemplateBody = {
-        api_version: parseInt(data.api_version),
+        api_version: data.api_version,
         pods: body_data,
       };
 
@@ -125,6 +125,8 @@ const HelmTemplate: FC = () => {
               id="api_version"
               name="api_version"
               placeholder="2"
+              inputType="number"
+              isNumber={true}
             />
           </div>
           <div className="mb-4 flex items-center">
@@ -200,6 +202,8 @@ const HelmTemplate: FC = () => {
                       name={`pods.${index}.target_port`}
                       label="Target Port"
                       placeholder="80"
+                      inputType="number"
+                      isNumber={true}
                     />
                   </div>
                   <div className="mb-2 flex flex-col">
@@ -208,6 +212,8 @@ const HelmTemplate: FC = () => {
                       name={`pods.${index}.replicas`}
                       label="Replicas"
                       placeholder="1"
+                      inputType="number"
+                      isNumber={true}
                     />
                   </div>
                   <p className="mb-2 mt-6 text-base font-bold">Persistence</p>
@@ -219,7 +225,6 @@ const HelmTemplate: FC = () => {
                         label=""
                         placeholder="Value"
                       />
-
                       <FormSelect
                         name={`pods.${index}.persistance.mode`}
                         label=""
@@ -290,66 +295,3 @@ const HelmTemplate: FC = () => {
 };
 
 export default HelmTemplate;
-
-interface PodEnvironmentFieldsProps {
-  podIndex: number;
-}
-
-export const PodEnvironmentFields: React.FC<PodEnvironmentFieldsProps> = ({
-  podIndex,
-}) => {
-  const { control } = useFormContext();
-  const { fields, append, remove } = useFieldArray({
-    control,
-    name: `pods.${podIndex}.environment`,
-  });
-
-  return (
-    <div className="mb-2 mt-6">
-      <div className="mb-2 flex items-center">
-        <p className="text-base font-bold">Environments</p>
-
-        <button
-          type="button"
-          onClick={() => append({ name: '', value: '' })}
-          className="btn btn-xs ml-4"
-        >
-          Add <Plus className="size-3" />
-        </button>
-      </div>
-      <div className="grid grid-cols-2 gap-4">
-        {fields.map((field, envIdx) => (
-          <div
-            className="mb-4 flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500 [&>div]:mb-0"
-            key={field.id}
-          >
-            <FormInput
-              id={`env_name_${envIdx}`}
-              name={`pods.${podIndex}.environment.${envIdx}.name`}
-              label=""
-              placeholder="Env"
-              className="h-12 w-full rounded-s-md px-2 outline-none"
-            />
-            <FormInput
-              id={`env_value_${envIdx}`}
-              name={`pods.${podIndex}.environment.${envIdx}.value`}
-              label=""
-              placeholder="Hi"
-              className={cn('h-12 w-full rounded-s-md px-2 outline-none', {
-                'rounded-e-md': envIdx === 0,
-              })}
-            />
-            {envIdx > 0 && (
-              <button
-                onClick={() => remove(envIdx)}
-                className="btn btn-error rounded-e-md rounded-s-none"
-              >
-                <Trash2 />
-              </button>
-            )}
-          </div>
-        ))}
-      </div>
-    </div>
-  );
-};
diff --git a/web/src/pages/helm-template/helm-template.types.ts b/web/src/pages/helm-template/helm-template.types.ts
index e565cc07..518b5d84 100644
--- a/web/src/pages/helm-template/helm-template.types.ts
+++ b/web/src/pages/helm-template/helm-template.types.ts
@@ -23,8 +23,6 @@ export interface helmTemplateValidationError {
 export interface Pod {
   name: string;
   image: string;
-  target_port: string | null;
-  replicas: string | null;
   persistance: {
     size: string;
     accessModes: string;
@@ -65,8 +63,12 @@ const ingressSchema = zod.object({
 const podSchema = zod.object({
   name: zod.string().min(1, 'Name is required'),
   image: zod.string().min(1, 'Image is required'),
-  target_port: zod.string().nullable(),
-  replicas: zod.string().min(1 ,"Replicas is required"),
+  target_port: zod
+    .number({ invalid_type_error: 'Target Port is required!' })
+    .min(1, 'Target Port is required!'),
+  replicas: zod
+    .number({ invalid_type_error: 'Replicas is required!' })
+    .min(1, 'Replicas is required'),
   persistance: persistanceSchema,
   environment: zod
     .array(environmentSchema)
@@ -76,7 +78,9 @@ const podSchema = zod.object({
 });
 
 export const helmTemplateSchema = zod.object({
-  api_version: zod.string().min(1, 'API version is required'),
+  api_version: zod
+    .number({ invalid_type_error: 'API version is required!' })
+    .min(1, 'API version is required'),
   pods: zod.array(podSchema).min(1, 'At least one pod is required'),
 });
-export type HelmTemplateSchema = zod.infer<typeof helmTemplateSchema>;
+export type THelmTemplate = zod.infer<typeof helmTemplateSchema>;
diff --git a/web/src/pages/terraform-template/ARGOCD/argocd.tsx b/web/src/pages/terraform-template/ARGOCD/argocd.tsx
index 7fc4b101..6bb0710e 100644
--- a/web/src/pages/terraform-template/ARGOCD/argocd.tsx
+++ b/web/src/pages/terraform-template/ARGOCD/argocd.tsx
@@ -138,7 +138,7 @@ const Argocd: FC = () => {
             </div>
           </div>
           <div className="flex w-full items-center justify-between px-3 py-3">
-            <p>Argocd Repository</p>
+            <p>ArgoCD Repository</p>
             <input
               type="checkbox"
               className={cn('toggle border-gray-500 bg-gray-500', {
diff --git a/web/src/pages/terraform-template/components/layout.tsx b/web/src/pages/terraform-template/components/layout.tsx
index 8262a139..4b8d6fda 100644
--- a/web/src/pages/terraform-template/components/layout.tsx
+++ b/web/src/pages/terraform-template/components/layout.tsx
@@ -20,7 +20,7 @@ const menu = [
   },
   {
     url: 'argocd',
-    title: 'ARGOCD Service',
+    title: 'ArgoCD Service',
   },
 ];
 
diff --git a/web/src/pages/helm-template/styles/helm-template.style.ts b/web/src/styles/select.styles.ts
similarity index 85%
rename from web/src/pages/helm-template/styles/helm-template.style.ts
rename to web/src/styles/select.styles.ts
index bad06869..970e74d3 100644
--- a/web/src/pages/helm-template/styles/helm-template.style.ts
+++ b/web/src/styles/select.styles.ts
@@ -2,6 +2,7 @@ import { GroupBase, StylesConfig } from 'react-select';
 
 export const selectStyle = (
   isDark?: boolean,
+  error?: boolean,
 ):
   | StylesConfig<
       {
@@ -18,7 +19,7 @@ export const selectStyle = (
   return {
     control: (styles) => ({
       ...styles,
-      border: isDark ? 'none' : '1px solid #e3e3e3',
+      border: error ? '1px solid #ef4444' : '1px solid #6b7280',
       borderRadius: '6px',
       background: isDark ? '#121212' : '#fff',
       color: isDark ? '#fff' : '#121212',
@@ -34,8 +35,11 @@ export const selectStyle = (
     menu: (styles) => ({
       ...styles,
       background: isDark ? '#121212' : '#fff',
-      border: 'none',
+      border: '1px solid #fff',
+      borderRadius: '6px',
+      boxShadow: '0 10px 10px 4px #000',
     }),
+
     option: (styles) => ({
       ...styles,
       background: isDark ? '#121212' : '#fff',
diff --git a/web/src/types/form.types.ts b/web/src/types/form.types.ts
index 26c29590..52f960de 100644
--- a/web/src/types/form.types.ts
+++ b/web/src/types/form.types.ts
@@ -8,6 +8,9 @@ export type FormFieldProps = {
   label: string;
   error?: string;
   placeholder?: string;
+  isNumber?: boolean;
+  inputType?: typeof HTMLInputElement.prototype.type;
+  inputClass?: string;
 } & ComponentPropsWithoutRef<typeof Form.Field>;
 
 export type FormConfig<T extends z.ZodType> = {