diff --git a/client/src/components/recipe/RecipeDetail.tsx b/client/src/components/recipe/RecipeDetail.tsx
index 1517048..3b72b0c 100644
--- a/client/src/components/recipe/RecipeDetail.tsx
+++ b/client/src/components/recipe/RecipeDetail.tsx
@@ -14,12 +14,20 @@ type RecipeDetailProps = {
 export function RecipeDetail({ recipe }: RecipeDetailProps) {
     const [checkedIds, setCheckedIds] = useState<String[]>([]);
 
-    function toggeIngredient(id: string) {
+    function toggleIngredient(id: string) {
         setCheckedIds((prev)=>
             prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
         );
     }
 
+    const [checkedStepIds, setCheckedStepIds] = useState<String[]>([]);
+
+    function toggleStep(id:string) {
+        setCheckedStepIds((prev) => 
+            prev.includes(id) ? prev.filter((x) => x !== id) : [...prev, id]
+        );
+    }
+
     return (
         <article className="grid md:grid-cols-2 gap-6">
             <section className="border border-olive rounded-lg p-4 flex flex-col bg-background">
@@ -49,8 +57,8 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                     <p>{recipe.description}</p>
                 </div>
                 <div className="flex justify-between">
-                    <p className="border border-olive rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} minutter</p>
-                    <p className="border border-olive rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
+                    <p className="rounded-full flex items-center gap-1"><AccessTimeIcon/>{recipe.prepTimeMinutes} minutter</p>
+                    <p className="rounded-full flex items-center gap-1"><RestaurantIcon/>{recipe.servings} porsjoner</p>
                 </div>
             </section>
             <section className="rounded-lg">
@@ -65,7 +73,7 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
                                 control={
                                     <Checkbox
                                         checked={checkedIds.includes(ingredient.id)}
-                                        onChange={() => toggeIngredient(ingredient.id)}
+                                        onChange={() => toggleIngredient(ingredient.id)}
                                         sx={{
                                             color: 'var(--color-primary)',
                                             '&.Mui-checked': { color: 'var(--color-primary)' },
@@ -84,19 +92,25 @@ export function RecipeDetail({ recipe }: RecipeDetailProps) {
             </section>
             <section className="border border-olive bg-background rounded-lg p-4">
                 <h2 className="text-2xl font-semibold">Steg</h2>
-                <ol>
+                <ol className="flex flex-col gap-3">
                     {recipe.steps.map((step) => (
                         <li key={step.id}>
                             <FormControlLabel
                                 control={
                                     <Checkbox
+                                        checked={checkedStepIds.includes(step.id)}
+                                        onChange={() => toggleStep(step.id)}
                                         sx={{
                                             color: 'var(--color-primary)',
                                             '&.Mui-checked': { color: 'var(--color-primary)' },
                                         }}
                                     />
                                 }
-                                label={`${step.order}. ${step.instruction}`}
+                                label={
+                                    <span className={checkedStepIds.includes(step.id) ? 'line-through opacity-60' : ''}>
+                                        {`${step.order}. ${step.instruction}`}
+                                    </span>
+                                }
                                 labelPlacement="start"
                                 sx={{ width: '100%', justifyContent: 'space-between', ml: 0 }}
                             />