diff --git a/src/components/FileUpload.tsx b/src/components/FileUpload.tsx
index 201166a..16754f7 100644
--- a/src/components/FileUpload.tsx
+++ b/src/components/FileUpload.tsx
@@ -1,6 +1,6 @@
 import { useState, useCallback } from 'react';
 import { useShallow } from 'zustand/react/shallow';
-import { useMachineStore } from '../stores/useMachineStore';
+import { useMachineStore, usePatternUploaded } from '../stores/useMachineStore';
 import { usePatternStore } from '../stores/usePatternStore';
 import { useUIStore } from '../stores/useUIStore';
 import { convertPesToPen, type PesPatternData } from '../formats/import/pesImporter';
@@ -40,18 +40,19 @@ export function FileUpload() {
     pesData: pesDataProp,
     currentFileName,
     patternOffset,
-    patternUploaded,
     setPattern,
   } = usePatternStore(
     useShallow((state) => ({
       pesData: state.pesData,
       currentFileName: state.currentFileName,
       patternOffset: state.patternOffset,
-      patternUploaded: state.patternUploaded,
       setPattern: state.setPattern,
     }))
   );
 
+  // Derived state: pattern is uploaded if machine has pattern info
+  const patternUploaded = usePatternUploaded();
+
   // UI store
   const {
     pyodideReady,
diff --git a/src/components/LeftSidebar.tsx b/src/components/LeftSidebar.tsx
index 15f93ac..29b4ae9 100644
--- a/src/components/LeftSidebar.tsx
+++ b/src/components/LeftSidebar.tsx
@@ -1,5 +1,5 @@
 import { useShallow } from 'zustand/react/shallow';
-import { useMachineStore } from '../stores/useMachineStore';
+import { useMachineStore, usePatternUploaded } from '../stores/useMachineStore';
 import { usePatternStore } from '../stores/usePatternStore';
 import { ConnectionPrompt } from './ConnectionPrompt';
 import { FileUpload } from './FileUpload';
@@ -13,13 +13,15 @@ export function LeftSidebar() {
     }))
   );
 
-  const { pesData, patternUploaded } = usePatternStore(
+  const { pesData } = usePatternStore(
     useShallow((state) => ({
       pesData: state.pesData,
-      patternUploaded: state.patternUploaded,
     }))
   );
 
+  // Derived state: pattern is uploaded if machine has pattern info
+  const patternUploaded = usePatternUploaded();
+
   return (
     <div className="flex flex-col gap-4 md:gap-5 lg:gap-6 lg:overflow-hidden">
       {/* Connect Button or Browser Hint - Show when disconnected */}
diff --git a/src/components/PatternCanvas.tsx b/src/components/PatternCanvas.tsx
index 208a6fd..9869f2a 100644
--- a/src/components/PatternCanvas.tsx
+++ b/src/components/PatternCanvas.tsx
@@ -1,6 +1,6 @@
 import { useEffect, useRef, useState, useCallback } from 'react';
 import { useShallow } from 'zustand/react/shallow';
-import { useMachineStore } from '../stores/useMachineStore';
+import { useMachineStore, usePatternUploaded } from '../stores/useMachineStore';
 import { usePatternStore } from '../stores/usePatternStore';
 import { Stage, Layer, Group } from 'react-konva';
 import Konva from 'konva';
@@ -27,16 +27,17 @@ export function PatternCanvas() {
   const {
     pesData,
     patternOffset: initialPatternOffset,
-    patternUploaded,
     setPatternOffset,
   } = usePatternStore(
     useShallow((state) => ({
       pesData: state.pesData,
       patternOffset: state.patternOffset,
-      patternUploaded: state.patternUploaded,
       setPatternOffset: state.setPatternOffset,
     }))
   );
+
+  // Derived state: pattern is uploaded if machine has pattern info
+  const patternUploaded = usePatternUploaded();
   const containerRef = useRef<HTMLDivElement>(null);
   const stageRef = useRef<Konva.Stage | null>(null);
 
diff --git a/src/components/WorkflowStepper.tsx b/src/components/WorkflowStepper.tsx
index b171d4e..43d213b 100644
--- a/src/components/WorkflowStepper.tsx
+++ b/src/components/WorkflowStepper.tsx
@@ -1,6 +1,6 @@
 import { useState, useRef, useEffect } from 'react';
 import { useShallow } from 'zustand/react/shallow';
-import { useMachineStore } from '../stores/useMachineStore';
+import { useMachineStore, usePatternUploaded } from '../stores/useMachineStore';
 import { usePatternStore } from '../stores/usePatternStore';
 import { CheckCircleIcon, InformationCircleIcon, ExclamationTriangleIcon } from '@heroicons/react/24/solid';
 import { MachineStatus } from '../types/machine';
@@ -268,14 +268,14 @@ export function WorkflowStepper() {
   // Pattern store
   const {
     pesData,
-    patternUploaded,
   } = usePatternStore(
     useShallow((state) => ({
       pesData: state.pesData,
-      patternUploaded: state.patternUploaded,
     }))
   );
 
+  // Derived state: pattern is uploaded if machine has pattern info
+  const patternUploaded = usePatternUploaded();
   const hasPattern = pesData !== null;
   const hasErrorFlag = hasError(machineError);
   const currentStep = getCurrentStep(machineStatus, isConnected, hasPattern, patternUploaded);
diff --git a/src/stores/useMachineStore.ts b/src/stores/useMachineStore.ts
index 85ffd83..5cd80c0 100644
--- a/src/stores/useMachineStore.ts
+++ b/src/stores/useMachineStore.ts
@@ -552,3 +552,5 @@ export const useMachineStatus = () => useMachineStore((state) => state.machineSt
 export const useMachineError = () => useMachineStore((state) => state.machineError);
 export const usePatternInfo = () => useMachineStore((state) => state.patternInfo);
 export const useSewingProgress = () => useMachineStore((state) => state.sewingProgress);
+// Derived state: pattern is uploaded if machine has pattern info
+export const usePatternUploaded = () => useMachineStore((state) => state.patternInfo !== null);