diff --git a/playground/public/continue_later.mp4 b/playground/public/continue_later.mp4
new file mode 100644
index 000000000..2289a7b42
Binary files /dev/null and b/playground/public/continue_later.mp4 differ
diff --git a/playground/public/evaluation_metrics.mp4 b/playground/public/evaluation_metrics.mp4
new file mode 100644
index 000000000..2abcd1e74
Binary files /dev/null and b/playground/public/evaluation_metrics.mp4 differ
diff --git a/playground/public/exercise_details.mp4 b/playground/public/exercise_details.mp4
new file mode 100644
index 000000000..c5171af09
Binary files /dev/null and b/playground/public/exercise_details.mp4 differ
diff --git a/playground/public/metrics_explanation.mp4 b/playground/public/metrics_explanation.mp4
new file mode 100644
index 000000000..1ddd62b1c
Binary files /dev/null and b/playground/public/metrics_explanation.mp4 differ
diff --git a/playground/public/read_submission.mp4 b/playground/public/read_submission.mp4
new file mode 100644
index 000000000..a6b47ea17
Binary files /dev/null and b/playground/public/read_submission.mp4 differ
diff --git a/playground/public/view_next.mp4 b/playground/public/view_next.mp4
new file mode 100644
index 000000000..e40d8b092
Binary files /dev/null and b/playground/public/view_next.mp4 differ
diff --git a/playground/src/assets/evaluation_tutorial/continue_later.gif b/playground/src/assets/evaluation_tutorial/continue_later.gif
deleted file mode 100644
index eb17d4abe..000000000
Binary files a/playground/src/assets/evaluation_tutorial/continue_later.gif and /dev/null differ
diff --git a/playground/src/assets/evaluation_tutorial/evaluate_metrics.gif b/playground/src/assets/evaluation_tutorial/evaluate_metrics.gif
deleted file mode 100644
index f742c5f0c..000000000
Binary files a/playground/src/assets/evaluation_tutorial/evaluate_metrics.gif and /dev/null differ
diff --git a/playground/src/assets/evaluation_tutorial/exercise_details.gif b/playground/src/assets/evaluation_tutorial/exercise_details.gif
deleted file mode 100644
index be056f5fe..000000000
Binary files a/playground/src/assets/evaluation_tutorial/exercise_details.gif and /dev/null differ
diff --git a/playground/src/assets/evaluation_tutorial/metrics-explanation.gif b/playground/src/assets/evaluation_tutorial/metrics-explanation.gif
deleted file mode 100644
index 5a3f37d53..000000000
Binary files a/playground/src/assets/evaluation_tutorial/metrics-explanation.gif and /dev/null differ
diff --git a/playground/src/assets/evaluation_tutorial/read_submission.gif b/playground/src/assets/evaluation_tutorial/read_submission.gif
deleted file mode 100644
index 2636f751a..000000000
Binary files a/playground/src/assets/evaluation_tutorial/read_submission.gif and /dev/null differ
diff --git a/playground/src/assets/evaluation_tutorial/view-next.gif b/playground/src/assets/evaluation_tutorial/view-next.gif
deleted file mode 100644
index 38c375acb..000000000
Binary files a/playground/src/assets/evaluation_tutorial/view-next.gif and /dev/null differ
diff --git a/playground/src/components/expert_evaluation/expert_view/exercise_screen.tsx b/playground/src/components/expert_evaluation/expert_view/exercise_screen.tsx
index 4b7e21d6d..e8774eaac 100644
--- a/playground/src/components/expert_evaluation/expert_view/exercise_screen.tsx
+++ b/playground/src/components/expert_evaluation/expert_view/exercise_screen.tsx
@@ -43,7 +43,7 @@ export default function ExerciseScreen(exerciseScreenProps: ExerciseScreenProps)
           continue later. Your progress has been saved.
         </p>
         <p className="text-lg mb-6">
-          When you are ready, continue with the next exercise: {exercise.title}.
+          When you are ready, continue with the next exercise:  <strong>{exercise.title}</strong>.
         </p>
         <div className="flex justify-center mt-4">
           <SecondaryButton
diff --git a/playground/src/components/expert_evaluation/expert_view/tutorial_popup.tsx b/playground/src/components/expert_evaluation/expert_view/tutorial_popup.tsx
index 06fcba90f..769d1dda6 100644
--- a/playground/src/components/expert_evaluation/expert_view/tutorial_popup.tsx
+++ b/playground/src/components/expert_evaluation/expert_view/tutorial_popup.tsx
@@ -1,11 +1,5 @@
-import React, { useState } from 'react';
+import React, {useState} from 'react';
 import Popup from "@/components/expert_evaluation/expert_view/popup";
-import exerciseDetails from "@/assets/evaluation_tutorial/exercise_details.gif";
-import readSubmission from "@/assets/evaluation_tutorial/read_submission.gif";
-import evaluateMetrics from "@/assets/evaluation_tutorial/evaluate_metrics.gif";
-import metricsExplanation from "@/assets/evaluation_tutorial/metrics-explanation.gif";
-import viewNext from "@/assets/evaluation_tutorial/view-next.gif";
-import continueLater from "@/assets/evaluation_tutorial/continue_later.gif";
 import {
     InfoIconButton,
     NextButton,
@@ -17,24 +11,24 @@ import ExerciseDetail from "@/components/details/exercise_detail";
 
 const baseTutorialSteps = [
     {
-        image: exerciseDetails.src,
+        src: "/playground/exercise_details.mp4",
         description: (
             <>
                 1. Read the
-                <SecondaryButton text={'📄 Exercise Details'} isInline={true} className="mx-1" />
+                <SecondaryButton text={'📄 Exercise Details'} isInline={true} className="mx-1"/>
             </>
         ),
     },
     {
-        image: readSubmission.src,
+        src: "/playground/read_submission.mp4",
         description: "2. Read the Submission and the corresponding feedback"
     },
     {
-        image: evaluateMetrics.src,
+        src: "/playground/evaluation_metrics.mp4",
         description: "3. Evaluate the feedback based on the metrics"
     },
     {
-        image: metricsExplanation.src,
+        src: "/playground/metrics_explanation.mp4",
         description: (
             <>
                 4. If unsure what a metric means, press the
@@ -45,7 +39,7 @@ const baseTutorialSteps = [
         ),
     },
     {
-        image: viewNext.src,
+        src: "/playground/view_next.mp4",
         description: (
             <>
                 5. After evaluating all metrics for all feedbacks, click on the
@@ -53,7 +47,7 @@ const baseTutorialSteps = [
             </>),
     },
     {
-        image: continueLater.src,
+        src: "/playground/continue_later.mp4",
         description: (
             <>
                 6. When you are ready to take a break, click on the
@@ -79,7 +73,7 @@ export default function TutorialPopup(tutorialPopupProps: TutorialPopupProps) {
         ? [
             ...baseTutorialSteps,
             {
-                image: "",
+                src: "",
                 description: (
                     <>
                         <div className="text-left">
@@ -104,15 +98,19 @@ export default function TutorialPopup(tutorialPopupProps: TutorialPopupProps) {
         }
     };
 
-    const { image, description } = tutorialSteps[currentStep];
+    const {src, description} = tutorialSteps[currentStep];
 
     const isLastStep = currentStep === tutorialSteps.length - 1;
     return (
         <Popup isOpen={isOpen} onClose={onClose} title="Evaluation Tutorial"
-            disableCloseOnOutsideClick={disableCloseOnOutsideClick}>
+               disableCloseOnOutsideClick={disableCloseOnOutsideClick}>
             <div className="text-center">
-                {/* Display the current GIF */}
-                {image && <img src={image} alt={`Tutorial Step ${currentStep + 1}`} className="w-full h-auto mb-4" />}
+                {/* Display the current video */}
+                {src &&
+                    <video key={src} controls autoPlay className="mb-4">
+                        <source src={src} type="video/mp4"/>
+                        Your browser does not support the video tag.
+                    </video>}
 
                 {/* Render the description directly, which may include text and button */}
                 <div className={"text-lg mb-4"}>