diff --git a/frontend/src/components/config/util.tsx b/frontend/src/components/config/util.tsx
index f8caa46b8..3955ce37d 100644
--- a/frontend/src/components/config/util.tsx
+++ b/frontend/src/components/config/util.tsx
@@ -26,7 +26,7 @@ export const ConfigItem = ({
 }) => (
   <div
     className={cn(
-      "flex justify-between items-center border-b pb-4 min-h-[60px]",
+      "flex justify-between items-center border-b pb-4 min-h-[60px] last:border-none",
       className
     )}
   >
diff --git a/frontend/src/layouts/page.tsx b/frontend/src/layouts/page.tsx
index d835b0a35..e5017461e 100644
--- a/frontend/src/layouts/page.tsx
+++ b/frontend/src/layouts/page.tsx
@@ -95,11 +95,14 @@ export const ConfigInner = <T,>({
   onSave: () => void;
   components: Record<
     string,
-    {
-      [K in keyof Partial<T>]:
-        | true
-        | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);
-    }
+    Record<
+      string,
+      {
+        [K in keyof Partial<T>]:
+          | true
+          | ((value: T[K], set: (value: Partial<T>) => void) => ReactNode);
+      }
+    >
   >;
 }) => {
   const [show, setShow] = useState(keys(components)[0]);
@@ -119,19 +122,23 @@ export const ConfigInner = <T,>({
             </Button>
           ))}
         </div>
-        <Card className="w-full min-h-[500px]">
-          <CardHeader className="border-b">
-            <CardTitle className="capitalize">{show}</CardTitle>
-          </CardHeader>
-          <CardContent className="flex flex-col gap-4 mt-4">
-            <ConfigAgain
-              config={config}
-              update={update}
-              set={(u) => set((p) => ({ ...p, ...u }))}
-              components={components[show]}
-            />
-          </CardContent>
-        </Card>
+        <div className="flex flex-col gap-6 min-h-[500px] w-full">
+          {Object.entries(components[show]).map(([k, v]) => (
+            <Card className="w-full ">
+              <CardHeader className="border-b">
+                <CardTitle className="capitalize">{k}</CardTitle>
+              </CardHeader>
+              <CardContent className="flex flex-col gap-4 mt-4">
+                <ConfigAgain
+                  config={config}
+                  update={update}
+                  set={(u) => set((p) => ({ ...p, ...u }))}
+                  components={v}
+                />
+              </CardContent>
+            </Card>
+          ))}
+        </div>
       </div>
     </ConfigLayout>
   );
diff --git a/frontend/src/resources/deployment/config/index.tsx b/frontend/src/resources/deployment/config/index.tsx
index 816a35129..57e9105ba 100644
--- a/frontend/src/resources/deployment/config/index.tsx
+++ b/frontend/src/resources/deployment/config/index.tsx
@@ -5,6 +5,7 @@ import { useState } from "react";
 import {
   AccountSelector,
   ConfigInput,
+  ConfigItem,
   ResourceSelector,
 } from "@components/config/util";
 import { ImageConfig } from "./components/image";
@@ -22,14 +23,13 @@ export const ServerSelector = ({
   selected: string | undefined;
   set: (input: Partial<Types.DeploymentConfig>) => void;
 }) => (
-  <div className="flex items-center justify-between border-b pb-4">
-    Server
+  <ConfigItem label="Server">
     <ResourceSelector
       type="Server"
       selected={selected}
       onSelect={(server_id) => set({ server_id })}
     />
-  </div>
+  </ConfigItem>
 );
 
 export const DeploymentConfig = ({ id }: { id: string }) => {
@@ -53,45 +53,55 @@ export const DeploymentConfig = ({ id }: { id: string }) => {
       onSave={() => mutate({ id, config: update })}
       components={{
         general: {
-          server_id: (value, set) => (
-            <ServerSelector selected={value} set={set} />
-          ),
-          image: (value, set) => <ImageConfig image={value} set={set} />,
-          docker_account: (value, set) => (
-            <AccountSelector
-              id={update.server_id ?? config.server_id}
-              account_type="docker"
-              type="Server"
-              selected={value}
-              onSelect={(docker_account) => set({ docker_account })}
-            />
-          ),
-          restart: (value, set) => (
-            <RestartModeSelector selected={value} set={set} />
-          ),
-          extra_args: (value, set) => (
-            <ExtraArgs args={value ?? []} set={set} />
-          ),
-          process_args: (value, set) => (
-            <ConfigInput
-              label="Process Args"
-              value={value}
-              onChange={(process_args) => set({ process_args })}
-            />
-          ),
-          network: (value, set) => (
-            <NetworkModeSelector
-              selected={value}
-              onSelect={(network) => set({ network })}
-            />
-          ),
-          ports: (value, set) =>
-            show_ports && <PortsConfig ports={value ?? []} set={set} />,
-          volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
+          general: {
+            server_id: (value, set) => (
+              <ServerSelector selected={value} set={set} />
+            ),
+          },
+          container: {
+            image: (value, set) => <ImageConfig image={value} set={set} />,
+            docker_account: (value, set) => (
+              <AccountSelector
+                id={update.server_id ?? config.server_id}
+                account_type="docker"
+                type="Server"
+                selected={value}
+                onSelect={(docker_account) => set({ docker_account })}
+              />
+            ),
+            restart: (value, set) => (
+              <RestartModeSelector selected={value} set={set} />
+            ),
+            extra_args: (value, set) => (
+              <ExtraArgs args={value ?? []} set={set} />
+            ),
+            process_args: (value, set) => (
+              <ConfigInput
+                label="Process Args"
+                value={value}
+                onChange={(process_args) => set({ process_args })}
+              />
+            ),
+          },
+          network: {
+            network: (value, set) => (
+              <NetworkModeSelector
+                selected={value}
+                onSelect={(network) => set({ network })}
+              />
+            ),
+            ports: (value, set) =>
+              show_ports && <PortsConfig ports={value ?? []} set={set} />,
+          },
+          volumes: {
+            volumes: (v, set) => <VolumesConfig volumes={v ?? []} set={set} />,
+          },
         },
         environment: {
-          skip_secret_interp: true,
-          environment: (vars, set) => <EnvVars vars={vars ?? []} set={set} />,
+          environment: {
+            skip_secret_interp: true,
+            environment: (vars, set) => <EnvVars vars={vars ?? []} set={set} />,
+          },
         },
       }}
     />