diff --git a/client/src/App.tsx b/client/src/App.tsx
index d6b54a0..f963da2 100644
--- a/client/src/App.tsx
+++ b/client/src/App.tsx
@@ -61,6 +61,7 @@ export function App() {
               step={step!}
               onPrint={() => handlePrintStep(String(selectedStep.id), '1')} // TODO: Get real user ID
               onAddNote={(content) => handleAddNote(content, '1')} // TODO: Get real user ID
+              onBack={handleBack}
             />
           ) : (
             <MobileLayout
diff --git a/client/src/components/StepDetails.tsx b/client/src/components/StepDetails.tsx
index a6ec23b..4e9dc33 100644
--- a/client/src/components/StepDetails.tsx
+++ b/client/src/components/StepDetails.tsx
@@ -1,18 +1,23 @@
-import { Box, Typography, Button, TextField } from '@mui/material';
+import { Box, Typography, Button, TextField, IconButton } from '@mui/material';
+import ArrowBackIcon from '@mui/icons-material/ArrowBack';
 import type { StepWithNotes } from '../types';
 
 interface StepDetailsProps {
   step: StepWithNotes;
   onPrint: () => void;
   onAddNote: (content: string) => void;
+  onBack: () => void;
 }
 
-export function StepDetails({ step, onPrint, onAddNote }: StepDetailsProps) {
+export function StepDetails({ step, onPrint, onAddNote, onBack }: StepDetailsProps) {
   return (
     <Box sx={{ p: 2 }}>
-      <Typography variant="h6" sx={{ mb: 2 }}>
-        {step.name}
-      </Typography>
+      <Box sx={{ display: 'flex', alignItems: 'center', mb: 2 }}>
+        <IconButton onClick={onBack} sx={{ mr: 1 }}>
+          <ArrowBackIcon />
+        </IconButton>
+        <Typography variant="h6">{step.name}</Typography>
+      </Box>
       <Typography sx={{ mb: 4 }}>{step.instructions}</Typography>
 
       <Box sx={{ mb: 4 }}>