diff --git a/src/components/workboard/inference-node.tsx b/src/components/workboard/inference-node.tsx
index 180cff6..15562e9 100644
--- a/src/components/workboard/inference-node.tsx
+++ b/src/components/workboard/inference-node.tsx
@@ -1,415 +1,403 @@
-// import { useInterpret, useSelector } from '@xstate/react';
-// import { useState } from 'react';
-import { Handle, type NodeProps, Position } from 'reactflow';
-// import { State, type StateFrom, assign, createMachine } from 'xstate';
-// import { Button } from '~/components/ui/button';
-// import {
-//   Card,
-//   CardContent,
-//   CardDescription,
-//   CardFooter,
-//   CardHeader,
-//   CardTitle,
-// } from '~/components/ui/card';
-// import {
-//   Sheet,
-//   SheetContent,
-//   SheetHeader,
-//   SheetTitle,
-// } from '~/components/ui/sheet';
-// import { toast } from '~/components/ui/use-toast';
-// import {
-//   type FormType,
-//   InferenceForm,
-// } from '~/components/workboard/node-component-forms/inference-form';
+import dayjs from 'dayjs';
+import { AlertTriangleIcon, CoffeeIcon } from 'lucide-react';
+import { useEffect, useState } from 'react';
 import {
-  type NodeData,
-  type NodeStatus,
-  useStoreActions,
-} from '~/hooks/use-store';
+  Handle,
+  type NodeProps,
+  Position,
+  useUpdateNodeInternals,
+} from 'reactflow';
+import { toast } from 'sonner';
+import { z } from 'zod';
+import { Alert, AlertDescription, AlertTitle } from '~/components/ui/alert';
+import { Button } from '~/components/ui/button';
+import { Card, CardContent } from '~/components/ui/card';
+import {
+  Sheet,
+  SheetContent,
+  SheetHeader,
+  SheetTitle,
+} from '~/components/ui/sheet';
+import { type NodeData, useStoreActions } from '~/hooks/use-store';
+import { api } from '~/utils/api';
 
-// import { api } from '~/utils/api';
+import {
+  type FormType,
+  InferenceForm,
+} from './node-component-forms/inference-form';
 
-// import { type NetworkXState } from './network-node';
+export function InferenceNode(nodeProps: NodeProps<NodeData>) {
+  const formEditState =
+    nodeProps.selected &&
+    ['active', 'error', 'success'].includes(nodeProps.data.status);
+  const [open, setOpen] = useState(false);
+  const [pokemon, setPokemon] = useState('');
 
-// interface JobEvent {
-//   type: 'done.invoke';
-//   data: { jobId?: string; jobStatus?: string; formData?: FormType };
-// }
+  useEffect(() => {
+    setOpen(formEditState);
+  }, [formEditState]);
 
-// type FormSubmitEvent =
-//   | { type: 'start'; data: { formData: FormType; connectedNodeName: string } }
-//   | { type: 'retry'; data: { formData: FormType; connectedNodeName: string } };
+  useEffect(() => {
+    const randomFirstGenPokemon = Math.floor(Math.random() * 151) + 1;
+    fetch(
+      'https://pokeapi.co/api/v2/pokemon/' + randomFirstGenPokemon.toString(),
+    )
+      .then((res) => res.json())
+      .then((data: unknown) => {
+        const parsed = z
+          .object({
+            name: z.string(),
+          })
+          .parse(data);
+        setPokemon(parsed.name);
+      })
+      .catch((err) => {
+        console.log(err);
+      });
+  }, []);
 
-// const inferenceMachine = createMachine({
-//   /** @xstate-layout N4IgpgJg5mDOIC5QEsB2AzMAnMqDGYAdGgIZ4AuyAbmAMRmVUnlgDaADALqKgAOA9rGSV+qHiAAeiAIwA2AMyEAnCqUB2JQCYAHEoCs2te1kAaEAE9E82ZsJrNsvWoAsavUtnsdzgL4+zaJg4+EQM1HSw5CRY5BzcSCACQiJiCVIIzuxqhM6a0tp67tq60vLWZpYI1rb2jnoKes7S7OzafgEY2LgEhABGAK6w5oS8uBBoULQQokRoVPwA1kSw-b0AtsIAUvy9ceJJwsii4unarTnazvJn7HqamhraFYhOeoROmlrSV9Vl7SCBLohPqDYajVDjVCTbBYfhYEYAG2Y6Dha0IK3WWx2ewSBxSJxkOiUhHkVzU8nJmnkSmkBmeCAeb1qTjUcmk9n0-0BwR6AyGhCw-VQqAmUxmxFQ8yWEqC3SIfOGguFEwQc34eGYR1QcRxfEEh2OaUJuhJZIp8ipNLpFkQskMhBaam09yUZPuei5nR58tBAqFIqhYtQs0lixDsuBCr9yqhqtDGpSOuk8T1yS1BIQ0k+xNJ5sp1NpTxtCHctkdzoM0izzl8-gBXrlIP5SoDk2mwYlUvDQN5vpbKrVCa1Os0KcS+vxRsz2dNeYtBetlQUxL0WWdZJc2gtnojveb-tF7ZDXZlPZ9+5jUDj8yHoh18jHePTU-U2T08izdyyt2a8npziUdhlE+IwyircktB3M8m0VA9Aw1EIEV1cc00NUB0maZxtByPJLjtJRikA0xi2pZxlDURwKJrLCAOkKDvUIGE4VoHByCwcxkKfNDJBeFoHSdLMXGuRp1HpbRpHeFoWmkQCrgcLD6MbFY8AIWBYFodA0DAcghTYLh9gnZ90N4oC10Eq4CgAtR6QoiSiM0XImnfJ0lD8OtUH4CA4HEbk5QM1DUmMhAAFpiMqULFOBUgKHCfyDUCniMk0elrEUe5KNcdxPG8SKejCGg4snIKdDeXJ8go2QVAtBQUoUQh0qcTKPC8S5cvPSpU3ijMsOyMyHgskTrJIrIcgogwKTk8lZFrDpd3akYxgmQqjMS983j6oTLNE4tChXACAIc75qXkNqYOjVtlu4jCvCA1133Yax8iaYp6QMbDih0TRnLJGxTqYrBLoSjCbAku0XCUakFBrelPv4xxdGdZpvtO5TVPgXFDKumQDDeD8HK3ORDDOP9i0qiT3CrMrZCh0k3J8IA */
-//   id: 'inference',
-//   schema: {
-//     context: {} as {
-//       jobId: string;
-//       jobStatus: string;
-//       inputImages: Array<{ name: string; path: string }>;
-//     },
-//     events: {} as FormSubmitEvent | { type: 'cancel' },
-//   },
-//   initial: 'active',
-//   context: {
-//     jobId: '',
-//     jobStatus: '',
-//     inputImages: [],
-//   },
-//   states: {
-//     active: {
-//       tags: ['active'],
-//       on: {
-//         start: 'busy',
-//       },
-//     },
-//     busy: {
-//       tags: ['busy'],
-//       initial: 'pending',
-//       states: {
-//         pending: {
-//           invoke: {
-//             id: 'submitJob',
-//             src: 'submitJob',
-//             onDone: {
-//               target: 'running',
-//               actions: assign({
-//                 jobId: (context, event: JobEvent) => event.data.jobId ?? '',
-//                 inputImages: (context, event: JobEvent) => {
-//                   return event.data.formData?.inputImages ?? [];
-//                 },
-//               }),
-//             },
-//             onError: {
-//               target: '#inference.error',
-//             },
-//           },
-//         },
-//         running: {
-//           invoke: {
-//             src: 'jobStatus',
-//             onDone: [
-//               {
-//                 target: '#inference.success',
-//                 cond: 'isCompleted',
-//               },
-//               {
-//                 target: '#inference.error',
-//                 cond: 'isFailed',
-//               },
-//               {
-//                 target: '#inference.error',
-//                 cond: 'isCancelled',
-//               },
-//               {
-//                 target: 'running',
-//                 actions: assign({
-//                   jobStatus: (context, event: JobEvent) =>
-//                     event.data.jobStatus ?? '',
-//                 }),
-//               },
-//             ],
-//           },
-//           on: {
-//             cancel: {
-//               actions: 'cancelJob',
-//             },
-//           },
-//         },
-//       },
-//     },
-//     error: {
-//       tags: ['error'],
-//       on: {
-//         retry: {
-//           target: 'busy',
-//           actions: assign({ jobStatus: '' }),
-//         },
-//       },
-//     },
-//     success: {
-//       tags: ['success'],
-//     },
-//   },
-//   predictableActionArguments: true,
-// });
-// export type InferenceXState = StateFrom<typeof inferenceMachine>;
+  const [formData, setFormData] = useState<FormType | undefined>(undefined);
 
-// export function InferenceNode(nodeProps: NodeProps<NodeData>) {
-//   // const createJob = api.remotejob.create.useMutation();
-//   const checkJob = api.remotejob.status.useMutation();
-//   const cancelJob = api.remotejob.cancel.useMutation();
-//   const submitJob = api.remoteProcess.submitInference.useMutation();
-//   const { getSourceData } = useStoreActions();
-//   const { onUpdateNode } = useStoreActions();
-//   const [nodeStatus, setNodeStatus] = useState<NodeStatus>(
-//     nodeProps.data.status,
-//   );
+  const updateNodeInternals = useUpdateNodeInternals();
 
-//   const prevXState = State.create(
-//     nodeProps.data.xState
-//       ? (JSON.parse(nodeProps.data.xState) as InferenceXState)
-//       : inferenceMachine.initialState,
-//   );
+  const {} = api.remotejob.checkStatus.useQuery(
+    { jobId: nodeProps.data.jobId as string },
+    {
+      enabled: nodeProps.data.status === 'busy' && !!nodeProps.data.jobId,
+      refetchInterval: 5000,
+      refetchIntervalInBackground: true,
+      refetchOnWindowFocus: true,
+      onSuccess: (data) => {
+        console.log('checkJob.onSuccess', data);
+        if (!nodeProps.data.jobId) {
+          console.error('checkJob.onSuccess', 'no job id', data);
+        }
+        const date = dayjs().format('YYYY-MM-DD HH:mm:ss');
+        if (data.jobStatus === 'COMPLETED') {
+          toast.success('Job completed');
+          onUpdateNode({
+            id: nodeProps.id,
+            data: {
+              ...nodeProps.data,
+              status: 'success',
+              jobId: nodeProps.data.jobId,
+              jobStatus: data.jobStatus,
+              message: `Job ${
+                nodeProps.data.jobId ?? 'aa'
+              } finished successfully in ${date}`,
+              updatedAt: date,
+            },
+          });
+          updateNodeInternals(nodeProps.id);
+        } else if (data.jobStatus === 'FAILED') {
+          toast.error('Job failed');
+          onUpdateNode({
+            id: nodeProps.id,
+            data: {
+              ...nodeProps.data,
+              status: 'error',
+              jobId: nodeProps.data.jobId,
+              jobStatus: data.jobStatus,
+              message: `Job ${nodeProps.data.jobId ?? 'aa'} failed in ${date}`,
+              updatedAt: date,
+            },
+          });
+          updateNodeInternals(nodeProps.id);
+        } else {
+          onUpdateNode({
+            id: nodeProps.id,
+            data: {
+              ...nodeProps.data,
+              status: 'busy',
+              jobId: nodeProps.data.jobId,
+              jobStatus: data.jobStatus,
+              message: `Job ${nodeProps.data.jobId ?? 'aa'} is ${
+                data.jobStatus?.toLocaleLowerCase() ?? 'aa'
+              }, last checked at ${date}`,
+              updatedAt: date,
+            },
+          });
+          updateNodeInternals(nodeProps.id);
+        }
+      },
+    },
+  );
+  const { mutateAsync: cancelJob } = api.remotejob.cancel.useMutation();
+  const { mutateAsync: submitJob } =
+    api.remoteProcess.submitInference.useMutation();
+  const { onUpdateNode, getSourceData } = useStoreActions();
 
-//   const actor = useInterpret(
-//     inferenceMachine,
-//     {
-//       state: prevXState,
-//       guards: {
-//         isCompleted: (context) => {
-//           return context.jobStatus === 'COMPLETED';
-//         },
-//         isFailed: (context) => {
-//           return context.jobStatus === 'FAILED';
-//         },
-//         isCancelled: (context) => {
-//           return context.jobStatus === 'CANCELLED';
-//         },
-//       },
-//       actions: {
-//         cancelJob: (context) => {
-//           cancelJob.mutate({ jobId: context.jobId });
-//         },
-//       },
-//       services: {
-//         submitJob: (_, event) => {
-//           return new Promise((resolve, reject) => {
-//             const submitEvent = event as FormSubmitEvent;
-//             if (!submitEvent.data.formData)
-//               reject(new Error("This event shouldn't submit a job"));
-//             const formData = submitEvent.data.formData;
-//             const connectedNodeName = submitEvent.data.connectedNodeName;
-//             submitJob
-//               .mutateAsync({
-//                 workspacePath: nodeProps.data.workspacePath,
-//                 networkName: connectedNodeName,
-//                 formData: formData,
-//               })
-//               .then((data) => {
-//                 resolve({ ...data, formData });
-//               })
-//               .catch((err) => reject(err));
-//           });
-//         },
-//         jobStatus: (context) => {
-//           return new Promise((resolve, reject) => {
-//             // wait 5 seconds before checking the job status
-//             setTimeout(() => {
-//               checkJob
-//                 .mutateAsync({ jobId: context.jobId })
-//                 .then((data) => {
-//                   resolve(data);
-//                 })
-//                 .catch((err) => reject(err));
-//             }, 5000);
-//           });
-//         },
-//       },
-//     },
-//     // observer
-//     (state) => {
-//       // subscribes to state changes and check if there is a status change to update the node data
-//       const newStatus = [...state.tags][0] as NodeStatus;
-//       if (newStatus !== nodeStatus) {
-//         // update the local state
-//         setNodeStatus(newStatus);
-//         // update the node data in the store
-//         onUpdateNode({
-//           id: nodeProps.id, // this is the component id from the react-flow
-//           data: {
-//             ...nodeProps.data,
-//             status: newStatus,
-//             xState: JSON.stringify(state),
-//           },
-//         });
-//       }
-//     },
-//   );
+  const handleSubmitJob = (formData: FormType) => {
+    const connectedNodeData = getSourceData(nodeProps.id);
+    if (!connectedNodeData || !connectedNodeData.remotePath) {
+      toast.info('Please connect a trained network');
+      return;
+    }
+    submitJob({
+      networkName: connectedNodeData.remotePath.split('/').pop() as string,
+      formData,
+      workspacePath: nodeProps.data.workspacePath,
+    })
+      .then(({ jobId }) => {
+        console.log('handleSubmitJob then?', 'jobId', jobId);
+        if (!jobId) {
+          console.error('handleSubmitJob then?', 'no jobId');
+          toast.error('Error submitting job');
+          return;
+        }
+        setFormData(formData);
+        onUpdateNode({
+          id: nodeProps.id,
+          data: {
+            ...nodeProps.data,
+            status: 'busy',
+            remotePath: `${formData.outputDir}/${pokemon}`,
+            jobId: jobId,
+            message: `Job ${jobId} submitted in ${dayjs().format(
+              'YYYY-MM-DD HH:mm:ss',
+            )}`,
+          },
+        });
+        updateNodeInternals(nodeProps.id);
+        setOpen(!open);
+      })
+      .catch(() => {
+        toast.error('Error submitting job');
+      });
+  };
 
-//   const selector = (state: InferenceXState) => {
-//     return {
-//       jobId: state.context.jobId,
-//       jobStatus: state.context.jobStatus,
-//       inputImages: state.context.inputImages,
-//     };
-//   };
+  if (nodeProps.data.status === 'active') {
+    return (
+      <Card
+        data-selected={nodeProps.selected}
+        className="w-fit bg-green-100 text-green-800 data-[selected=true]:border-green-500 border-green-800 dark:bg-muted dark:text-green-400"
+      >
+        <CardContent className="p-4 pr-8">
+          <div className=" flex flex-row items-center gap-4">
+            <CoffeeIcon className="inline-block" />
+            <div className="flex-1 space-y-1">
+              <p className="text-sm font-medium leading-none text-green-800 dark:text-green-400">
+                {'new inference'}
+              </p>
+              <p className="text-sm text-green-600 dark:text-green-500">
+                {'Click to create a job'}
+              </p>
+            </div>
+          </div>
+          <Sheet open={nodeProps.selected} modal={false}>
+            <SheetContent>
+              <SheetHeader>
+                <SheetTitle>Create</SheetTitle>
+              </SheetHeader>
+              <InferenceForm onSubmitHandler={handleSubmitJob} />
+            </SheetContent>
+          </Sheet>
+        </CardContent>
+        <Handle
+          className="!bg-green-400 active:!bg-green-500 dark:!bg-muted dark:active:!bg-green-400"
+          type="target"
+          position={Position.Left}
+        />
+      </Card>
+    );
+  }
 
-//   const { jobId, jobStatus, inputImages } = useSelector(actor, selector);
+  if (nodeProps.data.status === 'busy') {
+    return (
+      <Card
+        data-selected={nodeProps.selected}
+        className="w-fit bg-yellow-100 text-yellow-800 data-[selected=true]:border-yellow-600 border-yellow-800 dark:bg-muted dark:text-yellow-400"
+      >
+        <CardContent className="p-4 pr-8">
+          <div className=" flex flex-row items-center gap-4">
+            <CoffeeIcon className="inline-block" />
+            <div className="flex-1 space-y-1">
+              <p className="text-sm font-semibold leading-none text-yellow-800 dark:text-yellow-400">
+                {nodeProps.data?.remotePath?.split('/').pop()}
+              </p>
+              <p className="text-sm text-yellow-600 lowercase">
+                {`${nodeProps.data.jobId || 'jobId'} -- ${
+                  nodeProps.data.jobStatus || 'checking status..'
+                }`}
+              </p>
+            </div>
+            <Sheet open={nodeProps.selected} modal={false}>
+              <SheetContent className="flex flex-col gap-4">
+                <Alert>
+                  <AlertDescription>{nodeProps.data.message}</AlertDescription>
+                </Alert>
+                <SheetHeader>
+                  <SheetTitle>Details</SheetTitle>
+                </SheetHeader>
+                <div className="flex flex-col gap-2 rounded-md border border-input p-2 font-mono">
+                  <div className="flex flex-row items-center justify-between gap-1">
+                    <p className="font-medium">id</p>
+                    <p className="text-violet-600">{nodeProps.data.jobId}</p>
+                  </div>
+                  <div className="flex flex-row items-center justify-between gap-1">
+                    <p className="font-medium">status</p>
+                    <p className="text-violet-600 lowercase">
+                      {nodeProps.data.jobStatus}
+                    </p>
+                  </div>
+                  <div className="flex flex-row items-center justify-between gap-1">
+                    <p className="font-medium">updated at</p>
+                    <p className="text-violet-600 text-end">
+                      {nodeProps.data.updatedAt}
+                    </p>
+                  </div>
+                </div>
+                <hr />
+                <Button
+                  onClick={() => {
+                    //   actor.send('cancel');
+                    cancelJob({ jobId: nodeProps.data.jobId as string })
+                      .then(() => {
+                        const date = dayjs().format('YYYY-MM-DD HH:mm:ss');
+                        toast.success('Job canceled');
+                        onUpdateNode({
+                          id: nodeProps.id,
+                          data: {
+                            ...nodeProps.data,
+                            status: 'error',
+                            jobId: nodeProps.data.jobId,
+                            jobStatus: 'CANCELLED',
+                            message: `Job ${
+                              nodeProps.data.jobId ?? 'aa'
+                            } canceled in ${date}`,
+                            updatedAt: date,
+                          },
+                        });
+                        updateNodeInternals(nodeProps.id);
+                      })
+                      .catch(() => {
+                        toast.error('Error canceling job');
+                      });
+                    toast.info('Canceling job..');
+                  }}
+                >
+                  cancel
+                </Button>
+              </SheetContent>
+            </Sheet>
+          </div>
+        </CardContent>
+        <Handle
+          className="!bg-yellow-400 active:!bg-yellow-500 dark:!bg-muted dark:active:!bg-yellow-400"
+          type="target"
+          position={Position.Left}
+        />
+      </Card>
+    );
+  }
 
-//   const getConnectedNetworkLabel = () => {
-//     const connectedNodeData = getSourceData(nodeProps.id);
-//     if (!connectedNodeData?.xState) return;
-//     const connectedXState = JSON.parse(
-//       connectedNodeData.xState,
-//     ) as NetworkXState;
-//     return connectedXState.context.networkLabel ?? undefined;
-//   };
+  if (nodeProps.data.status === 'success') {
+    return (
+      <Card
+        data-selected={nodeProps.selected}
+        className="w-fit bg-blue-100 text-blue-800 data-[selected=true]:border-blue-500 border-blue-800 dark:bg-muted dark:text-blue-400"
+      >
+        <CardContent className="p-4 pr-8">
+          <div className=" flex flex-row items-center gap-4">
+            <CoffeeIcon className="inline-block" />
+            <div className="flex-1 space-y-1">
+              <p className="text-sm font-semibold leading-none text-blue-800 dark:text-blue-400">
+                {nodeProps.data?.remotePath?.split('/').pop()}
+              </p>
+              <p className="text-sm text-blue-600 lowercase">
+                {`${nodeProps.data.jobId || 'jobId'} -- ${
+                  nodeProps.data.jobStatus || 'jobStatus'
+                }`}
+              </p>
+            </div>
+          </div>
+          <Sheet open={nodeProps.selected} modal={false}>
+            <SheetContent className="flex flex-col gap-4">
+              <Alert>
+                <AlertDescription>{nodeProps.data.message}</AlertDescription>
+              </Alert>
+              <SheetHeader>
+                <SheetTitle>Details</SheetTitle>
+              </SheetHeader>
+              <div className="flex flex-col gap-2 rounded-md border border-input p-2 font-mono">
+                <div className="flex flex-row items-center justify-between gap-1">
+                  <p className="font-medium">id</p>
+                  <p className="text-violet-600">{nodeProps.data.jobId}</p>
+                </div>
+                <div className="flex flex-row items-center justify-between gap-1">
+                  <p className="font-medium">status</p>
+                  <p className="text-violet-600 lowercase">
+                    {nodeProps.data.jobStatus}
+                  </p>
+                </div>
+                <div className="flex flex-row items-center justify-between gap-1">
+                  <p className="font-medium">updated at</p>
+                  <p className="text-violet-600 text-end">
+                    {nodeProps.data.updatedAt}
+                  </p>
+                </div>
+              </div>
+              <hr />
+            </SheetContent>
+          </Sheet>
+        </CardContent>
+        <Handle
+          className="!bg-blue-400 active:!bg-blue-500 dark:!bg-muted dark:active:!bg-blue-400"
+          type="target"
+          position={Position.Left}
+        />
+      </Card>
+    );
+  }
 
-//   return (
-//     <Card
-//       data-state={nodeStatus}
-//       className="w-[420px] data-[state=active]:bg-green-100 data-[state=busy]:bg-yellow-100
-//     data-[state=error]:bg-red-100 data-[state=inactive]:bg-gray-100
-//     data-[state=success]:bg-blue-100 data-[state=active]:dark:bg-teal-800
-//     data-[state=busy]:dark:bg-amber-700 data-[state=error]:dark:bg-rose-700
-//     data-[state=inactive]:dark:bg-muted data-[state=success]:dark:bg-cyan-700"
-//     >
-//       <Handle type="target" position={Position.Left} />
-//       <CardHeader>
-//         <CardTitle>{'inference'}</CardTitle>
-//         <CardDescription>{nodeStatus}</CardDescription>
-//       </CardHeader>
-//       {nodeStatus === 'active' && (
-//         <CardContent>
-//           <Sheet open={nodeProps.selected} modal={false}>
-//             <SheetContent>
-//               <SheetHeader>
-//                 <SheetTitle>Run Inference</SheetTitle>
-//               </SheetHeader>
-//               <InferenceForm
-//                 onSubmitHandler={(formSubmitData) => {
-//                   const connectedNetworkLabel = getConnectedNetworkLabel();
-//                   if (!connectedNetworkLabel) {
-//                     toast({
-//                       title: 'Error',
-//                       description: 'Please connect a network node.',
-//                     });
-//                     return;
-//                   }
-//                   actor.send({
-//                     type: 'start',
-//                     data: {
-//                       formData: formSubmitData,
-//                       connectedNodeName: connectedNetworkLabel,
-//                     },
-//                   });
-//                   toast({
-//                     title: 'You submitted the following values:',
-//                     description: (
-//                       <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-//                         <code className="text-white">
-//                           {JSON.stringify(
-//                             { ...formSubmitData, ...nodeProps.data },
-//                             null,
-//                             2,
-//                           )}
-//                         </code>
-//                       </pre>
-//                     ),
-//                   });
-//                 }}
-//               />
-//             </SheetContent>
-//           </Sheet>
-//         </CardContent>
-//       )}
-//       {nodeStatus === 'busy' && (
-//         <>
-//           <CardContent>
-//             <div className="flex flex-col">
-//               <p className="mb-2 text-3xl font-extrabold text-center">
-//                 {jobId}
-//               </p>
-//               <p className="text-gray-500 dark:text-gray-400 text-center">
-//                 {jobStatus}
-//               </p>
-//             </div>
-//           </CardContent>
-//           <CardFooter className="flex justify-between">
-//             <Button
-//               onClick={() => {
-//                 actor.send('cancel');
-//                 toast({
-//                   title: 'Canceling job...',
-//                 });
-//               }}
-//             >
-//               cancel
-//             </Button>
-//           </CardFooter>
-//         </>
-//       )}
-//       {nodeStatus === 'error' && (
-//         <CardContent>
-//           <div className="flex flex-col">
-//             <p className="mb-2 text-3xl font-extrabold text-center">{jobId}</p>
-//             <p className="text-gray-500 dark:text-gray-400 text-center">
-//               {jobStatus}
-//             </p>
-//           </div>
-//           <Sheet open={nodeProps.selected} modal={false}>
-//             <SheetContent>
-//               <SheetHeader>
-//                 <SheetTitle>Retry</SheetTitle>
-//               </SheetHeader>
-//               <InferenceForm
-//                 inputImages={inputImages}
-//                 onSubmitHandler={(formSubmitData) => {
-//                   const connectedNetworkLabel = getConnectedNetworkLabel();
-//                   if (!connectedNetworkLabel) {
-//                     toast({
-//                       title: 'Error',
-//                       description: 'Please connect a network node.',
-//                     });
-//                     return;
-//                   }
-//                   actor.send({
-//                     type: 'retry',
-//                     data: {
-//                       formData: formSubmitData,
-//                       connectedNodeName: connectedNetworkLabel,
-//                     },
-//                   });
-//                   toast({
-//                     title: 'You submitted the following values:',
-//                     description: (
-//                       <pre className="mt-2 w-[340px] rounded-md bg-slate-950 p-4">
-//                         <code className="text-white">
-//                           {JSON.stringify(formSubmitData, null, 2)}
-//                         </code>
-//                       </pre>
-//                     ),
-//                   });
-//                 }}
-//               />
-//             </SheetContent>
-//           </Sheet>
-//         </CardContent>
-//       )}
-//       {nodeStatus === 'success' && (
-//         <CardContent>
-//           <div className="flex flex-col">
-//             <p className="mb-2 text-3xl font-extrabold text-center">{jobId}</p>
-//             <p className="text-gray-500 dark:text-gray-400 text-center">
-//               {jobStatus}
-//             </p>
-//             <div>
-//               <Sheet open={nodeProps.selected} modal={false}>
-//                 <SheetContent>
-//                   <SheetHeader>
-//                     <SheetTitle>Inference Results</SheetTitle>
-//                   </SheetHeader>
-//                   {inputImages.map((image, idx) => (
-//                     <div
-//                       key={idx}
-//                       className="rounded-md border border-sky-800 hover:bg-blue-200 dark:hover:bg-cyan-800 px-4 py-3 font-mono text-sm"
-//                     >
-//                       {image.name}
-//                     </div>
-//                   ))}
-//                 </SheetContent>
-//               </Sheet>
-//             </div>
-//           </div>
-//         </CardContent>
-//       )}
-//     </Card>
-//   );
-// }
+  if (nodeProps.data.status === 'error') {
+    return (
+      <Card
+        data-selected={nodeProps.selected}
+        className="w-fit bg-red-100 text-red-800 data-[selected=true]:border-red-500 border-red-800 dark:bg-muted dark:text-red-400"
+      >
+        <CardContent className="p-4 relative pr-8">
+          <div className=" flex flex-row items-center gap-4">
+            <CoffeeIcon className="inline-block" />
+            <div className="flex-1 space-y-1">
+              <p className="text-sm font-semibold leading-none text-red-800 dark:text-red-400">
+                {nodeProps.data?.remotePath?.split('/').pop()}
+              </p>
+              <p className="text-sm text-red-600 lowercase">
+                {`${nodeProps.data.jobId || 'jobId'} -- ${
+                  nodeProps.data.jobStatus || 'jobStatus'
+                }`}
+              </p>
+            </div>
+          </div>
+          <Sheet open={nodeProps.selected} modal={false}>
+            <SheetContent className="flex flex-col gap-4">
+              <Alert variant="destructive">
+                <AlertTriangleIcon className="h-4 w-4" />
+                <AlertTitle>Error</AlertTitle>
+                <AlertDescription>
+                  {nodeProps.data.message || 'Something went wrong'}
+                </AlertDescription>
+              </Alert>
+              <SheetHeader>
+                <SheetTitle>Retry</SheetTitle>
+              </SheetHeader>
+              <InferenceForm
+                outputDir={formData?.outputDir ?? ''}
+                inputImages={formData?.inputImages ?? []}
+                onSubmitHandler={handleSubmitJob}
+              />
+            </SheetContent>
+          </Sheet>
+        </CardContent>
+        <Handle
+          className="!bg-red-400 active:!bg-red-500 dark:!bg-muted dark:active:!bg-red-400"
+          type="target"
+          position={Position.Left}
+        />
+      </Card>
+    );
+  }
 
-export function InferenceNode(nodeProps: NodeProps<NodeData>) {
   return null;
 }
diff --git a/src/components/workboard/node-component-forms/inference-form.tsx b/src/components/workboard/node-component-forms/inference-form.tsx
index bff05e9..5eba7c0 100644
--- a/src/components/workboard/node-component-forms/inference-form.tsx
+++ b/src/components/workboard/node-component-forms/inference-form.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { zodResolver } from '@hookform/resolvers/zod';
-import { X } from 'lucide-react';
+import { PlusIcon, TreeDeciduousIcon, X } from 'lucide-react';
 import { useFieldArray, useForm } from 'react-hook-form';
 import * as z from 'zod';
 import { FsTreeDialog } from '~/components/fs-treeview';
@@ -25,7 +25,6 @@ import {
 } from '~/components/ui/select';
 import { Switch } from '~/components/ui/switch';
 import { slurmGPUOptions, slurmPartitionOptions } from '~/lib/constants';
-import { cn } from '~/lib/utils';
 
 const slurmOptions = z.object({
   partition: z.enum(slurmPartitionOptions),
@@ -118,40 +117,54 @@ export function InferenceForm({
     form.setValue('outputDir', path);
   };
 
+  const toUnixPath = (path: string) =>
+    path.replace(/[\\/]+/g, '/').replace(/^([a-zA-Z]+:|\.\/)/, '');
+
   return (
     <Form {...form}>
-      <form onSubmit={(...args) => void form.handleSubmit(onSubmit)(...args)}>
-        <div>
+      <form
+        className="flex flex-col gap-4"
+        onSubmit={(...args) => void form.handleSubmit(onSubmit)(...args)}
+      >
+        <div className="flex flex-row gap-1 items-center">
+          <FsTreeDialog
+            handleSelect={onOutputDirSelect}
+            message={{
+              title: 'Select output directory',
+              description:
+                'Select the path to a valid output directory or paste it down below.',
+            }}
+          >
+            <Button
+              className="mt-2"
+              type="button"
+              variant="outline"
+              size="icon"
+            >
+              <TreeDeciduousIcon className="w-4 h-4" />
+            </Button>
+          </FsTreeDialog>
           <FormField
             control={form.control}
             name="outputDir"
             render={({ field }) => (
-              <FormItem>
+              <FormItem className="w-full">
                 <FormLabel className={'sr-only'}>Output Directory</FormLabel>
                 <FormDescription className={'sr-only'}>
                   Select the output directory.
                 </FormDescription>
                 <FormControl>
-                  <div className="flex w-full max-w-sm items-center space-x-2">
-                    {!!field.value && <Input {...field} disabled />}
-                  </div>
+                  <Input
+                    {...field}
+                    className="text-ellipsis"
+                    placeholder="Output directory"
+                    value={toUnixPath(field.value ?? '')}
+                  />
                 </FormControl>
                 <FormMessage />
               </FormItem>
             )}
           />
-          <FsTreeDialog
-            handleSelect={onOutputDirSelect}
-            message={{
-              title: 'Select output directory',
-              description:
-                'Select the path to a valid output directory or paste it down below.',
-            }}
-          >
-            <Button type="button" variant="link" size="sm" className="mt-1">
-              Select output dir
-            </Button>
-          </FsTreeDialog>
         </div>
         <div>
           {fields.map((field, index) => (
@@ -161,17 +174,15 @@ export function InferenceForm({
               name={`inputImages.${index}.name`}
               render={({ field }) => (
                 <FormItem>
-                  <FormLabel className={cn(index !== 0 && 'sr-only')}>
-                    Images
-                  </FormLabel>
-                  <FormDescription className={cn(index !== 0 && 'sr-only')}>
-                    Add images to run inference on.
-                  </FormDescription>
                   <FormControl>
-                    <div className="flex w-full max-w-sm items-center space-x-2">
-                      <Input {...field} disabled />
-                      <Button onClick={() => remove(index)} size={'icon'}>
-                        <X className="w-4 h-4" />
+                    <div className="flex items-center">
+                      <Input {...field} className="text-ellipsis" disabled />
+                      <Button
+                        onClick={() => remove(index)}
+                        size={'icon'}
+                        variant="ghost"
+                      >
+                        <X className="w-[14px] h-[14px]" />
                       </Button>
                     </div>
                   </FormControl>
@@ -188,29 +199,35 @@ export function InferenceForm({
                 'Select the path to a valid image file or paste it down below.',
             }}
           >
-            <Button type="button" variant="link" size="sm" className="mt-1">
-              Add img
-            </Button>
+            <div className="flex items-center gap-2">
+              <Button
+                type="button"
+                variant="outline"
+                size="icon"
+                className="mt-1"
+              >
+                <PlusIcon className="w-4 h-4" />
+              </Button>
+              <span className="text-xs text-muted-foreground">Add images</span>
+            </div>
           </FsTreeDialog>
         </div>
         <FormField
           name="normalize"
           control={form.control}
           render={({ field }) => (
-            <FormItem className="">
-              <FormControl>
-                <div className=" flex items-center space-x-4 py-4">
-                  <div className="flex-1 space-y-1">
-                    <p className="text-sm font-medium leading-none">
-                      Normalize Images
-                    </p>
-                  </div>
+            <FormItem>
+              <div className="flex flex-row items-center justify-between">
+                <FormLabel className="text-sm font-medium leading-none">
+                  Normalize Images
+                </FormLabel>
+                <FormControl>
                   <Switch
                     checked={field.value}
                     onCheckedChange={field.onChange}
                   />
-                </div>
-              </FormControl>
+                </FormControl>
+              </div>
             </FormItem>
           )}
         />
@@ -218,24 +235,22 @@ export function InferenceForm({
           name="saveProbMap"
           control={form.control}
           render={({ field }) => (
-            <FormItem className="">
-              <FormControl>
-                <div className=" flex items-center space-x-4 py-4">
-                  <div className="flex-1 space-y-1">
-                    <p className="text-sm font-medium leading-none">
-                      Save as Probabilty Map
-                    </p>
-                  </div>
+            <FormItem>
+              <div className="flex flex-row items-center justify-between">
+                <FormLabel className="text-sm font-medium leading-none">
+                  Save as Probabilty Map
+                </FormLabel>
+                <FormControl>
                   <Switch
                     checked={field.value}
                     onCheckedChange={field.onChange}
                   />
-                </div>
-              </FormControl>
+                </FormControl>
+              </div>
             </FormItem>
           )}
         />
-        <div className="grid grid-cols-2 gap-4">
+        <div className="grid grid-cols-2 gap-1.5">
           <FormField
             control={form.control}
             name="paddingSize"
@@ -291,7 +306,7 @@ export function InferenceForm({
             )}
           />
         </div>
-        <footer className="grid grid-cols-2 grid-rows-2 gap-4">
+        <footer className="flex flex-row items-center justify-end gap-1.5">
           <FormField
             control={form.control}
             name="slurmOptions.partition"
@@ -301,7 +316,11 @@ export function InferenceForm({
                 <Select onValueChange={field.onChange}>
                   <FormControl>
                     <SelectTrigger>
-                      <SelectValue placeholder="Slurm Partition" />
+                      <SelectValue
+                        placeholder={
+                          <span className="text-xs">Slurm Partition</span>
+                        }
+                      />
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
@@ -331,14 +350,19 @@ export function InferenceForm({
                   defaultValue={field.value}
                 >
                   <FormControl>
-                    <SelectTrigger>
+                    <SelectTrigger className="px-4">
                       <SelectValue placeholder="Slurm GPUs" />
                     </SelectTrigger>
                   </FormControl>
                   <SelectContent>
                     {slurmGPUOptions.map((item) => (
                       <SelectItem key={item} value={item}>
-                        {`GPUs: ${item.toString()}`}
+                        <p className="flex flex-row items-center gap-1">
+                          <span className="text-xs text-muted-foreground mr-2">
+                            GPUs:{' '}
+                          </span>
+                          <span>{item.toString()}</span>
+                        </p>
                       </SelectItem>
                     ))}
                   </SelectContent>
@@ -350,7 +374,7 @@ export function InferenceForm({
               </FormItem>
             )}
           />
-          <Button className="my-2 mx-0 col-span-2" type="submit">
+          <Button className="grow mt-2 px-6" size="sm" type="submit">
             Submit
           </Button>
         </footer>