diff --git a/web/src/components/form/form-input.tsx b/web/src/components/form/form-input.tsx
index be46e833..247b7a84 100644
--- a/web/src/components/form/form-input.tsx
+++ b/web/src/components/form/form-input.tsx
@@ -11,8 +11,11 @@ export const FormInput = ({
   isNumber,
   inputType,
   inputClass,
+  showError = true,
   ...props
 }: FormFieldProps) => {
+  const { className, ...restProps } = props;
+
   const {
     register,
     formState: { errors },
@@ -24,12 +27,12 @@ export const FormInput = ({
   return (
     <Form.Field
       className={cn('form-field relative', {
-        'mb-6': errorMessage,
+        'mb-6': errorMessage && showError,
       })}
       name={name}
     >
       {label && (
-        <div className="flex items-baseline justify-between mb-1">
+        <div className="mb-1 flex items-baseline justify-between">
           <Form.Label className="form-label">{label}</Form.Label>
         </div>
       )}
@@ -38,18 +41,18 @@ export const FormInput = ({
           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,
+            inputClass,
             {
               'border-red-500 dark:border': errorMessage,
             },
           )}
           {...register(name, { ...(isNumber && { valueAsNumber: true }) })}
-          {...props}
+          {...restProps}
         />
       </Form.Control>
-      {errorMessage && (
+      {showError && errorMessage && (
         <div className="absolute left-0 top-full">
-          <Form.Message className="ml-auto text-sm text-red-500 form-message">
+          <Form.Message className="form-message ml-auto text-sm text-red-500">
             {errorMessage}
           </Form.Message>
         </div>
diff --git a/web/src/hooks/useDownload.ts b/web/src/hooks/useDownload.ts
index 20808303..158858ae 100644
--- a/web/src/hooks/useDownload.ts
+++ b/web/src/hooks/useDownload.ts
@@ -30,6 +30,7 @@ const useDownload = ({
       document.body.appendChild(link);
       link.click();
       document.body.removeChild(link);
+      URL.revokeObjectURL(link.href);
     }
   }, [isSuccess, data]);
 
diff --git a/web/src/lib/helper.ts b/web/src/lib/helper.ts
index 7bf8d285..f1d78147 100644
--- a/web/src/lib/helper.ts
+++ b/web/src/lib/helper.ts
@@ -5,18 +5,16 @@ export const getNestedValue = (obj: any, path: string) => {
 };
 
 export const convertKVtoObject = (
-  kvArray: Array<{ key: string; value: string } | null>,
+  kvArray: Array<{ key: string; value: string } | null> | null,
 ) => {
   return kvArray?.reduce(
     (acc, curr) => {
-
       if (curr && acc) {
         acc[curr.key] = curr?.value;
-
       }
       return acc;
     },
-    {} as Record<string, string> | null,
+    {} as { [key: string]: string } | null,
   );
 };
 
diff --git a/web/src/pages/basic/basic.tsx b/web/src/pages/basic/basic.tsx
index 6d78b223..8ab8ae4e 100644
--- a/web/src/pages/basic/basic.tsx
+++ b/web/src/pages/basic/basic.tsx
@@ -5,6 +5,7 @@ import { usePost } from '@/core/react-query';
 import { BasicBody, BasicMessage, BasicResponse } from './basic.types';
 import { API } from '@/enums/api.enums';
 import { BeatLoader } from 'react-spinners';
+import { isAxiosError } from 'axios';
 
 const Basic: FC = () => {
   const { mutateAsync } = usePost<BasicResponse, BasicBody>(API.Basic, 'basic');
@@ -54,16 +55,22 @@ const Basic: FC = () => {
     } catch (error) {
       console.log(error);
       setMessages((prev) => prev.slice(0, -1));
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   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-[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">
+        <div className="w-full p-2 rounded-md">
+          <div className="flex items-center justify-center w-full h-full gap-3">
+            <div className="flex flex-col w-full">
               <label htmlFor="min_token" className="mb-2">
                 Min Token
               </label>
@@ -72,10 +79,10 @@ const Basic: FC = () => {
                 type="number"
                 value={minToken}
                 onChange={(e) => setMinToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="max_token" className="mb-2">
                 Max Token
               </label>
@@ -84,10 +91,10 @@ const Basic: FC = () => {
                 type="number"
                 value={maxToken}
                 onChange={(e) => setMaxToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="service" className="mb-2">
                 Service
               </label>
@@ -96,7 +103,7 @@ const Basic: FC = () => {
                 type="text"
                 value={service}
                 onChange={(e) => setService(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
           </div>
@@ -107,14 +114,14 @@ const Basic: FC = () => {
             >
               {messages.map((message) =>
                 message.role === 'user' ? (
-                  <div className="chat chat-end max-w-full">
-                    <div className="chat-bubble bg-gray-600 text-white">
+                  <div className="max-w-full chat chat-end">
+                    <div className="text-white bg-gray-600 chat-bubble">
                       {message.content}
                     </div>
                   </div>
                 ) : (
-                  <div className="chat chat-start max-w-full">
-                    <div className="chat-bubble text-white">
+                  <div className="max-w-full chat chat-start">
+                    <div className="text-white chat-bubble">
                       {message.loading ? (
                         <BeatLoader color="#e3e3e3" size={10} />
                       ) : (
@@ -131,12 +138,12 @@ const Basic: FC = () => {
               value={input}
               onChange={(e) => setInput(e.target.value)}
               rows={2}
-              className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
+              className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
             />
             <button
               disabled={!input}
               onClick={handleSendMessage}
-              className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
+              className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
             >
               <Send className="size-6 stroke-[#121212]" />
             </button>
diff --git a/web/src/pages/bug-fix/bug-fix.tsx b/web/src/pages/bug-fix/bug-fix.tsx
index 1187022a..cc597e0b 100644
--- a/web/src/pages/bug-fix/bug-fix.tsx
+++ b/web/src/pages/bug-fix/bug-fix.tsx
@@ -5,6 +5,7 @@ import { BugFixBody, BugFixMessage, BugFixResponse } from './bug-fix.types';
 import { usePost } from '@/core/react-query';
 import { toast } from 'sonner';
 import { BeatLoader } from 'react-spinners';
+import { isAxiosError } from 'axios';
 
 const BugFix: FC = () => {
   const { mutateAsync } = usePost<BugFixResponse, BugFixBody>(
@@ -57,18 +58,23 @@ const BugFix: FC = () => {
         ),
       );
     } catch (error) {
-      console.log(error);
       setMessages((prev) => prev.slice(0, -1));
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   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-[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">
+        <div className="w-full p-2 rounded-md">
+          <div className="flex items-center justify-center w-full h-full gap-3">
+            <div className="flex flex-col w-full">
               <label htmlFor="min_token" className="mb-2">
                 Min Token
               </label>
@@ -77,10 +83,10 @@ const BugFix: FC = () => {
                 type="number"
                 value={minToken}
                 onChange={(e) => setMinToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="max_token" className="mb-2">
                 Max Token
               </label>
@@ -89,10 +95,10 @@ const BugFix: FC = () => {
                 type="number"
                 value={maxToken}
                 onChange={(e) => setMaxToken(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="service" className="mb-2">
                 Service
               </label>
@@ -101,10 +107,10 @@ const BugFix: FC = () => {
                 type="text"
                 value={service}
                 onChange={(e) => setService(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
-            <div className="flex w-full flex-col">
+            <div className="flex flex-col w-full">
               <label htmlFor="version" className="mb-2">
                 Version
               </label>
@@ -113,7 +119,7 @@ const BugFix: FC = () => {
                 type="text"
                 value={version}
                 onChange={(e) => setVersion(e.target.value)}
-                className="w-full rounded-md bg-gray-200 p-3 outline-none dark:bg-black-1"
+                className="w-full p-3 bg-gray-200 rounded-md outline-none dark:bg-black-1"
               />
             </div>
           </div>
@@ -124,14 +130,14 @@ const BugFix: FC = () => {
             >
               {messages.map((message) =>
                 message.role === 'user' ? (
-                  <div className="chat chat-end max-w-full">
-                    <div className="chat-bubble bg-gray-600 text-white">
+                  <div className="max-w-full chat chat-end">
+                    <div className="text-white bg-gray-600 chat-bubble">
                       {message.content}
                     </div>
                   </div>
                 ) : (
-                  <div className="chat chat-start max-w-full">
-                    <div className="chat-bubble text-white">
+                  <div className="max-w-full chat chat-start">
+                    <div className="text-white chat-bubble">
                       {message.loading ? (
                         <BeatLoader color="#e3e3e3" size={10} />
                       ) : (
@@ -148,12 +154,12 @@ const BugFix: FC = () => {
               value={bugDescription}
               onChange={(e) => setBugDescription(e.target.value)}
               rows={2}
-              className="w-full resize-none rounded-md bg-gray-200 p-4 pr-16 outline-none dark:bg-black-1"
+              className="w-full p-4 pr-16 bg-gray-200 rounded-md outline-none resize-none dark:bg-black-1"
             />
             <button
               disabled={!bugDescription}
               onClick={handleSendMessage}
-              className="absolute right-3 top-5 flex items-center justify-center rounded-full bg-white p-2 transition-all disabled:opacity-50"
+              className="absolute flex items-center justify-center p-2 transition-all bg-white rounded-full right-3 top-5 disabled:opacity-50"
             >
               <Send className="size-6 stroke-[#121212]" />
             </button>
diff --git a/web/src/pages/docker-compose/components/network-fields.tsx b/web/src/pages/docker-compose/components/network-fields.tsx
index c2664be6..54e32f2f 100644
--- a/web/src/pages/docker-compose/components/network-fields.tsx
+++ b/web/src/pages/docker-compose/components/network-fields.tsx
@@ -5,7 +5,7 @@ import { FormInput } from '@/components/form/form-input';
 import { FormCheckbox } from '@/components/form/form-checkbox';
 import { FormSelect } from '@/components/form/form-select';
 
-const defaultNetworkDrivers = ['bridge', 'host', 'none', 'overlay'] as const;
+const defaultNetworkDrivers = ['Bridge', 'Host', 'None', 'Overlay'] as const;
 
 const NetworkFields: FC = () => {
   const { control, watch } = useFormContext();
@@ -15,7 +15,7 @@ const NetworkFields: FC = () => {
     name: 'networks.app_network',
   });
 
-  const customNetwork = watch('networks.custom');
+  const customNetwork = watch('networks.external_network');
 
   const handleRemoveNetwork = (index: number) => {
     remove(index);
@@ -25,13 +25,12 @@ const NetworkFields: FC = () => {
     const networkData = customNetwork
       ? {
           network_name: '',
-          external: false,
           name: '',
         }
       : {
           network_name: '',
           driver: {
-            label: 'bridge',
+            label: 'Bridge',
             value: 'bridge',
           },
         };
@@ -52,11 +51,14 @@ const NetworkFields: FC = () => {
             Add <Plus className="size-3" />
           </button>
         </div>
-        <FormCheckbox label="Custom" name="networks.custom" />
+        <FormCheckbox
+          label="External Network"
+          name="networks.external_network"
+        />
       </div>
 
       <div className="space-y-4">
-        <div className="w-full rounded-md border border-gray-500 p-5">
+        <div className="flex w-full flex-col gap-4 rounded-md border border-gray-500 p-5">
           {fields.map((field, index) => (
             <div key={field.id} className="mb-4">
               <div className="mb-4 flex items-center justify-between">
@@ -72,19 +74,12 @@ const NetworkFields: FC = () => {
               </div>
 
               <div>
-                {customNetwork && (
-                  <div className="mb-2 flex justify-end">
-                    <FormCheckbox
-                      name={`networks.app_network.${index}.external`}
-                      label="External Network"
-                    />
-                  </div>
-                )}
                 <div className="flex items-center gap-3 [&>div]:flex-1">
                   <FormInput
                     name={`networks.app_network.${index}.network_name`}
                     label="App Network"
                     placeholder="network_name"
+                    showError={false}
                   />
                   {!customNetwork && (
                     <FormSelect
@@ -101,6 +96,7 @@ const NetworkFields: FC = () => {
                       name={`networks.app_network.${index}.name`}
                       label="Name"
                       placeholder="Name"
+                      showError={false}
                     />
                   )}
                 </div>
diff --git a/web/src/pages/docker-compose/components/service-build-fields.tsx b/web/src/pages/docker-compose/components/service-build-fields.tsx
index 07799fb3..cc4b9224 100644
--- a/web/src/pages/docker-compose/components/service-build-fields.tsx
+++ b/web/src/pages/docker-compose/components/service-build-fields.tsx
@@ -21,8 +21,8 @@ export const ServiceBuildFields: FC<ServiceBuildFieldsProps> = ({
   });
 
   return (
-    <div className="mb-2 mt-6">
-      <div className="mb-4 flex items-center justify-between">
+    <div className="mt-6 mb-2">
+      <div className="flex items-center justify-between mb-4">
         <p className="text-base font-bold">Build Configuration</p>
         <FormCheckbox
           name={`services.${serviceIndex}.build.enabled`}
@@ -31,7 +31,7 @@ export const ServiceBuildFields: FC<ServiceBuildFieldsProps> = ({
       </div>
 
       {buildEnabled && (
-        <div className="space-y-4 rounded-md border border-gray-200 p-4 dark:border-gray-500">
+        <div className="p-4 space-y-4 border border-gray-200 rounded-md dark:border-gray-500">
           <div className="flex gap-2 [&>div]:flex-1">
             <FormInput
               name={`services.${serviceIndex}.build.context`}
@@ -51,48 +51,58 @@ export const ServiceBuildFields: FC<ServiceBuildFieldsProps> = ({
               <button
                 type="button"
                 onClick={() => append({ key: '', value: '' })}
-                className="btn btn-xs ml-4"
+                className="ml-4 btn btn-xs"
               >
                 Add <Plus className="size-3" />
               </button>
             </div>
 
-            {fields.map((field, idx) => (
-              <div className="flex items-center" key={field.id}>
+            <div className="grid grid-cols-2 gap-4">
+              {fields.map((field, idx) => (
                 <div
                   className={cn(
-                    'flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500',
+                    'relative mb-4 flex items-center divide-x-2 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(
-                          `services.${serviceIndex}.volumes.${idx}`,
+                          `services.${serviceIndex}.build.args.${idx}.key`,
+                        ).invalid ||
+                        control.getFieldState(
+                          `services.${serviceIndex}.build.args.${idx}.value`,
                         ).invalid,
                     },
                   )}
                   key={field.id}
                 >
                   <FormInput
-                    label=""
+                    id={`env_name_${idx}`}
                     name={`services.${serviceIndex}.build.args.${idx}.key`}
+                    label=""
                     placeholder="Key"
-                    className="h-12 w-full rounded-s-md px-2"
+                    inputClass={'border-none'}
                   />
                   <FormInput
-                    label=""
+                    id={`env_value_${idx}`}
                     name={`services.${serviceIndex}.build.args.${idx}.value`}
+                    label=""
                     placeholder="Value"
-                    className="h-12 w-full rounded-e-md px-2"
+                    inputClass={cn('border-none rounded-s-none', {
+                      'rounded-e-md': idx === 0,
+                    })}
                   />
-                  <button
-                    type="button"
-                    onClick={() => remove(idx)}
-                    className="btn btn-error rounded-e-md rounded-s-none"
-                  >
-                    <Trash2 />
-                  </button>
+
+                  {idx > 0 && (
+                    <button
+                      type="button"
+                      onClick={() => remove(idx)}
+                      className="z-10 h-full px-4"
+                    >
+                      <Trash2 className="size-4" />
+                    </button>
+                  )}
                 </div>
-              </div>
-            ))}
+              ))}
+            </div>
           </div>
         </div>
       )}
diff --git a/web/src/pages/docker-compose/components/service-depends-on-fields.tsx b/web/src/pages/docker-compose/components/service-depends-on-fields.tsx
index 858d8ee7..e0d54e44 100644
--- a/web/src/pages/docker-compose/components/service-depends-on-fields.tsx
+++ b/web/src/pages/docker-compose/components/service-depends-on-fields.tsx
@@ -19,40 +19,42 @@ const ServiceDependsOnFields: FC<ServiceDependsOnFieldsProps> = ({
   });
 
   return (
-    <div className="mb-2 mt-6">
-      <div className="mb-2 flex items-center">
+    <div className="mt-6 mb-2">
+      <div className="flex items-center mb-2">
         <p className="text-base font-bold">Depends On</p>
 
         <button
           type="button"
           onClick={() => append('')}
-          className="btn btn-xs ml-4"
+          className="ml-4 btn btn-xs"
         >
           Add <Plus className="size-3" />
         </button>
       </div>
-      <div className="flex gap-4">
-        {fields.map((field, depIdx) => (
-          <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',
-            )}
-            key={field.id}
-          >
+      <div className="grid grid-cols-3 gap-4">
+        {fields.map((field, idx) => (
+          <div className={'relative'} key={field.id}>
             <FormInput
-              id={`depends_on_${depIdx}`}
-              name={`services.${serviceIndex}.depends_on.${depIdx}`}
               label=""
+              name={`services.${serviceIndex}.depends_on.${idx}.value`}
               placeholder="Service name"
-              className="h-12 w-full rounded-s-md px-2 outline-none"
+              inputClass={cn({
+                'pr-8': idx > 0,
+                'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
+                  control.getFieldState(
+                    `services.${serviceIndex}.depends_on.${idx}`,
+                  ).invalid,
+              })}
             />
-
-            <button
-              onClick={() => remove(depIdx)}
-              className="btn btn-error rounded-e-md rounded-s-none"
-            >
-              <Trash2 />
-            </button>
+            {idx > 0 && (
+              <button
+                type="button"
+                onClick={() => remove(idx)}
+                className="absolute top-0 z-10 h-full right-3 rounded-e-md rounded-s-none"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
           </div>
         ))}
       </div>
diff --git a/web/src/pages/docker-compose/components/service-environment-fields.tsx b/web/src/pages/docker-compose/components/service-environment-fields.tsx
index f21c711d..9b363386 100644
--- a/web/src/pages/docker-compose/components/service-environment-fields.tsx
+++ b/web/src/pages/docker-compose/components/service-environment-fields.tsx
@@ -18,14 +18,14 @@ const ServiceEnvironmentFields: FC<ServiceEnvironmentFieldsProps> = ({
   });
 
   return (
-    <div className="mb-2 mt-6">
-      <div className="mb-2 flex items-center">
+    <div className="mt-6 mb-2">
+      <div className="flex items-center mb-2">
         <p className="text-base font-bold">Environments</p>
 
         <button
           type="button"
           onClick={() => append({ name: '', value: '' })}
-          className="btn btn-xs ml-4"
+          className="ml-4 btn btn-xs"
         >
           Add <Plus className="size-3" />
         </button>
@@ -34,7 +34,7 @@ const ServiceEnvironmentFields: FC<ServiceEnvironmentFieldsProps> = ({
         {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',
+              'relative mb-4 flex items-center divide-x-2 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(
@@ -49,24 +49,27 @@ const ServiceEnvironmentFields: FC<ServiceEnvironmentFieldsProps> = ({
               name={`services.${serviceIndex}.environment.${envIdx}.key`}
               label=""
               placeholder="Env"
-              className="h-12 w-full rounded-s-md px-2 outline-none"
+              inputClass={'border-none'}
             />
             <FormInput
               id={`env_value_${envIdx}`}
               name={`services.${serviceIndex}.environment.${envIdx}.value`}
               label=""
               placeholder="Hi"
-              className={cn('h-12 w-full rounded-s-md px-2 outline-none', {
+              inputClass={cn('border-none rounded-s-none', {
                 'rounded-e-md': envIdx === 0,
               })}
             />
 
-            <button
-              onClick={() => remove(envIdx)}
-              className="btn btn-error rounded-e-md rounded-s-none"
-            >
-              <Trash2 />
-            </button>
+            {envIdx > 0 && (
+              <button
+                type="button"
+                onClick={() => remove(envIdx)}
+                className="z-10 h-full px-4"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
           </div>
         ))}
       </div>
diff --git a/web/src/pages/docker-compose/components/service-network-fields.tsx b/web/src/pages/docker-compose/components/service-network-fields.tsx
index 6ecc1e5d..2a4361d6 100644
--- a/web/src/pages/docker-compose/components/service-network-fields.tsx
+++ b/web/src/pages/docker-compose/components/service-network-fields.tsx
@@ -19,46 +19,41 @@ const ServiceNetworkFields: FC<ServiceNetworkFieldsProps> = ({
   });
 
   return (
-    <div className="mb-2 mt-6">
-      <div className="mb-2 flex items-center">
+    <div className="mt-6 mb-2">
+      <div className="flex items-center mb-2">
         <p className="text-base font-bold">Network</p>
 
         <button
           type="button"
           onClick={() => append('')}
-          className="btn btn-xs ml-4"
+          className="ml-4 btn btn-xs"
         >
           Add <Plus className="size-3" />
         </button>
       </div>
-      <div className="flex gap-4">
-        {fields.map((field, networkIdx) => (
-          <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',
-              {
+      <div className="grid grid-cols-4 gap-4">
+        {fields.map((field, idx) => (
+          <div className={'relative'} key={field.id}>
+            <FormInput
+              label=""
+              name={`services.${serviceIndex}.networks.${idx}.value`}
+              inputClass={cn({
+                'pr-8': idx > 0,
                 'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
                   control.getFieldState(
-                    `services.${serviceIndex}.networks.${networkIdx}`,
+                    `services.${serviceIndex}.networks.${idx}`,
                   ).invalid,
-              },
-            )}
-            key={field.id}
-          >
-            <FormInput
-              id={`network_${networkIdx}`}
-              name={`services.${serviceIndex}.networks.${networkIdx}`}
-              label=""
-              placeholder=""
-              className="h-12 w-full rounded-s-md px-2 outline-none"
+              })}
             />
-
-            <button
-              onClick={() => remove(networkIdx)}
-              className="btn btn-error rounded-e-md rounded-s-none"
-            >
-              <Trash2 />
-            </button>
+            {idx > 0 && (
+              <button
+                type="button"
+                onClick={() => remove(idx)}
+                className="absolute top-0 z-10 h-full right-3 rounded-e-md rounded-s-none"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
           </div>
         ))}
       </div>
diff --git a/web/src/pages/docker-compose/components/service-ports-fields.tsx b/web/src/pages/docker-compose/components/service-ports-fields.tsx
index 05669c69..f02b587d 100644
--- a/web/src/pages/docker-compose/components/service-ports-fields.tsx
+++ b/web/src/pages/docker-compose/components/service-ports-fields.tsx
@@ -29,33 +29,29 @@ const ServicePortsFields: FC<ServicePortsFieldsProps> = ({ serviceIndex }) => {
           Add <Plus className="size-3" />
         </button>
       </div>
-      <div className="flex space-x-4">
+      <div className="grid grid-cols-4 gap-4">
         {fields.map((field, idx) => (
-          <div
-            className={cn(
-              'flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500',
-              {
-                'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
-                  control.getFieldState(`services.${serviceIndex}.ports.${idx}`)
-                    .invalid,
-              },
-            )}
-            key={field.id}
-          >
+          <div className={'relative'} key={field.id}>
             <FormInput
-              name={`services.${serviceIndex}.ports.${idx}`}
               label=""
+              name={`services.${serviceIndex}.ports.${idx}.value`}
               placeholder="8080:80"
-              className="h-12 w-full rounded-s-md px-2 outline-none"
+              inputClass={cn({
+                'pr-8': idx > 0,
+                'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
+                  control.getFieldState(`services.${serviceIndex}.ports.${idx}`)
+                    .invalid,
+              })}
             />
-
-            <button
-              type="button"
-              onClick={() => remove(idx)}
-              className="btn btn-error rounded-e-md rounded-s-none"
-            >
-              <Trash2 />
-            </button>
+            {idx > 0 && (
+              <button
+                type="button"
+                onClick={() => remove(idx)}
+                className="absolute right-3 top-0 z-10 h-full rounded-e-md rounded-s-none"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
           </div>
         ))}
       </div>
diff --git a/web/src/pages/docker-compose/components/service-volumes-fields.tsx b/web/src/pages/docker-compose/components/service-volumes-fields.tsx
index 1fa8de0e..96ad18c7 100644
--- a/web/src/pages/docker-compose/components/service-volumes-fields.tsx
+++ b/web/src/pages/docker-compose/components/service-volumes-fields.tsx
@@ -19,46 +19,42 @@ export const ServiceVolumesFields: FC<ServiceVolumesFieldsProps> = ({
   });
 
   return (
-    <div className="mb-2 mt-6">
-      <div className="mb-2 flex items-center">
+    <div className="mt-6 mb-2">
+      <div className="flex items-center mb-2">
         <p className="text-base font-bold">Volumes</p>
 
         <button
           type="button"
           onClick={() => append('')}
-          className="btn btn-xs ml-4"
+          className="ml-4 btn btn-xs"
         >
           Add <Plus className="size-3" />
         </button>
       </div>
-      <div className="flex space-x-4">
+      <div className="grid grid-cols-2 gap-4">
         {fields.map((field, idx) => (
-          <div
-            className={cn(
-              'flex items-center divide-x divide-gray-200 rounded-md border border-gray-200 dark:divide-gray-500 dark:border-gray-500',
-              {
+          <div className={'relative'} key={field.id}>
+            <FormInput
+              label=""
+              name={`services.${serviceIndex}.volumes.${idx}.value`}
+              placeholder="./host/path:/container/path"
+              inputClass={cn({
+                'pr-8': idx > 0,
                 'divide-red-500 border-red-500 dark:divide-red-500 dark:border-red-500':
                   control.getFieldState(
                     `services.${serviceIndex}.volumes.${idx}`,
                   ).invalid,
-              },
-            )}
-            key={field.id}
-          >
-            <FormInput
-              name={`services.${serviceIndex}.volumes.${idx}`}
-              label=""
-              placeholder="./host/path:/container/path"
-              className="h-12 w-full rounded-s-md px-2 outline-none"
+              })}
             />
-
-            <button
-              type="button"
-              onClick={() => remove(idx)}
-              className="btn btn-error rounded-e-md rounded-s-none"
-            >
-              <Trash2 />
-            </button>
+            {idx > 0 && (
+              <button
+                type="button"
+                onClick={() => remove(idx)}
+                className="absolute top-0 z-10 h-full right-3 rounded-e-md rounded-s-none"
+              >
+                <Trash2 className="size-4" />
+              </button>
+            )}
           </div>
         ))}
       </div>
diff --git a/web/src/pages/docker-compose/docker-compose.tsx b/web/src/pages/docker-compose/docker-compose.tsx
index b5bbabc9..1c22b224 100644
--- a/web/src/pages/docker-compose/docker-compose.tsx
+++ b/web/src/pages/docker-compose/docker-compose.tsx
@@ -12,6 +12,7 @@ import {
   INetworkConfig,
   TDockerCompose,
 } from './docker-compose.type';
+import type { DockerCompose } from './docker-compose.type';
 import { cn } from '@/lib/utils';
 import ServiceNetworkFields from './components/service-network-fields';
 import ServiceDependsOnFields from './components/service-depends-on-fields';
@@ -50,24 +51,46 @@ const DockerCompose: FC = () => {
         build: {
           context: '',
           dockerfile: '',
-          args: [],
+          args: [
+            {
+              key: '',
+              value: '',
+            },
+          ],
         },
-        command: '',
-        container_name: '',
-        environment: [],
+        command: null,
+        container_name: null,
+        environment: [
+          {
+            key: '',
+            value: '',
+          },
+        ],
         image: '',
-        ports: [''],
-        volumes: [''],
-        networks: [''],
-        depends_on: [''],
+        ports: [
+          {
+            value: '',
+          },
+        ],
+        volumes: [
+          {
+            value: '',
+          },
+        ],
+        networks: [
+          {
+            value: '',
+          },
+        ],
+        depends_on: [{ value: '' }],
       },
     ],
     networks: {
-      custom: false,
+      external_network: false,
       app_network: [
         {
           network_name: '',
-          driver: { value: 'bridge', label: 'bridge' },
+          driver: { value: 'bridge', label: 'Bridge' },
         },
       ],
     },
@@ -92,19 +115,45 @@ const DockerCompose: FC = () => {
   const handleAddService = () => {
     append({
       build: {
-        args: [],
+        args: [
+          {
+            key: '',
+            value: '',
+          },
+        ],
         context: '',
         dockerfile: '',
       },
       name: '',
-      command: '',
-      container_name: '',
+      command: null,
+      container_name: null,
       image: '',
-      environment: [],
-      depends_on: [''],
-      networks: [''],
-      ports: [''],
-      volumes: [''],
+      environment: [
+        {
+          key: '',
+          value: '',
+        },
+      ],
+      depends_on: [
+        {
+          value: '',
+        },
+      ],
+      networks: [
+        {
+          value: '',
+        },
+      ],
+      ports: [
+        {
+          value: '',
+        },
+      ],
+      volumes: [
+        {
+          value: '',
+        },
+      ],
     });
   };
 
@@ -131,49 +180,58 @@ const DockerCompose: FC = () => {
         }),
       );
 
-      const refactoredNetwork = data.networks.app_network.reduce(
-        (acc: INetworkConfig, network) => {
-          if (!data.networks.custom) {
-            if ('driver' in network) {
+      let refactoredNetwork: any;
+
+      if (!data.networks.app_network.some((network) => network.network_name)) {
+        refactoredNetwork = null;
+      } else {
+        refactoredNetwork = data.networks.app_network.reduce(
+          (acc: INetworkConfig, network) => {
+            if (!data.networks.external_network) {
+              if ('driver' in network) {
+                acc[network.network_name] = {
+                  driver: network.driver?.value,
+                };
+              }
+            }
+            if ('name' in network) {
               acc[network.network_name] = {
-                driver: network.driver?.value,
+                name: network.name,
+                external_network: true,
               };
             }
-          }
-          if ('name' in network && 'external' in network) {
-            acc[network.network_name] = {
-              name: network.name,
-              external: !!network.external,
-            };
-          }
-          return acc;
-        },
-        {},
-      );
+            return acc;
+          },
+          {},
+        );
+      }
 
       const services = refactoredService.map((item) => {
-        if (item.ports && item?.ports[0].length === 0) {
-          item.ports = null;
-        }
-        if (item.volumes && item.volumes[0].length === 0) {
-          item.volumes = null;
-        }
-        if (item.networks && item.networks[0].length === 0) {
-          item.networks = null;
-        }
-        if (item.depends_on && item.depends_on[0].length === 0) {
-          item.depends_on = null;
-        }
-        if (item.environment && !item.environment[0]) {
-          item.environment = null;
-        }
-        if (item.environment && item.environment[0]) {
-          item.environment = null;
-        }
-        if (item.command?.length === 0) {
-          item.command = null;
-        }
-        return item;
+        const bodyService = {
+          name: item.name,
+          build: item.build?.context ? item.build : null,
+          command: item.command ? item.command : null,
+          image: item.image ? item.image : null,
+          container_name: item.container_name ? item.container_name : null,
+          depends_on: item.depends_on?.some((item) => item.value) ? [''] : null,
+          ports: item.ports?.some((item) => item.value)
+            ? item.ports.map((port) => port.value)
+            : null,
+          volumes: item.volumes?.some((item) => item.value)
+            ? item.volumes.map((volume) => volume.value)
+            : null,
+          networks: item.networks?.some((item) => item.value)
+            ? item.networks.map((network) => network.value)
+            : null,
+          environment:
+            item.environment &&
+            Object.entries(item.environment).some(
+              ([k, v]) => k !== '' || v !== '',
+            )
+              ? item.environment
+              : null,
+        };
+        return bodyService;
       });
 
       const requestBody: DockerComposeBody = {
@@ -185,13 +243,11 @@ const DockerCompose: FC = () => {
       await dockerComposeMutate(requestBody);
       await download();
     } catch (error) {
-      console.log(error);
       if (isAxiosError<DockerComposeValidationError>(error)) {
         toast.error(
           `${error.response?.data.detail[0].loc[error.response?.data.detail[0].loc.length - 1]} ${error.response?.data.detail[0].msg}`,
         );
       } else {
-        console.log(error);
         toast.error('Something went wrong');
       }
     }
@@ -255,7 +311,7 @@ const DockerCompose: FC = () => {
                 </div>
                 <div
                   className={cn(
-                    'h-full max-h-0 overflow-hidden px-1 transition-all duration-500',
+                    'h-full max-h-0 overflow-y-auto px-1 transition-all duration-500',
                     {
                       'max-h-[1000px]': openService === index,
                     },
@@ -290,6 +346,7 @@ const DockerCompose: FC = () => {
                       id="command"
                       name={`services.${index}.command`}
                       label="Command"
+                      placeholder="command..."
                     />
                   </div>
                   <ServiceBuildFields serviceIndex={index} />
diff --git a/web/src/pages/docker-compose/docker-compose.type.ts b/web/src/pages/docker-compose/docker-compose.type.ts
index 3b36bcfb..f8307d64 100644
--- a/web/src/pages/docker-compose/docker-compose.type.ts
+++ b/web/src/pages/docker-compose/docker-compose.type.ts
@@ -31,7 +31,7 @@ export interface INetworkConfig {
       }
     | {
         name: string;
-        external: boolean;
+        external_network: boolean;
       };
 }
 
@@ -57,37 +57,58 @@ export interface DockerComposeValidationError {
 }
 
 const KV_Schema = zod.array(
-  zod
-    .object({
-      key: zod
-        .string()
-        .min(1, { message: 'Key must be at least 1 character long' }),
-      value: zod
-        .string()
-        .min(1, { message: 'Value must be at least 1 character long' }),
-    })
-    .nullable(),
+  zod.object({
+    key: zod.string(),
+    value: zod.string(),
+  }),
 );
 
 export const BuildSchema = zod.object({
   enabled: zod.boolean(),
   args: KV_Schema,
-  context: zod.string(),
-  dockerfile: zod.string(),
+  context: zod.string().optional(),
+  dockerfile: zod.string().optional(),
 });
 
-export const ServiceSchema = zod.object({
-  name: zod.string(),
-  build: BuildSchema,
-  image: zod.string(),
-  environment: KV_Schema,
-  container_name: zod.string(),
-  ports: zod.array(zod.string()).nullable(),
-  command: zod.string().optional().nullable(),
-  volumes: zod.array(zod.string()).nullable(),
-  networks: zod.array(zod.string()).nullable(),
-  depends_on: zod.array(zod.string()).nullable(),
-});
+export const ServiceSchema = zod
+  .object({
+    name: zod.string().min(1, 'Name is required!'),
+    build: BuildSchema,
+    image: zod.string().nullable(),
+    environment: KV_Schema,
+    container_name: zod.string().nullable(),
+    ports: zod.array(zod.object({ value: zod.string() })).nullable(),
+    command: zod.string().optional().nullable(),
+    volumes: zod.array(zod.object({ value: zod.string() })).nullable(),
+    networks: zod.array(zod.object({ value: zod.string() })).nullable(),
+    depends_on: zod.array(zod.object({ value: zod.string() })).nullable(),
+  })
+  .superRefine((data, ctx) => {
+    if (!data.build.enabled && !data.image) {
+      ctx.addIssue({
+        path: ['image'],
+        message: 'Image is required.',
+        code: zod.ZodIssueCode.custom,
+      });
+    }
+
+    if (data.build.enabled) {
+      if (!data.build.context) {
+        ctx.addIssue({
+          path: ['build', 'context'],
+          message: 'Context is required.',
+          code: zod.ZodIssueCode.custom,
+        });
+      }
+      if (!data.build.dockerfile) {
+        ctx.addIssue({
+          path: ['build', 'dockerfile'],
+          message: 'Dockerfile is required.',
+          code: zod.ZodIssueCode.custom,
+        });
+      }
+    }
+  });
 
 const labelValueSchema = zod.object({
   label: zod.string(),
@@ -96,7 +117,7 @@ const labelValueSchema = zod.object({
 
 export const NetworkSchema = zod.union([
   zod.object({
-    custom: zod.literal(false),
+    external_network: zod.literal(false),
     app_network: zod.array(
       zod.object({
         network_name: zod.string(),
@@ -105,25 +126,44 @@ export const NetworkSchema = zod.union([
     ),
   }),
   zod.object({
-    custom: zod.literal(true),
+    external_network: zod.literal(true),
     app_network: zod.array(
       zod.object({
-        network_name: zod.string(),
-        external: zod.boolean().optional(),
-        name: zod.string(),
+        network_name: zod.string().min(1, 'Network name is required.'),
+        name: zod.string().min(1, 'Name is required.'),
       }),
     ),
   }),
 ]);
 
 export const DockerComposeSchema = zod.object({
-  version: zod.string(),
+  version: zod.string().min(1, 'Version is required.'),
   services: zod.array(ServiceSchema),
   networks: NetworkSchema,
 });
 
 export type TDockerCompose = zod.infer<typeof DockerComposeSchema>;
 
+export type DockerCompose = {
+  version: string;
+  services: {
+    [key: string]: {
+      build: IBuildConfig | null;
+      image: string | null;
+      environment: {
+        [key: string]: string;
+      } | null;
+      container_name: string | null;
+      ports: string[] | null;
+      command: string | null;
+      volumes: string[] | null;
+      networks: string[] | null;
+      depends_on: string[] | null;
+    };
+  }[];
+  networks: INetworkConfig | null;
+};
+
 type AppNetwork = {
   network_name: string;
   driver: {
diff --git a/web/src/pages/helm-template/components/pod-environment-fields.tsx b/web/src/pages/helm-template/components/pod-environment-fields.tsx
index 2a1192f1..bd4dfed4 100644
--- a/web/src/pages/helm-template/components/pod-environment-fields.tsx
+++ b/web/src/pages/helm-template/components/pod-environment-fields.tsx
@@ -16,14 +16,14 @@ const PodEnvironmentFields: FC<PodEnvironmentFieldsProps> = ({ podIndex }) => {
   });
 
   return (
-    <div className="mb-2 mt-6">
-      <div className="mb-2 flex items-center">
+    <div className="mt-6 mb-2">
+      <div className="flex items-center mb-2">
         <p className="text-base font-bold">Environments</p>
 
         <button
           type="button"
           onClick={() => append({ name: '', value: '' })}
-          className="btn btn-xs ml-4"
+          className="ml-4 btn btn-xs"
         >
           Add <Plus className="size-3" />
         </button>
@@ -32,11 +32,14 @@ const PodEnvironmentFields: FC<PodEnvironmentFieldsProps> = ({ podIndex }) => {
         {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',
+              'relative mb-4 flex items-center divide-x-2 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 ||
+                  control.getFieldState(
+                    `pods.${podIndex}.environment.${envIdx}.value`,
                   ).invalid,
               },
             )}
@@ -47,23 +50,22 @@ const PodEnvironmentFields: FC<PodEnvironmentFieldsProps> = ({ podIndex }) => {
               name={`pods.${podIndex}.environment.${envIdx}.name`}
               label=""
               placeholder="Env"
-              className="h-12 w-full rounded-s-md px-2 outline-none"
+              inputClass={'border-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,
-              })}
+              inputClass={'border-none'}
             />
             {envIdx > 0 && (
               <button
+                type="button"
                 onClick={() => remove(envIdx)}
-                className="btn btn-error rounded-e-md rounded-s-none"
+                className="z-10 h-full px-4"
               >
-                <Trash2 />
+                <Trash2 className="size-4" />
               </button>
             )}
           </div>
diff --git a/web/src/pages/helm-template/helm-template.tsx b/web/src/pages/helm-template/helm-template.tsx
index 4ff61952..a7122867 100644
--- a/web/src/pages/helm-template/helm-template.tsx
+++ b/web/src/pages/helm-template/helm-template.tsx
@@ -119,7 +119,7 @@ const HelmTemplate: FC = () => {
     <div className="flex h-[calc(100%-56px)] w-full justify-center overflow-y-auto p-4 text-black-1 scrollbar-thin dark:text-white">
       <div className="h-full w-full max-w-[768px]">
         <FormWrapper methods={methods} onSubmit={handleSubmit}>
-          <div className="mb-4 flex w-full flex-col">
+          <div className="flex flex-col w-full mb-4">
             <FormInput
               label="Api Version"
               id="api_version"
@@ -129,13 +129,13 @@ const HelmTemplate: FC = () => {
               isNumber={true}
             />
           </div>
-          <div className="mb-4 flex items-center">
+          <div className="flex items-center mb-4">
             <h1 className="text-2xl font-bold">Pods</h1>
             <button
               type="button"
               disabled={pods.length >= 6}
               onClick={handleAddPod}
-              className="btn btn-xs ml-4"
+              className="ml-4 btn btn-xs"
             >
               Add <Plus className="size-3" />
             </button>
@@ -144,7 +144,7 @@ const HelmTemplate: FC = () => {
             {pods.map((pod, index) => (
               <div
                 key={pod.id}
-                className="w-full rounded-md border border-gray-500 p-5"
+                className="w-full p-5 border border-gray-500 rounded-md"
               >
                 <div
                   className={cn(
@@ -174,29 +174,25 @@ const HelmTemplate: FC = () => {
                 </div>
                 <div
                   className={cn(
-                    'h-full max-h-0 overflow-hidden px-1 transition-all duration-500',
+                    'h-full max-h-0 overflow-auto px-1 transition-all duration-500 scrollbar-thin',
                     {
-                      'max-h-[1500px]': openPod === index,
+                      'max-h-[1000px]': openPod === index,
                     },
                   )}
                 >
-                  <div className="mb-4 flex flex-col">
+                  <div className="grid grid-cols-2 gap-4">
                     <FormInput
                       id="pods_name"
                       name={`pods.${index}.name`}
                       label="Name"
                       placeholder="web"
                     />
-                  </div>
-                  <div className="mb-4 flex flex-col">
                     <FormInput
                       id="pods_image"
                       name={`pods.${index}.image`}
                       label="Image"
                       placeholder="nginx"
                     />
-                  </div>
-                  <div className="mb-4 flex flex-col">
                     <FormInput
                       id="pods_target_port"
                       name={`pods.${index}.target_port`}
@@ -205,8 +201,6 @@ const HelmTemplate: FC = () => {
                       inputType="number"
                       isNumber={true}
                     />
-                  </div>
-                  <div className="mb-2 flex flex-col">
                     <FormInput
                       id="pods_replicas"
                       name={`pods.${index}.replicas`}
@@ -216,8 +210,8 @@ const HelmTemplate: FC = () => {
                       isNumber={true}
                     />
                   </div>
-                  <p className="mb-2 mt-6 text-base font-bold">Persistence</p>
-                  <div className="mb-2 flex flex-col">
+                  <p className="mt-6 mb-2 text-base font-bold">Persistence</p>
+                  <div className="flex flex-col mb-2">
                     <p className="mb-1">Size</p>
                     <div className="flex gap-3 [&>div]:flex-1">
                       <FormInput
@@ -233,7 +227,7 @@ const HelmTemplate: FC = () => {
                       />
                     </div>
                   </div>
-                  <div className="mb-2 flex flex-col">
+                  <div className="flex flex-col mb-2">
                     <label className="mb-1">Access Modes</label>
                     <FormSelect
                       name={`pods.${index}.persistance.accessModes`}
@@ -244,7 +238,7 @@ const HelmTemplate: FC = () => {
                   </div>
 
                   <PodEnvironmentFields podIndex={index} />
-                  <div className="mb-2 mt-7 flex justify-between">
+                  <div className="flex justify-between mb-2 mt-7">
                     <label htmlFor="pods_stateless" className="mb-1">
                       Stateless
                     </label>
@@ -254,8 +248,8 @@ const HelmTemplate: FC = () => {
                       label=""
                     />
                   </div>
-                  <p className="mb-2 mt-6 text-base font-bold">Ingress</p>
-                  <div className="mb-2 mt-3 flex justify-between">
+                  <p className="mt-6 mb-2 text-base font-bold">Ingress</p>
+                  <div className="flex justify-between mt-3 mb-2">
                     <label htmlFor="pods_stateless" className="mb-1">
                       Enabled
                     </label>
@@ -265,7 +259,7 @@ const HelmTemplate: FC = () => {
                       label=""
                     />
                   </div>
-                  <div className="mb-2 mt-3 flex flex-col">
+                  <div className="flex flex-col mt-3 mb-2">
                     <FormInput
                       id="pods_ingress_host"
                       name={`pods.${index}.ingress.host`}
@@ -280,7 +274,7 @@ const HelmTemplate: FC = () => {
           <button
             type="submit"
             disabled={helmTemplatePending}
-            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"
+            className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
           >
             {helmTemplatePending
               ? 'Generating...'
diff --git a/web/src/pages/installation/installation.tsx b/web/src/pages/installation/installation.tsx
index 702a0373..e19108d3 100644
--- a/web/src/pages/installation/installation.tsx
+++ b/web/src/pages/installation/installation.tsx
@@ -51,9 +51,19 @@ const Installation: FC = () => {
       URL.revokeObjectURL(url);
     } catch (error) {
       if (isAxiosError<InstallationValidationError>(error)) {
-        toast.error(error.response?.data.detail[0].msg);
-      } else {
-        toast.error('Something went wrong');
+        if (
+          Array.isArray(error.response?.data.detail) &&
+          error.response?.data.detail[0].msg
+        ) {
+          toast.error(error.response.data.detail[0].msg);
+        } else if (
+          !Array.isArray(error.response?.data.detail) &&
+          error.response?.data.detail
+        ) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
       }
     }
   };
@@ -64,7 +74,7 @@ const Installation: FC = () => {
       className="flex h-[calc(100vh-56px)] w-full items-center justify-center"
     >
       <div className="w-full max-w-96">
-        <div className="divide-y divide-gray-500 rounded-md border border-gray-500">
+        <div className="border border-gray-500 divide-y divide-gray-500 rounded-md">
           <Select
             options={osSelectOptions}
             placeholder="os"
@@ -83,7 +93,7 @@ const Installation: FC = () => {
         <button
           type="submit"
           disabled={isPending || !os || !tool}
-          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"
+          className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
         >
           {isPending ? 'Wait...' : 'Generate'}
         </button>
diff --git a/web/src/pages/terraform-template/ARGOCD/argocd.tsx b/web/src/pages/terraform-template/ARGOCD/argocd.tsx
index 6bb0710e..a768c26e 100644
--- a/web/src/pages/terraform-template/ARGOCD/argocd.tsx
+++ b/web/src/pages/terraform-template/ARGOCD/argocd.tsx
@@ -6,6 +6,7 @@ import { usePost } from '@/core/react-query';
 import { ArgocdBody, ArgocdResponse } from './argocd.types';
 import { toast } from 'sonner';
 import { useDownload } from '@/hooks';
+import { isAxiosError } from 'axios';
 
 const Argocd: FC = () => {
   const { mutateAsync: argocdMutate, isPending: argocdPending } = usePost<
@@ -63,19 +64,24 @@ const Argocd: FC = () => {
       await argocdMutate(argocdBody);
       await download();
     } catch (error) {
-      console.log(error);
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   return (
     <form
       onSubmit={handleForm}
-      className="w-full max-w-96 text-black dark:text-white"
+      className="w-full text-black max-w-96 dark:text-white"
     >
-      <div className="rounded-md border border-gray-500">
+      <div className="border border-gray-500 rounded-md">
         <div className="divide-y divide-gray-500">
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>Argo Application</p>
             <input
               type="checkbox"
@@ -95,7 +101,7 @@ const Argocd: FC = () => {
             )}
           >
             <div
-              className="flex cursor-pointer items-center justify-between py-3 pl-10 pr-3"
+              className="flex items-center justify-between py-3 pl-10 pr-3 cursor-pointer"
               onClick={() => handleDropdown('sync_policy')}
             >
               <p>Sync Policy</p>
@@ -137,7 +143,7 @@ const Argocd: FC = () => {
               </div>
             </div>
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>ArgoCD Repository</p>
             <input
               type="checkbox"
@@ -148,7 +154,7 @@ const Argocd: FC = () => {
               onChange={() => handleServices('argocd_repository')}
             />
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>Application Depends Repository</p>
             <input
               type="checkbox"
@@ -164,7 +170,7 @@ const Argocd: FC = () => {
       <button
         type="submit"
         disabled={argocdPending || downloadPending}
-        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"
+        className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
       >
         {argocdPending
           ? 'Wait...'
diff --git a/web/src/pages/terraform-template/Docker/docker.tsx b/web/src/pages/terraform-template/Docker/docker.tsx
index 30eb0519..a1599a52 100644
--- a/web/src/pages/terraform-template/Docker/docker.tsx
+++ b/web/src/pages/terraform-template/Docker/docker.tsx
@@ -5,6 +5,7 @@ import { usePost } from '@/core/react-query';
 import { useDownload } from '@/hooks';
 import { TerraformTemplateAPI } from '@/enums/api.enums';
 import { toast } from 'sonner';
+import { isAxiosError } from 'axios';
 
 const Docker: FC = () => {
   const { mutateAsync: dockerMutate, isPending: dockerPending } = usePost<
@@ -40,19 +41,24 @@ const Docker: FC = () => {
       await dockerMutate(dockerBody);
       await download();
     } catch (error) {
-      console.log(error);
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   return (
     <form
       onSubmit={handleForm}
-      className="w-full max-w-96 text-black dark:text-white"
+      className="w-full text-black max-w-96 dark:text-white"
     >
-      <div className="rounded-md border border-gray-500">
+      <div className="border border-gray-500 rounded-md">
         <div className="divide-y divide-gray-500">
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>Key Pair</p>
             <input
               type="checkbox"
@@ -62,7 +68,7 @@ const Docker: FC = () => {
               onChange={() => handleServices('docker_image')}
             />
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>Security Group</p>
             <input
               type="checkbox"
@@ -78,7 +84,7 @@ const Docker: FC = () => {
       <button
         type="submit"
         disabled={dockerPending || downloadPending}
-        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"
+        className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
       >
         {dockerPending
           ? 'Wait...'
diff --git a/web/src/pages/terraform-template/EC2/ec2.tsx b/web/src/pages/terraform-template/EC2/ec2.tsx
index 53970ad6..b18e13f1 100644
--- a/web/src/pages/terraform-template/EC2/ec2.tsx
+++ b/web/src/pages/terraform-template/EC2/ec2.tsx
@@ -5,6 +5,7 @@ import { FormEvent, useState } from 'react';
 import { EC2Body, EC2Response } from './ec2.types';
 import { TerraformTemplateAPI } from '@/enums/api.enums';
 import { toast } from 'sonner';
+import { isAxiosError } from 'axios';
 
 const EC2 = () => {
   const { mutateAsync: ec2Mutate, isPending: ec2Pending } = usePost<
@@ -42,19 +43,24 @@ const EC2 = () => {
       await ec2Mutate(ec2Body);
       await download();
     } catch (error) {
-      console.log(error);
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   return (
     <form
       onSubmit={handleForm}
-      className="w-full max-w-96 text-black dark:text-white"
+      className="w-full text-black max-w-96 dark:text-white"
     >
-      <div className="rounded-md border border-gray-500">
+      <div className="border border-gray-500 rounded-md">
         <div className="divide-y divide-gray-500">
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>Key Pair</p>
             <input
               type="checkbox"
@@ -64,7 +70,7 @@ const EC2 = () => {
               onChange={() => handleServices('key_pair')}
             />
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>Security Group</p>
             <input
               type="checkbox"
@@ -75,7 +81,7 @@ const EC2 = () => {
               onChange={() => handleServices('security_group')}
             />
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>AWS Instance</p>
             <input
               type="checkbox"
@@ -85,7 +91,7 @@ const EC2 = () => {
               onChange={() => handleServices('aws_instance')}
             />
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>AMI From Instance</p>
             <input
               type="checkbox"
@@ -101,7 +107,7 @@ const EC2 = () => {
       <button
         type="submit"
         disabled={ec2Pending || downloadPending}
-        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"
+        className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
       >
         {ec2Pending
           ? 'Wait...'
diff --git a/web/src/pages/terraform-template/IAM/iam.tsx b/web/src/pages/terraform-template/IAM/iam.tsx
index 5a6633a4..b1792cee 100644
--- a/web/src/pages/terraform-template/IAM/iam.tsx
+++ b/web/src/pages/terraform-template/IAM/iam.tsx
@@ -5,6 +5,7 @@ import { IAMBody, IAMResponse } from './iam.types';
 import { TerraformTemplateAPI } from '@/enums/api.enums';
 import { useDownload } from '@/hooks';
 import { toast } from 'sonner';
+import { isAxiosError } from 'axios';
 
 const IAM: FC = () => {
   const { mutateAsync: iamMutate, isPending: iamPending } = usePost<
@@ -40,19 +41,24 @@ const IAM: FC = () => {
       await iamMutate(iamBody);
       await download();
     } catch (error) {
-      console.log(error);
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   return (
     <form
       onSubmit={handleForm}
-      className="w-full max-w-96 text-black dark:text-white"
+      className="w-full text-black max-w-96 dark:text-white"
     >
-      <div className="rounded-md border border-gray-500">
+      <div className="border border-gray-500 rounded-md">
         <div className="divide-y divide-gray-500">
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>IAM User</p>
             <input
               type="checkbox"
@@ -62,7 +68,7 @@ const IAM: FC = () => {
               onChange={() => handleServices('iam_user')}
             />
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>IAM Group</p>
             <input
               type="checkbox"
@@ -77,7 +83,7 @@ const IAM: FC = () => {
       <button
         type="submit"
         disabled={iamPending || downloadPending}
-        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"
+        className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
       >
         {iamPending
           ? 'Wait...'
diff --git a/web/src/pages/terraform-template/S3/s3.tsx b/web/src/pages/terraform-template/S3/s3.tsx
index 1418ce96..cc01536c 100644
--- a/web/src/pages/terraform-template/S3/s3.tsx
+++ b/web/src/pages/terraform-template/S3/s3.tsx
@@ -5,6 +5,7 @@ import { FC, FormEvent, useState } from 'react';
 import { S3Body, S3Response } from './s3.types';
 import { toast } from 'sonner';
 import { usePost } from '@/core/react-query';
+import { isAxiosError } from 'axios';
 
 const S3: FC = () => {
   const { mutateAsync: s3Mutate, isPending: s3Pending } = usePost<
@@ -40,19 +41,24 @@ const S3: FC = () => {
       await s3Mutate(s3Body);
       await download();
     } catch (error) {
-      console.log(error);
-      toast.error('Something went wrong');
+      if (isAxiosError(error)) {
+        if (error.response?.data.detail) {
+          toast.error(error.response.data.detail);
+        } else {
+          toast.error('Something went wrong');
+        }
+      }
     }
   };
 
   return (
     <form
       onSubmit={handleForm}
-      className="w-full max-w-96 text-black dark:text-white"
+      className="w-full text-black max-w-96 dark:text-white"
     >
-      <div className="rounded-md border border-gray-500">
+      <div className="border border-gray-500 rounded-md">
         <div className="divide-y divide-gray-500">
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>S3 Bucket</p>
             <input
               type="checkbox"
@@ -62,7 +68,7 @@ const S3: FC = () => {
               onChange={() => handleServices('s3_bucket')}
             />
           </div>
-          <div className="flex w-full items-center justify-between px-3 py-3">
+          <div className="flex items-center justify-between w-full px-3 py-3">
             <p>Bucket Versioning</p>
             <input
               type="checkbox"
@@ -78,7 +84,7 @@ const S3: FC = () => {
       <button
         type="submit"
         disabled={s3Pending || downloadPending}
-        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"
+        className="w-full mt-3 text-white btn bg-orange-base hover:bg-orange-base/70 disabled:bg-orange-base/50 disabled:text-white/70"
       >
         {s3Pending
           ? 'Wait...'
diff --git a/web/src/styles/select.styles.ts b/web/src/styles/select.styles.ts
index 970e74d3..e5bc870d 100644
--- a/web/src/styles/select.styles.ts
+++ b/web/src/styles/select.styles.ts
@@ -37,7 +37,9 @@ export const selectStyle = (
       background: isDark ? '#121212' : '#fff',
       border: '1px solid #fff',
       borderRadius: '6px',
-      boxShadow: '0 10px 10px 4px #000',
+      boxShadow: isDark
+        ? '0 10px 10px 4px #000'
+        : '0 5px 5px 2px rgba(0, 0, 0, 0.3)',
     }),
 
     option: (styles) => ({
diff --git a/web/src/types/form.types.ts b/web/src/types/form.types.ts
index 52f960de..bb32c0e2 100644
--- a/web/src/types/form.types.ts
+++ b/web/src/types/form.types.ts
@@ -11,6 +11,7 @@ export type FormFieldProps = {
   isNumber?: boolean;
   inputType?: typeof HTMLInputElement.prototype.type;
   inputClass?: string;
+  showError?: boolean;
 } & ComponentPropsWithoutRef<typeof Form.Field>;
 
 export type FormConfig<T extends z.ZodType> = {