diff --git a/src/components/BoemlySteps/BoemlySteps.stories.tsx b/src/components/BoemlySteps/BoemlySteps.stories.tsx
index 2584548..69ad848 100644
--- a/src/components/BoemlySteps/BoemlySteps.stories.tsx
+++ b/src/components/BoemlySteps/BoemlySteps.stories.tsx
@@ -39,3 +39,9 @@ Horizontal.args = {
   orientation: 'horizontal',
   currentStep: 2,
 };
+
+export const NotClickable = Template.bind({});
+NotClickable.args = {
+  steps: [{ text: 'Step 1' }, { text: 'Step 2' }, { text: 'Step 3' }, { text: 'Step 4' }],
+  currentStep: 2,
+};
diff --git a/src/components/BoemlySteps/BoemlySteps.tsx b/src/components/BoemlySteps/BoemlySteps.tsx
index b40e9c1..5216440 100644
--- a/src/components/BoemlySteps/BoemlySteps.tsx
+++ b/src/components/BoemlySteps/BoemlySteps.tsx
@@ -7,7 +7,7 @@ import StepDivider from './StepDivider';
 export interface BoemlyStepsProps {
   steps: {
     text: string;
-    onClick: () => void;
+    onClick?: () => void;
   }[];
   currentStep: number;
   orientation?: 'vertical' | 'horizontal';
@@ -89,7 +89,13 @@ export const BoemlySteps: React.FC<BoemlyStepsProps> = ({
         }
 
         return (
-          <Flex key={stepNum} flexDir="row" alignItems="center" cursor="pointer" onClick={onClick}>
+          <Flex
+            key={stepNum}
+            flexDir="row"
+            alignItems="center"
+            cursor={onClick ? 'pointer' : undefined}
+            onClick={onClick}
+          >
             {point}
             <Text size="smLowNormal" color="black" ml="3">
               {text}