diff --git a/pages/workflow/[id].vue b/pages/workflow/[id].vue
index d355793..fb177ea 100644
--- a/pages/workflow/[id].vue
+++ b/pages/workflow/[id].vue
@@ -199,8 +199,12 @@ const loadProcess = async (retryCount = 0) => {
       // Reset visited nodes tracking for new process execution
       visitedNodesInSession.value.clear();
       
-      // Start the process execution (case instance)
-      // await startProcessExecution();
+      // Automatically start the process execution (case instance)
+      // This will create the case and move to the first actual task
+      await startProcessExecution();
+      
+      // Loading will be set to false after the first step is ready
+      loading.value = false;
       
     } else {
       throw new Error(response.message || 'Invalid process response');
@@ -224,36 +228,65 @@ const loadProcess = async (retryCount = 0) => {
     notifyParentOfError(error.value);
     loading.value = false;
   } finally {
-    // Only set loading to false if we're not retrying
-    if (retryCount >= 2 || process.value) {
+    // Loading state is now managed after startProcessExecution completes
+    // Only set loading to false here if there was an error
+    if (!process.value && retryCount >= 2) {
       loading.value = false;
     }
   }
 };
 
-// Start process execution (create case instance)
+// Start process execution (create case instance and begin workflow)
 const startProcessExecution = async () => {
   try {
-    console.log('[Workflow] Starting process execution (creating case instance)...');
+    console.log('[Workflow] Starting process execution automatically...');
+    
+    // Create case instance via API
     const response = await $fetch(`/api/process/${processId.value}/start`, {
-      method: 'POST'
+      method: 'POST',
+      body: {
+        variables: processVariables.value // Pass initial variables if any
+      }
     });
     
     if (response.success) {
       caseInstance.value = response.data.case;
-      tasks.value = response.data.tasks;
+      tasks.value = response.data.tasks || [];
       console.log('[Workflow] Case instance created:', caseInstance.value);
-      // Find the start node
+      
+      // Find the start node and move past it to the first actual step
       const startNodeIndex = workflowData.value.nodes.findIndex(node => node.type === 'start');
-      currentStep.value = startNodeIndex >= 0 ? startNodeIndex : 0;
-      console.log('[Workflow] Starting at node index:', currentStep.value, workflowData.value.nodes[currentStep.value]);
-      moveToNextStep();
+      if (startNodeIndex >= 0) {
+        currentStep.value = startNodeIndex;
+        console.log('[Workflow] Found start node at index:', startNodeIndex);
+        
+        // Immediately move to the first actual task after the start node
+        moveToNextStep();
+      } else {
+        // No start node found, begin at first node
+        console.warn('[Workflow] No start node found, beginning at first node');
+        currentStep.value = 0;
+        
+        // If the first node is executable, run it
+        if (currentNode.value && ['api', 'script', 'notification'].includes(currentNode.value.type)) {
+          await executeCurrentStep();
+        }
+      }
     } else {
       throw new Error(response.error || 'Failed to start process');
     }
   } catch (err) {
     console.error('[Workflow] Error starting process execution:', err);
-    error.value = 'Failed to start process execution';
+    
+    // More user-friendly error message
+    if (err.statusCode === 404) {
+      error.value = 'Process not found. Please check if the process exists and is published.';
+    } else if (err.statusCode === 403) {
+      error.value = 'You do not have permission to execute this process.';
+    } else {
+      error.value = `Failed to start process: ${err.message || 'Unknown error'}`;
+    }
+    
     notifyParentOfError(error.value);
   }
 };