diff --git a/pkgs/webview-ui/app/src/layout/layout.tsx b/pkgs/webview-ui/app/src/layout/layout.tsx
index 0aef50176..033035bb2 100644
--- a/pkgs/webview-ui/app/src/layout/layout.tsx
+++ b/pkgs/webview-ui/app/src/layout/layout.tsx
@@ -8,7 +8,7 @@ export const Layout: Component<RouteSectionProps> = (props) => {
   createEffect(() => {
     console.log(
       "empty ClanList, redirect to welcome page",
-      clanList().length === 0
+      clanList().length === 0,
     );
     if (clanList().length === 0) {
       navigate("/welcome");
diff --git a/pkgs/webview-ui/app/src/routes/machines/avatar.tsx b/pkgs/webview-ui/app/src/routes/machines/avatar.tsx
index 9aa243d30..227312867 100644
--- a/pkgs/webview-ui/app/src/routes/machines/avatar.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/avatar.tsx
@@ -11,7 +11,7 @@ export const MachineAvatar = (props: AvatarProps) => {
         <div
           class={cx(
             "rounded-lg border p-2 bg-def-1 border-def-3 size-36",
-            props.class
+            props.class,
           )}
         >
           <RndThumbnail name={props.name || ""} />
diff --git a/pkgs/webview-ui/app/src/routes/machines/create.tsx b/pkgs/webview-ui/app/src/routes/machines/create.tsx
index 1c87c569b..7580555e2 100644
--- a/pkgs/webview-ui/app/src/routes/machines/create.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/create.tsx
@@ -3,11 +3,14 @@ import { activeURI } from "@/src/App";
 import { Button } from "@/src/components/button";
 import Icon from "@/src/components/icon";
 import { TextInput } from "@/src/components/TextInput";
+import { Header } from "@/src/layout/header";
 import { createForm, required, reset } from "@modular-forms/solid";
 import { useNavigate } from "@solidjs/router";
-import { createQuery, useQueryClient } from "@tanstack/solid-query";
+import { useQueryClient } from "@tanstack/solid-query";
 import { Match, Switch } from "solid-js";
 import toast from "solid-toast";
+import { MachineAvatar } from "./avatar";
+import { DynForm } from "@/src/Form/form";
 
 type CreateMachineForm = OperationArgs<"create_machine">;
 
@@ -66,68 +69,111 @@ export function CreateMachine() {
     }
   };
   return (
-    <div class="flex w-full justify-center">
-      <div class="mt-4 w-full max-w-3xl self-stretch px-2">
-        <span class="px-2">Create new Machine</span>
-        <Form onSubmit={handleSubmit}>
-          <Field
-            name="opts.machine.name"
-            validate={[required("This field is required")]}
-          >
-            {(field, props) => (
-              <TextInput
-                inputProps={props}
-                formStore={formStore}
-                value={`${field.value}`}
-                label={"name"}
-                error={field.error}
-                required
-              />
-            )}
-          </Field>
-          <Field name="opts.machine.description">
-            {(field, props) => (
-              <TextInput
-                inputProps={props}
-                formStore={formStore}
-                value={`${field.value}`}
-                label={"description"}
-                error={field.error}
-              />
-            )}
-          </Field>
-          <Field name="opts.machine.deploy.targetHost">
-            {(field, props) => (
-              <>
+    <>
+      <Header title="Create Machine" />
+      <div class="flex w-full p-4">
+        <div class="mt-4 w-full self-stretch px-2">
+          <Form onSubmit={handleSubmit}>
+            <Field
+              name="opts.machine.name"
+              validate={[required("This field is required")]}
+            >
+              {(field, props) => (
+                <>
+                  <div class="flex justify-center">
+                    <MachineAvatar name={field.value} />
+                  </div>
+                  <TextInput
+                    inputProps={props}
+                    formStore={formStore}
+                    value={`${field.value}`}
+                    label={"name"}
+                    error={field.error}
+                    required
+                    placeholder="New_machine"
+                  />
+                </>
+              )}
+            </Field>
+            <Field name="opts.machine.description">
+              {(field, props) => (
                 <TextInput
                   inputProps={props}
                   formStore={formStore}
                   value={`${field.value}`}
-                  label={"Deployment target"}
+                  label={"description"}
                   error={field.error}
+                  placeholder="My awesome machine"
                 />
-              </>
-            )}
-          </Field>
-          <div class="mt-12 flex justify-end">
-            <Button
-              type="submit"
-              disabled={formStore.submitting}
-              startIcon={
-                formStore.submitting ? (
-                  <Icon icon="Load" />
-                ) : (
-                  <Icon icon="Plus" />
-                )
-              }
-            >
-              <Switch fallback={<>Creating</>}>
-                <Match when={!formStore.submitting}>Create</Match>
-              </Switch>
-            </Button>
-          </div>
-        </Form>
+              )}
+            </Field>
+            <Field name="opts.machine.tags" type="string[]">
+              {(field, props) => (
+                <div class="p-2">
+                  <DynForm
+                    initialValues={{ tags: ["all"] }}
+                    components={{
+                      before: <div>Tags</div>,
+                    }}
+                    schema={{
+                      type: "object",
+                      properties: {
+                        tags: {
+                          type: "array",
+                          items: {
+                            title: "Tag",
+                            type: "string",
+                          },
+                          uniqueItems: true,
+                        },
+                      },
+                    }}
+                  />
+                </div>
+              )}
+            </Field>
+            <div class="collapse collapse-arrow" tabindex="0">
+              <input type="checkbox" />
+              <div class="collapse-title link font-medium ">
+                Deployment Settings
+              </div>
+              <div class="collapse-content">
+                <Field name="opts.machine.deploy.targetHost">
+                  {(field, props) => (
+                    <>
+                      <TextInput
+                        inputProps={props}
+                        formStore={formStore}
+                        value={`${field.value}`}
+                        label={"Target"}
+                        error={field.error}
+                        placeholder="e.g. 192.168.188.64"
+                      />
+                    </>
+                  )}
+                </Field>
+              </div>
+            </div>
+            <div class="mt-12 flex justify-end">
+              <Button
+                type="submit"
+                disabled={formStore.submitting}
+                startIcon={
+                  formStore.submitting ? (
+                    <Icon icon="Load" />
+                  ) : (
+                    <Icon icon="Plus" />
+                  )
+                }
+              >
+                <Switch fallback={<>Creating</>}>
+                  <Match when={!formStore.submitting}>Create</Match>
+                </Switch>
+              </Button>
+            </div>
+          </Form>
+        </div>
       </div>
-    </div>
+    </>
   );
 }
diff --git a/pkgs/webview-ui/app/src/routes/machines/details.tsx b/pkgs/webview-ui/app/src/routes/machines/details.tsx
index ffaf67dfa..b8bda0488 100644
--- a/pkgs/webview-ui/app/src/routes/machines/details.tsx
+++ b/pkgs/webview-ui/app/src/routes/machines/details.tsx
@@ -63,7 +63,7 @@ const InstallMachine = (props: InstallMachineProps) => {
     }
 
     const loading_toast = toast.loading(
-      "Installing machine. Grab coffee (15min)..."
+      "Installing machine. Grab coffee (15min)...",
     );
     const r = await callApi("install_machine", {
       opts: {
@@ -246,13 +246,13 @@ const MachineForm = (props: MachineDetailsProps) => {
         ...values.machine,
         // TODO: Remove this workaround
         tags: Array.from(
-          values.machine.tags || props.initialData.machine.tags || []
+          values.machine.tags || props.initialData.machine.tags || [],
         ),
       },
     });
     if (machine_response.status === "error") {
       toast.error(
-        `Failed to set machine: ${machine_response.errors[0].message}`
+        `Failed to set machine: ${machine_response.errors[0].message}`,
       );
     }
     if (machine_response.status === "success") {
@@ -438,7 +438,7 @@ const MachineForm = (props: MachineDetailsProps) => {
               // disabled={!online()}
               onClick={() => {
                 const modal = document.getElementById(
-                  "install_modal"
+                  "install_modal",
                 ) as HTMLDialogElement | null;
                 modal?.showModal();
               }}
@@ -544,7 +544,7 @@ function WifiModule(props: MachineWifiProps) {
   });
 
   const [nets, setNets] = createSignal<1[]>(
-    new Array(props.initialData.length || 1).fill(1)
+    new Array(props.initialData.length || 1).fill(1),
   );
 
   const handleSubmit = async (values: WifiForm) => {
@@ -555,7 +555,7 @@ function WifiModule(props: MachineWifiProps) {
           ...acc,
           [curr.ssid || ""]: { ssid: curr.ssid, password: curr.password },
         }),
-        {}
+        {},
       );
 
     console.log("submitting", values, networks);