diff --git a/.env b/.env
index 0d204929..0658ba2d 100644
--- a/.env
+++ b/.env
@@ -1,11 +1,11 @@
 VITE_INITIAL_COMPILER_URL=https://compiler.sensebox.de
 
 VITE_BOARD=sensebox-mcu
-VITE_BLOCKLY_API=https://api.blockly.sensebox.de
+VITE_BLOCKLY_API=https://api.testing.sensebox.de
 
 GENERATE_SOURCEMAP=false
 
 # in days
 VITE_SHARE_LINK_EXPIRES=30
 
-VITE_PROJECTS_ALLOWED_AUTHORS="mario.pesch@uni-muenster.de, p_scha35@uni-muenster.de, e.c-schneider@reedu.de, verena.witte@yahoo.de"
+VITE_PROJECTS_ALLOWED_AUTHORS="mario.pesch@uni-muenster.de,p_scha35@uni-muenster.de,e.c-schneider@reedu.de,verena.witte@yahoo.de"
diff --git a/cypress/e2e/blockly.cy.js b/cypress/e2e/blockly.cy.js
index 3c9a0ac2..236d14c2 100644
--- a/cypress/e2e/blockly.cy.js
+++ b/cypress/e2e/blockly.cy.js
@@ -89,6 +89,58 @@ describe("Blockly Editor Page Tests", () => {
       .and("contain.text", "Sprache");
   });
 
+  it("[Blockly] changes to tablet mode and compiles code for esp32", () => {
+    cy.intercept({
+      method: "POST",
+      pathname: "/compile",
+    }).as("compile");
+
+    cy.visit("/settings");
+    cy.get("#ota-selector").click();
+    cy.contains("li", "Activated").click();
+    cy.visit("/");
+    cy.contains("button", "Close").click();
+    cy.get('img[alt="Sensebox ESP"]').click();
+    cy.get('button[aria-label="Compile code"]').click();
+
+    // check if the request was made
+    cy.wait("@compile", {
+      responseTimeout: 30000,
+      requestTimeout: 30000,
+    }).then((interception) => {
+      expect(interception.response.statusCode).to.eq(200);
+      expect(interception.response.body).to.have.property("data");
+      expect(interception.response.body.data).to.have.property("id");
+      expect(interception.response.body.data.id).to.be.a("string");
+    });
+  });
+
+  it("[Blockly] changes to tablet mode and compiles code for MCU", () => {
+    cy.intercept({
+      method: "POST",
+      pathname: "/compile",
+    }).as("compile");
+
+    cy.visit("/settings");
+    cy.get("#ota-selector").click();
+    cy.contains("li", "Activated").click();
+    cy.visit("/");
+    cy.contains("button", "Close").click();
+    cy.get('img[alt="Sensebox MCU"]').click();
+    cy.get('button[aria-label="Compile code"]').click();
+
+    // check if the request was made
+    cy.wait("@compile", {
+      responseTimeout: 30000,
+      requestTimeout: 30000,
+    }).then((interception) => {
+      expect(interception.response.statusCode).to.eq(200);
+      expect(interception.response.body).to.have.property("data");
+      expect(interception.response.body.data).to.have.property("id");
+      expect(interception.response.body.data.id).to.be.a("string");
+    });
+  });
+
   it("[Blockly] compiles code", () => {
     // intercept the request to the compiler
 
@@ -98,6 +150,7 @@ describe("Blockly Editor Page Tests", () => {
     }).as("compile");
 
     cy.visit("/");
+
     cy.get('img[alt="Sensebox ESP"]').click();
     cy.get('button[aria-label="Compile code"]').click();
 
diff --git a/cypress/e2e/tutorial-flow.cy.js b/cypress/e2e/tutorial-flow.cy.js
new file mode 100644
index 00000000..3c01c749
--- /dev/null
+++ b/cypress/e2e/tutorial-flow.cy.js
@@ -0,0 +1,168 @@
+describe("End-to-End Tutorial Flow", () => {
+  const timestamp = Date.now();
+  const email = `testuser+${timestamp}@example.com`;
+  const password = "SecurePass123!";
+  const initialTitle = "Test123";
+  const updatedTitle = "Test123 - Updated";
+  const BACKEND_URL = "https://api.testing.sensebox.de";
+  let userToken;
+  let createdTutorialId = "";
+
+  it("1. registers a new user", () => {
+    cy.visit("/user/register");
+
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('input[name="confirmPassword"]').type(password);
+
+    cy.get('button[type="submit"]').click();
+
+    cy.url().should("include", "/user/register/success");
+
+    // ✅ Prüfe deutschen Erfolgshinweis
+    cy.contains("Konto erfolgreich erstellt!").should("be.visible");
+  });
+
+  it("2. logs in with the registered user", () => {
+    cy.visit("/user/login");
+
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button[type="submit"]').click();
+
+    // Prüfe, dass wir nicht mehr auf der Login-Seite sind
+    cy.url().should("not.include", "/login");
+  });
+
+  it("3. navigates to /tutorial/builder", () => {
+    cy.visit("/user/login");
+
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button[type="submit"]').click();
+
+    // Prüfe, dass wir nicht mehr auf der Login-Seite sind
+    cy.url().should("not.include", "/login");
+
+    cy.visit("/tutorial/builder");
+
+    cy.url().should("include", "/tutorial/builder");
+  });
+
+  it("4. creates a new tutorial via UI", () => {
+    cy.visit("/user/login");
+
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button[type="submit"]').click();
+
+    // Prüfe, dass wir nicht mehr auf der Login-Seite sind
+    cy.url().should("not.include", "/login");
+    cy.visit("/tutorial/builder");
+
+    // Eingaben vornehmen
+    cy.get("#tutorial-title").type(initialTitle);
+    cy.get("#tutorial-subtitle").type("Test123");
+    cy.get("#accordion_builder_advanced").click();
+
+    cy.get('button[value="3"]').click();
+
+    // ❗ Klicke auf den Speichern-Button
+    cy.contains("button", "Tutorial speichern").click();
+
+    // Warte auf Erfolgsmeldung
+    cy.contains("Tutorial erfolgreich gespeichert!").should("be.visible");
+
+    cy.get("button").contains("Zum Tutorial").click();
+
+    cy.url().then((url) => {
+      const match = url.match(/\/tutorial\/([a-f0-9]{24})/);
+      if (match) {
+        createdTutorialId = match[1];
+      } else {
+        throw new Error("Tutorial-ID nicht in URL gefunden");
+      }
+    });
+  });
+
+  it("5. views the created tutorial", () => {
+    cy.visit(`/tutorial/${createdTutorialId}`);
+    cy.url().should("include", `/tutorial/${createdTutorialId}`);
+    cy.contains(initialTitle).should("be.visible");
+  });
+
+  it("6. edits the tutorial title and saves", () => {
+    cy.visit("/user/login");
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button[type="submit"]').click();
+
+    // Prüfe, dass wir nicht mehr auf der Login-Seite sind
+    cy.url().should("not.include", "/login");
+    cy.visit("/tutorial");
+    cy.get('img[alt="Sensebox ESP"]').click();
+    cy.get(`#edit${createdTutorialId}`).click();
+    cy.get("#tutorial-title").type(updatedTitle);
+    cy.get("#accordion_builder_advanced").click();
+
+    cy.get('button[value="1"]').click();
+
+    cy.get(`#edit_hardware`).click();
+    cy.get('img[alt="MCU-S2"]').click();
+    cy.get('img[alt="Display"]').click();
+    cy.get('img[alt="GPS"]').click();
+    cy.get("button").contains("Fertig").click();
+    cy.contains("button", "Tutorial speichern").click();
+
+    // Warte auf Erfolgsmeldung
+    cy.contains("Tutorial erfolgreich gespeichert!").should("be.visible");
+
+    cy.get("button").contains("Zum Tutorial").click();
+
+    // Optional: Prüfe auch im UI
+    cy.contains(updatedTitle).should("be.visible");
+
+    cy.contains("GPS").should("be.visible");
+    cy.contains("Display").should("be.visible");
+    cy.contains("MCU-S2").should("be.visible");
+  });
+
+  it("7. deletes the test tutorial", () => {
+    cy.visit("/user/login");
+    cy.get('input[name="email"]').type(email);
+    cy.get('input[name="password"]').type(password);
+    cy.get('button[type="submit"]').click();
+
+    // Prüfe, dass wir nicht mehr auf der Login-Seite sind
+    cy.url().should("not.include", "/login");
+    cy.visit("/tutorial");
+    cy.get('img[alt="Sensebox ESP"]').click();
+    cy.get(`#delete${createdTutorialId}`).click();
+    cy.get("#confirmDelete").click();
+    // confirm delete button is gone
+    cy.get("body").find(`#delete${createdTutorialId}`).should("not.exist");
+  });
+
+  it("8. deletes the test user account", () => {
+    cy.request("POST", `${BACKEND_URL}/user/login`, {
+      email,
+      password,
+    }).then((loginRes) => {
+      const token = loginRes.body.token;
+
+      // Nutzer löschen
+      cy.request({
+        method: "DELETE",
+        url: `${BACKEND_URL}/user/me`,
+        headers: {
+          Authorization: `Bearer ${token}`,
+        },
+      }).then((deleteRes) => {
+        expect(deleteRes.status).to.eq(200);
+        expect(deleteRes.body.message).to.eq(
+          "User account successfully deleted.",
+        );
+      });
+    });
+  });
+});
diff --git a/cypress/support/e2e.js b/cypress/support/e2e.js
index 3eaffffa..bea78b60 100644
--- a/cypress/support/e2e.js
+++ b/cypress/support/e2e.js
@@ -14,4 +14,19 @@
 // ***********************************************************
 
 // Import commands.js using ES2015 syntax:
-import './commands'
\ No newline at end of file
+import "./commands";
+// cypress/support/e2e.js
+Cypress.on("uncaught:exception", (err, runnable) => {
+  // Prüfe auf bekannte Monaco-Fehler
+  if (
+    err.message.includes("LoadError") ||
+    err.message.includes("loader.js") ||
+    err.message.includes("monaco-editor") ||
+    err.message.includes("[object Event]") // Dein spezifischer Fehler
+  ) {
+    // Verhindere, dass Cypress den Test abbricht
+    return false;
+  }
+  // Bei allen anderen Fehlern: Test abbrechen
+  return true;
+});
diff --git a/index.html b/index.html
index a8eb4aaf..143aa917 100644
--- a/index.html
+++ b/index.html
@@ -6,6 +6,10 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <meta name="theme-color" content="#4EAF47" />
     <link rel="apple-touch-icon" href="/logo192.png" />
+    <link
+      rel="stylesheet"
+      href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/7.0.1/css/all.min.css"
+    />
     <!--
       manifest.json provides metadata used when your web app is installed on a
       user's mobile device or desktop. See https://developers.google.com/web/fundamentals/web-app-manifest/
diff --git a/package.json b/package.json
index fed1eac8..9ced2b3d 100644
--- a/package.json
+++ b/package.json
@@ -19,8 +19,8 @@
     "@emotion/react": "^11.10.5",
     "@emotion/styled": "^11.10.5",
     "@fortawesome/fontawesome-svg-core": "^6.2.1",
-    "@fortawesome/free-solid-svg-icons": "^6.2.1",
-    "@fortawesome/react-fontawesome": "^0.2.6",
+    "@fortawesome/free-solid-svg-icons": "^7.0.0",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@monaco-editor/react": "^4.3.1",
     "@mui/icons-material": "^5.10.16",
     "@mui/lab": "^5.0.0-alpha.110",
@@ -29,8 +29,10 @@
     "@testing-library/jest-dom": "^5.16.1",
     "@testing-library/react": "^12.1.2",
     "@testing-library/user-event": "^7.2.1",
+    "@uiw/react-markdown-preview": "^5.1.5",
+    "@uiw/react-md-editor": "^4.0.8",
+    "axios": "^1.13.1",
     "blockly": "^12.3.0",
-    "axios": "^0.30.0",
     "file-saver": "^2.0.5",
     "framer-motion": "^6.5.1",
     "markdown-it": "^14.1.0",
@@ -39,9 +41,11 @@
     "prismjs": "^1.27.0",
     "qrcode.react": "^3.1.0",
     "react": "^17.0.2",
+    "react-beautiful-dnd": "^13.1.1",
+    "react-confetti": "^6.4.0",
     "react-cookie-consent": "^9.0.0",
     "react-dom": "^17.0.2",
-    "react-markdown": "^8.0.0",
+    "react-markdown": "^10.1.0",
     "react-markdown-editor-lite": "^1.3.3",
     "react-mde": "^11.5.0",
     "react-rating-stars-component": "^2.2.0",
@@ -77,13 +81,13 @@
   ],
   "devDependencies": {
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@vitejs/plugin-react": "^4.3.4",
+    "@vitejs/plugin-react": "^5.0.2",
     "cypress": "^15.1.0",
     "cypress-ctrf-json-reporter": "^0.0.11",
     "eslint": "^9.20.1",
     "eslint-plugin-cypress": "^4.1.0",
     "eslint-plugin-react": "^7.37.4",
     "prettier": "^3.6.2",
-    "vite": "^7.1.3"
+    "vite": "^7.1.5"
   }
 }
diff --git a/public/media/blockly/blueLed.png b/public/media/blockly/blueLed.png
new file mode 100644
index 00000000..1df44b78
Binary files /dev/null and b/public/media/blockly/blueLed.png differ
diff --git a/public/media/blockly/led_blue.png b/public/media/blockly/led_blue.png
new file mode 100644
index 00000000..ed951877
Binary files /dev/null and b/public/media/blockly/led_blue.png differ
diff --git a/public/media/blockly/led_off.png b/public/media/blockly/led_off.png
new file mode 100644
index 00000000..141e8dc9
Binary files /dev/null and b/public/media/blockly/led_off.png differ
diff --git a/public/media/blockly/led_red.png b/public/media/blockly/led_red.png
new file mode 100644
index 00000000..cd3f68eb
Binary files /dev/null and b/public/media/blockly/led_red.png differ
diff --git a/public/media/blockly/led_yellow.png b/public/media/blockly/led_yellow.png
new file mode 100644
index 00000000..ddd2b6fd
Binary files /dev/null and b/public/media/blockly/led_yellow.png differ
diff --git a/public/media/blockly/redLed.png b/public/media/blockly/redLed.png
new file mode 100644
index 00000000..424c214d
Binary files /dev/null and b/public/media/blockly/redLed.png differ
diff --git a/public/media/blockly/yellowLed.png b/public/media/blockly/yellowLed.png
new file mode 100644
index 00000000..c0d692dd
Binary files /dev/null and b/public/media/blockly/yellowLed.png differ
diff --git a/public/media/hardware/3dmodels/ble-bee.png b/public/media/hardware/3dmodels/ble-bee.png
new file mode 100644
index 00000000..e6cab11d
Binary files /dev/null and b/public/media/hardware/3dmodels/ble-bee.png differ
diff --git a/public/media/hardware/3dmodels/bme.png b/public/media/hardware/3dmodels/bme.png
new file mode 100755
index 00000000..dd813f81
Binary files /dev/null and b/public/media/hardware/3dmodels/bme.png differ
diff --git a/public/media/hardware/3dmodels/bmp280.png b/public/media/hardware/3dmodels/bmp280.png
new file mode 100755
index 00000000..7952e2b3
Binary files /dev/null and b/public/media/hardware/3dmodels/bmp280.png differ
diff --git a/public/media/hardware/3dmodels/coming-soon.png b/public/media/hardware/3dmodels/coming-soon.png
new file mode 100644
index 00000000..b49fbf4a
Binary files /dev/null and b/public/media/hardware/3dmodels/coming-soon.png differ
diff --git a/public/media/hardware/3dmodels/display.png b/public/media/hardware/3dmodels/display.png
new file mode 100755
index 00000000..06bff775
Binary files /dev/null and b/public/media/hardware/3dmodels/display.png differ
diff --git a/public/media/hardware/3dmodels/expander.png b/public/media/hardware/3dmodels/expander.png
new file mode 100755
index 00000000..87a95084
Binary files /dev/null and b/public/media/hardware/3dmodels/expander.png differ
diff --git a/public/media/hardware/3dmodels/gps.png b/public/media/hardware/3dmodels/gps.png
new file mode 100755
index 00000000..26be3a2a
Binary files /dev/null and b/public/media/hardware/3dmodels/gps.png differ
diff --git a/public/media/hardware/3dmodels/hcsr04.png b/public/media/hardware/3dmodels/hcsr04.png
new file mode 100755
index 00000000..350f4fe1
Binary files /dev/null and b/public/media/hardware/3dmodels/hcsr04.png differ
diff --git a/public/media/hardware/3dmodels/hdc1080.png b/public/media/hardware/3dmodels/hdc1080.png
new file mode 100755
index 00000000..a7e94528
Binary files /dev/null and b/public/media/hardware/3dmodels/hdc1080.png differ
diff --git a/public/media/hardware/3dmodels/jstjst.png b/public/media/hardware/3dmodels/jstjst.png
new file mode 100644
index 00000000..01ccf94f
Binary files /dev/null and b/public/media/hardware/3dmodels/jstjst.png differ
diff --git a/public/media/hardware/3dmodels/jstjumper.png b/public/media/hardware/3dmodels/jstjumper.png
new file mode 100644
index 00000000..1ce942ba
Binary files /dev/null and b/public/media/hardware/3dmodels/jstjumper.png differ
diff --git a/public/media/hardware/3dmodels/jstjumperfem.png b/public/media/hardware/3dmodels/jstjumperfem.png
new file mode 100644
index 00000000..23d2875c
Binary files /dev/null and b/public/media/hardware/3dmodels/jstjumperfem.png differ
diff --git a/public/media/hardware/3dmodels/jumpermtm.png b/public/media/hardware/3dmodels/jumpermtm.png
new file mode 100644
index 00000000..d44494bb
Binary files /dev/null and b/public/media/hardware/3dmodels/jumpermtm.png differ
diff --git a/public/media/hardware/3dmodels/lan_bee.png b/public/media/hardware/3dmodels/lan_bee.png
new file mode 100644
index 00000000..b770ba72
Binary files /dev/null and b/public/media/hardware/3dmodels/lan_bee.png differ
diff --git a/public/media/hardware/3dmodels/led_matrix.png b/public/media/hardware/3dmodels/led_matrix.png
new file mode 100644
index 00000000..7009a8e2
Binary files /dev/null and b/public/media/hardware/3dmodels/led_matrix.png differ
diff --git a/public/media/hardware/3dmodels/lora_bee.png b/public/media/hardware/3dmodels/lora_bee.png
new file mode 100644
index 00000000..0bd28dcb
Binary files /dev/null and b/public/media/hardware/3dmodels/lora_bee.png differ
diff --git a/public/media/hardware/3dmodels/mcu.png b/public/media/hardware/3dmodels/mcu.png
new file mode 100644
index 00000000..7b730daa
Binary files /dev/null and b/public/media/hardware/3dmodels/mcu.png differ
diff --git a/public/media/hardware/3dmodels/mcus2.png b/public/media/hardware/3dmodels/mcus2.png
new file mode 100644
index 00000000..7ea0570c
Binary files /dev/null and b/public/media/hardware/3dmodels/mcus2.png differ
diff --git a/public/media/hardware/3dmodels/mic.png b/public/media/hardware/3dmodels/mic.png
new file mode 100755
index 00000000..2a723cdd
Binary files /dev/null and b/public/media/hardware/3dmodels/mic.png differ
diff --git a/public/media/hardware/3dmodels/scd30.png b/public/media/hardware/3dmodels/scd30.png
new file mode 100644
index 00000000..3774ded7
Binary files /dev/null and b/public/media/hardware/3dmodels/scd30.png differ
diff --git a/public/media/hardware/3dmodels/sd_bee.png b/public/media/hardware/3dmodels/sd_bee.png
new file mode 100644
index 00000000..22445a47
Binary files /dev/null and b/public/media/hardware/3dmodels/sd_bee.png differ
diff --git a/public/media/hardware/3dmodels/sds011.png b/public/media/hardware/3dmodels/sds011.png
new file mode 100755
index 00000000..336fc511
Binary files /dev/null and b/public/media/hardware/3dmodels/sds011.png differ
diff --git a/public/media/hardware/3dmodels/sds011adaptercabel.png b/public/media/hardware/3dmodels/sds011adaptercabel.png
new file mode 100644
index 00000000..444a14fa
Binary files /dev/null and b/public/media/hardware/3dmodels/sds011adaptercabel.png differ
diff --git a/public/media/hardware/3dmodels/smt50.png b/public/media/hardware/3dmodels/smt50.png
new file mode 100755
index 00000000..e62b8242
Binary files /dev/null and b/public/media/hardware/3dmodels/smt50.png differ
diff --git a/public/media/hardware/3dmodels/sound.png b/public/media/hardware/3dmodels/sound.png
new file mode 100755
index 00000000..12eba33d
Binary files /dev/null and b/public/media/hardware/3dmodels/sound.png differ
diff --git a/public/media/hardware/3dmodels/sps30.png b/public/media/hardware/3dmodels/sps30.png
new file mode 100644
index 00000000..e276bcbc
Binary files /dev/null and b/public/media/hardware/3dmodels/sps30.png differ
diff --git a/public/media/hardware/3dmodels/tofsensor.png b/public/media/hardware/3dmodels/tofsensor.png
new file mode 100644
index 00000000..13d5798b
Binary files /dev/null and b/public/media/hardware/3dmodels/tofsensor.png differ
diff --git a/public/media/hardware/3dmodels/uvlux.png b/public/media/hardware/3dmodels/uvlux.png
new file mode 100755
index 00000000..e8061e68
Binary files /dev/null and b/public/media/hardware/3dmodels/uvlux.png differ
diff --git a/public/media/hardware/3dmodels/wassertemperatur.JPG b/public/media/hardware/3dmodels/wassertemperatur.JPG
new file mode 100644
index 00000000..946a764d
Binary files /dev/null and b/public/media/hardware/3dmodels/wassertemperatur.JPG differ
diff --git a/public/media/hardware/3dmodels/wifi_bee.png b/public/media/hardware/3dmodels/wifi_bee.png
new file mode 100644
index 00000000..0d47d519
Binary files /dev/null and b/public/media/hardware/3dmodels/wifi_bee.png differ
diff --git a/public/media/tutorial/icons/algorithmen.svg b/public/media/tutorial/icons/algorithmen.svg
new file mode 100644
index 00000000..328b9978
--- /dev/null
+++ b/public/media/tutorial/icons/algorithmen.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="24" y="30" width="12" height="8" rx="2"/>
+    <rect x="44" y="30" width="12" height="8" rx="2"/>
+    <rect x="34" y="48" width="12" height="8" rx="2"/>
+    <line x1="36" y1="38" x2="36" y2="48"/>
+    <line x1="52" y1="38" x2="52" y2="48"/>
+    <line x1="36" y1="48" x2="46" y2="48"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/biologie.svg b/public/media/tutorial/icons/biologie.svg
new file mode 100644
index 00000000..be0e7c36
--- /dev/null
+++ b/public/media/tutorial/icons/biologie.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <path d="M32 32 C28 36 28 44 32 48 C36 52 44 52 48 48 C52 44 52 36 48 32 C44 28 36 28 32 32 Z"/>
+    <line x1="40" y1="28" x2="40" y2="52"/>
+    <path d="M36 36 L40 40 L36 44"/>
+    <path d="M44 36 L40 40 L44 44"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/chemie.svg b/public/media/tutorial/icons/chemie.svg
new file mode 100644
index 00000000..304cb361
--- /dev/null
+++ b/public/media/tutorial/icons/chemie.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <path d="M32 28 L48 28 L44 36 L44 48 A4 4 0 0 1 40 52 A4 4 0 0 1 36 48 L36 36 Z"/>
+    <line x1="32" y1="28" x2="32" y2="24"/>
+    <line x1="48" y1="28" x2="48" y2="24"/>
+    <circle cx="40" cy="56" r="2" fill="#ffffff" stroke="#ffffff"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/cybersecurity.svg b/public/media/tutorial/icons/cybersecurity.svg
new file mode 100644
index 00000000..211e8f25
--- /dev/null
+++ b/public/media/tutorial/icons/cybersecurity.svg
@@ -0,0 +1,8 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <path d="M32 32 L48 32 L48 40 C48 48 40 52 40 52 C40 52 32 48 32 40 Z"/>
+    <circle cx="40" cy="40" r="3"/>
+    <line x1="40" y1="43" x2="40" y2="47"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/datenstrukturen.svg b/public/media/tutorial/icons/datenstrukturen.svg
new file mode 100644
index 00000000..e1878bd8
--- /dev/null
+++ b/public/media/tutorial/icons/datenstrukturen.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="28" y="26" width="24" height="8" rx="2"/>
+    <rect x="28" y="36" width="24" height="8" rx="2"/>
+    <rect x="28" y="46" width="24" height="8" rx="2"/>
+    <line x1="28" y1="30" x2="52" y2="30"/>
+    <line x1="28" y1="40" x2="52" y2="40"/>
+    <line x1="28" y1="50" x2="44" y2="50"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/datenvisualisierung.svg b/public/media/tutorial/icons/datenvisualisierung.svg
new file mode 100644
index 00000000..f8d3cfbd
--- /dev/null
+++ b/public/media/tutorial/icons/datenvisualisierung.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <line x1="26" y1="50" x2="54" y2="50"/>
+    <rect x="28" y="42" width="6" height="8"/>
+    <rect x="38" y="34" width="6" height="16"/>
+    <rect x="48" y="38" width="6" height="12"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/digitale_bildung.svg b/public/media/tutorial/icons/digitale_bildung.svg
new file mode 100644
index 00000000..288fcac4
--- /dev/null
+++ b/public/media/tutorial/icons/digitale_bildung.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="26" y="28" width="28" height="20" rx="2"/>
+    <line x1="30" y1="34" x2="34" y2="34"/>
+    <line x1="30" y1="40" x2="42" y2="40"/>
+    <line x1="30" y1="46" x2="46" y2="46"/>
+    <circle cx="54" cy="46" r="2" fill="#ffffff" stroke="#ffffff"/>
+    <path d="M26 52 L54 52"/>
+    <path d="M32 56 L48 56" />
+    
+</svg>
diff --git a/public/media/tutorial/icons/informatik.svg b/public/media/tutorial/icons/informatik.svg
new file mode 100644
index 00000000..a47ec9c8
--- /dev/null
+++ b/public/media/tutorial/icons/informatik.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="26" y="26" width="28" height="20" rx="2" stroke="#ffffff" fill="none"/>
+    <line x1="40" y1="50" x2="40" y2="56" />
+    <line x1="32" y1="36" x2="36" y2="32" />
+    <line x1="32" y1="44" x2="36" y2="48" />
+    <line x1="44" y1="32" x2="48" y2="36" />
+    <line x1="44" y1="48" x2="48" y2="44" />
+    
+</svg>
diff --git a/public/media/tutorial/icons/ki_machine_learning.svg b/public/media/tutorial/icons/ki_machine_learning.svg
new file mode 100644
index 00000000..6917b235
--- /dev/null
+++ b/public/media/tutorial/icons/ki_machine_learning.svg
@@ -0,0 +1,13 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <circle cx="32" cy="36" r="4"/>
+    <circle cx="48" cy="36" r="4"/>
+    <circle cx="40" cy="48" r="4"/>
+    <line x1="36" y1="38" x2="40" y2="46"/>
+    <line x1="44" y1="38" x2="40" y2="46"/>
+    <line x1="36" y1="34" x2="44" y2="34"/>
+    <line x1="32" y1="40" x2="32" y2="48"/>
+    <line x1="48" y1="40" x2="48" y2="48"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/mathematik.svg b/public/media/tutorial/icons/mathematik.svg
new file mode 100644
index 00000000..20f55889
--- /dev/null
+++ b/public/media/tutorial/icons/mathematik.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <path d="M26 50 L34 30 L42 50 Z"/>
+    <rect x="46" y="30" width="12" height="12" rx="2"/>
+    <line x1="46" y1="48" x2="58" y2="48"/>
+    <line x1="30" y1="54" x2="50" y2="54"/>
+    <line x1="30" y1="58" x2="46" y2="58"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/microcontroller.svg b/public/media/tutorial/icons/microcontroller.svg
new file mode 100644
index 00000000..ef4033ea
--- /dev/null
+++ b/public/media/tutorial/icons/microcontroller.svg
@@ -0,0 +1,19 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="30" y="30" width="20" height="20" rx="2"/>
+    <rect x="36" y="36" width="8" height="8"/>
+    <line x1="40" y1="30" x2="40" y2="24"/>
+    <line x1="34" y1="30" x2="34" y2="24"/>
+    <line x1="46" y1="30" x2="46" y2="24"/>
+    <line x1="40" y1="50" x2="40" y2="56"/>
+    <line x1="34" y1="50" x2="34" y2="56"/>
+    <line x1="46" y1="50" x2="46" y2="56"/>
+    <line x1="30" y1="40" x2="24" y2="40"/>
+    <line x1="30" y1="36" x2="24" y2="36"/>
+    <line x1="30" y1="44" x2="24" y2="44"/>
+    <line x1="50" y1="40" x2="56" y2="40"/>
+    <line x1="50" y1="36" x2="56" y2="36"/>
+    <line x1="50" y1="44" x2="56" y2="44"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/nachhaltigkeit_technik.svg b/public/media/tutorial/icons/nachhaltigkeit_technik.svg
new file mode 100644
index 00000000..b15e0d48
--- /dev/null
+++ b/public/media/tutorial/icons/nachhaltigkeit_technik.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <path d="M36 44 C32 40 32 34 36 30 C40 26 48 28 50 34 C52 40 48 46 44 48 C40 50 36 50 34 52"/>
+    <line x1="34" y1="52" x2="30" y2="56"/>
+    <circle cx="48" cy="32" r="2" fill="#ffffff" stroke="#ffffff"/>
+    <circle cx="44" cy="40" r="2" fill="#ffffff" stroke="#ffffff"/>
+    <circle cx="38" cy="34" r="2" fill="#ffffff" stroke="#ffffff"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/netzwerke.svg b/public/media/tutorial/icons/netzwerke.svg
new file mode 100644
index 00000000..a66e3822
--- /dev/null
+++ b/public/media/tutorial/icons/netzwerke.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <circle cx="40" cy="32" r="4"/>
+    <circle cx="28" cy="44" r="4"/>
+    <circle cx="52" cy="44" r="4"/>
+    <line x1="36" y1="34" x2="32" y2="42"/>
+    <line x1="44" y1="34" x2="48" y2="42"/>
+    <line x1="32" y1="46" x2="48" y2="46"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/physik.svg b/public/media/tutorial/icons/physik.svg
new file mode 100644
index 00000000..0ae3fce0
--- /dev/null
+++ b/public/media/tutorial/icons/physik.svg
@@ -0,0 +1,9 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <ellipse cx="40" cy="40" rx="16" ry="8"/>
+    <ellipse cx="40" cy="40" rx="8" ry="16" transform="rotate(60 40 40)"/>
+    <ellipse cx="40" cy="40" rx="8" ry="16" transform="rotate(-60 40 40)"/>
+    <circle cx="40" cy="40" r="3" fill="#ffffff" stroke="#ffffff"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/robotik.svg b/public/media/tutorial/icons/robotik.svg
new file mode 100644
index 00000000..b505c43c
--- /dev/null
+++ b/public/media/tutorial/icons/robotik.svg
@@ -0,0 +1,12 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="34" y="30" width="12" height="10" rx="2"/>
+    <circle cx="40" cy="26" r="2" fill="#ffffff" stroke="#ffffff"/>
+    <line x1="40" y1="28" x2="40" y2="30"/>
+    <rect x="32" y="40" width="16" height="8" rx="2"/>
+    <circle cx="34" cy="52" r="4"/>
+    <circle cx="46" cy="52" r="4"/>
+    <line x1="38" y1="52" x2="42" y2="52"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/sensoren.svg b/public/media/tutorial/icons/sensoren.svg
new file mode 100644
index 00000000..a76de192
--- /dev/null
+++ b/public/media/tutorial/icons/sensoren.svg
@@ -0,0 +1,15 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <circle cx="40" cy="40" r="8"/>
+    <circle cx="40" cy="40" r="2" fill="#ffffff" stroke="#ffffff"/>
+    <path d="M40 28 L40 24"/>
+    <path d="M52 40 L56 40"/>
+    <path d="M40 56 L40 60"/>
+    <path d="M24 40 L28 40"/>
+    <path d="M32 32 L28 28"/>
+    <path d="M48 32 L52 28"/>
+    <path d="M48 48 L52 52"/>
+    <path d="M32 48 L28 52"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/sonstiges.svg b/public/media/tutorial/icons/sonstiges.svg
new file mode 100644
index 00000000..6fa531f2
--- /dev/null
+++ b/public/media/tutorial/icons/sonstiges.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <circle cx="40" cy="36" r="6"/>
+    <path d="M28 52 C28 44 52 44 52 52 Z"/>
+    <circle cx="28" cy="28" r="2" fill="{white}" stroke="{white}"/>
+    <circle cx="52" cy="28" r="2" fill="{white}" stroke="{white}"/>
+    <circle cx="40" cy="60" r="2" fill="{white}" stroke="{white}"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/spieleentwicklung.svg b/public/media/tutorial/icons/spieleentwicklung.svg
new file mode 100644
index 00000000..20fc0137
--- /dev/null
+++ b/public/media/tutorial/icons/spieleentwicklung.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="28" y="34" width="24" height="12" rx="6"/>
+    <circle cx="32" cy="40" r="2" fill="{white}" stroke="{white}"/>
+    <line x1="36" y1="40" x2="40" y2="40"/>
+    <line x1="38" y1="38" x2="38" y2="42"/>
+    <circle cx="48" cy="38" r="2" fill="{white}" stroke="{white}"/>
+    <circle cx="48" cy="42" r="2" fill="{white}" stroke="{white}"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/technik.svg b/public/media/tutorial/icons/technik.svg
new file mode 100644
index 00000000..bdb9eb07
--- /dev/null
+++ b/public/media/tutorial/icons/technik.svg
@@ -0,0 +1,10 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <circle cx="36" cy="40" r="6"/>
+    <circle cx="48" cy="36" r="4"/>
+    <line x1="41" y1="36" x2="45" y2="34"/>
+    <line x1="40" y1="46" x2="40" y2="56"/>
+    <rect x="36" y="56" width="8" height="4" rx="1"/>
+    
+</svg>
diff --git a/public/media/tutorial/icons/webentwicklung.svg b/public/media/tutorial/icons/webentwicklung.svg
new file mode 100644
index 00000000..a539bcd1
--- /dev/null
+++ b/public/media/tutorial/icons/webentwicklung.svg
@@ -0,0 +1,11 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 80 80" stroke="#ffffff" stroke-width="4" stroke-linecap="round" stroke-linejoin="round" fill="none">
+<circle cx="40" cy="40" r="32" fill="#4b7f28"/>
+
+    <rect x="24" y="28" width="32" height="20" rx="2"/>
+    <line x1="40" y1="48" x2="40" y2="54"/>
+    <line x1="32" y1="38" x2="36" y2="34"/>
+    <line x1="32" y1="42" x2="36" y2="46"/>
+    <line x1="48" y1="34" x2="52" y2="38"/>
+    <line x1="48" y1="46" x2="52" y2="42"/>
+    
+</svg>
diff --git a/src/App.css b/src/App.css
index cc1e993c..1b6222d9 100644
--- a/src/App.css
+++ b/src/App.css
@@ -63,10 +63,6 @@ td {
   align-items: center;
 }
 
-:root {
-  --url: url("./data/mcu_opacity.png");
-}
-
 .blocklySvg {
   background-image: var(--url);
   background-position: center;
diff --git a/src/App.jsx b/src/App.jsx
index f9971873..955098ac 100644
--- a/src/App.jsx
+++ b/src/App.jsx
@@ -31,6 +31,7 @@ const theme = createTheme({
     },
     background: {
       white: "#ffffff",
+      grey: "#f9fafb",
     },
     button: {
       compile: "#e27136",
@@ -39,13 +40,22 @@ const theme = createTheme({
       blue: "#3ab0e8",
       green: "#4EAF47",
     },
+    feedback: {
+      success: "#4CAF50", // vorher hartkodiert
+      error: "#E53935",
+      warning: "#FFA000",
+      border: "#DDDDDD",
+    },
   },
 });
 
 class App extends Component {
   componentDidMount() {
-    store.dispatch(loadUser());
-    // set initial compiler
+    // In deiner App.js oder beim App-Start
+    const token = localStorage.getItem("token");
+    if (token) {
+      store.dispatch(loadUser());
+    }
     store.dispatch(setCompiler(import.meta.env.VITE_INITIAL_COMPILER_URL));
   }
 
diff --git a/src/actions/authActions.js b/src/actions/authActions.js
index de771ab1..5dc97a02 100644
--- a/src/actions/authActions.js
+++ b/src/actions/authActions.js
@@ -7,245 +7,332 @@ import {
   LOGIN_FAIL,
   LOGOUT_SUCCESS,
   LOGOUT_FAIL,
-  REFRESH_TOKEN_SUCCESS,
+  REGISTER_SUCCESS,
+  REGISTER_FAIL,
 } from "../actions/types";
 
 import axios from "axios";
 import { returnErrors, returnSuccess } from "./messageActions";
 import { setLanguage } from "./generalActions";
 
-// Check token & load user
+const API_BASE = import.meta.env.VITE_BLOCKLY_API;
+
+// ======================
+// LOAD USER (from token)
+// ======================
 export const loadUser = () => (dispatch) => {
-  // user loading
-  dispatch({
-    type: USER_LOADING,
-  });
-  const config = {
-    success: (res) => {
-      dispatch({
-        type: GET_STATUS,
-        payload: res.data.user.status,
-      });
-      dispatch(setLanguage(res.data.user.language));
-      dispatch({
-        type: USER_LOADED,
-        payload: res.data.user,
-      });
-    },
-    error: (err) => {
-      if (err.response) {
-        dispatch(returnErrors(err.response.data.message, err.response.status));
-      }
-      var status = [];
-      if (window.localStorage.getItem("status")) {
-        status = JSON.parse(window.localStorage.getItem("status"));
-      }
-      dispatch({
-        type: GET_STATUS,
-        payload: status,
-      });
-      dispatch({
-        type: AUTH_ERROR,
-      });
-    },
-  };
+  dispatch({ type: USER_LOADING });
+
+  // Kein async/await auf der äußeren Ebene – stattdessen .then/.catch
   axios
-    .get(
-      `${import.meta.env.VITE_BLOCKLY_API}/user`,
-      config,
-      dispatch(authInterceptor()),
-    )
+    .get(`${API_BASE}/user`, { headers: authHeader() })
     .then((res) => {
-      res.config.success(res);
+      // Erfolg
+      dispatch({ type: USER_LOADED, payload: res.data.user });
+      dispatch({ type: GET_STATUS, payload: res.data.user.status });
+      dispatch(setLanguage(res.data.user.language || "en_US"));
     })
     .catch((err) => {
-      err.config.error(err);
+      // Fehler – aber NICHT werfen!
+      dispatch({ type: AUTH_ERROR });
+      let status = [];
+      try {
+        status = JSON.parse(localStorage.getItem("status")) || [];
+      } catch (e) {
+        /* ignore */
+      }
+      dispatch({ type: GET_STATUS, payload: status });
+      console.warn("Failed to load user:", err.message);
     });
 };
 
-// Login user
-export const login =
+// ======================
+// REGISTER (native)
+// ======================
+export const register =
   ({ email, password }) =>
-  (dispatch) => {
-    dispatch({
-      type: USER_LOADING,
-    });
-    // Headers
+  async (dispatch) => {
+    dispatch({ type: USER_LOADING });
+
     const config = {
       headers: {
         "Content-Type": "application/json",
       },
     };
-    // Request Body
-    const body = JSON.stringify({ email, password });
-    axios
-      .post(`${import.meta.env.VITE_BLOCKLY_API}/user`, body, config)
-      .then((res) => {
-        dispatch(setLanguage(res.data.user.language));
-        dispatch({
-          type: LOGIN_SUCCESS,
-          payload: res.data,
-        });
-        dispatch({
-          type: GET_STATUS,
-          payload: res.data.user.status,
-        });
-        dispatch(returnSuccess(res.data.message, res.status, "LOGIN_SUCCESS"));
-      })
-      .catch((err) => {
+
+    try {
+      const res = await axios.post(
+        `${API_BASE}/user/register`,
+        JSON.stringify({ email, password }),
+        config,
+      );
+
+      dispatch({
+        type: REGISTER_SUCCESS,
+        payload: res.data,
+      });
+      dispatch(returnSuccess(res.data.message, res.status, "REGISTER_SUCCESS"));
+    } catch (err) {
+      dispatch({
+        type: REGISTER_FAIL,
+      });
+      if (err.response) {
         dispatch(
           returnErrors(
             err.response.data.message,
             err.response.status,
-            "LOGIN_FAIL",
+            "REGISTER_FAIL",
           ),
         );
-        dispatch({
-          type: LOGIN_FAIL,
-        });
-        var status = [];
-        if (window.localStorage.getItem("status")) {
-          status = JSON.parse(window.localStorage.getItem("status"));
-        }
-        dispatch({
-          type: GET_STATUS,
-          payload: status,
-        });
-      });
+      }
+    }
   };
 
-// Logout User
-export const logout = () => (dispatch) => {
-  const config = {
-    success: (res) => {
+// ======================
+// LOGIN (native)
+// ======================
+export const login =
+  ({ email, password }) =>
+  async (dispatch) => {
+    dispatch({ type: USER_LOADING });
+
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    };
+
+    try {
+      const res = await axios.post(
+        `${API_BASE}/user/login`,
+        JSON.stringify({ email, password }),
+        config,
+      );
+
+      dispatch(setLanguage(res.data.user.language || "en_US"));
       dispatch({
-        type: LOGOUT_SUCCESS,
+        type: LOGIN_SUCCESS,
+        payload: res.data,
       });
-      var status = [];
-      if (window.localStorage.getItem("status")) {
-        status = JSON.parse(window.localStorage.getItem("status"));
-      }
       dispatch({
         type: GET_STATUS,
-        payload: status,
+        payload: res.data.user.status,
       });
-      var locale = "en_US";
-      if (window.localStorage.getItem("locale")) {
-        locale = window.localStorage.getItem("locale");
-      } else if (navigator.language === "de-DE") {
-        locale = "de_DE";
+      dispatch(returnSuccess(res.data.message, res.status, "LOGIN_SUCCESS"));
+    } catch (err) {
+      dispatch({ type: LOGIN_FAIL });
+      let status = [];
+      try {
+        status = JSON.parse(localStorage.getItem("status")) || [];
+      } catch (e) {
+        /* ignore */
+      }
+      dispatch({ type: GET_STATUS, payload: status });
+
+      if (err.response) {
+        dispatch(
+          returnErrors(
+            err.response.data.message,
+            err.response.status,
+            "LOGIN_FAIL",
+          ),
+        );
       }
-      dispatch(setLanguage(locale));
-      dispatch(returnSuccess(res.data.message, res.status, "LOGOUT_SUCCESS"));
-    },
-    error: (err) => {
-      dispatch(
-        returnErrors(
-          err.response.data.message,
-          err.response.status,
-          "LOGOUT_FAIL",
-        ),
+    }
+  };
+
+// ======================
+// LOGIN via openSenseMap (optional)
+// ======================
+export const loginOpenSenseMap =
+  ({ email, password }) =>
+  async (dispatch) => {
+    dispatch({ type: USER_LOADING });
+
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    };
+
+    try {
+      const res = await axios.post(
+        `${API_BASE}/user/login/opensensemap`,
+        JSON.stringify({ email, password }),
+        config,
       );
+
+      dispatch(setLanguage(res.data.user.language || "en_US"));
       dispatch({
-        type: LOGOUT_FAIL,
+        type: LOGIN_SUCCESS,
+        payload: res.data,
       });
-      var status = [];
-      if (window.localStorage.getItem("status")) {
-        status = JSON.parse(window.localStorage.getItem("status"));
-      }
+
       dispatch({
         type: GET_STATUS,
-        payload: status,
+        payload: res.data.user.status,
       });
-    },
-  };
-  axios
-    .post("https://api.opensensemap.org/users/sign-out", {}, config)
-    .then((res) => {
-      res.config.success(res);
-    })
-    .catch((err) => {
-      if (err.response && err.response.status !== 401) {
-        err.config.error(err);
+      dispatch(returnSuccess(res.data.message, res.status, "LOGIN_SUCCESS"));
+    } catch (err) {
+      dispatch({ type: LOGIN_FAIL });
+      let status = [];
+      try {
+        status = JSON.parse(localStorage.getItem("status")) || [];
+      } catch (e) {
+        /* ignore */
       }
-    });
+      dispatch({ type: GET_STATUS, payload: status });
+      if (err.response) {
+        dispatch(
+          returnErrors(
+            err.response.data.message,
+            err.response.status,
+            "LOGIN_FAIL",
+          ),
+        );
+      }
+    }
+  };
+
+// ======================
+// LOGOUT (native)
+// ======================
+export const logout = () => (dispatch) => {
+  // Bei native-Login: nur lokal ausloggen
+  dispatch({ type: LOGOUT_SUCCESS });
+  let status = [];
+  try {
+    status = JSON.parse(localStorage.getItem("status")) || [];
+  } catch (e) {
+    /* ignore */
+  }
+  dispatch({ type: GET_STATUS, payload: status });
+
+  const locale =
+    localStorage.getItem("locale") ||
+    (navigator.language === "de-DE" ? "de_DE" : "en_US");
+  dispatch(setLanguage(locale));
+
+  dispatch(returnSuccess("Successfully logged out.", 200, "LOGOUT_SUCCESS"));
 };
 
-export const authInterceptor = () => (dispatch, getState) => {
-  // Add a request interceptor
-  axios.interceptors.request.use(
-    (config) => {
-      config.headers["Content-Type"] = "application/json";
-      const token = getState().auth.token;
-      if (token) {
-        config.headers["Authorization"] = `Bearer ${token}`;
-      }
-      return config;
-    },
-    (error) => {
-      Promise.reject(error);
-    },
-  );
-
-  // Add a response interceptor
-  axios.interceptors.response.use(
-    (response) => {
-      // request was successfull
-      return response;
-    },
-    (error) => {
-      const originalRequest = error.config;
-      const refreshToken = getState().auth.refreshToken;
-      if (refreshToken) {
-        // try to refresh the token failed
-        if (error.response.status === 401 && originalRequest._retry) {
-          // router.push('/login');
-          return Promise.reject(error);
-        }
-        // token was not valid and 1st try to refresh the token
-        if (error.response.status === 401 && !originalRequest._retry) {
-          originalRequest._retry = true;
-          const refreshToken = getState().auth.refreshToken;
-          // request to refresh the token, in request-body is the refreshToken
-          axios
-            .post("https://api.opensensemap.org/users/refresh-auth", {
-              token: refreshToken,
-            })
-            .then((res) => {
-              if (res.status === 200) {
-                dispatch({
-                  type: REFRESH_TOKEN_SUCCESS,
-                  payload: res.data,
-                });
-                axios.defaults.headers.common["Authorization"] =
-                  "Bearer " + getState().auth.token;
-                // request was successfull, new request with the old parameters and the refreshed token
-                return axios(originalRequest)
-                  .then((res) => {
-                    originalRequest.success(res);
-                  })
-                  .catch((err) => {
-                    originalRequest.error(err);
-                  });
-              }
-              return Promise.reject(error);
-            })
-            .catch((err) => {
-              // request failed, token could not be refreshed
-              if (err.response) {
-                dispatch(
-                  returnErrors(err.response.data.message, err.response.status),
-                );
-              }
-              dispatch({
-                type: AUTH_ERROR,
-              });
-              return Promise.reject(error);
-            });
-        }
-      }
-      // request status was unequal to 401, no possibility to refresh the token
-      return Promise.reject(error);
-    },
-  );
+export const authHeader = () => {
+  try {
+    const token = localStorage.getItem("token");
+    if (token && typeof token === "string" && token.trim() !== "") {
+      return { Authorization: `Bearer ${token}` };
+    }
+  } catch (e) {
+    console.warn("Failed to read token from localStorage", e);
+  }
+  return {};
+};
+
+// ======================
+// Auth Interceptor (optional – für Token-basierte API-Aufrufe)
+// ======================
+export const setupInterceptors = (store) => {
+  axios.interceptors.request.use((config) => {
+    const token = store.getState().auth.token;
+    if (token) {
+      config.headers.Authorization = `Bearer ${token}`;
+    }
+    config.headers["Content-Type"] = "application/json";
+    return config;
+  });
 };
+
+// 🔥 Neue Action für Passwort-Reset-Anfrage
+export const requestPasswordReset =
+  ({ email }) =>
+  (dispatch) => {
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    };
+
+    return new Promise((resolve, reject) => {
+      axios
+        .post(
+          `${API_BASE}/user/reset-password/request`,
+          JSON.stringify({ email }),
+          config,
+        )
+        .then((res) => {
+          dispatch({
+            type: "REQUEST_PASSWORD_RESET_SUCCESS",
+            payload: res.data,
+          });
+          dispatch(
+            returnSuccess(
+              res.data.message,
+              res.status,
+              "REQUEST_PASSWORD_RESET_SUCCESS",
+            ),
+          );
+          resolve(res);
+        })
+        .catch((err) => {
+          dispatch({
+            type: "REQUEST_PASSWORD_RESET_FAIL",
+            payload: err.response?.data || { msg: "Netzwerkfehler" },
+          });
+          dispatch(
+            returnErrors(
+              err.response?.data?.message || "Netzwerkfehler",
+              err.response?.status || 500,
+              "REQUEST_PASSWORD_RESET_FAIL",
+            ),
+          );
+          reject(err);
+        });
+    });
+  };
+
+export const resetPassword =
+  ({ token, newPassword }) =>
+  (dispatch) => {
+    const config = {
+      headers: {
+        "Content-Type": "application/json",
+      },
+    };
+
+    return new Promise((resolve, reject) => {
+      axios
+        .post(
+          `${API_BASE}/user/reset-password/reset`,
+          JSON.stringify({ token, newPassword }),
+          config,
+        )
+        .then((res) => {
+          dispatch({
+            type: "RESET_PASSWORD_SUCCESS",
+            payload: res.data,
+          });
+          dispatch(
+            returnSuccess(
+              res.data.message,
+              res.status,
+              "RESET_PASSWORD_SUCCESS",
+            ),
+          );
+          resolve(res);
+        })
+        .catch((err) => {
+          dispatch({
+            type: "RESET_PASSWORD_FAIL",
+            payload: err.response?.data || { msg: "Netzwerkfehler" },
+          });
+          dispatch(
+            returnErrors(
+              err.response?.data?.message || "Netzwerkfehler",
+              err.response?.status || 500,
+              "RESET_PASSWORD_FAIL",
+            ),
+          );
+          reject(err);
+        });
+    });
+  };
diff --git a/src/actions/boardAction.js b/src/actions/boardAction.js
index 36c8b40a..5c071b4d 100644
--- a/src/actions/boardAction.js
+++ b/src/actions/boardAction.js
@@ -8,6 +8,9 @@ export const setBoard = (board) => (dispatch) => {
   window.sessionStorage.setItem("board", board);
   setBoardHelper(board);
   const root = document.querySelector(":root");
+  if (window.location.pathname === "/basic") {
+    return;
+  }
   switch (board) {
     case "MCU":
       root.style.setProperty("--url", `url(${mcu_opacity})`);
diff --git a/src/actions/tutorialActions.js b/src/actions/tutorialActions.js
index 041af8f6..58cface1 100644
--- a/src/actions/tutorialActions.js
+++ b/src/actions/tutorialActions.js
@@ -174,23 +174,43 @@ export const updateStatus = (status) => (dispatch, getState) => {
   }
 };
 
-export const deleteTutorial = (id) => (dispatch, getState) => {
-  var tutorial = getState().tutorial;
-  var id = getState().builder.id;
+export const deleteTutorial = (id) => async (dispatch, getState) => {
+  const token = getState().auth.token; // 🔥 Dein JWT aus Redux holen
+  const tutorialState = getState().tutorial;
+
+  if (!token) {
+    dispatch(returnErrors("Not authenticated", 401, "NO_TOKEN"));
+    return;
+  }
+
   const config = {
-    success: (res) => {
-      var tutorials = tutorial.tutorials;
-      var index = tutorials.findIndex((res) => res._id === id);
-      tutorials.splice(index, 1);
-      dispatch({
-        type: GET_TUTORIALS,
-        payload: tutorials,
-      });
-      dispatch(
-        returnSuccess(res.data.message, res.status, "TUTORIAL_DELETE_SUCCESS"),
-      );
+    headers: {
+      "Content-Type": "application/json",
+      Authorization: `Bearer ${token}`, // ✅ WICHTIG
     },
-    error: (err) => {
+  };
+
+  try {
+    const res = await axios.delete(
+      `${import.meta.env.VITE_BLOCKLY_API}/tutorial/${id}`,
+      config,
+    );
+
+    // Erfolgreich gelöscht
+    const updatedTutorials = tutorialState.tutorials.filter(
+      (t) => t._id !== id,
+    );
+
+    dispatch({
+      type: GET_TUTORIALS,
+      payload: updatedTutorials,
+    });
+
+    dispatch(
+      returnSuccess(res.data.message, res.status, "TUTORIAL_DELETE_SUCCESS"),
+    );
+  } catch (err) {
+    if (err.response) {
       dispatch(
         returnErrors(
           err.response.data.message,
@@ -198,18 +218,10 @@ export const deleteTutorial = (id) => (dispatch, getState) => {
           "TUTORIAL_DELETE_FAIL",
         ),
       );
-    },
-  };
-  axios
-    .delete(`${import.meta.env.VITE_BLOCKLY_API}/tutorial/${id}`, config)
-    .then((res) => {
-      res.config.success(res);
-    })
-    .catch((err) => {
-      if (err.response && err.response.status !== 401) {
-        err.config.error(err);
-      }
-    });
+    } else {
+      dispatch(returnErrors("Server error", 500, "TUTORIAL_DELETE_FAIL"));
+    }
+  }
 };
 
 export const resetTutorial = () => (dispatch) => {
diff --git a/src/actions/tutorialBuilderActions.js b/src/actions/tutorialBuilderActions.js
index dffb037c..9d1770c3 100644
--- a/src/actions/tutorialBuilderActions.js
+++ b/src/actions/tutorialBuilderActions.js
@@ -79,11 +79,11 @@ export const tutorialId = (id) => (dispatch) => {
 };
 
 export const addStep = (index) => (dispatch, getState) => {
-  var steps = getState().builder.steps;
+  var steps = getState().tutorialBuilder.steps;
   var step = {
     id: index + 1,
     type: "instruction",
-    headline: "",
+    title: "",
     text: "",
   };
   steps.splice(index, 0, step);
@@ -96,7 +96,7 @@ export const addStep = (index) => (dispatch, getState) => {
 };
 
 export const addErrorStep = (index) => (dispatch, getState) => {
-  var error = getState().builder.error;
+  var error = getState().tutorialBuilder.error;
   error.steps.splice(index, 0, {});
   dispatch({
     type: BUILDER_ERROR,
@@ -105,7 +105,7 @@ export const addErrorStep = (index) => (dispatch, getState) => {
 };
 
 export const removeStep = (index) => (dispatch, getState) => {
-  var steps = getState().builder.steps;
+  var steps = getState().tutorialBuilder.steps;
   steps.splice(index, 1);
   dispatch({
     type: BUILDER_DELETE_STEP,
@@ -116,7 +116,7 @@ export const removeStep = (index) => (dispatch, getState) => {
 };
 
 export const removeErrorStep = (index) => (dispatch, getState) => {
-  var error = getState().builder.error;
+  var error = getState().tutorialBuilder.error;
   error.steps.splice(index, 1);
   dispatch({
     type: BUILDER_ERROR,
@@ -126,8 +126,16 @@ export const removeErrorStep = (index) => (dispatch, getState) => {
 
 export const changeContent =
   (content, index, property1, property2) => (dispatch, getState) => {
-    var steps = getState().builder.steps;
-    var step = steps[index];
+    const state = getState();
+    let steps = state.tutorialBuilder?.steps || [];
+
+    // Stelle sicher, dass steps[index] existiert
+    if (!steps[index]) {
+      steps[index] = {};
+    }
+
+    const step = steps[index];
+
     if (property2) {
       if (step[property1] && step[property1][property2]) {
         step[property1][property2] = content;
@@ -137,6 +145,7 @@ export const changeContent =
     } else {
       step[property1] = content;
     }
+
     dispatch({
       type: BUILDER_CHANGE_STEP,
       payload: steps,
@@ -146,7 +155,7 @@ export const changeContent =
 
 export const deleteProperty =
   (index, property1, property2) => (dispatch, getState) => {
-    var steps = getState().builder.steps;
+    var steps = getState().tutorialBuilder.steps;
     var step = steps[index];
     if (property2) {
       if (step[property1] && step[property1][property2]) {
@@ -163,7 +172,7 @@ export const deleteProperty =
   };
 
 export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
-  var steps = getState().builder.steps;
+  var steps = getState().tutorialBuilder.steps;
   var step = steps[fromIndex];
   steps.splice(fromIndex, 1);
   steps.splice(toIndex, 0, step);
@@ -177,7 +186,7 @@ export const changeStepIndex = (fromIndex, toIndex) => (dispatch, getState) => {
 
 export const changeErrorStepIndex =
   (fromIndex, toIndex) => (dispatch, getState) => {
-    var error = getState().builder.error;
+    var error = getState().tutorialBuilder.error;
     var errorStep = error.steps[fromIndex];
     error.steps.splice(fromIndex, 1);
     error.steps.splice(toIndex, 0, errorStep);
@@ -187,36 +196,41 @@ export const changeErrorStepIndex =
     });
   };
 
-export const setError = (index, property) => (dispatch, getState) => {
-  var error = getState().builder.error;
-  if (index !== undefined) {
-    error.steps[index][property] = true;
-  } else {
-    error[property] = true;
-  }
+export const setError = (index, field) => (dispatch, getState) => {
+  const state = getState();
+  const error = { ...(state.tutorialBuilder.error || {}) };
+
+  // Stelle sicher, dass steps existiert
+  if (!Array.isArray(error.steps)) error.steps = [];
+
+  // Stelle sicher, dass der Eintrag für den Step existiert
+  if (!error.steps[index]) error.steps[index] = {};
+
+  // Fehler markieren
+  error.steps[index][field] = true;
+
   dispatch({
-    type: BUILDER_ERROR,
+    type: "SET_ERROR",
     payload: error,
   });
-  dispatch(changeTutorialBuilder());
 };
 
-export const deleteError = (index, property) => (dispatch, getState) => {
-  var error = getState().builder.error;
-  if (index !== undefined) {
-    delete error.steps[index][property];
-  } else {
-    delete error[property];
+export const deleteError = (index, field) => (dispatch, getState) => {
+  const state = getState();
+  const error = { ...(state.tutorialBuilder.error || {}) };
+
+  if (error.steps && error.steps[index]) {
+    delete error.steps[index][field];
   }
+
   dispatch({
-    type: BUILDER_ERROR,
+    type: "DELETE_ERROR",
     payload: error,
   });
-  dispatch(changeTutorialBuilder());
 };
 
 export const setSubmitError = () => (dispatch, getState) => {
-  var builder = getState().builder;
+  var builder = getState().tutorialBuilder;
   // if(builder.id === undefined || builder.id === ''){
   //   dispatch(setError(undefined, 'id'));
   // }
@@ -271,7 +285,7 @@ export const setSubmitError = () => (dispatch, getState) => {
 
 export const checkError = () => (dispatch, getState) => {
   dispatch(setSubmitError());
-  var error = getState().builder.error;
+  var error = getState().tutorialBuilder.error;
   if (error.id || error.title || error.type) {
     return true;
   }
diff --git a/src/actions/types.js b/src/actions/types.js
index 6689db02..f02873bc 100644
--- a/src/actions/types.js
+++ b/src/actions/types.js
@@ -8,6 +8,12 @@ export const LOGOUT_SUCCESS = "LOGOUT_SUCCESS";
 export const LOGOUT_FAIL = "LOGOUT_FAIL";
 export const REFRESH_TOKEN_FAIL = "REFRESH_TOKEN_FAIL";
 export const REFRESH_TOKEN_SUCCESS = "REFRESH_TOKEN_SUCCESS";
+export const REGISTER_SUCCESS = "REGISTER_SUCCESS";
+export const REGISTER_FAIL = "REGISTER_FAIL";
+export const REQUEST_PASSWORD_RESET_SUCCESS = "REQUEST_PASSWORD_RESET_SUCCESS";
+export const REQUEST_PASSWORD_RESET_FAIL = "REQUEST_PASSWORD_RESET_FAIL";
+export const RESET_PASSWORD_SUCCESS = "RESET_PASSWORD_SUCCESS";
+export const RESET_PASSWORD_FAIL = "RESET_PASSWORD_FAIL";
 
 export const NEW_CODE = "NEW_CODE";
 export const CHANGE_WORKSPACE = "CHANGE_WORKSPACE";
diff --git a/src/actions/workspaceActions.js b/src/actions/workspaceActions.js
index fdd27589..3aa14f7b 100644
--- a/src/actions/workspaceActions.js
+++ b/src/actions/workspaceActions.js
@@ -23,6 +23,7 @@ export const onChangeCode = () => (dispatch, getState) => {
   const workspace = Blockly.getMainWorkspace();
   var code = getState().workspace.code;
   code.arduino = Blockly.Generator.Arduino.workspaceToCode(workspace);
+  code.basic = Blockly.Generator.Basic.workspaceToCode(workspace);
   var xmlDom = Blockly.Xml.workspaceToDom(workspace);
   var board = getState().board.board;
   xmlDom.setAttribute("board", board);
@@ -36,10 +37,6 @@ export const onChangeCode = () => (dispatch, getState) => {
     } else {
       code.data = null;
     }
-  } else if (selectedBlock === null) {
-    code.tooltip = Blockly.Msg.tooltip_hint;
-    code.helpurl = "";
-    code.data = null;
   }
 
   dispatch({
diff --git a/src/components/Blockly/BlocklyComponent.jsx b/src/components/Blockly/BlocklyComponent.jsx
index 30cb1db6..ce08cce5 100644
--- a/src/components/Blockly/BlocklyComponent.jsx
+++ b/src/components/Blockly/BlocklyComponent.jsx
@@ -3,7 +3,10 @@ import PropTypes from "prop-types";
 
 import * as Blockly from "blockly/core";
 import "./blocks/index";
-import "@/components/Blockly/generator/index";
+
+import "@/components/Blockly/generator/basic/index";
+import "@/components/Blockly/generator/arduino/index";
+import "@/components/Blockly/generator/basic/index";
 
 import Toolbox from "./toolbox/Toolbox";
 import { reservedWords } from "./helpers/reservedWords";
@@ -80,10 +83,13 @@ export function BlocklyComponent({ initialXml, style, ...rest }) {
     // ScrollOptions plugin
     const scrollPlugin = new ScrollOptions(ws);
     scrollPlugin.init({ enableWheelScroll: true, enableEdgeScroll: false });
-
-    // Load initial XML
     if (initialXml) {
-      Blockly.Xml.domToWorkspace(Blockly.utils.xml.textToDom(initialXml), ws);
+      Promise.resolve().then(() => {
+        try {
+          const xmlDom = Blockly.utils.xml.textToDom(initialXml);
+          Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, ws);
+        } catch (e) {}
+      });
     }
 
     // Cleanup on unmount
diff --git a/src/components/Blockly/BlocklyWindow.jsx b/src/components/Blockly/BlocklyWindow.jsx
index 2cf86de7..f5c37b23 100644
--- a/src/components/Blockly/BlocklyWindow.jsx
+++ b/src/components/Blockly/BlocklyWindow.jsx
@@ -4,7 +4,10 @@ import PropTypes from "prop-types";
 
 import * as Blockly from "blockly/core";
 import "./blocks/index";
-import "@/components/Blockly/generator/index";
+import "@/components/Blockly/generator/basic/index";
+import "@/components/Blockly/generator/arduino/index";
+
+import "@/components/Blockly/generator/basic/index";
 
 import { onChangeWorkspace, clearStats } from "../../actions/workspaceActions";
 import { ZoomToFitControl } from "@blockly/zoom-to-fit";
@@ -12,6 +15,9 @@ import { Backpack } from "@blockly/workspace-backpack";
 import { initialXml } from "./initialXml.js";
 import { getMaxInstances } from "./helpers/maxInstances";
 
+import { BlocklyComponent } from "./BlocklyComponent";
+
+import Toolbox from "./toolbox/Toolbox";
 import BlocklySvg from "./BlocklySvg";
 
 import "blockly/blocks";
@@ -34,6 +40,8 @@ export default function BlocklyWindow(props) {
     grid,
     move,
     readOnly,
+    tutorial,
+    onWorkspaceChanged,
   } = props;
 
   // One-time workspace setup
@@ -55,6 +63,25 @@ export default function BlocklyWindow(props) {
     };
     ws.addChangeListener(onAnyChange);
 
+    // 🔥 NEU: Listener für Workspace-Änderungen, die ein Speichern auslösen
+    const onWorkspaceChangedListener = (event) => {
+      // 🔥 Reagiere nur auf Events, die eine *beendete* Änderung anzeigen
+      if (
+        // Ziehen beendet
+        // Block erstellt/gelöscht
+        event.type === Blockly.Events.BLOCK_CREATE ||
+        event.type === Blockly.Events.BLOCK_DELETE
+      ) {
+        // 🔥 Rufe das Callback auf
+        if (onWorkspaceChanged) {
+          // Kein setTimeout 0 nötig, da END_DRAG nur einmal am Ende kommt
+          onWorkspaceChanged();
+        }
+      }
+      // Alles andere (z.B. BLOCK_MOVE, SELECT, UI) wird ignoriert
+    };
+    ws.addChangeListener(onWorkspaceChangedListener);
+
     // UI helpers
     Blockly.svgResize(ws);
     const zoomToFit = new ZoomToFitControl(ws);
@@ -167,7 +194,19 @@ export default function BlocklyWindow(props) {
   );
 
   return (
-    <div>
+    <div
+      style={
+        tutorial
+          ? {
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              width: "100%",
+              height: "100%",
+            }
+          : {}
+      }
+    >
       <BlocklyComponent
         style={svg ? { height: 0 } : blocklyCSS}
         readOnly={readOnly !== undefined ? readOnly : false}
diff --git a/src/components/Blockly/blocks/basic/index.js b/src/components/Blockly/blocks/basic/index.js
new file mode 100644
index 00000000..efa5c754
--- /dev/null
+++ b/src/components/Blockly/blocks/basic/index.js
@@ -0,0 +1,169 @@
+import * as Blockly from "blockly/core";
+import { getColour } from "../../helpers/colour";
+
+Blockly.defineBlocksWithJsonArray([
+  {
+    type: "basic_display",
+    message0: "Zeige auf dem Display %1",
+    args0: [{ type: "field_input", name: "value", text: "Text" }],
+    previousStatement: true,
+    nextStatement: null,
+    colour: 230,
+  },
+]);
+
+Blockly.defineBlocksWithJsonArray([
+  {
+    type: "basic_red",
+    message0: "%1",
+    args0: [
+      {
+        type: "field_image",
+        src: "./media/blockly/led_red.png",
+        width: 50,
+        height: 50,
+        alt: "*",
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().sensebox,
+  },
+  {
+    type: "basic_yellow",
+    message0: "%1",
+    args0: [
+      {
+        type: "field_image",
+        src: "./media/blockly/led_yellow.png",
+        width: 50,
+        height: 50,
+        alt: "*",
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().sensebox,
+  },
+  {
+    type: "basic_blue",
+    message0: "%1",
+    args0: [
+      {
+        type: "field_image",
+        src: "./media/blockly/led_blue.png",
+        width: 50,
+        height: 50,
+        alt: "*",
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().sensebox,
+  },
+  {
+    type: "basic_off",
+    message0: "%1",
+    args0: [
+      {
+        type: "field_image",
+        src: "./media/blockly/led_off.png",
+        width: 50,
+        height: 50,
+        alt: "*",
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().sensebox,
+  },
+]);
+
+Blockly.defineBlocksWithJsonArray([
+  {
+    type: "time_delay_1s",
+    message0: "%1 %2",
+    args0: [
+      {
+        type: "field_image",
+        src: "https://cdn-icons-png.flaticon.com/512/31/31048.png",
+        width: 30,
+        height: 30,
+      },
+      {
+        type: "field_label",
+        name: "DELAY_TIME_1S",
+        text: "1",
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().time,
+    helpUrl: "http://arduino.cc/en/Reference/Delay",
+  },
+  {
+    type: "time_delay_2s",
+    message0: "%1 %2",
+    args0: [
+      {
+        type: "field_image",
+        src: "https://cdn-icons-png.flaticon.com/512/31/31048.png",
+        width: 30,
+        height: 30,
+      },
+      {
+        type: "field_label",
+        name: "DELAY_TIME_2S",
+        text: "2",
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().time,
+    helpUrl: "http://arduino.cc/en/Reference/Delay",
+  },
+  {
+    type: "time_delay_5s",
+    message0: "%1 %2",
+    args0: [
+      {
+        type: "field_image",
+        src: "https://cdn-icons-png.flaticon.com/512/31/31048.png",
+        width: 30,
+        height: 30,
+      },
+      {
+        type: "field_label",
+        name: "DELAY_TIME_5S",
+        text: "5",
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().time,
+    helpUrl: "http://arduino.cc/en/Reference/Delay",
+  },
+]);
+
+Blockly.defineBlocksWithJsonArray([
+  {
+    type: "display_print_basic",
+    message0: "%1 %2",
+    args0: [
+      {
+        type: "field_image",
+        src: "https://cdn-icons-png.flaticon.com/512/833/833313.png",
+        width: 30,
+        height: 30,
+      },
+      {
+        type: "input_value",
+        name: "inside",
+        check: null,
+      },
+    ],
+    previousStatement: null,
+    nextStatement: null,
+    colour: getColour().sensebox,
+  },
+]);
diff --git a/src/components/Blockly/blocks/sensebox-sd.js b/src/components/Blockly/blocks/sensebox-sd.js
index 1f5193c0..0f61cde4 100644
--- a/src/components/Blockly/blocks/sensebox-sd.js
+++ b/src/components/Blockly/blocks/sensebox-sd.js
@@ -69,6 +69,7 @@ Blockly.Blocks["sensebox_sd_create_file"] = {
       .appendField(Blockly.Msg.senseBox_output_filename);
 
     // Dropdown für die Endung
+
     this.appendDummyInput()
       .appendField(".")
       .appendField(
diff --git a/src/components/Blockly/blocks/text.js b/src/components/Blockly/blocks/text.js
index 53a2d14b..b667d34f 100644
--- a/src/components/Blockly/blocks/text.js
+++ b/src/components/Blockly/blocks/text.js
@@ -192,4 +192,25 @@ Blockly.defineBlocksWithJsonArray([
     inputsInline: true,
     mutator: "text_charAt_mutator",
   },
+  {
+    type: "text8",
+    message0: "%1",
+    args0: [
+      {
+        type: "field_input",
+        name: "TEXT",
+        text: "Data",
+        spellcheck: false,
+        // Validator sorgt für max. 8 Zeichen
+        validator: function (newValue) {
+          return newValue.substring(0, 8);
+        },
+      },
+    ],
+    output: Types.TEXT.typeName,
+    style: "text_blocks",
+    tooltip: "Text mit maximal 8 Zeichen",
+    helpUrl: "",
+    extensions: ["text_quotes", "parent_tooltip_when_inline"],
+  },
 ]); // END JSON EXTRACT (Do not delete this comment.)
diff --git a/src/components/Blockly/generator/audio.js b/src/components/Blockly/generator/arduino/audio.js
similarity index 100%
rename from src/components/Blockly/generator/audio.js
rename to src/components/Blockly/generator/arduino/audio.js
diff --git a/src/components/Blockly/generator/arduino/basic_dummies.js b/src/components/Blockly/generator/arduino/basic_dummies.js
new file mode 100644
index 00000000..c3c49da5
--- /dev/null
+++ b/src/components/Blockly/generator/arduino/basic_dummies.js
@@ -0,0 +1,64 @@
+import * as Blockly from "blockly/core";
+
+Blockly.Generator.Arduino.forBlock["basic_display"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["basic_red"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["basic_blue"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["basic_yellow"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["basic_off"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["time_delay_1s"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["time_delay_2s"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["time_delay_5s"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
+
+Blockly.Generator.Arduino.forBlock["display_print_basic"] = function (
+  _block,
+  _generator,
+) {
+  return ""; // nichts generieren
+};
diff --git a/src/components/Blockly/generator/fluoroASM.js b/src/components/Blockly/generator/arduino/fluoroASM.js
similarity index 100%
rename from src/components/Blockly/generator/fluoroASM.js
rename to src/components/Blockly/generator/arduino/fluoroASM.js
diff --git a/src/components/Blockly/generator/generator.js b/src/components/Blockly/generator/arduino/generator.js
similarity index 98%
rename from src/components/Blockly/generator/generator.js
rename to src/components/Blockly/generator/arduino/generator.js
index 55cf7e7b..7963d35e 100644
--- a/src/components/Blockly/generator/generator.js
+++ b/src/components/Blockly/generator/arduino/generator.js
@@ -25,9 +25,9 @@
 // https://developers.google.com/blockly/guides/create-custom-blocks/generating-code
 
 import * as Blockly from "blockly/core";
-import { reservedWords } from "../helpers/reservedWords";
+import { reservedWords } from "../../helpers/reservedWords";
 
-import store from "../../../store";
+import store from "@/store";
 
 var ota = store.getState().general.platform
   ? store.getState().general.platform
@@ -92,6 +92,7 @@ Blockly.Generator.Arduino.ORDER_NONE = 99; // (...)
  */
 Blockly.Generator.Arduino.init = function (workspace) {
   // Create a dictionary of definitions to be printed before the code.
+
   Blockly.Generator.Arduino.libraries_ = Object.create(null);
 
   Blockly.Generator.Arduino.definitions_ = Object.create(null);
@@ -223,7 +224,7 @@ Blockly.Generator.Arduino.finish = function (code) {
 
   let loopCode = "\nvoid loop() { \n" + loopCodeOnce + code + "\n}\n";
   // only add OTA code if tablet mode is enabled
-  if (ota === true && board !== "esp32") {
+  if (ota === true && board !== "MCU-S2") {
     code =
       commentCode +
       "\n" +
@@ -369,6 +370,7 @@ Blockly.Generator.Arduino.quote_ = function (string) {
 
 Blockly.Generator.Arduino.scrub_ = function (block, code) {
   let commentCode = "";
+
   // Only collect comments for blocks that aren't inline.
   if (!block.outputConnection || !block.outputConnection.targetConnection) {
     // Collect comment for this block.
diff --git a/src/components/Blockly/generator/index.js b/src/components/Blockly/generator/arduino/index.js
similarity index 96%
rename from src/components/Blockly/generator/index.js
rename to src/components/Blockly/generator/arduino/index.js
index 93f07098..c7fd166c 100644
--- a/src/components/Blockly/generator/index.js
+++ b/src/components/Blockly/generator/arduino/index.js
@@ -30,3 +30,4 @@ import "./lists";
 import "./watchdog";
 import "./webserver";
 import "./fluoroASM";
+import "./basic_dummies";
diff --git a/src/components/Blockly/generator/io.js b/src/components/Blockly/generator/arduino/io.js
similarity index 100%
rename from src/components/Blockly/generator/io.js
rename to src/components/Blockly/generator/arduino/io.js
diff --git a/src/components/Blockly/generator/lists.js b/src/components/Blockly/generator/arduino/lists.js
similarity index 100%
rename from src/components/Blockly/generator/lists.js
rename to src/components/Blockly/generator/arduino/lists.js
diff --git a/src/components/Blockly/generator/logic.js b/src/components/Blockly/generator/arduino/logic.js
similarity index 100%
rename from src/components/Blockly/generator/logic.js
rename to src/components/Blockly/generator/arduino/logic.js
diff --git a/src/components/Blockly/generator/loops.js b/src/components/Blockly/generator/arduino/loops.js
similarity index 100%
rename from src/components/Blockly/generator/loops.js
rename to src/components/Blockly/generator/arduino/loops.js
diff --git a/src/components/Blockly/generator/map.js b/src/components/Blockly/generator/arduino/map.js
similarity index 100%
rename from src/components/Blockly/generator/map.js
rename to src/components/Blockly/generator/arduino/map.js
diff --git a/src/components/Blockly/generator/math.js b/src/components/Blockly/generator/arduino/math.js
similarity index 100%
rename from src/components/Blockly/generator/math.js
rename to src/components/Blockly/generator/arduino/math.js
diff --git a/src/components/Blockly/generator/mqtt.js b/src/components/Blockly/generator/arduino/mqtt.js
similarity index 100%
rename from src/components/Blockly/generator/mqtt.js
rename to src/components/Blockly/generator/arduino/mqtt.js
diff --git a/src/components/Blockly/generator/procedures.js b/src/components/Blockly/generator/arduino/procedures.js
similarity index 100%
rename from src/components/Blockly/generator/procedures.js
rename to src/components/Blockly/generator/arduino/procedures.js
diff --git a/src/components/Blockly/generator/sensebox-ble.js b/src/components/Blockly/generator/arduino/sensebox-ble.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-ble.js
rename to src/components/Blockly/generator/arduino/sensebox-ble.js
diff --git a/src/components/Blockly/generator/sensebox-display.js b/src/components/Blockly/generator/arduino/sensebox-display.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-display.js
rename to src/components/Blockly/generator/arduino/sensebox-display.js
diff --git a/src/components/Blockly/generator/sensebox-esp-now.js b/src/components/Blockly/generator/arduino/sensebox-esp-now.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-esp-now.js
rename to src/components/Blockly/generator/arduino/sensebox-esp-now.js
diff --git a/src/components/Blockly/generator/sensebox-esp-wifi.js b/src/components/Blockly/generator/arduino/sensebox-esp-wifi.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-esp-wifi.js
rename to src/components/Blockly/generator/arduino/sensebox-esp-wifi.js
diff --git a/src/components/Blockly/generator/sensebox-led.js b/src/components/Blockly/generator/arduino/sensebox-led.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-led.js
rename to src/components/Blockly/generator/arduino/sensebox-led.js
diff --git a/src/components/Blockly/generator/sensebox-lora.js b/src/components/Blockly/generator/arduino/sensebox-lora.js
similarity index 98%
rename from src/components/Blockly/generator/sensebox-lora.js
rename to src/components/Blockly/generator/arduino/sensebox-lora.js
index c8f2c56f..714e6ec1 100644
--- a/src/components/Blockly/generator/sensebox-lora.js
+++ b/src/components/Blockly/generator/arduino/sensebox-lora.js
@@ -601,16 +601,15 @@ Blockly.Generator.Arduino.forBlock["sensebox_lora_cayenne_gps"] = function (
   return code;
 };
 
-Blockly.Generator.Arduino.sensebox_lora_cayenne_concentration = function (
-  block,
-) {
-  var value =
-    Blockly.Generator.Arduino.valueToCode(
-      this,
-      "Value",
-      Blockly.Generator.Arduino.ORDER_ATOMIC,
-    ) || 0;
-  var channel = this.getFieldValue("CHANNEL");
-  var code = `lpp.addConcentration(${channel}, ${value});\n`;
-  return code;
-};
+Blockly.Generator.Arduino.forBlock["sensebox_lora_cayenne_concentration"] =
+  function (block) {
+    var value =
+      Blockly.Generator.Arduino.valueToCode(
+        this,
+        "Value",
+        Blockly.Generator.Arduino.ORDER_ATOMIC,
+      ) || 0;
+    var channel = this.getFieldValue("CHANNEL");
+    var code = `lpp.addConcentration(${channel}, ${value});\n`;
+    return code;
+  };
diff --git a/src/components/Blockly/generator/sensebox-motors.js b/src/components/Blockly/generator/arduino/sensebox-motors.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-motors.js
rename to src/components/Blockly/generator/arduino/sensebox-motors.js
diff --git a/src/components/Blockly/generator/sensebox-ntp.js b/src/components/Blockly/generator/arduino/sensebox-ntp.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-ntp.js
rename to src/components/Blockly/generator/arduino/sensebox-ntp.js
diff --git a/src/components/Blockly/generator/sensebox-osem.js b/src/components/Blockly/generator/arduino/sensebox-osem.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-osem.js
rename to src/components/Blockly/generator/arduino/sensebox-osem.js
diff --git a/src/components/Blockly/generator/sensebox-rtc.js b/src/components/Blockly/generator/arduino/sensebox-rtc.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-rtc.js
rename to src/components/Blockly/generator/arduino/sensebox-rtc.js
diff --git a/src/components/Blockly/generator/sensebox-sd.js b/src/components/Blockly/generator/arduino/sensebox-sd.js
similarity index 82%
rename from src/components/Blockly/generator/sensebox-sd.js
rename to src/components/Blockly/generator/arduino/sensebox-sd.js
index f506fe9c..1c2b695b 100644
--- a/src/components/Blockly/generator/sensebox-sd.js
+++ b/src/components/Blockly/generator/arduino/sensebox-sd.js
@@ -13,24 +13,21 @@ Blockly.Generator.Arduino.forBlock["sensebox_sd_create_file"] = function (
   generator,
 ) {
   var filenameCode =
-    generator.valueToCode(block, "FILENAME", generator.ORDER_ATOMIC) ||
-    '"Data"';
+    generator
+      .valueToCode(block, "FILENAME", generator.ORDER_ATOMIC)
+      .replace(/"/g, "") || '"Data"';
 
   var extension = block.getFieldValue("extension");
-
-  var newFileName = filenameCode + ' + "." + "' + extension + '"';
+  var newfilenamecode = filenameCode.replace(/"/g, "");
+  var newFileName = `"${filenameCode + "." + extension}"`;
 
   Blockly.Generator.Arduino.libraries_["library_spi"] = "#include <SPI.h>";
   Blockly.Generator.Arduino.libraries_["library_sd"] = "#include <SD.h>";
 
-  Blockly.Generator.Arduino.definitions_["define_sdFile"] = "File sdFile;";
-
   Blockly.Generator.Arduino.setupCode_["sensebox_sd"] = "SD.begin(28);\n";
-  Blockly.Generator.Arduino.setupCode_["sensebox_sd_create"] =
-    "sdFile = SD.open(" +
-    newFileName +
-    ", FILE_WRITE);\n" +
-    "sdFile.close();\n";
+
+  Blockly.Generator.Arduino.setupCode_[`sensebox_sd_create${newfilenamecode}`] =
+    `sdFile= SD.open(${newFileName}, FILE_WRITE);\n sdFile.close();\n`;
 
   return "";
 };
@@ -41,16 +38,16 @@ Blockly.Generator.Arduino.forBlock["sensebox_sd_open_file"] = function (
 ) {
   // input from block fields
   var filenameCode =
-    generator.valueToCode(block, "FILENAME", generator.ORDER_ATOMIC) ||
-    '"Data"';
+    generator
+      .valueToCode(block, "FILENAME", generator.ORDER_ATOMIC)
+      .replace(/"/g, "") || "Data";
   var extension = block.getFieldValue("extension");
 
-  var newFileName =
-    "trimFilename(" + filenameCode + ') + "." + "' + extension + '"';
+  var newFileName = `"${filenameCode + "." + extension}"`;
 
   var branch = generator.statementToCode(block, "SD");
 
-  var code = "sdFile = SD.open(" + newFileName + ", FILE_WRITE);\n";
+  var code = `sdFile = SD.open(${newFileName}, FILE_WRITE);\n`;
   code += branch;
   code += "sdFile.close();\n";
 
@@ -59,16 +56,6 @@ Blockly.Generator.Arduino.forBlock["sensebox_sd_open_file"] = function (
 
   Blockly.Generator.Arduino.definitions_["define_sdFile"] = "File sdFile;";
 
-  // helper function to always trim filenames to 8 chars max
-  Blockly.Generator.Arduino.definitions_["define_trimFilename"] = `
-    String trimFilename(String name) {
-      if (name.length() > 8) {
-        return name.substring(0, 8);
-      }
-      return name;
-    }
-    `;
-
   Blockly.Generator.Arduino.setupCode_["sensebox_sd"] = "SD.begin(28);\n";
 
   return code;
@@ -95,9 +82,9 @@ Blockly.Generator.Arduino.forBlock["sensebox_sd_write_file"] = function (
   }
   var code = "";
   if (branch === "gps.getLongitude()" || branch === "gps.getLatitude()") {
-    code = `${filename}.print${linebreak}(${branch},5);\n`;
+    code = `sdFile.print${linebreak}(${branch},5);\n`;
   } else {
-    code = `${filename}.print${linebreak}(${branch});\n`;
+    code = `sdFile.print${linebreak}(${branch});\n`;
   }
   return code;
 };
@@ -265,18 +252,6 @@ Blockly.Generator.Arduino.forBlock["sensebox_sd_save_for_osem"] = function (
 
 Blockly.Generator.Arduino.forBlock["sensebox_esp32s2_sd_create_file"] =
   function (block, generator) {
-    // Dateiname als Variable/Literal
-    var filenameCode =
-      generator.valueToCode(block, "FILENAME", generator.ORDER_ATOMIC) ||
-      '"Data"';
-
-    // Endung
-    var extension = block.getFieldValue("extension");
-
-    // Gesamter Dateiname: trimmen + Endung
-    var newFileName =
-      "trimFilename(" + filenameCode + ') + "." + "' + extension + '"';
-
     // Bibliotheken
     Blockly.Generator.Arduino.libraries_["library_sd"] = `#include <SD.h>`;
     Blockly.Generator.Arduino.libraries_["library_spi"] = `#include <SPI.h>`;
@@ -289,15 +264,12 @@ Blockly.Generator.Arduino.forBlock["sensebox_esp32s2_sd_create_file"] =
     Blockly.Generator.Arduino.definitions_["define_sdspi"] =
       `SPIClass sdspi = SPIClass();`;
 
-    // Hilfsfunktion trimFilename (nur einmal einfügen)
-    Blockly.Generator.Arduino.definitions_["define_trimFilename"] = `
-String trimFilename(String name) {
-  if (name.length() > 8) {
-    return name.substring(0, 8);
-  }
-  return name;
-}
-`;
+    // input from block fields
+    var filenameCode =
+      generator
+        .valueToCode(block, "FILENAME", generator.ORDER_ATOMIC)
+        .replace(/"/g, "") || "Data";
+    var extension = block.getFieldValue("extension");
 
     // Setup: SD initialisieren
     Blockly.Generator.Arduino.setupCode_["sensebox_esp32s2_sd"] =
@@ -308,11 +280,10 @@ String trimFilename(String name) {
       "SD.begin(VSPI_SS, sdspi);";
 
     // Setup: Datei anlegen
-    Blockly.Generator.Arduino.setupCode_["sensebox_esp32s2_sd_create"] =
-      'sdFile = SD.open("/" + ' +
-      newFileName +
-      ", FILE_WRITE);\n" +
-      "sdFile.close();\n";
+    Blockly.Generator.Arduino.setupCode_[
+      `sensebox_esp32s2_sd_create${filenameCode}`
+    ] = `sdFile = SD.open("/${filenameCode + "." + extension}" , FILE_WRITE);\n
+      sdFile.close();`;
 
     return "";
   };
@@ -323,37 +294,27 @@ Blockly.Generator.Arduino.forBlock["sensebox_esp32s2_sd_open_file"] = function (
 ) {
   // Dateiname (Variable oder String literal)
   var filenameCode =
-    generator.valueToCode(block, "FILENAME", generator.ORDER_ATOMIC) ||
-    '"Data"';
+    generator
+      .valueToCode(block, "FILENAME", generator.ORDER_ATOMIC)
+      .replace(/"/g, "") || '"Data"';
 
   // Endung aus Dropdown
   var extension = block.getFieldValue("extension");
 
   // Gesamter Dateiname
-  var newFileName =
-    "trimFilename(" + filenameCode + ') + "." + "' + extension + '"';
+  var newFileName = `${filenameCode}.${extension}`;
 
   // Statements innerhalb des Blocks
   var branch = generator.statementToCode(block, "SD");
 
   // Arduino-Code für Datei öffnen → Inhalte → schließen
-  var code = 'sdFile = SD.open("/" + ' + newFileName + ", FILE_APPEND);\n";
+  var code = `sdFile = SD.open("/${newFileName}", FILE_APPEND);\n`;
   code += branch;
   code += "sdFile.close();\n";
 
   // Globale File-Variable definieren
   Blockly.Generator.Arduino.definitions_["define_sdFile"] = "File sdFile;";
 
-  // Hilfsfunktion trimFilename nur einmal einfügen
-  Blockly.Generator.Arduino.definitions_["define_trimFilename"] = `
-String trimFilename(String name) {
-  if (name.length() > 8) {
-    return name.substring(0, 8);
-  }
-  return name;
-}
-`;
-
   // Bibliotheken für SD
   Blockly.Generator.Arduino.libraries_["library_sd"] = `#include <SD.h>`;
   Blockly.Generator.Arduino.libraries_["library_spi"] = `#include <SPI.h>`;
@@ -394,7 +355,7 @@ Blockly.Generator.Arduino.forBlock["sensebox_esp32s2_sd_write_file"] =
       linebreak = "";
     }
 
-    var code = `${filename}.print${linebreak}(${branch});\n`;
+    var code = `sdFile.print${linebreak}(${branch});\n`;
     return code;
   };
 
diff --git a/src/components/Blockly/generator/sensebox-sensors.js b/src/components/Blockly/generator/arduino/sensebox-sensors.js
similarity index 99%
rename from src/components/Blockly/generator/sensebox-sensors.js
rename to src/components/Blockly/generator/arduino/sensebox-sensors.js
index c8e323f4..44d7e34b 100644
--- a/src/components/Blockly/generator/sensebox-sensors.js
+++ b/src/components/Blockly/generator/arduino/sensebox-sensors.js
@@ -1,5 +1,5 @@
 import * as Blockly from "blockly";
-import { selectedBoard } from "../helpers/board";
+import { selectedBoard } from "../../helpers/board";
 
 /**
  * HDC1080 Temperature and Humidity Sensor
@@ -954,7 +954,7 @@ Blockly.Generator.Arduino.forBlock["sensebox_sensor_dps310"] = function () {
   dps.configurePressure(DPS310_64HZ, DPS310_64SAMPLES);
   dps.configureTemperature(DPS310_64HZ, DPS310_64SAMPLES);
   `;
-  Blockly.Generator.Arduino.loopCodeOnce_["dps_events"] =
+  Blockly.Generator.Arduino.definitions_["dps_events"] =
     "sensors_event_t temp_event, pressure_event;";
   Blockly.Generator.Arduino.loopCodeOnce_["dps_getEvents"] =
     "dps.getEvents(&temp_event, &pressure_event);";
@@ -1243,7 +1243,6 @@ Blockly.Generator.Arduino.forBlock["sensebox_sensor_icm20948"] = function () {
   Blockly.Generator.Arduino.loopCodeOnce_["icm.getEvent"] =
     "  icm.getEvent(&accel, &gyro, &temp, &mag);";
 
-  console.log("dropdwon", dropdown);
   switch (dropdown) {
     case "accelerationX":
       code = "accel.acceleration.x";
diff --git a/src/components/Blockly/generator/sensebox-solar.js b/src/components/Blockly/generator/arduino/sensebox-solar.js
similarity index 98%
rename from src/components/Blockly/generator/sensebox-solar.js
rename to src/components/Blockly/generator/arduino/sensebox-solar.js
index ba239c20..815eee8b 100644
--- a/src/components/Blockly/generator/sensebox-solar.js
+++ b/src/components/Blockly/generator/arduino/sensebox-solar.js
@@ -1,5 +1,5 @@
 import * as Blockly from "blockly";
-import { selectedBoard } from "../helpers/board";
+import { selectedBoard } from "../../helpers/board";
 
 /**
  * Solar Charger (SB-041)
diff --git a/src/components/Blockly/generator/sensebox-telegram.js b/src/components/Blockly/generator/arduino/sensebox-telegram.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-telegram.js
rename to src/components/Blockly/generator/arduino/sensebox-telegram.js
diff --git a/src/components/Blockly/generator/sensebox-web.js b/src/components/Blockly/generator/arduino/sensebox-web.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox-web.js
rename to src/components/Blockly/generator/arduino/sensebox-web.js
diff --git a/src/components/Blockly/generator/sensebox.js b/src/components/Blockly/generator/arduino/sensebox.js
similarity index 100%
rename from src/components/Blockly/generator/sensebox.js
rename to src/components/Blockly/generator/arduino/sensebox.js
diff --git a/src/components/Blockly/generator/serial.js b/src/components/Blockly/generator/arduino/serial.js
similarity index 100%
rename from src/components/Blockly/generator/serial.js
rename to src/components/Blockly/generator/arduino/serial.js
diff --git a/src/components/Blockly/generator/text.js b/src/components/Blockly/generator/arduino/text.js
similarity index 92%
rename from src/components/Blockly/generator/text.js
rename to src/components/Blockly/generator/arduino/text.js
index 6a66a935..a0f534f4 100644
--- a/src/components/Blockly/generator/text.js
+++ b/src/components/Blockly/generator/arduino/text.js
@@ -103,3 +103,10 @@ Blockly.Generator.Arduino.forBlock["text_length"] = function (
   var code = "String(" + argument0 + ").length()";
   return [code, Blockly.Generator.Arduino.ORDER_UNARY_POSTFIX];
 };
+
+Blockly.Generator.Arduino.forBlock["text8"] = function (block, generator) {
+  var code = Blockly.Generator.Arduino.quote_(block.getFieldValue("TEXT"));
+  code = code.substring(0, 8); // Sicherheit: max. 8 Zeichen
+
+  return [code, Blockly.Generator.Arduino.ORDER_ATOMIC];
+};
diff --git a/src/components/Blockly/generator/time.js b/src/components/Blockly/generator/arduino/time.js
similarity index 100%
rename from src/components/Blockly/generator/time.js
rename to src/components/Blockly/generator/arduino/time.js
diff --git a/src/components/Blockly/generator/variables.js b/src/components/Blockly/generator/arduino/variables.js
similarity index 100%
rename from src/components/Blockly/generator/variables.js
rename to src/components/Blockly/generator/arduino/variables.js
diff --git a/src/components/Blockly/generator/watchdog.js b/src/components/Blockly/generator/arduino/watchdog.js
similarity index 100%
rename from src/components/Blockly/generator/watchdog.js
rename to src/components/Blockly/generator/arduino/watchdog.js
diff --git a/src/components/Blockly/generator/webserver.js b/src/components/Blockly/generator/arduino/webserver.js
similarity index 100%
rename from src/components/Blockly/generator/webserver.js
rename to src/components/Blockly/generator/arduino/webserver.js
diff --git a/src/components/Blockly/generator/basic/generator.js b/src/components/Blockly/generator/basic/generator.js
new file mode 100644
index 00000000..aa9dc094
--- /dev/null
+++ b/src/components/Blockly/generator/basic/generator.js
@@ -0,0 +1,230 @@
+/**
+ * @license
+ *
+ * Copyright 2019 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *   http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+/**
+ * @fileoverview Define generation methods for custom blocks.
+ * @author samelh@google.com (Sam El-Husseini)
+ */
+
+// More on generating code:
+// https://developers.google.com/blockly/guides/create-custom-blocks/generating-code
+
+import * as Blockly from "blockly/core";
+import { javascriptGenerator } from "blockly/javascript";
+
+/**
+ * Arduino code generator.
+ * @type !Blockly.Generator
+ */
+Blockly.Generator.Basic = javascriptGenerator;
+
+/**
+ *
+ * @param {} workspace
+ *
+ * Blockly Types
+ */
+
+/**
+ * Initialise the database of variable names.
+ * @param {!Blockly.Workspace} workspace Workspace to generate code from.
+ */
+Blockly.Generator.Basic.init = function (workspace) {
+  // creates a dictionary of modules / components that are used in the code
+  Blockly.Generator.Basic.modules_ = Object.create(null);
+
+  // creates a list of code to be setup before the setup block
+  Blockly.Generator.Basic.setupCode_ = Object.create(null);
+
+  // creates a list of code for the loop to be runned once
+  Blockly.Generator.Basic.codeFunctions_ = Object.create(null);
+
+  // creates a list of code variables
+  Blockly.Generator.Basic.variables_ = Object.create(null);
+
+  // Create a dictionary mapping desired function names in definitions_
+  // to actual function names (to avoid collisions with user functions).
+  Blockly.Generator.Basic.functionNames_ = Object.create(null);
+
+  Blockly.Generator.Basic.variablesInitCode_ = "";
+
+  if (!Blockly.Generator.Basic.nameDB_) {
+    Blockly.Generator.Basic.nameDB_ = new Blockly.Names(
+      Blockly.Generator.Basic.RESERVED_WORDS_,
+    );
+  } else {
+    Blockly.Generator.Basic.nameDB_.reset();
+  }
+
+  Blockly.Generator.Basic.nameDB_.setVariableMap(workspace.getVariableMap());
+};
+
+/**
+ * Prepend the generated code with the variable definitions.
+ * @param {string} code Generated code.
+ * @return {string} Completed code.
+ */
+Blockly.Generator.Basic.finish = function (code) {
+  const setupCode =
+    Object.values(Blockly.Generator.Basic.setupCode_).join("\n") || "";
+
+  const modules =
+    Object.values(Blockly.Generator.Basic?.modules_).join(", ") || "";
+
+  const loopCode = `while (true) {
+${code}}`;
+
+  const simCode = `
+// modules: ${modules} #
+${setupCode}
+${loopCode}`;
+
+  console.log(Blockly.Generator.Basic.formatCode(simCode));
+  return Blockly.Generator.Basic.formatCode(simCode);
+};
+
+/**
+ * Naked values are top-level blocks with outputs that aren't plugged into
+ * anything.  A trailing semicolon is needed to make this legal.
+ * @param {string} line Line of generated code.
+ * @return {string} Legal line of code.
+ */
+Blockly.Generator.Basic.scrubNakedValue = function (line) {
+  return line + ";\n";
+};
+
+/**
+ * Format the generated Arduino code for better readability.
+ * This function adds proper indentation and removes duplicate empty lines.
+ * @param {string} code The Arduino code to format.
+ * @return {string} Formatted Arduino code.
+ */
+Blockly.Generator.Basic.formatCode = function (code) {
+  let formattedCode = "";
+  let indentLevel = 0;
+  const indentSize = 2; // Number of spaces per indentation level
+  let previousLineWasEmpty = false; // Track if the previous line was empty
+
+  const lines = code.split("\n");
+
+  lines.forEach((line) => {
+    line = line.trim();
+
+    // Skip duplicate empty lines
+    if (line === "" && previousLineWasEmpty) {
+      return; // Skip this line if it's an empty line after another empty line
+    }
+
+    // Mark if the current line is empty
+    previousLineWasEmpty = line === "";
+
+    // Adjust indentation for closing braces
+    if (line.startsWith("}")) {
+      indentLevel = Math.max(0, indentLevel - 1);
+    }
+
+    // Special case for 'else if' and 'else' to ensure they align with 'if'
+    if (line.startsWith("else if") || line.startsWith("else")) {
+      formattedCode += " ".repeat(indentLevel * indentSize) + line + "\n";
+    } else {
+      // Add the appropriate indentation for normal lines
+      formattedCode += " ".repeat(indentLevel * indentSize) + line + "\n";
+    }
+
+    // Increase indentation after opening braces
+    if (line.endsWith("{")) {
+      indentLevel++;
+    }
+  });
+
+  // Remove any trailing empty lines
+  return formattedCode.replace(/\n\s*\n\s*\n/g, "\n\n").trim();
+};
+
+/**
+ * Encode a string as a properly escaped Arduino string, complete with
+ * quotes.
+ * @param {string} string Text to encode.
+ * @return {string} Arduino string.
+ * @private
+ */
+Blockly.Generator.Basic.quote_ = function (string) {
+  // Can't use goog.string.quote since Google's style guide recommends
+  // JS string literals use single quotes.
+  string = string
+    .replace(/\\/g, "\\\\")
+    .replace(/\n/g, "\\\n")
+    .replace(/'/g, "\\'");
+  return '"' + string + '"';
+};
+
+/**
+ * Common tasks for generating Arduino from blocks.
+ * Handles comments for the specified block and any connected value blocks.
+ * Calls any statements following this block.
+ * @param {!Blockly.Block} block The current block.
+ * @param {string} code The Arduino code created for this block.
+ * @param {boolean=} opt_thisOnly True to generate code for only this statement.
+ * @return {string} Arduino code with comments and subsequent blocks added.
+ * @private
+ */
+Blockly.Generator.Basic.scrub_ = function (block, code) {
+  let commentCode = "";
+  // Only collect comments for blocks that aren't inline.
+  if (!block.outputConnection || !block.outputConnection.targetConnection) {
+    // Collect comment for this block.
+    let comment = block.getCommentText();
+    //@ts-ignore
+    comment = comment
+      ? Blockly.utils.string.wrap(
+          comment,
+          Blockly.Generator.Basic.COMMENT_WRAP - 3,
+        )
+      : null;
+    if (comment) {
+      if (block.getProcedureDef) {
+        // Use a comment block for function comments.
+        commentCode +=
+          "/**\n" +
+          Blockly.Generator.Basic.prefixLines(comment + "\n", " * ") +
+          " */\n";
+      } else {
+        commentCode += Blockly.Generator.Basic.prefixLines(
+          comment + "\n",
+          "// ",
+        );
+      }
+    }
+    // Collect comments for all value arguments.
+    // Don't collect comments for nested statements.
+    for (let i = 0; i < block.inputList.length; i++) {
+      if (block.inputList[i].type === Blockly.INPUT_VALUE) {
+        const childBlock = block.inputList[i].connection.targetBlock();
+        if (childBlock) {
+          const comment = Blockly.Generator.Basic.allNestedComments(childBlock);
+          if (comment) {
+            commentCode += Blockly.Generator.Basic.prefixLines(comment, "// ");
+          }
+        }
+      }
+    }
+  }
+  const nextBlock = block.nextConnection && block.nextConnection.targetBlock();
+  const nextCode = Blockly.Generator.Basic.blockToCode(nextBlock);
+  return commentCode + code + nextCode;
+};
diff --git a/src/components/Blockly/generator/basic/index.js b/src/components/Blockly/generator/basic/index.js
new file mode 100644
index 00000000..c4353c5e
--- /dev/null
+++ b/src/components/Blockly/generator/basic/index.js
@@ -0,0 +1,206 @@
+// src/components/Blockly/generators/basic/index.js
+import "./generator";
+import * as Blockly from "blockly/core";
+
+// ------- Expressions (return [code, order]) -------
+
+// Zahl
+Blockly.Generator.Basic.forBlock["math_number"] = function (block, generator) {
+  const n = String(block.getFieldValue("NUM") ?? "0");
+  return [n, generator.ORDER_ATOMIC];
+};
+
+// Textliteral
+Blockly.Generator.Basic.forBlock["text"] = function (block, generator) {
+  const t = block.getFieldValue("TEXT") ?? "";
+  // Doppelte Quotes escapen
+  const quoted = `"${t.replace(/"/g, '""')}"`;
+  return [quoted, generator.ORDER_ATOMIC];
+};
+
+// Vergleich
+Blockly.Generator.Basic.forBlock["logic_compare"] = function (
+  block,
+  generator,
+) {
+  const ops = { EQ: "=", NEQ: "<>", LT: "<", LTE: "<=", GT: ">", GTE: ">=" };
+  const op = ops[block.getFieldValue("OP")] || "=";
+  const A =
+    generator.valueToCode(block, "A", generator.ORDER_RELATIONAL) || "0";
+  const B =
+    generator.valueToCode(block, "B", generator.ORDER_RELATIONAL) || "0";
+  return [`${A} ${op} ${B}`, generator.ORDER_RELATIONAL];
+};
+
+// Boolean
+Blockly.Generator.Basic.forBlock["logic_boolean"] = function (
+  block,
+  generator,
+) {
+  const val = block.getFieldValue("BOOL") === "TRUE" ? "TRUE" : "FALSE";
+  return [val, generator.ORDER_ATOMIC];
+};
+
+// ------- Statements (return string) -------
+
+// print
+Blockly.Generator.Basic.forBlock["text_print"] = function (block, generator) {
+  const msg =
+    generator.valueToCode(block, "TEXT", generator.ORDER_ATOMIC) || '""';
+  let code = `PRINT ${msg}\n`;
+  return generator.scrub_(block, code);
+};
+
+// if / else if / else
+Blockly.Generator.Basic.forBlock["controls_if"] = function (block, generator) {
+  let n = 0;
+  let code = "";
+  do {
+    const cond =
+      generator.valueToCode(block, "IF" + n, generator.ORDER_RELATIONAL) ||
+      "FALSE";
+    const branch = generator.statementToCode(block, "DO" + n) || "";
+    if (n === 0) {
+      code += `IF ${cond} THEN\n${branch}`;
+    } else {
+      code += `ELSEIF ${cond} THEN\n${branch}`;
+    }
+    n++;
+  } while (block.getInput("IF" + n));
+
+  if (block.getInput("ELSE")) {
+    const elseBranch = generator.statementToCode(block, "ELSE") || "";
+    code += `ELSE\n${elseBranch}`;
+  }
+  code += "END IF\n";
+  return generator.scrub_(block, code);
+};
+
+// repeat N times
+Blockly.Generator.Basic.forBlock["controls_repeat_ext"] = function (
+  block,
+  generator,
+) {
+  const times =
+    generator.valueToCode(block, "TIMES", generator.ORDER_ATOMIC) || "0";
+  const body = generator.statementToCode(block, "DO") || "";
+  const code = `REPEAT ${times} TIMES\n${body}END REPEAT\n`;
+  return generator.scrub_(block, code);
+};
+
+// while / until
+Blockly.Generator.Basic.forBlock["controls_whileUntil"] = function (
+  block,
+  generator,
+) {
+  const isUntil = block.getFieldValue("MODE") === "UNTIL";
+  const cond =
+    generator.valueToCode(block, "BOOL", generator.ORDER_RELATIONAL) || "FALSE";
+  const condStr = isUntil ? `NOT (${cond})` : cond;
+  const body = generator.statementToCode(block, "DO") || "";
+  const code = `WHILE ${condStr}\n${body}WEND\n`;
+  return generator.scrub_(block, code);
+};
+
+// Variablen (Standard-Var-Blöcke)
+Blockly.Generator.Basic.forBlock["variables_set"] = function (
+  block,
+  generator,
+) {
+  const varName = generator.nameDB_.getName(
+    block.getFieldValue("VAR"),
+    Blockly.Variables.NAME_TYPE,
+  );
+  const val =
+    generator.valueToCode(block, "VALUE", generator.ORDER_ATOMIC) || "0";
+  const code = `LET ${varName} = ${val}\n`;
+  return generator.scrub_(block, code);
+};
+
+Blockly.Generator.Basic.forBlock["variables_get"] = function (
+  block,
+  generator,
+) {
+  const varName = generator.nameDB_.getName(
+    block.getFieldValue("VAR"),
+    Blockly.Variables.NAME_TYPE,
+  );
+  return [varName, generator.ORDER_ATOMIC];
+};
+Blockly.Generator.Basic.forBlock["sensebox_rgb_led"] = function (
+  block,
+  generator,
+) {
+  var color = block.getFieldValue("COLOR");
+  return "led(255,0,0)";
+};
+
+Blockly.Generator.Basic.forBlock["basic_display"] = function (
+  block,
+  generator,
+) {
+  var text = block.getFieldValue("value");
+  return `display(${text})`;
+};
+
+Blockly.Generator.Basic.forBlock["time_delay"] = function (block, generator) {
+  const value = generator.valueToCode(
+    block,
+    "DELAY_TIME_MILI",
+    generator.ORDER_ATOMIC,
+  );
+  return `delay(${value})`;
+};
+
+Blockly.Generator.Basic.forBlock["basic_red"] = function (block, generator) {
+  return `led(255,0,0)`;
+};
+Blockly.Generator.Basic.forBlock["basic_yellow"] = function (block, generator) {
+  return `led(255,255,0)`;
+};
+Blockly.Generator.Basic.forBlock["basic_blue"] = function (block, generator) {
+  return `led(0,0,255)`;
+};
+Blockly.Generator.Basic.forBlock["basic_off"] = function (block, generator) {
+  return `led(0,0,0)`;
+};
+
+Blockly.Generator.Basic.forBlock["display_print_basic"] = function (
+  block,
+  generator,
+) {
+  const value =
+    generator.valueToCode(block, "inside", generator.ORDER_ATOMIC) || '""';
+  return `display(${value})`;
+};
+
+Blockly.Generator.Basic.forBlock["time_delay_1s"] = function () {
+  return "delay(1000)"; // nichts generieren
+};
+
+Blockly.Generator.Basic.forBlock["time_delay_2s"] = function () {
+  return "delay(2000)"; // nichts generieren
+};
+
+Blockly.Generator.Basic.forBlock["time_delay_5s"] = function () {
+  return "delay(5000)"; // nichts generieren
+};
+
+// Default-Fallback: Unsupported Block -> Kommentar
+Blockly.Generator.Basic.blockToCode = function (block) {
+  const fn = Blockly.Generator.Basic.forBlock?.[block.type];
+  if (!fn) {
+    return `REM Unsupported block: ${block.type}\n`;
+  }
+  return fn.call(Blockly.Generator.Basic, block, Blockly.Generator.Basic);
+};
+
+// Name-DB initialisieren, wenn ein Workspace kompiliert wird
+Blockly.Generator.Basic.init = function (workspace) {
+  Blockly.Generator.prototype.init.call(this, workspace);
+  // eigene Präfixe / Konfiguration hier ergänzen, falls nötig
+};
+
+Blockly.Generator.Basic.finish = function (code) {
+  return Array.isArray(code) ? code.join("") : code;
+};
diff --git a/src/components/Blockly/msg/de/ui.js b/src/components/Blockly/msg/de/ui.js
index 0f593845..0e602f30 100644
--- a/src/components/Blockly/msg/de/ui.js
+++ b/src/components/Blockly/msg/de/ui.js
@@ -451,4 +451,18 @@ export const UI = {
   // Hilfe-Link
   need_help: "Benötigst du Hilfe?",
   compile_overlay_help_2: "Schau in unserer Dokumentation vorbei!",
+
+  button_register: "registriere dich hier",
+  register_head: "Erstellen Sie Ihr Konto",
+  labels_confirm_password: "Passwort bestätigen",
+  messages_password_mismatch: "Die Passwörter stimmen nicht überein.",
+  messages_password_too_short:
+    "Das Passwort muss mindestens 6 Zeichen lang sein.",
+  messages_register_error: "Bitte füllen Sie alle Felder aus.",
+  already_have_account: "Haben Sie bereits ein Konto?",
+  no_account: "Wenn du keinen Account hast,",
+  register_success_head: "Konto erstellt!",
+  register_success_message: "Dein Konto wurde erfolgreich erstellt.",
+  register_success_login_prompt:
+    "Du kannst dich jetzt mit deinen Zugangsdaten anmelden.",
 };
diff --git a/src/components/Blockly/msg/en/ui.js b/src/components/Blockly/msg/en/ui.js
index d9da5fb8..87d8de6c 100644
--- a/src/components/Blockly/msg/en/ui.js
+++ b/src/components/Blockly/msg/en/ui.js
@@ -445,4 +445,16 @@ export const UI = {
   // Help link
   need_help: "Need help?",
   compile_overlay_help_2: "Check out our documentation!",
+
+  button_register: "Register now",
+  register_head: "Create your account",
+  labels_confirm_password: "Confirm password",
+  messages_password_mismatch: "Passwords do not match.",
+  messages_password_too_short: "Password must be at least 6 characters.",
+  messages_register_error: "Please fill in all fields.",
+  already_have_account: "Already have an account?",
+  no_account: "If you don't have an account ",
+  register_success_head: "Account created!",
+  register_success_message: "Your account has been successfully created.",
+  register_success_login_prompt: "You can now log in with your credentials.",
 };
diff --git a/src/components/Blockly/themes/basicTheme.ts b/src/components/Blockly/themes/basicTheme.ts
new file mode 100644
index 00000000..c5a07aee
--- /dev/null
+++ b/src/components/Blockly/themes/basicTheme.ts
@@ -0,0 +1,27 @@
+import * as Blockly from "blockly/core";
+
+export const BasicTheme = Blockly.Theme.defineTheme("basicTheme", {
+  name: "basicTheme",
+  base: Blockly.Themes.Classic,
+  componentStyles: {
+    workspaceBackgroundColour: "#ffffff",
+    toolboxBackgroundColour: "#ededed",
+    toolboxForegroundColour: "#333333",
+    flyoutBackgroundColour: "#e0e0e0",
+    flyoutOpacity: 0.6,
+    flyoutForegroundColour: "black",
+    scrollbarColour: "#4EAF47",
+    insertionMarkerColour: "#FFFA90",
+    insertionMarkerOpacity: 0.7,
+    cursorColour: "#4EAF47",
+    markerColour: "#FF70A6",
+    selectedGlowColour: "#74D964",
+  },
+  categoryStyles: {},
+  fontStyle: {
+    family: "Inter, ui-sans-serif, system-ui",
+    weight: "500",
+    size: 13,
+  },
+  startHats: true,
+});
diff --git a/src/components/Blockly/toolbox/ToolboxBasic.jsx b/src/components/Blockly/toolbox/ToolboxBasic.jsx
new file mode 100644
index 00000000..e12519bf
--- /dev/null
+++ b/src/components/Blockly/toolbox/ToolboxBasic.jsx
@@ -0,0 +1,54 @@
+// src/components/Blockly/toolbox/ToolboxBasicPseudo.jsx
+import React, { useEffect } from "react";
+import {
+  Block,
+  Value,
+  Field,
+  Statement,
+  Shadow,
+  Category,
+  Sep,
+  Label,
+} from "..";
+import * as Blockly from "blockly/core";
+import { getColour } from "../helpers/colour";
+export const ToolboxBasic = () => {
+  return (
+    <>
+      <Category
+        name={Blockly.Msg.toolbox_sensors}
+        colour={getColour().sensebox}
+        css-icon="customIcon fa fa-cloud"
+      >
+        <Block type="sensebox_sensor_temp_hum" />
+      </Category>
+      <Category
+        css-icon="customIcon fa fa-desktop"
+        name="Display"
+        colour={getColour().sensebox}
+      >
+        <Block type="display_print_basic" />
+        <Block type="text" />
+      </Category>
+      <Category
+        name="LED"
+        colour={getColour().sensebox}
+        css-icon="customIcon fa fa-lightbulb"
+      >
+        <Block type="basic_red"></Block>
+        <Block type="basic_blue"></Block>
+        <Block type="basic_yellow"></Block>
+        <Block type="basic_off"></Block>
+      </Category>
+      <Category
+        name="Zeit"
+        colour={getColour().logic}
+        css-icon="customIcon fa fa-clock"
+      >
+        <Block type="time_delay_1s" />
+        <Block type="time_delay_2s" />
+        <Block type="time_delay_5s" />
+      </Category>
+    </>
+  );
+};
diff --git a/src/components/Blockly/toolbox/ToolboxEsp.jsx b/src/components/Blockly/toolbox/ToolboxEsp.jsx
index de9c11ed..49349f4b 100644
--- a/src/components/Blockly/toolbox/ToolboxEsp.jsx
+++ b/src/components/Blockly/toolbox/ToolboxEsp.jsx
@@ -9,7 +9,6 @@ export const ToolboxEsp = () => {
   return (
     <>
       {/* ============================== SEARCH ============================== */}
-      <Category name="Search" kind="search" />
 
       {/* ============================== SENSORS ============================== */}
       <Category
@@ -433,6 +432,19 @@ export const ToolboxEsp = () => {
         </Block>
       </Category>
 
+      {/* ============================== TEXT ============================== */}
+      <Category id="text" name="Text" colour={getColour().text}>
+        <Block type="text" />
+        <Block type="text_join" />
+        <Block type="text_append">
+          <Value name="TEXT">
+            <Block type="text" />
+          </Value>
+        </Block>
+        <Block type="text_length" />
+        <Block type="text_isEmpty" />
+      </Category>
+
       {/* ============================== LOGIC ============================== */}
       <Category name={Blockly.Msg.toolbox_logic} colour={getColour().logic}>
         <Block type="controls_if" />
@@ -478,19 +490,6 @@ export const ToolboxEsp = () => {
         <Block type="controls_flow_statements" />
       </Category>
 
-      {/* ============================== TEXT ============================== */}
-      <Category id="text" name="Text" colour={getColour().text}>
-        <Block type="text" />
-        <Block type="text_join" />
-        <Block type="text_append">
-          <Value name="TEXT">
-            <Block type="text" />
-          </Value>
-        </Block>
-        <Block type="text_length" />
-        <Block type="text_isEmpty" />
-      </Category>
-
       {/* ============================== TIME ============================== */}
       <Category
         id="time"
diff --git a/src/components/Blockly/toolbox/ToolboxMcu.jsx b/src/components/Blockly/toolbox/ToolboxMcu.jsx
index e355fa13..bdd6c475 100644
--- a/src/components/Blockly/toolbox/ToolboxMcu.jsx
+++ b/src/components/Blockly/toolbox/ToolboxMcu.jsx
@@ -153,6 +153,8 @@ export const ToolboxMcu = () => {
             </Block>
           </Value>
         </Block>
+        <Block type="text" />
+
         <Block type="sensebox_display_fastPrint">
           <Value name="Title1">
             <Block type="text">
@@ -431,6 +433,19 @@ export const ToolboxMcu = () => {
         </Block>
       </Category>
 
+      {/* ============================== TEXT ============================== */}
+      <Category id="text" name="Text" colour={getColour().text}>
+        <Block type="text" />
+        <Block type="text_join" />
+        <Block type="text_append">
+          <Value name="TEXT">
+            <Block type="text" />
+          </Value>
+        </Block>
+        <Block type="text_length" />
+        <Block type="text_isEmpty" />
+      </Category>
+
       {/* ============================== LOGIC ============================== */}
       <Category name={Blockly.Msg.toolbox_logic} colour={getColour().logic}>
         <Block type="controls_if" />
@@ -476,19 +491,6 @@ export const ToolboxMcu = () => {
         <Block type="controls_flow_statements" />
       </Category>
 
-      {/* ============================== TEXT ============================== */}
-      <Category id="text" name="Text" colour={getColour().text}>
-        <Block type="text" />
-        <Block type="text_join" />
-        <Block type="text_append">
-          <Value name="TEXT">
-            <Block type="text" />
-          </Value>
-        </Block>
-        <Block type="text_length" />
-        <Block type="text_isEmpty" />
-      </Category>
-
       {/* ============================== TIME ============================== */}
       <Category
         id="time"
diff --git a/src/components/Blockly/toolbox/toolbox_styles.css b/src/components/Blockly/toolbox/toolbox_styles.css
index 36f33ef5..e63221f5 100644
--- a/src/components/Blockly/toolbox/toolbox_styles.css
+++ b/src/components/Blockly/toolbox/toolbox_styles.css
@@ -8,6 +8,8 @@
   margin: 2px;
   padding: 2px;
   align-content: center;
+  max-width: 13.5vw;
+
   outline: none; /* Fokus-Ring weg */
 }
 
@@ -33,8 +35,3 @@
 .blocklyToolboxCategoryContainer[aria-level="4"] {
   margin-left: 60px;
 }
-
-/* Toolbox Breite */
-.blocklyToolbox {
-  width: 15vw;
-}
diff --git a/src/components/Navbar.jsx b/src/components/Navbar.jsx
index 6a688c14..af68b1cc 100644
--- a/src/components/Navbar.jsx
+++ b/src/components/Navbar.jsx
@@ -48,6 +48,8 @@ import {
   faEarthEurope,
   faEarthAmericas,
   faCaretDown,
+  faBaby,
+  faBabyCarriage,
 } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 
@@ -422,6 +424,11 @@ const Navbar = () => {
               icon: faPuzzlePiece,
               link: "/",
             },
+            {
+              text: "Blockly BASIC",
+              icon: faBabyCarriage,
+              link: "/basic",
+            },
             {
               text: Blockly.Msg.navbar_tutorials,
               icon: faChalkboardTeacher,
@@ -431,8 +438,7 @@ const Navbar = () => {
               text: Blockly.Msg.navbar_tutorialbuilder,
               icon: faTools,
               link: "/tutorial/builder",
-              restriction:
-                user && user.blocklyRole !== "user" && isAuthenticated,
+              restriction: user,
             },
             {
               text: Blockly.Msg.navbar_gallery,
@@ -519,17 +525,6 @@ const Navbar = () => {
           )}
         </List>
       </Drawer>
-
-      {(tutorialIsLoading || projectIsLoading) && (
-        <LinearProgress
-          style={{
-            marginBottom: "30px",
-            boxShadow:
-              "0px 2px 4px -1px rgba(0,0,0,0.2),0px 4px 5px 0px rgba(0,0,0,0.14),0px 1px 10px 0px rgba(0,0,0,0.12)",
-          }}
-        />
-      )}
-
       <Tour
         steps={isHome ? home() : assessment()}
         isOpen={isTourOpen}
diff --git a/src/components/Pages/BasicPage/BasicPage.jsx b/src/components/Pages/BasicPage/BasicPage.jsx
new file mode 100644
index 00000000..5aa45070
--- /dev/null
+++ b/src/components/Pages/BasicPage/BasicPage.jsx
@@ -0,0 +1,251 @@
+import React, { use, useEffect, useMemo, useRef, useState } from "react";
+import {
+  Accordion,
+  accordionClasses,
+  AccordionDetails,
+  accordionDetailsClasses,
+  AccordionSummary,
+  Box,
+  Fade,
+  Typography,
+  useTheme,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+} from "@mui/material";
+import ConnectWizard from "./ConnectWizard";
+import LeftPlaceholder from "./BlocklyCard";
+import PseudocodeCard from "./PseudocodeCard";
+import DeviceLogCard from "./DeviceLogCard";
+import useWebSerial from "./WebSerialService";
+import BlocklyCard from "./BlocklyCard";
+import { ToolboxBasic } from "@/components/Blockly/toolbox/ToolboxBasic";
+import ReactDOMServer from "react-dom/server";
+import { useSelector } from "react-redux";
+import * as Blockly from "blockly";
+import { onChangeCode, onChangeWorkspace } from "@/actions/workspaceActions";
+import "@/components/Blockly/blocks/basic/index"; // registriert Block
+import { ExpandMoreRounded } from "@mui/icons-material";
+import TutorialAccordion from "./TutorialAccordion";
+
+const BasicPage = () => {
+  const [script, setScript] = useState("");
+  const [log, setLog] = useState("");
+  const [code, setCode] = useState("");
+  const [expanded, setExpanded] = React.useState("panel1");
+  const theme = useTheme();
+  const handleChange = (panel) => (event, newExpanded) => {
+    setExpanded(newExpanded ? panel : false);
+  };
+  const logBoxRef = useRef(null);
+
+  const {
+    supported,
+    connected,
+    status,
+    delay,
+    setDelay,
+    connect,
+    disconnect,
+    sendLine,
+    sendScript,
+    clearLog,
+    copyLog,
+  } = useWebSerial({ script, setLog, logBoxRef });
+
+  const arduino = useSelector((s) => s.workspace.code.arduino);
+  const [basicCode, setBasicCode] = useState("");
+  // Memoisiert, damit wir nicht bei jedem Render neu parsen
+  const toolboxDom = useMemo(() => {
+    const xmlText = ReactDOMServer.renderToStaticMarkup(
+      <xml
+        xmlns="https://developers.google.com/blockly/xml"
+        style={{ display: "none" }}
+      >
+        <ToolboxBasic />
+      </xml>,
+    );
+    const parser = new DOMParser();
+    return parser.parseFromString(xmlText, "text/xml").documentElement;
+  }, []);
+
+  useEffect(() => {
+    var head = document.head;
+    var link = document.createElement("link");
+
+    link.type = "text/css";
+    link.rel = "stylesheet";
+    link.href = new URL("./toolbox_style.css", import.meta.url).href;
+    head.appendChild(link);
+
+    return () => {
+      if (head.contains(link)) {
+        head.removeChild(link);
+      }
+    };
+  }, []);
+
+  return (
+    <Box
+      sx={{
+        p: 2,
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+        height: "80vh",
+        boxSizing: "border-box",
+      }}
+    >
+      <Box sx={{ display: "flex", gap: 2, flex: 1, minHeight: 0 }}>
+        {/* Linke Seite */}
+        <Box sx={{ flex: " 0 0 70%", minHeight: 0, display: "flex" }}>
+          <BlocklyCard generatorName="Basic" toolboxXml={toolboxDom} />
+        </Box>
+
+        {/* Rechte Seite */}
+        <Box
+          sx={{
+            flex: 1,
+            minHeight: 0,
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+          }}
+        >
+          <Box
+            sx={{
+              flex: 1,
+              minHeight: 0,
+              display: "flex",
+              flexDirection: "column",
+              gap: 2,
+            }}
+          >
+            <Accordion
+              expanded={expanded === "panel1"}
+              onChange={handleChange("panel1")}
+              sx={{
+                borderRadius: 3,
+                border: (theme) => `1px solid ${theme.palette.divider}`,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                overflow: "hidden",
+                "&:hover": {
+                  boxShadow: "0 6px 16px rgba(0,0,0,0.12)",
+                },
+              }}
+            >
+              <AccordionSummary
+                aria-controls="panel1d-content"
+                id="panel1d-header"
+                expandIcon={<ExpandMoreRounded />}
+                sx={{
+                  borderBottom: `5px ${theme.palette.primary.main} solid`,
+                  borderRadius: "5px",
+                }}
+              >
+                <Typography variant="h6" component="h2">
+                  Verbinden
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <ConnectWizard
+                  supported={supported}
+                  connected={connected}
+                  onSend={() => sendScript(delay)}
+                  status={status}
+                  delay={delay}
+                  setDelay={setDelay}
+                  onConnect={connect}
+                  onDisconnect={disconnect}
+                  onQuick={(cmd) => sendLine(cmd)}
+                />
+              </AccordionDetails>
+            </Accordion>
+            <Accordion
+              expanded={expanded === "panel2"}
+              onChange={handleChange("panel2")}
+              sx={{
+                borderRadius: 3,
+                border: `1px solid ${theme.palette.divider}`,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                overflow: "hidden",
+                "&:hover": {
+                  boxShadow: "0 6px 16px rgba(0,0,0,0.12)",
+                },
+              }}
+            >
+              <AccordionSummary
+                aria-controls="panel2d-content"
+                id="panel2d-header"
+                expandIcon={<ExpandMoreRounded />}
+                sx={{
+                  borderBottom: `5px ${theme.palette.primary.main} solid`,
+                  borderRadius: "5px",
+                }}
+              >
+                <Typography variant="h6" component="h2">
+                  Kurzanleitung
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <TutorialAccordion />
+              </AccordionDetails>
+            </Accordion>
+            <Accordion
+              expanded={expanded === "panel3"}
+              onChange={handleChange("panel3")}
+              sx={{
+                borderRadius: 3,
+                border: (theme) => `1px solid ${theme.palette.divider}`,
+                boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+                overflow: "hidden",
+                "&:hover": {
+                  boxShadow: "0 6px 16px rgba(0,0,0,0.12)",
+                },
+              }}
+            >
+              <AccordionSummary
+                aria-controls="panel3d-content"
+                id="panel3  d-header"
+                expandIcon={<ExpandMoreRounded />}
+                sx={{
+                  borderBottom: `5px ${theme.palette.primary.main} solid`,
+                  borderRadius: "5px",
+                }}
+              >
+                <Typography variant="h6" component="h2">
+                  Code & Log
+                </Typography>
+              </AccordionSummary>
+              <AccordionDetails>
+                <Box
+                  sx={{
+                    display: "flex",
+                    flexDirection: "column",
+                    gap: 2,
+                  }}
+                >
+                  <PseudocodeCard
+                    script={script}
+                    setScript={setScript}
+                    connected={connected}
+                    onSend={() => sendScript(delay)}
+                  />
+                  <DeviceLogCard
+                    log={log}
+                    logBoxRef={logBoxRef}
+                    onClear={clearLog}
+                    onCopy={copyLog}
+                  />
+                </Box>
+              </AccordionDetails>
+            </Accordion>
+          </Box>
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default BasicPage;
diff --git a/src/components/Pages/BasicPage/BlocklyCard.jsx b/src/components/Pages/BasicPage/BlocklyCard.jsx
new file mode 100644
index 00000000..257b9709
--- /dev/null
+++ b/src/components/Pages/BasicPage/BlocklyCard.jsx
@@ -0,0 +1,115 @@
+// src/components/BasicPage/BlocklyCard.jsx
+import React, { useEffect, useRef } from "react";
+import * as Blockly from "blockly";
+import "blockly/blocks";
+import { onChangeWorkspace } from "@/actions/workspaceActions";
+import { useDispatch } from "react-redux";
+import { BasicTheme } from "@/components/Blockly/themes/basicTheme";
+const getGeneratorByName = (name) => {
+  if (!name) return Blockly.Basic;
+  // bevorzugt den Pfad, den du schon nutzt:
+  if (
+    Blockly.Generator &&
+    Blockly.Generator[name?.charAt(0).toUpperCase() + name.slice(1)]
+  ) {
+    return Blockly.Generator[name.charAt(0).toUpperCase() + name.slice(1)];
+  }
+  // alternativ: direkt auf Blockly[name]
+  return Blockly[name] || Blockly.JavaScript;
+};
+
+const BlocklyCard = ({
+  toolboxXml,
+  initialXml,
+  onWorkspaceChanged,
+  blocklyCSS,
+  themeMode = "light",
+  generatorName = "Basic", // ⬅️ NEU
+}) => {
+  const containerRef = useRef(null);
+  const dispatch = useDispatch();
+  useEffect(() => {
+    if (!containerRef.current) return;
+
+    const theme =
+      themeMode === "dark" ? Blockly.Themes.Dark : Blockly.Themes.Classic;
+
+    // Toolbox normalisieren
+    let toolboxConfig = toolboxXml;
+    if (typeof toolboxXml === "string") {
+      toolboxConfig = new DOMParser().parseFromString(
+        toolboxXml,
+        "text/xml",
+      ).documentElement;
+    }
+
+    const ws = Blockly.inject(containerRef.current, {
+      toolbox: toolboxConfig,
+      renderer: "Thrasos",
+      theme: BasicTheme,
+      trashcan: true,
+      collapse: true,
+      zoom: {
+        wheel: true,
+        startScale: 1,
+        maxScale: 3,
+        minScale: 0.3,
+        scaleSpeed: 1.1,
+        pinch: true,
+      },
+      grid: { spacing: 20, length: 3, colour: "#ddd", snap: true },
+      move: { scrollbars: false, drag: true, wheel: true },
+      sounds: false,
+    });
+
+    // Initial XML
+    if (initialXml) {
+      try {
+        const xml = Blockly.Xml.textToDom(initialXml);
+        Blockly.Xml.domToWorkspace(xml, ws);
+      } catch {}
+    }
+
+    const generator = getGeneratorByName(generatorName);
+    const fire = () => {
+      const code =
+        generator && generator.workspaceToCode
+          ? generator.workspaceToCode(ws)
+          : "";
+      onWorkspaceChanged && onWorkspaceChanged(ws, code);
+    };
+
+    ws.addChangeListener(fire);
+    ws.addChangeListener((event) => {
+      dispatch(onChangeWorkspace(event));
+      const code = Blockly.Generator.Basic.workspaceToCode(ws);
+      console.log(code);
+    });
+    const ro = new ResizeObserver(() => Blockly.svgResize(ws));
+    ro.observe(containerRef.current);
+
+    // initial feuern
+    fire();
+
+    return () => {
+      try {
+        ws.removeChangeListener(fire);
+        ro.disconnect();
+      } catch {}
+      ws.dispose();
+    };
+  }, [toolboxXml, themeMode, initialXml, onWorkspaceChanged, generatorName]);
+
+  return (
+    <div
+      ref={containerRef}
+      style={{
+        width: "99%",
+        height: "99%",
+        ...blocklyCSS,
+      }}
+    />
+  );
+};
+
+export default BlocklyCard;
diff --git a/src/components/Pages/BasicPage/ConnectWizard.jsx b/src/components/Pages/BasicPage/ConnectWizard.jsx
new file mode 100644
index 00000000..fc7b8d34
--- /dev/null
+++ b/src/components/Pages/BasicPage/ConnectWizard.jsx
@@ -0,0 +1,196 @@
+"use client";
+
+import React from "react";
+import { Box, Button, Typography, useTheme } from "@mui/material";
+import {
+  Usb,
+  PlayArrow,
+  Autorenew,
+  Stop,
+  Bluetooth,
+  Computer,
+  BluetoothDisabled,
+  Code,
+} from "@mui/icons-material";
+
+const ConnectWizard = ({
+  supported,
+  connected,
+  onConnect,
+  onDisconnect,
+  onQuick,
+  onSend,
+}) => {
+  const theme = useTheme();
+
+  return (
+    <Box
+      sx={{
+        display: "grid",
+        gap: 3,
+        p: 2,
+      }}
+    >
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          justifyContent: "space-around",
+          gap: 4,
+          backgroundColor: "#f5f5f5",
+          borderRadius: "5px",
+          p: 2,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "row",
+            alignItems: "center",
+            gap: 1,
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "row",
+              gap: 1,
+              alignItems: "center",
+            }}
+          >
+            {connected ? (
+              <Bluetooth sx={{ color: theme.palette.success.main }} />
+            ) : (
+              <BluetoothDisabled sx={{ color: theme.palette.error.main }} />
+            )}
+
+            <div
+              style={{
+                width: "10px",
+                height: "10px",
+                backgroundColor: connected
+                  ? theme.palette.success.main
+                  : theme.palette.error.main,
+                borderRadius: "50%",
+                boxShadow: connected ? "0 0 8px #00cc44" : "0 0 8px #ff3333",
+                animation: "pulse 2s infinite",
+              }}
+              className="status-dot"
+            />
+            <style>
+              {`
+    @keyframes pulse {
+      0%   { box-shadow: 0 0 6px ${connected ? "#00cc44" : "#ff3333"}; }
+      50%  { box-shadow: 0 0 15px ${connected ? "#00ff55" : "#ff6666"}; }
+      100% { box-shadow: 0 0 6px ${connected ? "#00cc44" : "#ff3333"}; }
+    }
+  `}
+            </style>
+          </Box>
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <Typography
+              sx={{
+                fontWeight: 600,
+                color: "#6b7280",
+              }}
+            >
+              {connected ? "Connected" : "Disconnected"}
+            </Typography>
+
+            <Box
+              sx={{
+                backgroundColor: connected
+                  ? theme.palette.primary.main
+                  : theme.palette.error.main,
+                color: "white",
+                textAlign: "center",
+                display: "inline-block",
+                py: 0.2,
+                px: 0.6,
+                fontSize: 14,
+                borderRadius: 10,
+              }}
+            >
+              {connected ? "senseBox bereit" : "Inactive"}
+            </Box>
+          </Box>
+        </Box>
+        <Button
+          color={connected ? "error" : "primary"}
+          variant={connected ? "outlined" : "contained"}
+          onClick={connected ? onDisconnect : onConnect}
+          disabled={!supported}
+          startIcon={<Computer />}
+          size="medium"
+          sx={{ py: 1.5 }}
+        >
+          {connected ? "Disconnect" : "Connect Device"}
+        </Button>
+      </Box>
+
+      {connected && (
+        <Button
+          fullWidth
+          variant="contained"
+          onClick={onSend}
+          startIcon={<Code />}
+        >
+          Send Code{" "}
+        </Button>
+      )}
+
+      <Box
+        sx={{
+          display: "flex",
+          gap: 4,
+          justifyContent: "space-between",
+          width: "100%",
+        }}
+      >
+        <Button
+          onClick={() => onQuick("RUN")}
+          disabled={!connected}
+          size="large"
+          variant="contained"
+          color="primary"
+        >
+          <div>
+            <PlayArrow /> <br />
+            Start
+          </div>
+        </Button>
+        <Button
+          onClick={() => onQuick("RUNLOOP")}
+          disabled={!connected}
+          variant="contained"
+          size="large"
+          color="primary"
+        >
+          <div>
+            <Autorenew /> <br />
+            Loop
+          </div>
+        </Button>
+        <Button
+          onClick={() => onQuick("STOP")}
+          size="large"
+          disabled={!connected}
+          variant="contained"
+          color="error"
+        >
+          <div>
+            <Stop /> <br />
+            Stop
+          </div>
+        </Button>
+      </Box>
+    </Box>
+  );
+};
+
+export default ConnectWizard;
diff --git a/src/components/Pages/BasicPage/DeviceLogCard.jsx b/src/components/Pages/BasicPage/DeviceLogCard.jsx
new file mode 100644
index 00000000..9d4ab14b
--- /dev/null
+++ b/src/components/Pages/BasicPage/DeviceLogCard.jsx
@@ -0,0 +1,77 @@
+import React from "react";
+import {
+  Box,
+  Card,
+  CardContent,
+  CardHeader,
+  Divider,
+  IconButton,
+  Stack,
+  Tooltip,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { ContentCopy, DeleteSweep } from "@mui/icons-material";
+
+const DeviceLogCard = ({ log, logBoxRef, onClear, onCopy }) => {
+  const theme = useTheme();
+
+  return (
+    <div>
+      <Box
+        ref={logBoxRef}
+        component="pre"
+        sx={{
+          m: 0,
+          p: 1.5,
+          height: "100%",
+          fontSize: "1rem",
+          overflowY: "auto",
+          border: "1px solid #e0e0e0",
+          borderRadius: "8px",
+          backgroundColor: theme.palette.background.paper,
+          fontFamily:
+            "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+          whiteSpace: "pre-wrap",
+          wordBreak: "break-word",
+        }}
+      >
+        {log || "—"}
+      </Box>
+      <Stack direction="row" spacing={1}>
+        <Tooltip title="Copy log">
+          <span>
+            <IconButton
+              onClick={onCopy}
+              disabled={!log}
+              sx={{
+                backgroundColor: "#f0f0f0",
+                color: theme.palette.primary.main,
+                "&:hover": { backgroundColor: "#e0e0e0" },
+              }}
+            >
+              <ContentCopy fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+        <Tooltip title="Clear log">
+          <span>
+            <IconButton
+              onClick={onClear}
+              disabled={!log}
+              sx={{
+                backgroundColor: "#f0f0f0",
+                color: theme.palette.error.main,
+                "&:hover": { backgroundColor: "#e0e0e0" },
+              }}
+            >
+              <DeleteSweep fontSize="small" />
+            </IconButton>
+          </span>
+        </Tooltip>
+      </Stack>
+    </div>
+  );
+};
+
+export default DeviceLogCard;
diff --git a/src/components/Pages/BasicPage/HeaderBar.jsx b/src/components/Pages/BasicPage/HeaderBar.jsx
new file mode 100644
index 00000000..d957cc94
--- /dev/null
+++ b/src/components/Pages/BasicPage/HeaderBar.jsx
@@ -0,0 +1,191 @@
+import React, { useState } from "react";
+import {
+  Alert,
+  Box,
+  Button,
+  Card,
+  CardContent,
+  CardHeader,
+  IconButton,
+  Stack,
+  TextField,
+  Tooltip,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import {
+  Terminal,
+  Usb,
+  LinkOff,
+  PlayArrow,
+  Autorenew,
+  Stop,
+} from "@mui/icons-material";
+
+const HeaderBar = ({
+  supported,
+  connected,
+  status,
+  delay,
+  setDelay,
+  onConnect,
+  onDisconnect,
+  onQuick,
+}) => {
+  const theme = useTheme();
+  const [localDelay, setLocalDelay] = useState(delay);
+
+  return (
+    <Card
+      elevation={3}
+      sx={{ borderRadius: "16px", "&:hover": { boxShadow: 6 } }}
+    >
+      <CardHeader
+        title={
+          <Stack direction="row" alignItems="center" spacing={1}>
+            <Terminal />
+            <Typography
+              variant="h5"
+              sx={{ fontWeight: 900, color: theme.palette.primary.main }}
+            >
+              ESP32 Pseudocode Sender
+            </Typography>
+          </Stack>
+        }
+        subheader={
+          <Typography variant="body2" color="text.secondary">
+            Web Serial · Baud: 115200 · Newline: LF (\n)
+          </Typography>
+        }
+        action={
+          <Stack direction="row" spacing={1}>
+            <Button
+              onClick={onConnect}
+              disabled={connected || !supported}
+              startIcon={<Usb />}
+              sx={{
+                background: theme.palette.background.white,
+                color: theme.palette.primary.main,
+                borderRadius: "50px",
+                fontWeight: "bold",
+                border: "1px solid",
+                borderColor: theme.palette.primary.main,
+                "&:hover": {
+                  background: theme.palette.primary.main,
+                  color: theme.palette.background.white,
+                },
+              }}
+            >
+              Connect
+            </Button>
+            <Button
+              onClick={onDisconnect}
+              disabled={!connected}
+              startIcon={<LinkOff />}
+              sx={{
+                background: theme.palette.background.white,
+                color: theme.palette.error.main,
+                borderRadius: "50px",
+                fontWeight: "bold",
+                border: "1px solid",
+                borderColor: theme.palette.error.main,
+                "&:hover": {
+                  background: theme.palette.error.main,
+                  color: theme.palette.background.white,
+                },
+              }}
+            >
+              Disconnect
+            </Button>
+          </Stack>
+        }
+      />
+      <CardContent sx={{ pt: 0 }}>
+        {!supported && (
+          <Alert severity="warning" sx={{ mb: 2 }}>
+            Dein Browser unterstützt die Web Serial API nicht. Nutze Chrome/Edge
+            (HTTPS oder localhost).
+          </Alert>
+        )}
+
+        <Stack direction="row" spacing={2} alignItems="center">
+          <Typography variant="body2" color="text.secondary">
+            Status:
+          </Typography>
+          <Typography
+            variant="body2"
+            sx={{
+              fontWeight: 700,
+              color: connected
+                ? theme.palette.success.main
+                : theme.palette.text.secondary,
+            }}
+          >
+            {status}
+          </Typography>
+
+          <Box sx={{ flexGrow: 1 }} />
+
+          <TextField
+            label="Line delay (ms)"
+            type="number"
+            size="small"
+            value={localDelay}
+            onChange={(e) => setLocalDelay(parseInt(e.target.value || "0", 10))}
+            onBlur={() => setDelay(localDelay || 0)}
+            sx={{ width: 160 }}
+            inputProps={{ min: 0 }}
+          />
+
+          <Tooltip title="RUN">
+            <span>
+              <IconButton
+                onClick={() => onQuick("RUN")}
+                disabled={!connected}
+                sx={{
+                  backgroundColor: "#f0f0f0",
+                  color: theme.palette.primary.main,
+                  "&:hover": { backgroundColor: "#e0e0e0" },
+                }}
+              >
+                <PlayArrow />
+              </IconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title="RUNLOOP">
+            <span>
+              <IconButton
+                onClick={() => onQuick("RUNLOOP")}
+                disabled={!connected}
+                sx={{
+                  backgroundColor: "#f0f0f0",
+                  color: theme.palette.primary.main,
+                  "&:hover": { backgroundColor: "#e0e0e0" },
+                }}
+              >
+                <Autorenew />
+              </IconButton>
+            </span>
+          </Tooltip>
+          <Tooltip title="STOP">
+            <span>
+              <IconButton
+                onClick={() => onQuick("STOP")}
+                disabled={!connected}
+                sx={{
+                  backgroundColor: "#f0f0f0",
+                  color: theme.palette.error.main,
+                  "&:hover": { backgroundColor: "#e0e0e0" },
+                }}
+              >
+                <Stop />
+              </IconButton>
+            </span>
+          </Tooltip>
+        </Stack>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default HeaderBar;
diff --git a/src/components/Pages/BasicPage/PseudocodeCard.jsx b/src/components/Pages/BasicPage/PseudocodeCard.jsx
new file mode 100644
index 00000000..b7126b7d
--- /dev/null
+++ b/src/components/Pages/BasicPage/PseudocodeCard.jsx
@@ -0,0 +1,72 @@
+import React from "react";
+import {
+  Box,
+  Button,
+  Card,
+  CardActions,
+  CardContent,
+  CardHeader,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { Send } from "@mui/icons-material";
+import { useSelector } from "react-redux";
+
+const PseudocodeCard = ({ script, setScript, connected, onSend }) => {
+  const theme = useTheme();
+  const basicCode = useSelector((s) => s.workspace.code.basic);
+
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        gap: 2,
+      }}
+    >
+      <TextField
+        value={basicCode}
+        multiline
+        fullWidth
+        sx={{
+          flex: 1,
+          "& .MuiInputBase-root": {
+            height: "100%",
+            alignItems: "start",
+            fontFamily:
+              "ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace",
+            overflow: "auto",
+          },
+          "& textarea": {
+            height: "100% !important",
+          },
+        }}
+        minRows={6}
+      />
+
+      <Button
+        onClick={onSend}
+        disabled={!connected}
+        startIcon={<Send />}
+        fullWidth
+        sx={{
+          background: theme.palette.background.white,
+          color: theme.palette.primary.main,
+          borderRadius: "50px",
+          fontWeight: "bold",
+          border: "1px solid",
+          borderColor: theme.palette.primary.main,
+          "&:hover": {
+            backgroundColor: theme.palette.primary.main,
+            color: theme.palette.background.white,
+          },
+        }}
+      >
+        Send Lines
+      </Button>
+    </Box>
+  );
+};
+
+export default PseudocodeCard;
diff --git a/src/components/Pages/BasicPage/TutorialAccordion.jsx b/src/components/Pages/BasicPage/TutorialAccordion.jsx
new file mode 100644
index 00000000..60e95f56
--- /dev/null
+++ b/src/components/Pages/BasicPage/TutorialAccordion.jsx
@@ -0,0 +1,96 @@
+import {
+  Code,
+  ConnectWithoutContact,
+  PlayArrow,
+  Shortcut,
+  Upload,
+  Usb,
+} from "@mui/icons-material";
+import {
+  Link,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Typography,
+} from "@mui/material";
+
+const TutorialAccordion = () => {
+  return (
+    <List dense disablePadding>
+      <ListItem
+        sx={{ mb: 2, borderRadius: 2, bgcolor: "grey.50", boxShadow: 1 }}
+      >
+        {" "}
+        <ListItemIcon>
+          <Upload color="primary" />
+        </ListItemIcon>
+        <ListItemText
+          primary="SenseBoxOS Sketch aufspielen"
+          secondary="Über Arduino IDE oder senseBox:MCU Flasher aufspielen"
+        />
+      </ListItem>
+
+      <ListItem
+        sx={{ mb: 2, borderRadius: 2, bgcolor: "grey.50", boxShadow: 1 }}
+      >
+        <ListItemIcon>
+          <Usb color="primary" />
+        </ListItemIcon>
+        <ListItemText primary="Mit PC verbinden" />
+      </ListItem>
+
+      <ListItem
+        sx={{ mb: 2, borderRadius: 2, bgcolor: "grey.50", boxShadow: 1 }}
+      >
+        {" "}
+        <ListItemIcon>
+          <Shortcut color="primary" />
+        </ListItemIcon>
+        <ListItemText
+          primary="Auf „Verbinden“ klicken"
+          secondary="SenseBox im erscheinenden Dialog auswählen"
+        />
+      </ListItem>
+
+      <ListItem
+        sx={{ mb: 2, borderRadius: 2, bgcolor: "grey.50", boxShadow: 1 }}
+      >
+        {" "}
+        <ListItemIcon>
+          <Code color="primary" />
+        </ListItemIcon>
+        <ListItemText
+          primary="Code mit „Code senden“ übertragen"
+          secondary="Dein Blockly-Code wird an die MCU geschickt"
+        />
+      </ListItem>
+
+      <ListItem
+        sx={{ mb: 2, borderRadius: 2, bgcolor: "grey.50", boxShadow: 1 }}
+      >
+        {" "}
+        <ListItemIcon>
+          <PlayArrow color="primary" />
+        </ListItemIcon>
+        <ListItemText
+          primary="Mit Play oder Loop starten"
+          secondary={
+            <>
+              <Typography component="span" fontWeight="bold">
+                Play:
+              </Typography>{" "}
+              führt den Code einmal aus –{" "}
+              <Typography component="span" fontWeight="bold">
+                Loop:
+              </Typography>{" "}
+              wiederholt ihn endlos.
+            </>
+          }
+        />
+      </ListItem>
+    </List>
+  );
+};
+
+export default TutorialAccordion;
diff --git a/src/components/Pages/BasicPage/WebSerialService.jsx b/src/components/Pages/BasicPage/WebSerialService.jsx
new file mode 100644
index 00000000..192fc288
--- /dev/null
+++ b/src/components/Pages/BasicPage/WebSerialService.jsx
@@ -0,0 +1,173 @@
+import { useCallback, useEffect, useRef, useState } from "react";
+import { useSelector } from "react-redux";
+
+/**
+ * Custom Hook für Web Serial (Chrome/Edge, HTTPS oder localhost).
+ * Props:
+ *  - script: string
+ *  - setLog: (updater) => void
+ *  - logBoxRef: ref auf das <pre>-Element (für Autoscroll)
+ */
+export default function useWebSerial({ setLog, logBoxRef }) {
+  const [supported] = useState(
+    typeof navigator !== "undefined" && "serial" in navigator,
+  );
+  const [connected, setConnected] = useState(false);
+  const [status, setStatus] = useState("Disconnected");
+  const [delay, setDelay] = useState(30);
+
+  const portRef = useRef(null);
+  const readerRef = useRef(null);
+  const writerRef = useRef(null);
+  const script = useSelector((s) => s.workspace.code.basic);
+
+  const logMessage = useCallback(
+    (msg) => {
+      setLog((prev) => (prev ? `${prev}\n${msg}` : msg));
+      if (logBoxRef?.current) {
+        queueMicrotask(() => {
+          logBoxRef.current.scrollTop = logBoxRef.current.scrollHeight;
+        });
+      }
+    },
+    [setLog, logBoxRef],
+  );
+
+  const readLoop = useCallback(
+    async (reader) => {
+      while (true) {
+        try {
+          const { value, done } = await reader.read();
+          if (done) break;
+          if (value) {
+            const lines = value.replace(/\r/g, "").split("\n");
+            for (const ln of lines) if (ln.length) logMessage(ln);
+          }
+        } catch (err) {
+          logMessage(`Read error: ${err}`);
+          break;
+        }
+      }
+    },
+    [logMessage],
+  );
+
+  const connect = useCallback(async () => {
+    try {
+      const port = await navigator.serial.requestPort();
+      await port.open({ baudRate: 115200 });
+
+      const textDecoder = new TextDecoderStream();
+      const textEncoder = new TextEncoderStream();
+      port.readable.pipeTo(textDecoder.writable);
+      textEncoder.readable.pipeTo(port.writable);
+
+      const reader = textDecoder.readable.getReader();
+      const writer = textEncoder.writable.getWriter();
+
+      portRef.current = port;
+      readerRef.current = reader;
+      writerRef.current = writer;
+
+      readLoop(reader);
+
+      setConnected(true);
+      setStatus("Connected");
+      logMessage("[Connected]");
+    } catch (err) {
+      logMessage(`Connection failed: ${err}`);
+      setConnected(false);
+      setStatus("Disconnected");
+    }
+  }, [logMessage, readLoop]);
+
+  const disconnect = useCallback(async () => {
+    try {
+      if (readerRef.current) await readerRef.current.cancel();
+      if (writerRef.current) await writerRef.current.close();
+      if (portRef.current) await portRef.current.close();
+    } catch {
+      /* ignore */
+    }
+    readerRef.current = null;
+    writerRef.current = null;
+    portRef.current = null;
+    setConnected(false);
+    setStatus("Disconnected");
+    logMessage("[Disconnected]");
+  }, [logMessage]);
+
+  const sendLine = useCallback(
+    async (line) => {
+      if (!writerRef.current) return;
+      await writerRef.current.write(line + "\n");
+      logMessage(`>>> ${line}`);
+    },
+    [logMessage],
+  );
+
+  const sendScript = useCallback(
+    async (d = delay) => {
+      const lines = script.split(/\r?\n/);
+      for (let line of lines) {
+        const trimmed = line.trimEnd();
+        if (trimmed) {
+          await sendLine(trimmed);
+          const ms = Math.max(0, Number.isFinite(d) ? d : 0);
+          if (ms > 0) await new Promise((r) => setTimeout(r, ms));
+        }
+      }
+    },
+    [script, sendLine, delay],
+  );
+
+  const clearLog = useCallback(() => setLog(""), [setLog]);
+  const copyLog = useCallback(async () => {
+    try {
+      await navigator.clipboard.writeText(
+        typeof window !== "undefined"
+          ? document.querySelector("[data-log-pre]")?.textContent || ""
+          : "",
+      );
+    } catch {
+      /* ignore */
+    }
+  }, []);
+
+  // Cleanup bei Unmount
+  useEffect(() => {
+    return () => {
+      disconnect();
+    };
+  }, [disconnect]);
+
+  // Markiere das <pre> für copyLog (fallback)
+  useEffect(() => {
+    if (logBoxRef?.current) {
+      logBoxRef.current.setAttribute("data-log-pre", "true");
+    }
+  }, [logBoxRef]);
+
+  // Info bei fehlender Unterstützung
+  useEffect(() => {
+    if (!supported) {
+      logMessage(
+        "Web Serial API not supported (Chrome/Edge, HTTPS oder localhost).",
+      );
+    }
+  }, [supported, logMessage]);
+
+  return {
+    supported,
+    connected,
+    status,
+    delay,
+    setDelay,
+    connect,
+    disconnect,
+    sendLine,
+    sendScript,
+    clearLog,
+    copyLog,
+  };
+}
diff --git a/src/components/Pages/BasicPage/toolbox_style.css b/src/components/Pages/BasicPage/toolbox_style.css
new file mode 100644
index 00000000..cbdfc4d8
--- /dev/null
+++ b/src/components/Pages/BasicPage/toolbox_style.css
@@ -0,0 +1,22 @@
+.blocklyToolboxCategoryLabel {
+  font-size: 32px !important;
+  margin: 10px;
+}
+
+.blocklyToolboxCategory:not(:has(input[type="search"])) {
+  height: 30px !important;
+  border: 1px solid rgba(0, 128, 0, 0.4);
+  border-radius: 5px;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
+  background: #fff;
+  margin: 2px;
+  padding: 10px;
+  align-content: center;
+  outline: none; /* Fokus-Ring weg */
+}
+
+/* Makes the icon bigger and green */
+.customIcon {
+  font-size: 20px;
+  padding: 10px;
+}
diff --git a/src/components/Pages/CodeEditor/Sidebar.jsx b/src/components/Pages/CodeEditor/Sidebar.jsx
index 20f7fa8d..3ac8a454 100644
--- a/src/components/Pages/CodeEditor/Sidebar.jsx
+++ b/src/components/Pages/CodeEditor/Sidebar.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import * as Blockly from "blockly";
 import { useSelector } from "react-redux";
 import Accordion from "@mui/material/Accordion";
@@ -15,7 +15,7 @@ const Sidebar = () => {
   //const [examples, setExamples] = React.useState([]);
   const user = useSelector((state) => state.auth.user);
   const compilerUrl = useSelector((state) => state.general.compiler);
-  
+
   // useEffect(() => {
   //   axios
   //     .get("https://coelho.opensensemap.org/items/blocklysamples")
@@ -38,22 +38,19 @@ const Sidebar = () => {
 
   const [libraries, setLibraries] = React.useState([]);
   React.useEffect(() => {
-    if(!compilerUrl) return;
+    if (!compilerUrl) return;
 
     const fetchLibraries = async () => {
-      const { data } = await axios.get(
-        `${compilerUrl}/libraries`,
-        {
-          params: {
-            format: "json",
-          },
-        }
-      );
+      const { data } = await axios.get(`${compilerUrl}/libraries`, {
+        params: {
+          format: "json",
+        },
+      });
       const myLibs = data.installed_libraries
         .map(({ library }) => library)
         .filter((lib) => lib.location == "user")
         .sort((a, b) => a.name.localeCompare(b.name));
-        
+
       setLibraries(myLibs);
     };
     fetchLibraries();
diff --git a/src/components/Pages/Faq.jsx b/src/components/Pages/Faq.jsx
index c3619d88..2239f72c 100644
--- a/src/components/Pages/Faq.jsx
+++ b/src/components/Pages/Faq.jsx
@@ -59,8 +59,6 @@ class Faq extends Component {
                   <AccordionDetails>
                     <Typography>
                       <ReactMarkdown
-                        className="news"
-                        allowDangerousHtml="true"
                         children={object.answer}
                         rehypePlugins={[rehypeRaw]}
                       ></ReactMarkdown>
diff --git a/src/components/Pages/Home.jsx b/src/components/Pages/Home.jsx
index 6e9faf91..0705ca69 100644
--- a/src/components/Pages/Home.jsx
+++ b/src/components/Pages/Home.jsx
@@ -25,6 +25,9 @@ function Home({ project, projectType }) {
   const statistics = useSelector((state) => state.general.statistics);
   const platform = useSelector((state) => state.general.platform);
 
+  const [toolbox, setToolbox] = useState(null);
+  const selectedBoard = useSelector((state) => state.board.board);
+
   const [codeOn, setCodeOn] = useState(true);
   const [open, setOpen] = useState(true);
   const [initialXml, setInitialXml] = useState(
diff --git a/src/components/Pages/News.jsx b/src/components/Pages/News.jsx
index 095722b1..2b0936db 100644
--- a/src/components/Pages/News.jsx
+++ b/src/components/Pages/News.jsx
@@ -121,7 +121,7 @@ class News extends Component {
         />
         <Container fixed>
           <Typography variant="body1">
-            <ReactMarkdown className="news" children={news}></ReactMarkdown>
+            <ReactMarkdown children={news}></ReactMarkdown>
           </Typography>
         </Container>
         {this.props.button ? (
diff --git a/src/components/Pages/Project/ProjectHome.jsx b/src/components/Pages/Project/ProjectHome.jsx
index 000cbc37..787dab03 100644
--- a/src/components/Pages/Project/ProjectHome.jsx
+++ b/src/components/Pages/Project/ProjectHome.jsx
@@ -72,10 +72,7 @@ class ProjectHome extends Component {
   componentDidUpdate(props) {
     if (props.location.pathname !== this.props.location.pathname) {
       this.setState({ snackbar: false });
-      console.log(
-        "Updating projects for type:",
-        this.props.location.pathname.replace("/", ""),
-      );
+
       this.props.getProjects(this.props.location.pathname.replace("/", ""));
     }
     if (props.message !== this.props.message) {
diff --git a/src/components/Route/Routes.jsx b/src/components/Route/Routes.jsx
index e208fc87..473c7f61 100644
--- a/src/components/Route/Routes.jsx
+++ b/src/components/Route/Routes.jsx
@@ -25,6 +25,10 @@ import CodeEditor from "../Pages/CodeEditor/CodeEditor";
 import GalleryHome from "../Pages/Gallery/GalleryHome";
 import Project from "@/components/Pages/Project/Project";
 import ProjectHome from "@/components/Pages/Project/ProjectHome";
+import BasicPage from "../Pages/BasicPage/BasicPage";
+import Register from "../User/Register";
+import RegisterSuccess from "../User/RegisterSuccess";
+import PasswordReset from "../User/PasswordReset";
 
 class Routes extends Component {
   componentDidMount() {
@@ -54,16 +58,23 @@ class Routes extends Component {
           <PublicRoute path="/" exact>
             <Home />
           </PublicRoute>
+          <PublicRoute path="/basic" exact>
+            <BasicPage />
+          </PublicRoute>
           {/* Tutorials */}
           <PublicRoute path="/tutorial" exact>
             <TutorialHome />
           </PublicRoute>
-          <PrivateRouteCreator path="/tutorial/builder" exact>
+          <PrivateRoute path="/tutorial/builder" exact>
             <Builder />
-          </PrivateRouteCreator>
+          </PrivateRoute>
           <Route path="/tutorial/:tutorialId" exact>
             <Tutorial />
           </Route>
+          <PrivateRoute path="/tutorial/:tutorialId/edit" exact>
+            <Builder />
+          </PrivateRoute>
+
           <Route path="/CodeEditor" exact>
             <CodeEditor />
           </Route>
@@ -89,6 +100,15 @@ class Routes extends Component {
           <IsLoggedRoute path="/user/login" exact>
             <Login />
           </IsLoggedRoute>
+          <PublicRoute path="/user/register" exact>
+            <Register />
+          </PublicRoute>
+          <PublicRoute path="/user/register/success" exact>
+            <RegisterSuccess />
+          </PublicRoute>
+          <PublicRoute path="/user/reset-password" exact>
+            <PasswordReset />
+          </PublicRoute>
           <PrivateRoute path="/user" exact>
             <Account />
           </PrivateRoute>
diff --git a/src/components/Tutorial/Assessment.jsx b/src/components/Tutorial/Assessment.jsx
deleted file mode 100644
index dad96933..00000000
--- a/src/components/Tutorial/Assessment.jsx
+++ /dev/null
@@ -1,198 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { workspaceName } from "../../actions/workspaceActions";
-
-import BlocklyWindow from "../Blockly/BlocklyWindow";
-import WorkspaceToolbar from "../Workspace/WorkspaceToolbar";
-
-import Grid from "@mui/material/Grid";
-import Card from "@mui/material/Card";
-import Typography from "@mui/material/Typography";
-import * as Blockly from "blockly";
-import { initialXml } from "../Blockly/initialXml";
-import IconButton from "@mui/material/IconButton";
-import CodeViewer from "../Workspace/CodeViewer";
-import TooltipViewer from "../Workspace/TooltipViewer";
-import Tooltip from "@mui/material/Tooltip";
-import ReactMarkdown from "react-markdown";
-import { faCode } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import withStyles from "@mui/styles/withStyles";
-import remarkGfm from "remark-gfm";
-import remarkGemoji from "remark-gemoji";
-import { isWidthDown } from "../../helpers/handleBreakpoints";
-
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => (WrappedComponent) => (props) => (
-  <WrappedComponent {...props} width="xs" />
-);
-
-const styles = (theme) => ({
-  codeOn: {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    "&:hover": {
-      backgroundColor: theme.palette.primary.contrastText,
-      color: theme.palette.primary.main,
-      border: `1px solid ${theme.palette.secondary.main}`,
-    },
-  },
-  codeOff: {
-    backgroundColor: theme.palette.primary.contrastText,
-    color: theme.palette.primary.main,
-    border: `1px solid ${theme.palette.secondary.main}`,
-    "&:hover": {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-  },
-});
-
-class Assessment extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      codeOn: false,
-    };
-  }
-
-  componentDidMount() {
-    this.props.workspaceName(this.props.name);
-  }
-
-  componentDidUpdate(props) {
-    if (props.name !== this.props.name) {
-      this.props.workspaceName(this.props.name);
-    }
-  }
-
-  onChange = () => {
-    this.setState({ codeOn: !this.state.codeOn });
-  };
-
-  render() {
-    var tutorialId = this.props.tutorial._id;
-    var currentTask = this.props.step;
-    var status = this.props.status.filter(
-      (status) => status._id === tutorialId,
-    )[0];
-    var taskIndex = status.tasks.findIndex(
-      (task) => task._id === currentTask._id,
-    );
-    var statusTask = status.tasks[taskIndex];
-    return (
-      <div className="assessmentDiv" style={{ width: "100%" }}>
-        <div style={{ float: "right", height: "40px" }}>
-          <WorkspaceToolbar assessment />
-        </div>
-        <Grid container spacing={2} style={{ marginBottom: "5px" }}>
-          <Grid
-            item
-            xs={12}
-            md={this.state.codeOn ? 6 : 9}
-            lg={this.state.codeOn ? 6 : 9}
-            style={{ position: "relative" }}
-          >
-            <Tooltip
-              title={
-                this.state.codeOn
-                  ? Blockly.Msg.tooltip_hide_code
-                  : Blockly.Msg.tooltip_show_code
-              }
-            >
-              <IconButton
-                className={`showCode ${
-                  this.state.codeOn
-                    ? this.props.classes.codeOn
-                    : this.props.classes.codeOff
-                }`}
-                style={{
-                  width: "40px",
-                  height: "40px",
-                  position: "absolute",
-                  top: 6,
-                  right: 8,
-                  zIndex: 21,
-                }}
-                onClick={() => this.onChange()}
-                size="large"
-              >
-                <FontAwesomeIcon icon={faCode} size="xs" />
-              </IconButton>
-            </Tooltip>
-            <BlocklyWindow
-              initialXml={initialXml}
-              blockDisabled
-              blocklyCSS={{ height: "65vH" }}
-            />
-          </Grid>
-          {this.state.codeOn ? (
-            <Grid item xs={12} md={4} lg={3}>
-              <CodeViewer />
-            </Grid>
-          ) : null}
-          <Grid
-            item
-            xs={12}
-            md={3}
-            lg={3}
-            style={{
-              position: "relative",
-              // isWidthDown("sm", this.props.width)
-              //   ? { height: "max-content" }
-              //   : {}
-            }}
-          >
-            <Card
-              style={{
-                height: "calc(44vH - 35px)",
-                padding: "10px",
-                marginBottom: "10px",
-              }}
-            >
-              <Typography>
-                <ReactMarkdown remarkPlugins={[remarkGfm, remarkGemoji]}>
-                  {currentTask.text}
-                </ReactMarkdown>
-              </Typography>
-            </Card>
-            {/* <Card
-              style={{
-                height: "20vH",
-                padding: "10px",
-                marginBottom: "10px",
-              }}
-            > */}
-            <TooltipViewer />
-            {/* </Card> */}
-            <div
-              style={
-                isWidthDown("sm", this.props.width)
-                  ? { height: "500px" }
-                  : { height: "50%" }
-              }
-            ></div>
-          </Grid>
-        </Grid>
-      </div>
-    );
-  }
-}
-
-Assessment.propTypes = {
-  status: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
-  workspaceName: PropTypes.func.isRequired,
-  tutorial: PropTypes.object.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  change: state.tutorial.change,
-  status: state.tutorial.status,
-  tutorial: state.tutorial.tutorials[0],
-});
-
-export default connect(mapStateToProps, { workspaceName })(
-  withWidth()(withStyles(styles, { withTheme: true })(Assessment)),
-);
diff --git a/src/components/Tutorial/Builder/AddNewHardware.jsx b/src/components/Tutorial/Builder/AddNewHardware.jsx
new file mode 100644
index 00000000..96072f2a
--- /dev/null
+++ b/src/components/Tutorial/Builder/AddNewHardware.jsx
@@ -0,0 +1,207 @@
+import React, { useState } from "react";
+import {
+  Button,
+  Dialog,
+  DialogTitle,
+  DialogContent,
+  DialogActions,
+  Tabs,
+  Tab,
+  Box,
+  TextField,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import AddIcon from "@mui/icons-material/Add";
+import COMPONENT_MAP from "../componentMap";
+const hardwareCategories = {
+  sensoren: [
+    {
+      id: "temp-sensor",
+      name: "Temperatursensor",
+      image: "/temperature-sensor-dht22.jpg",
+    },
+    {
+      id: "humidity-sensor",
+      name: "Feuchtigkeitssensor",
+      image: "/humidity-sensor.jpg",
+    },
+    {
+      id: "motion-sensor",
+      name: "Bewegungssensor",
+      image: "/pir-motion-sensor.jpg",
+    },
+  ],
+  accessoire: [
+    { id: "led-strip", name: "LED-Streifen", image: "/placeholder.svg" },
+    { id: "servo-motor", name: "Servo Motor", image: "/placeholder.svg" },
+  ],
+  bauteile: [
+    { id: "arduino-uno", name: "Arduino Uno", image: "/placeholder.svg" },
+    { id: "esp32", name: "ESP32", image: "/placeholder.svg" },
+  ],
+};
+
+export default function HardwareSelectorModal({
+  selectedHardware,
+  onHardwareSelect,
+}) {
+  const theme = useTheme();
+  const [open, setOpen] = useState(false);
+  const [activeTab, setActiveTab] = useState("sensoren");
+  const [searchValue, setSearchValue] = useState("");
+
+  const getFilteredHardware = (category) =>
+    hardwareCategories[category].filter((item) =>
+      item.name.toLowerCase().includes(searchValue.toLowerCase()),
+    );
+
+  const handleHardwareSelect = (hardware) => {
+    if (selectedHardware.includes(hardware)) {
+      onHardwareSelect(selectedHardware.filter((item) => item !== hardware));
+    } else {
+      onHardwareSelect([...selectedHardware, hardware]);
+    }
+  };
+
+  return (
+    <>
+      <Button
+        variant="outlined"
+        size="small"
+        sx={{
+          fontSize: "0.8rem",
+          border: "3px dashed #99a1af",
+          color: "#4a5565",
+        }}
+        id="edit_hardware"
+        startIcon={<AddIcon />}
+        onClick={() => setOpen(true)}
+      >
+        Hardware bearbeiten
+      </Button>
+
+      <Dialog
+        open={open}
+        onClose={() => setOpen(false)}
+        fullWidth
+        maxWidth="md"
+      >
+        <DialogTitle>
+          Hardware auswählen{" "}
+          {selectedHardware.length > 0 && (
+            <Typography
+              component="span"
+              variant="body2"
+              color="primary"
+              sx={{ ml: 1 }}
+            >
+              ({selectedHardware.length} ausgewählt)
+            </Typography>
+          )}
+        </DialogTitle>
+        <DialogContent dividers>
+          {/* Suche */}
+          <TextField
+            fullWidth
+            placeholder="Hardware suchen..."
+            value={searchValue}
+            onChange={(e) => setSearchValue(e.target.value)}
+            size="small"
+            sx={{ mb: 2 }}
+          />
+
+          {/* Tabs */}
+
+          {/* Grid mit Hardware */}
+          <Box
+            sx={{
+              display: "grid",
+              gridTemplateColumns: "repeat(auto-fill, minmax(120px, 1fr))",
+              gap: 2,
+              mt: 2,
+              maxHeight: 400,
+              overflowY: "auto",
+              p: 1,
+            }}
+          >
+            {Object.entries(COMPONENT_MAP).map(([id, item]) => {
+              if (
+                searchValue &&
+                !item.name.toLowerCase().includes(searchValue.toLowerCase())
+              ) {
+                return null;
+              }
+              return (
+                <Box
+                  key={id}
+                  onClick={() => handleHardwareSelect(id)}
+                  sx={{
+                    position: "relative",
+                    border: selectedHardware.includes(id)
+                      ? `2px solid ${theme.palette.primary.main}`
+                      : "1px solid #ccc",
+                    borderRadius: 2,
+                    p: 1,
+                    textAlign: "center",
+                    cursor: "pointer",
+                    transition: "all 0.2s",
+                    "&:hover": {
+                      border: `2px solid ${theme.palette.primary.main}`,
+                    },
+                  }}
+                >
+                  <img
+                    src={
+                      item.image || "/media/hardware/3dmodels/coming-soon.png"
+                    }
+                    alt={item.name}
+                    style={{ width: "100%", height: 80, objectFit: "contain" }}
+                  />
+                  <Typography variant="body2" sx={{ mt: 1 }}>
+                    {item.name}
+                  </Typography>
+
+                  {/* ✅ Checkmark unten rechts */}
+                  {selectedHardware.includes(id) && (
+                    <Box
+                      sx={{
+                        position: "absolute",
+                        bottom: 6,
+                        right: 6,
+                        width: 20,
+                        height: 20,
+                        borderRadius: "50%",
+                        bgcolor: theme.palette.primary.main,
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        color: "#fff",
+                        fontSize: 14,
+                        fontWeight: "bold",
+                      }}
+                    >
+                      ✓
+                    </Box>
+                  )}
+                </Box>
+              );
+            })}
+          </Box>
+        </DialogContent>
+
+        <DialogActions>
+          <Button
+            onClick={() => onHardwareSelect([])}
+            disabled={selectedHardware.length === 0}
+          >
+            Alle entfernen
+          </Button>
+          <Button variant="contained" onClick={() => setOpen(false)}>
+            Fertig ({selectedHardware.length})
+          </Button>
+        </DialogActions>
+      </Dialog>
+    </>
+  );
+}
diff --git a/src/components/Tutorial/Builder/BlocklyExample.jsx b/src/components/Tutorial/Builder/BlocklyExample.jsx
index 23d79227..4b8dec6b 100644
--- a/src/components/Tutorial/Builder/BlocklyExample.jsx
+++ b/src/components/Tutorial/Builder/BlocklyExample.jsx
@@ -1,238 +1,349 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import React, { useEffect, useState, useRef } from "react";
+import {
+  Box,
+  Button,
+  FormHelperText,
+  Grid,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import moment from "moment";
+import "moment/locale/de";
+import * as Blockly from "blockly/core";
+import { FileUpload, CheckCircle, RotateLeft } from "@mui/icons-material"; // 🔥 Icon für Reset
+import { motion, AnimatePresence } from "framer-motion";
+
+import BlocklyWindow from "../../Blockly/BlocklyWindow";
+import { initialXml } from "../../Blockly/initialXml.js";
 import {
   changeContent,
-  deleteProperty,
   setError,
   deleteError,
 } from "../../../actions/tutorialBuilderActions";
 
-import moment from "moment";
-import localization from "moment/locale/de";
-import * as Blockly from "blockly/core";
+// 🔥 Importiere Dialog und Snackbar, falls nicht bereits in BlocklyExample vorhanden
+import Dialog from "@/components/ui/Dialog";
+import Snackbar from "@/components/Snackbar";
 
-import { initialXml } from "../../Blockly//initialXml.js";
-import BlocklyWindow from "../../Blockly/BlocklyWindow";
+const BlocklyExample = ({ index, task = false, value, onXmlChange }) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const [xmlState, setXmlState] = useState(null);
+  const [input, setInput] = useState(null);
+  const [disabled, setDisabled] = useState(true);
+  const [submitted, setSubmitted] = useState(false);
 
-import withStyles from "@mui/styles/withStyles";
-import Switch from "@mui/material/Switch";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormHelperText from "@mui/material/FormHelperText";
-import FormLabel from "@mui/material/FormLabel";
-import Button from "@mui/material/Button";
-import Grid from "@mui/material/Grid";
-
-const styles = (theme) => ({
-  errorColor: {
-    color: theme.palette.error.dark,
-  },
-  errorBorder: {
-    border: `1px solid ${theme.palette.error.dark}`,
-  },
-  errorButton: {
-    marginTop: "5px",
-    height: "40px",
-    backgroundColor: theme.palette.error.dark,
-    "&:hover": {
-      backgroundColor: theme.palette.error.dark,
-    },
-  },
-});
-
-class BlocklyExample extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      checked: props.task ? props.task : props.value ? true : false,
-      input: null,
-      disabled: false,
-    };
-  }
+  // 🔥 Zustand für den Reset-Dialog und die Snackbar
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [snackbar, setSnackbar] = useState({
+    open: false,
+    message: "",
+    type: "info",
+    key: 0,
+  });
 
-  componentDidMount() {
-    moment.updateLocale("de", localization);
-    this.isError();
-    // if(this.props.task){
-    //   this.props.setError(this.props.index, 'xml');
-    // }
-  }
-
-  componentDidUpdate(props, state) {
-    if (props.task !== this.props.task || props.value !== this.props.value) {
-      this.setState(
-        {
-          checked: this.props.task
-            ? this.props.task
-            : this.props.value
-              ? true
-              : false,
-        },
-        () => this.isError(),
+  // Ref für den Debounce-Timer
+  const debounceTimerRef = useRef(null);
+
+  moment.updateLocale("de");
+
+  useEffect(() => {
+    validateXML();
+  }, [value]);
+
+  const validateXML = () => {
+    let localXml = value;
+    if (!localXml) {
+      localXml = initialXml;
+    }
+    try {
+      Blockly.utils.xml.textToDom(localXml);
+      dispatch(deleteError(index, "xml"));
+    } catch (err) {
+      console.error("Invalid XML:", err);
+      dispatch(setError(index, "xml"));
+    }
+
+    if (!task) {
+      localXml = localXml.replace('deletable="false"', 'deletable="true"');
+    }
+
+    setXmlState(localXml);
+  };
+
+  // Funktion zum Speichern des aktuellen Workspace-XMLs
+  const saveCurrentXml = () => {
+    const workspace = Blockly.getMainWorkspace();
+    if (!workspace) {
+      console.warn("Blockly workspace not found for saving.");
+      return;
+    }
+    try {
+      const currentXmlString = Blockly.Xml.domToText(
+        Blockly.Xml.workspaceToDom(workspace),
       );
+      dispatch(changeContent(currentXmlString, index, "xml"));
+      setInput(moment().format("LTS"));
+      setSubmitted(true);
+
+      if (onXmlChange) onXmlChange(currentXmlString);
+
+      setTimeout(() => setSubmitted(false), 3000);
+    } catch (e) {
+      console.error("Failed to serialize current workspace XML:", e);
     }
-    if (state.checked !== this.state.checked && this.state.checked) {
-      this.isError();
+  };
+
+  // 🔥 Funktion zum Zurücksetzen des Workspaces
+  const resetWorkspace = () => {
+    const workspace = Blockly.getMainWorkspace();
+    if (!workspace) {
+      console.warn("Blockly workspace not found for reset.");
+      return;
     }
-    if (props.xml !== this.props.xml) {
-      // check if there is at least one block, otherwise the workspace cannot be submitted
-      var workspace = Blockly.getMainWorkspace();
-      var areBlocks = workspace.getAllBlocks().length > 0;
-      this.setState({ disabled: !areBlocks });
+
+    try {
+      // 🔥 Verwende den initialXml-Wert (oder initialXml als Fallback)
+      const resetXml = value || initialXml;
+      const xmlDom = Blockly.utils.xml.textToDom(resetXml);
+
+      // 🔥 Deaktiviere Events, um unnötige Callbacks zu vermeiden
+      Blockly.Events.disable();
+      // 🔥 Lösche den Workspace und lade das Reset-XML
+      Blockly.Xml.clearWorkspaceAndLoadFromXml(xmlDom, workspace);
+      // 🔥 Aktiviere Events wieder
+      Blockly.Events.enable();
+
+      // 🔥 Setze disabled Status basierend auf dem Reset-XML
+      const tempWorkspace = new Blockly.Workspace();
+      Blockly.Xml.domToWorkspace(xmlDom, tempWorkspace);
+      const hasBlocks = tempWorkspace.getAllBlocks().length > 0;
+      tempWorkspace.dispose();
+      setDisabled(!hasBlocks);
+
+      console.log("BlocklyExample: Workspace reset to initial state.");
+    } catch (e) {
+      console.error("Failed to reset workspace:", e);
+      setSnackbar({
+        open: true,
+        type: "error",
+        key: Date.now(),
+        message: "Fehler beim Zurücksetzen des Workspace.",
+      });
     }
-  }
+  };
 
-  isError = () => {
-    if (this.state.checked) {
-      var xml = this.props.value;
-      // check if value is valid xml;
-      try {
-        Blockly.utils.xml.textToDom(xml);
-        this.props.deleteError(this.props.index, "xml");
-      } catch (err) {
-        xml = initialXml;
-        // not valid xml, throw error in redux store
-        this.props.setError(this.props.index, "xml");
+  // Funktion, die aufgerufen wird, wenn sich der Workspace ändert (mit Debouncing)
+  const handleWorkspaceChanged = () => {
+    // console.log("BlocklyExample: Workspace changed, scheduling save..."); // 🔧 Debug-Log
+    // if (debounceTimerRef.current) {
+    //   clearTimeout(debounceTimerRef.current);
+    // }
+    // debounceTimerRef.current = setTimeout(() => {
+    //   console.log("BlocklyExample: Debounced save triggered."); // 🔧 Debug-Log
+    //   saveCurrentXml();
+    // }, 500); // 500ms Verzögerung
+  };
+
+  // Cleanup: Lösche den Timer beim Entfernen der Komponente
+  useEffect(() => {
+    return () => {
+      if (debounceTimerRef.current) {
+        clearTimeout(debounceTimerRef.current);
       }
-      if (!this.props.task) {
-        // instruction can also display only one block, which does not necessarily
-        // have to be the initial block
-        xml = xml.replace('deletable="false"', 'deletable="true"');
+    };
+  }, []);
+
+  // Effekt zum Setzen von 'disabled', wenn sich xmlState ändert (z.B. initial)
+  useEffect(() => {
+    if (xmlState) {
+      try {
+        const tempWorkspace = new Blockly.Workspace();
+        const xmlDom = Blockly.utils.xml.textToDom(xmlState);
+        Blockly.Xml.domToWorkspace(xmlDom, tempWorkspace);
+        const hasBlocks = tempWorkspace.getAllBlocks().length > 0;
+        setDisabled(!hasBlocks);
+        tempWorkspace.dispose();
+      } catch (e) {
+        console.error("Could not validate initial XML for block count:", e);
+        setDisabled(true);
       }
-      this.setState({ xml: xml });
     } else {
-      this.props.deleteError(this.props.index, "xml");
+      setDisabled(true);
     }
-  };
+  }, [xmlState]);
 
-  onChange = (value) => {
-    var oldValue = this.state.checked;
-    this.setState({ checked: value });
-    if (oldValue !== value && !value) {
-      this.props.deleteError(this.props.index, "xml");
-      this.props.deleteProperty(this.props.index, "xml");
-    }
+  // 🔥 Funktionen für Dialog-Öffnen/Schließen
+  const openDialog = () => {
+    setDialogOpen(true);
   };
-
-  setXml = () => {
-    var xml = this.props.xml;
-    this.props.changeContent(xml, this.props.index, "xml");
-    this.setState({ input: moment(Date.now()).format("LTS") });
+  const closeDialog = () => {
+    setDialogOpen(false);
   };
 
-  render() {
-    return (
-      <div
-        style={{
-          marginBottom: "10px",
-          padding: "18.5px 14px",
-          borderRadius: "25px",
-          border: "1px solid lightgrey",
-          width: "calc(100% - 28px)",
-        }}
-      >
-        {!this.props.task ? (
-          <FormControlLabel
-            labelPlacement="end"
-            label={"Blockly Beispiel"}
-            control={
-              <Switch
-                checked={this.state.checked}
-                onChange={(e) => this.onChange(e.target.checked)}
+  return (
+    <Box
+      sx={{
+        mb: 2,
+        p: 2,
+        borderRadius: "16px",
+        border: "1px solid #ccc",
+        width: "100%",
+        boxSizing: "border-box",
+        bgcolor: theme.palette.background.paper,
+      }}
+    >
+      <Typography variant="h6" sx={{ mb: 1 }}>
+        Blockly Beispiel
+      </Typography>
+
+      {/* Hinweise */}
+      {!value ? (
+        <FormHelperText sx={{ color: theme.palette.text.secondary }}>
+          Reiche deine Blöcke ein, indem du auf den
+          <strong>
+            {" "}
+            "
+            {task
+              ? Blockly.Msg.builder_solution_submit
+              : Blockly.Msg.builder_example_submit}
+            "
+          </strong>{" "}
+          Button klickst.
+        </FormHelperText>
+      ) : input ? (
+        <FormHelperText>Letzte Einreichung um {input} Uhr.</FormHelperText>
+      ) : null}
+
+      {!task && (
+        <FormHelperText sx={{ color: theme.palette.text.secondary }}>
+          {Blockly.Msg.builder_comment}
+        </FormHelperText>
+      )}
+
+      {/* Blockly Workspace */}
+      {xmlState && (
+        <Box sx={{ mt: 2, position: "relative" }}>
+          {/* Animiertes Checkmark */}
+          <AnimatePresence>
+            {submitted && (
+              <motion.div
+                key="checkmark"
+                initial={{ opacity: 0, scale: 0.5, y: -10 }}
+                animate={{ opacity: 1, scale: 1, y: 0 }}
+                exit={{ opacity: 0, scale: 0.5, y: -10 }}
+                transition={{ duration: 0.4 }}
+                style={{
+                  position: "absolute",
+                  top: 8,
+                  right: 8,
+                  zIndex: 5,
+                  color: theme.palette.success.main,
+                }}
+              >
+                <CheckCircle fontSize="large" />
+              </motion.div>
+            )}
+          </AnimatePresence>
+
+          <Grid
+            container
+            sx={{
+              borderRadius: 1,
+              display: "flex",
+              justifyContent: "center",
+              alignItems: "center",
+              boxSizing: "border-box",
+              p: 1,
+              border: submitted
+                ? `2px solid ${theme.palette.success.main}`
+                : "1px solid transparent",
+              transition: "border 0.3s ease-in-out",
+            }}
+          >
+            <Grid item xs={12}>
+              <BlocklyWindow
+                scroll
+                blockDisabled={task}
+                trashcan={false}
+                initialXml={value}
+                blocklyCSS={{ height: "40vh", width: "100%" }}
+                onWorkspaceChanged={handleWorkspaceChanged}
               />
-            }
-          />
-        ) : (
-          <FormLabel style={{ color: "black" }}>
-            {Blockly.Msg.builder_solution}
-          </FormLabel>
-        )}
-        {this.state.checked ? (
-          !this.props.value || this.props.error ? (
-            <FormHelperText
-              style={{ lineHeight: "initial" }}
-              className={this.props.classes.errorColor}
-            >{`Reiche deine Blöcke ein, indem du auf den '${
-              this.props.task
+            </Grid>
+          </Grid>
+
+          <Box sx={{ display: "flex", justifyContent: "space-between", p: 1 }}>
+            {/* 🔥 Reset-Button links */}
+            <Button
+              variant="outlined"
+              color="secondary"
+              onClick={openDialog} // Öffnet den Bestätigungsdialog
+              startIcon={<RotateLeft />}
+            >
+              Workspace zurücksetzen
+            </Button>
+
+            <Button
+              variant="contained"
+              color="primary"
+              onClick={saveCurrentXml} // Der Button ruft es auch manuell auf (ohne Debounce)
+              disabled={disabled}
+              sx={{ height: "40px" }}
+              startIcon={<FileUpload />}
+            >
+              {task
                 ? Blockly.Msg.builder_solution_submit
-                : Blockly.Msg.builder_example_submit
-            }'-Button klickst.`}</FormHelperText>
-          ) : this.state.input ? (
-            <FormHelperText style={{ lineHeight: "initial" }}>
-              Die letzte Einreichung erfolgte um {this.state.input} Uhr.
-            </FormHelperText>
-          ) : null
-        ) : null}
-        {this.state.checked && !this.props.task ? (
-          <FormHelperText style={{ lineHeight: "initial" }}>
-            {Blockly.Msg.builder_comment}
-          </FormHelperText>
-        ) : null}
-        {/* ensure that the correct xml-file is displayed in the workspace */}
-        {this.state.checked && this.state.xml
-          ? (() => {
-              return (
-                <div style={{ marginTop: "10px" }}>
-                  <Grid
-                    container
-                    className={
-                      !this.props.value || this.props.error
-                        ? this.props.classes.errorBorder
-                        : null
-                    }
-                  >
-                    <Grid item xs={12}>
-                      <BlocklyWindow
-                        blockDisabled={this.props.task}
-                        trashcan={false}
-                        initialXml={this.state.xml}
-                        blocklyCSS={{ height: "500px" }}
-                      />
-                    </Grid>
-                  </Grid>
-                  <Button
-                    className={
-                      !this.props.value || this.props.error
-                        ? this.props.classes.errorButton
-                        : null
-                    }
-                    style={{
-                      marginTop: "5px",
-                      height: "40px",
-                    }}
-                    variant="contained"
-                    color="primary"
-                    disabled={this.state.disabled}
-                    onClick={() => this.setXml()}
-                  >
-                    {this.props.task
-                      ? Blockly.Msg.builder_solution_submit
-                      : Blockly.Msg.builder_example_submit}
-                  </Button>
-                </div>
-              );
-            })()
-          : null}
-      </div>
-    );
-  }
-}
-
-BlocklyExample.propTypes = {
-  changeContent: PropTypes.func.isRequired,
-  deleteProperty: PropTypes.func.isRequired,
-  setError: PropTypes.func.isRequired,
-  deleteError: PropTypes.func.isRequired,
-  xml: PropTypes.string.isRequired,
-};
+                : Blockly.Msg.builder_example_submit}
+            </Button>
+          </Box>
+        </Box>
+      )}
 
-const mapStateToProps = (state) => ({
-  xml: state.workspace.code.xml,
-});
+      {/* 🔥 Snackbar */}
+      <Snackbar
+        open={snackbar.open}
+        message={snackbar.message}
+        type={snackbar.type}
+        key={snackbar.key}
+        onClose={() => setSnackbar((s) => ({ ...s, open: false }))}
+      />
 
-export default connect(mapStateToProps, {
-  changeContent,
-  deleteProperty,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(BlocklyExample));
+      {/* 🔥 Bestätigungsdialog */}
+      <Dialog
+        open={dialogOpen}
+        title="Workspace zurücksetzen?"
+        content="Möchtest du den Workspace wirklich auf den Anfangszustand zurücksetzen? Alle deine Änderungen gehen verloren."
+        onClose={closeDialog}
+        onClick={closeDialog} // Schließt bei Klick auf Overlay/Abbrechen
+        button="Abbrechen"
+      >
+        <div
+          style={{
+            marginTop: "10px",
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: "8px",
+          }}
+        >
+          <Button variant="outlined" onClick={closeDialog}>
+            Abbrechen
+          </Button>
+          <Button
+            variant="contained"
+            color="secondary"
+            onClick={() => {
+              resetWorkspace(); // Führt das Zurücksetzen aus
+              closeDialog(); // Schließt den Dialog
+            }}
+          >
+            Zurücksetzen
+          </Button>
+        </div>
+      </Dialog>
+    </Box>
+  );
+};
+
+export default BlocklyExample;
diff --git a/src/components/Tutorial/Builder/BuildSlide.jsx b/src/components/Tutorial/Builder/BuildSlide.jsx
new file mode 100644
index 00000000..5071edf7
--- /dev/null
+++ b/src/components/Tutorial/Builder/BuildSlide.jsx
@@ -0,0 +1,111 @@
+import { motion } from "framer-motion";
+import {
+  Box,
+  Card,
+  CardContent,
+  FormControl,
+  InputLabel,
+  MenuItem,
+  Select,
+} from "@mui/material";
+import { useTheme } from "@mui/styles";
+import { useState } from "react";
+
+const variants = {
+  initial: { opacity: 0, x: 100 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -100 },
+};
+
+const BuildSlide = ({
+  children,
+  title,
+  stepNumber,
+  setSteps,
+  steps,
+  type,
+  setType,
+}) => {
+  const theme = useTheme();
+  const updateStep = (index, key, value) => {
+    setType(value);
+    const updated = [...steps];
+    updated[index][key] = value;
+    setSteps(updated);
+  };
+
+  return (
+    <motion.div
+      variants={variants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      transition={{ duration: 0.4 }}
+      style={{
+        position: "absolute", // wichtig: übereinander stapeln
+        top: 0,
+        left: 0,
+        width: "100%",
+        height: "100%",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <Card sx={{ width: "100%", overflow: "auto", maxHeight: "80vh" }}>
+        <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+          {" "}
+          {(title || stepNumber !== undefined) && (
+            <div>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                }}
+              >
+                <Box
+                  sx={{
+                    p: 0.5,
+                    border: "1px solid #ddd",
+                    borderRadius: "10%",
+                    fontWeight: "600",
+                    fontSize: "0.9rem",
+                  }}
+                >
+                  {`Schritt ${stepNumber}`}
+                </Box>
+                <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+                  {!(type === "instruction" || type === "finish") && (
+                    <FormControl size="small" fullWidth>
+                      <InputLabel id="category-label">Kategorie</InputLabel>
+                      <Select
+                        labelId="category-label"
+                        label="Kategorie"
+                        value={type}
+                        sx={{
+                          borderColor: theme.palette.primary.main,
+                        }}
+                        onChange={(e) =>
+                          updateStep(stepNumber - 1, "type", e.target.value)
+                        }
+                      >
+                        <MenuItem value="task">Aufgabe</MenuItem>
+                        <MenuItem value="question">Fragestellung</MenuItem>
+                        <MenuItem value="blockly">Blockly-Aufgabe</MenuItem>
+                      </Select>
+                    </FormControl>
+                  )}
+                </Box>
+              </Box>
+
+              <h2>{title}</h2>
+            </div>
+          )}
+          {children}
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+};
+
+export default BuildSlide;
diff --git a/src/components/Tutorial/Builder/Builder.jsx b/src/components/Tutorial/Builder/Builder.jsx
index 79dbbb71..840206c9 100644
--- a/src/components/Tutorial/Builder/Builder.jsx
+++ b/src/components/Tutorial/Builder/Builder.jsx
@@ -1,767 +1,730 @@
-import React, { Component } from "react";
+import React, { useEffect, useState, useRef } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
+import { useSelector } from "react-redux";
+import { useHistory } from "react-router-dom";
+
+import TutorialBuilderProgressCard from "./TutorialBuilderProgessCard";
+import BuildSlide from "./BuildSlide";
+import Breadcrumbs from "@/components/ui/Breadcrumbs";
+import AppSnackbar from "@/components/Snackbar";
+import Dialog from "@/components/ui/Dialog";
+import HardwareCard from "../TutorialItem/HardwareCard";
+import WhatNext from "./WhatNext";
+import QuestionList from "./QuestionList";
+import BlocklyExample from "./BlocklyExample";
+
+import { Box, Button, Typography, CircularProgress } from "@mui/material";
 import {
-  checkError,
-  readJSON,
-  jsonString,
-  progress,
-  tutorialId,
-  resetTutorial as resetTutorialBuilder,
-} from "../../../actions/tutorialBuilderActions";
-import {
-  getAllTutorials,
-  getUserTutorials,
-  getTutorials,
-  resetTutorial,
-  deleteTutorial,
-  tutorialProgress,
-} from "../../../actions/tutorialActions";
-import { clearMessages } from "../../../actions/messageActions";
-
-import axios from "axios";
-import { withRouter } from "react-router-dom";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faEyeSlash, faUserCheck } from "@fortawesome/free-solid-svg-icons";
-
-import Breadcrumbs from "../../ui/Breadcrumbs";
-import Textfield from "./Textfield";
-import Difficulty from "./Difficulty";
-import Step from "./Step";
-import Dialog from "../../ui/Dialog";
-import Snackbar from "../../Snackbar";
-import Public from "./Public";
-import Review from "./Review";
-
-import withStyles from "@mui/styles/withStyles";
-import Button from "@mui/material/Button";
-import Backdrop from "@mui/material/Backdrop";
-import CircularProgress from "@mui/material/CircularProgress";
-import Divider from "@mui/material/Divider";
-import FormHelperText from "@mui/material/FormHelperText";
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import InputLabel from "@mui/material/InputLabel";
-import MenuItem from "@mui/material/MenuItem";
-import FormControl from "@mui/material/FormControl";
-import Select from "@mui/material/Select";
-import * as Blockly from "blockly";
-
-const styles = (theme) => ({
-  backdrop: {
-    zIndex: theme.zIndex.drawer + 1,
-    color: "#fff",
-  },
-  errorColor: {
-    color: theme.palette.error.dark,
+  Info,
+  Save,
+  CheckCircle,
+  WarningAmber,
+  Error as ErrorIcon,
+  Visibility,
+} from "@mui/icons-material";
+import { useTheme } from "@mui/styles";
+import "@uiw/react-md-editor/markdown-editor.css";
+import "@uiw/react-markdown-preview/markdown.css";
+import MDEditor from "@uiw/react-md-editor";
+import { motion, AnimatePresence } from "framer-motion";
+import { useLocation } from "react-router-dom";
+
+// Hilfsfunktionen
+const createInitialSteps = () => [
+  {
+    id: "intro",
+    title: "Einleitung",
+    subtitle: "Starte hier!",
+    type: "instruction",
   },
-  errorButton: {
-    marginTop: "5px",
-    height: "40px",
-    backgroundColor: theme.palette.error.dark,
-    "&:hover": {
-      backgroundColor: theme.palette.error.dark,
-    },
+  {
+    id: "finish",
+    title: "Abschluss",
+    type: "finish",
+    subtitle: "Übersicht & Zusammenfassung",
   },
+];
+
+const buildTutorialPayload = ({
+  title,
+  subtitle,
+  difficulty,
+  learnings,
+  selectedHardware,
+  steps,
+  isPublic,
+  review,
+  creator,
+  subjects,
+  topics,
+  duration,
+  year,
+}) => ({
+  public: isPublic,
+  review,
+  creator,
+  title,
+  subtitle,
+  difficulty,
+  learnings,
+  hardware: selectedHardware,
+  subjects,
+  topics,
+  duration,
+  year,
+
+  steps: steps.map((step) => ({
+    id: step.id,
+    title: step.title,
+    subtitle: step.subtitle || "",
+    text: step.text || "",
+    type: step.type,
+    questionData: step.questionData || null,
+    xml: step.xml || null,
+  })),
 });
 
-class Builder extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      tutorial: "new",
-      open: false,
-      title: "",
-      public: false,
-      difficulty: "",
-      content: "",
-      string: false,
-      snackbar: false,
-      key: "",
-      message: "",
-    };
-    this.inputRef = React.createRef();
-  }
+const validateRequiredFields = ({ title, subtitle }) => {
+  const missing = [];
+  if (!title.trim()) missing.push("Titel");
+  if (!subtitle.trim()) missing.push("Untertitel");
+  return missing;
+};
 
-  componentDidMount() {
-    this.props.tutorialProgress();
-    // retrieve tutorials only if a potential user is loaded - authentication
-    // is finished (success or failed)
-    if (!this.props.authProgress) {
-      if (this.props.user.role === "admin") {
-        this.props.getAllTutorials();
-      } else {
-        this.props.getUserTutorials();
-      }
+// 🔥 HILFSFUNKTION: Tiefer Vergleich (einfach, aber ausreichend für Tutorial-Steps)
+const deepEqual = (obj1, obj2) => JSON.stringify(obj1) === JSON.stringify(obj2);
+
+// Hauptkomponente
+const Builder = () => {
+  const params = useLocation();
+  const isValidObjectId = (id) => /^[0-9a-fA-F]{24}$/.test(id);
+
+  const existingTutorialId = isValidObjectId(params.pathname.split("/")[2])
+    ? params.pathname.split("/")[2]
+    : undefined;
+  const [existingTutorial, setExistingTutorial] = useState(null);
+  const [loading, setLoading] = useState(!!existingTutorialId);
+
+  const theme = useTheme();
+  const user = useSelector((state) => state.auth.user);
+  const token = useSelector((state) => state.auth.token);
+  const history = useHistory();
+
+  //  Tutorial-Daten
+  const [title, setTitle] = useState("");
+  const [subtitle, setSubtitle] = useState("");
+  const [steps, setSteps] = useState(createInitialSteps());
+  const [difficulty, setDifficulty] = useState(3);
+  const [selectedHardware, setSelectedHardware] = useState([]);
+  const [isPublic] = useState(true);
+  const [review] = useState(false);
+  const [creator] = useState(
+    existingTutorial?.creator || user.email || "unknown",
+  );
+  const [type, setType] = useState("task");
+  const [learnings, setLearnings] = useState(
+    existingTutorial?.learnings || [{ title: "", description: "" }],
+  );
+  // Fach und Themenbereich
+  const [subjects, setSubjects] = useState(existingTutorial?.subjects || []); // Array!
+  const [topics, setTopics] = useState(existingTutorial?.topics || []);
+  const [duration, setDuration] = useState(existingTutorial?.duration || "");
+  const [year, setYear] = useState(existingTutorial?.year || "");
+  //  UI & Navigation
+  const [activeStep, setActiveStep] = useState(0);
+
+  // 🔥 NEU: Zustand für Autosave
+  const [autosaveEnabled, setAutosaveEnabled] = useState(true);
+
+  //  Speichern
+  const [saveButtonDisabled, setSaveButtonDisabled] = useState(false);
+  const [savingState, setSavingState] = useState("idle");
+  const [savedTutorialId, setSavedTutorialId] = useState(null);
+
+  //  Snackbar
+  const [snackbarOpen, setSnackbarOpen] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    type: "success",
+    key: 0,
+    message: "",
+  });
+
+  // 🔥 NEU: Ref für letzten gespeicherten Zustand
+  const lastSavedState = useRef({
+    title: "",
+    subtitle: "",
+    steps: [],
+    difficulty: 3,
+    learnings: [],
+    selectedHardware: [],
+  });
+
+  // 🔥 NEU: Ref, um laufende Requests zu verhindern
+  const isAutosaving = useRef(false);
+
+  useEffect(() => {
+    if (!existingTutorialId) {
+      setLoading(false);
+      return;
     }
-  }
 
-  componentDidUpdate(props, state) {
-    if (
-      props.authProgress !== this.props.authProgress &&
-      !this.props.authProgress
-    ) {
-      if (this.props.user.role === "admin") {
-        // authentication is completed
-        this.props.getAllTutorials();
-      } else {
-        this.props.getUserTutorials();
-      }
-    }
-    if (props.message !== this.props.message) {
-      if (this.props.message.id === "GET_TUTORIALS_FAIL") {
-        // alert(this.props.message.msg);
-        this.props.clearMessages();
-      } else if (this.props.message.id === "TUTORIAL_DELETE_SUCCESS") {
-        this.onChange("new");
-        this.setState({
-          snackbar: true,
-          key: Date.now(),
-          message: `Das Tutorial wurde erfolgreich gelöscht.`,
-          type: "success",
-        });
-      } else if (this.props.message.id === "TUTORIAL_DELETE_FAIL") {
-        this.setState({
-          snackbar: true,
-          key: Date.now(),
-          message: `Fehler beim Löschen des Tutorials. Versuche es noch einmal.`,
-          type: "error",
-        });
+    const fetchTutorial = async () => {
+      try {
+        const res = await fetch(
+          `${import.meta.env.VITE_BLOCKLY_API}/tutorial/${existingTutorialId}`,
+          {
+            headers: {
+              Authorization: `Bearer ${token}`,
+            },
+          },
+        );
+        if (res.ok) {
+          const tutorial = await res.json();
+          setExistingTutorial(tutorial.tutorial);
+        } else {
+          console.error("Tutorial nicht gefunden");
+        }
+      } catch (err) {
+        console.error("Fehler beim Laden des Tutorials:", err);
+      } finally {
+        setLoading(false);
       }
-    }
-  }
+    };
 
-  componentWillUnmount() {
-    this.resetFull();
-    this.props.resetTutorial();
-    if (this.props.message.msg) {
-      this.props.clearMessages();
+    fetchTutorial();
+  }, [existingTutorialId, token]);
+
+  // Sobald existingTutorial geladen ist → States befüllen
+  useEffect(() => {
+    if (existingTutorial) {
+      setTitle(existingTutorial.title || "");
+      setSubtitle(existingTutorial.subtitle || "");
+      setSteps(existingTutorial.steps || createInitialSteps());
+      setDifficulty(existingTutorial.difficulty || 3);
+      setSelectedHardware(existingTutorial.hardware || []);
+      setTopics(existingTutorial.topics || []);
+      setSubjects(existingTutorial.subjects || []);
+      setDuration(existingTutorial.duration || "");
+      setYear(existingTutorial.year || "");
+      setLearnings(
+        existingTutorial.learnings || [{ title: "", description: "" }],
+      );
+    } else if (!existingTutorialId) {
+      setTitle("");
+      setSubtitle("");
+      setSteps(createInitialSteps());
+      setDifficulty(3);
+      setSelectedHardware([]);
+      setLearnings([{ title: "", description: "" }]);
     }
-  }
+  }, [existingTutorial, existingTutorialId]);
+
+  // 🔥 AUTOSAVE: Wenn activeStep wechselt UND autosave aktiv UND sich was geändert hat
+  useEffect(() => {
+    if (!autosaveEnabled || isAutosaving.current) return;
+
+    // Zustand, den wir speichern würden
+    const currentState = {
+      title,
+      subtitle,
+      steps,
+      difficulty,
+      learnings,
+      selectedHardware,
+      topics,
+      subjects,
+      duration,
+      year,
+    };
 
-  uploadJsonFile = (jsonFile) => {
-    this.props.progress(true);
-    if (jsonFile.type !== "application/json") {
-      this.props.progress(false);
-      this.setState({
-        open: true,
-        string: false,
-        title: "Unzulässiger Dateityp",
-        content:
-          "Die übergebene Datei entspricht nicht dem geforderten Format. Es sind nur JSON-Dateien zulässig.",
-      });
-    } else {
-      var reader = new FileReader();
-      reader.readAsText(jsonFile);
-      reader.onloadend = () => {
-        this.readJson(reader.result, true);
-      };
+    // 🔥 Prüfe: Hat sich etwas geändert?
+    if (deepEqual(currentState, lastSavedState.current)) {
+      console.log(
+        "Keine Änderungen seit letztem Autosave – überspringe Request.",
+      );
+      return;
     }
-  };
 
-  uploadJsonString = () => {
-    this.setState({
-      open: true,
-      string: true,
-      title: "JSON-String einfügen",
-      content: "",
-    });
-  };
+    const autosave = async () => {
+      isAutosaving.current = true;
 
-  readJson = (jsonString, isFile) => {
-    try {
-      var result = JSON.parse(jsonString);
-      if (!this.checkSteps(result.steps)) {
-        result.steps = [{}];
+      const missing = validateRequiredFields({ title, subtitle });
+      if (missing.length > 0) {
+        console.warn("Autosave abgebrochen: Pflichtfelder fehlen");
+        isAutosaving.current = false;
+        return;
       }
-      this.props.readJSON(result);
-      this.setState({
-        snackbar: true,
-        key: Date.now(),
-        message: `${
-          isFile ? "Die übergebene JSON-Datei" : "Der übergebene JSON-String"
-        } wurde erfolgreich übernommen.`,
-        type: "success",
-      });
-    } catch (err) {
-      this.props.progress(false);
-      this.props.jsonString("");
-      this.setState({
-        open: true,
-        string: false,
-        title: "Ungültiges JSON-Format",
-        content: `${
-          isFile ? "Die übergebene Datei" : "Der übergebene String"
-        } enthält nicht valides JSON. Bitte überprüfe ${
-          isFile ? "die JSON-Datei" : "den JSON-String"
-        } und versuche es erneut.`,
+
+      const payload = buildTutorialPayload({
+        title,
+        subtitle,
+        difficulty,
+        learnings,
+        selectedHardware,
+        steps,
+        isPublic,
+        review,
+        creator,
+        subjects,
+        topics,
+        duration,
+        year,
       });
-    }
-  };
 
-  checkSteps = (steps) => {
-    if (!(steps && steps.length > 0)) {
-      return false;
-    }
-    return true;
-  };
+      try {
+        let url = `${import.meta.env.VITE_BLOCKLY_API}/tutorial/`;
+        let method = "POST";
 
-  toggle = () => {
-    this.setState({ open: !this.state });
-  };
+        if (savedTutorialId) {
+          url = `${import.meta.env.VITE_BLOCKLY_API}/tutorial/${savedTutorialId}`;
+          method = "PUT";
+        } else if (existingTutorialId) {
+          url = `${import.meta.env.VITE_BLOCKLY_API}/tutorial/${existingTutorialId}`;
+          method = "PUT";
+        }
 
-  onChange = (value) => {
-    this.props.resetTutorialBuilder();
-    this.props.tutorialId("");
-    this.setState({ tutorial: value });
-  };
+        const response = await fetch(url, {
+          method,
+          headers: {
+            "Content-Type": "application/json",
+            Authorization: `Bearer ${token}`,
+          },
+          body: JSON.stringify(payload),
+        });
+
+        if (!response.ok) throw new Error("Autosave Netzwerkfehler");
 
-  onChangeId = (value) => {
-    this.props.tutorialId(value);
-    if (this.state.tutorial === "change") {
-      this.props.progress(true);
-      var tutorial = this.props.tutorials.filter(
-        (tutorial) => tutorial._id === value,
-      )[0];
-      this.props.readJSON(tutorial);
-      this.setState({
-        snackbar: true,
+        const data = await response.json();
+        if (!savedTutorialId && !existingTutorialId) {
+          setSavedTutorialId(data.tutorial._id);
+        }
+
+        // 🔥 Aktualisiere den letzten gespeicherten Zustand
+        lastSavedState.current = { ...currentState };
+      } catch (err) {
+        console.error("Autosave fehlgeschlagen:", err);
+      } finally {
+        isAutosaving.current = false;
+      }
+    };
+
+    autosave();
+  }, [
+    activeStep,
+    autosaveEnabled,
+    title,
+    subtitle,
+    steps,
+    learnings,
+    selectedHardware,
+    difficulty,
+  ]);
+
+  // 📤 Speichern-Funktion (wie bisher)
+  const saveTutorial = async () => {
+    const missing = validateRequiredFields({ title, subtitle });
+    if (missing.length > 0) {
+      setSavingState("missing");
+      setSnackInfo({
+        type: "error",
         key: Date.now(),
-        message: `Das ausgewählte Tutorial "${tutorial.title}" wurde erfolgreich übernommen.`,
-        type: "success",
+        message: "Bitte fülle alle Pflichtfelder aus.",
       });
+      setSnackbarOpen(true);
+      return;
     }
-  };
 
-  resetFull = () => {
-    this.props.resetTutorialBuilder();
-    this.setState({
-      snackbar: true,
-      key: Date.now(),
-      message: `Das Tutorial wurde erfolgreich zurückgesetzt.`,
-      type: "success",
+    console.log("savign", steps);
+    const payload = buildTutorialPayload({
+      title,
+      subtitle,
+      difficulty,
+      learnings,
+      selectedHardware,
+      steps,
+      isPublic,
+      review,
+      creator,
+      subjects,
+      topics,
+      duration,
+      year,
     });
-    window.scrollTo(0, 0);
-  };
+    setSaveButtonDisabled(true);
+    setSavingState("loading");
 
-  resetTutorial = () => {
-    var tutorial = this.props.tutorials.filter(
-      (tutorial) => tutorial._id === this.props.id,
-    )[0];
-    this.props.readJSON(tutorial);
-    this.setState({
-      snackbar: true,
-      key: Date.now(),
-      message: `Das Tutorial ${tutorial.title} wurde erfolgreich auf den ursprünglichen Stand zurückgesetzt.`,
-      type: "success",
-    });
-    window.scrollTo(0, 0);
-  };
+    try {
+      let url = `${import.meta.env.VITE_BLOCKLY_API}/tutorial/`;
+      let method = "POST";
+
+      if (savedTutorialId) {
+        url = `${import.meta.env.VITE_BLOCKLY_API}/tutorial/${savedTutorialId}`;
+        method = "PUT";
+      } else if (existingTutorialId) {
+        url = `${import.meta.env.VITE_BLOCKLY_API}/tutorial/${existingTutorialId}`;
+        method = "PUT";
+      }
 
-  submit = () => {
-    var isError = this.props.checkError();
-    if (isError) {
-      this.setState({
-        snackbar: true,
-        key: Date.now(),
-        message: `Die Angaben für das Tutorial sind nicht vollständig.`,
-        type: "error",
+      const response = await fetch(url, {
+        method,
+        headers: {
+          "Content-Type": "application/json",
+          Authorization: `Bearer ${token}`,
+        },
+        body: JSON.stringify(payload),
       });
-      window.scrollTo(0, 0);
-      return false;
-    } else {
-      // export steps without attribute 'url'
-      var steps = this.props.steps;
-      var newTutorial = new FormData();
-      newTutorial.append("title", this.props.title);
-      newTutorial.append("difficulty", this.props.difficulty);
-      newTutorial.append("public", this.props.public);
-      newTutorial.append("review", this.props.review);
-      steps.forEach((step, i) => {
-        if (step._id) {
-          newTutorial.append(`steps[${i}][_id]`, step._id);
-        }
-        newTutorial.append(`steps[${i}][type]`, step.type);
-        newTutorial.append(`steps[${i}][headline]`, step.headline);
-        newTutorial.append(`steps[${i}][text]`, step.text);
-        if (i === 0 && step.type === "instruction") {
-          if (step.requirements) {
-            // optional
-            step.requirements.forEach((requirement, j) => {
-              newTutorial.append(
-                `steps[${i}][requirements][${j}]`,
-                requirement,
-              );
-            });
-          }
-          step.hardware.forEach((hardware, j) => {
-            newTutorial.append(`steps[${i}][hardware][${j}]`, hardware);
-          });
-        }
-        if (step.xml) {
-          // optional
-          newTutorial.append(`steps[${i}][xml]`, step.xml);
-        }
+
+      if (!response.ok) throw new Error("Netzwerkfehler");
+
+      const data = await response.json();
+      setSavedTutorialId(
+        data.tutorial._id || existingTutorialId || savedTutorialId,
+      );
+      setSavingState("success");
+      setSnackInfo({
+        type: "success",
+        key: Date.now(),
+        message:
+          savedTutorialId || existingTutorialId
+            ? "Tutorial erfolgreich aktualisiert!"
+            : "Tutorial erfolgreich gespeichert!",
       });
-      return newTutorial;
-    }
-  };
 
-  submitNew = () => {
-    var newTutorial = this.submit();
-    if (newTutorial) {
-      const config = {
-        success: (res) => {
-          var tutorial = res.data.tutorial;
-          this.props.history.push(`/tutorial/${tutorial._id}`);
-        },
-        error: (err) => {
-          this.setState({
-            snackbar: true,
-            key: Date.now(),
-            message: `Fehler beim Erstellen des Tutorials. Versuche es noch einmal.`,
-            type: "error",
-          });
-          window.scrollTo(0, 0);
-        },
+      // 🔥 Aktualisiere auch nach manuellem Speichern
+      lastSavedState.current = {
+        title,
+        subtitle,
+        steps,
+        difficulty,
+        learnings,
+        selectedHardware,
       };
-      axios
-        .post(
-          `${import.meta.env.VITE_BLOCKLY_API}/tutorial/`,
-          newTutorial,
-          config,
-        )
-        .then((res) => {
-          res.config.success(res);
-        })
-        .catch((err) => {
-          err.config.error(err);
-        });
-    }
-  };
 
-  submitUpdate = () => {
-    var updatedTutorial = this.submit();
-    if (updatedTutorial) {
-      const config = {
-        success: (res) => {
-          var tutorial = res.data.tutorial;
-          this.props.history.push(`/tutorial/${tutorial._id}`);
-        },
-        error: (err) => {
-          this.setState({
-            snackbar: true,
-            key: Date.now(),
-            message: `Fehler beim Ändern des Tutorials. Versuche es noch einmal.`,
-            type: "error",
-          });
-          window.scrollTo(0, 0);
-        },
-      };
-      axios
-        .put(
-          `${import.meta.env.VITE_BLOCKLY_API}/tutorial/${this.props.id}`,
-          updatedTutorial,
-          config,
-        )
-        .then((res) => {
-          res.config.success(res);
-        })
-        .catch((err) => {
-          err.config.error(err);
-        });
+      setSnackbarOpen(true);
+    } catch (err) {
+      console.error("Speichern fehlgeschlagen:", err);
+      setSavingState("error");
+    } finally {
+      setSaveButtonDisabled(false);
     }
   };
 
-  render() {
-    if (this.props.user.role === "admin") {
-      var filteredTutorials = this.props.tutorials;
-    } else {
-      filteredTutorials = this.props.tutorials.filter(
-        (tutorial) => tutorial.creator === this.props.user.email,
-      );
-    }
+  // 🛠️ Hilfsfunktionen für Schritt-Updates
+  const updateStepField = (field, value) => {
+    const updated = [...steps];
+    updated[activeStep] = { ...updated[activeStep], [field]: value };
+    setSteps(updated);
+  };
 
-    // } else {
-    //   filteredTutorials = this.props.userTutorials.filter(
-    //     (tutorial) => tutorial.creator === this.props.user.email
-    //   );
+  const updateStepText = (text) => updateStepField("text", text);
+  const updateStepXml = (xml) => updateStepField("xml", xml);
+  const updateStepQuestions = (questionData) =>
+    updateStepField("questionData", questionData); // ✅ RICHTIG
 
+  // 🎨 Render
+  const currentStep = steps[activeStep] || {};
+  if (loading) {
     return (
-      <div>
-        <Breadcrumbs
-          content={[
-            { link: "/tutorial", title: "Tutorial" },
-            { link: "/tutorial/builder", title: "Builder" },
-          ]}
-        />
-
-        <h1>Tutorial-Builder</h1>
-
-        <RadioGroup
-          row
-          value={this.state.tutorial}
-          onChange={(e) => this.onChange(e.target.value)}
+      <Box sx={{ display: "flex", justifyContent: "center", mt: 4 }}>
+        <CircularProgress />
+      </Box>
+    );
+  }
+
+  return (
+    <Box>
+      <Breadcrumbs
+        content={[
+          { link: "/tutorial", title: "Tutorials" },
+          { link: "/tutorial/builder", title: "Tutorial Builder" },
+        ]}
+      />
+
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "row",
+          width: "100%",
+          height: "80vh",
+          p: 2,
+          gap: 4,
+        }}
+      >
+        <Box
+          sx={{
+            flex: "0 0 30%",
+            display: "flex",
+            flexDirection: "column",
+            gap: 2,
+          }}
         >
-          <FormControlLabel
-            style={{ color: "black" }}
-            value="new"
-            control={<Radio />}
-            label={Blockly.Msg.builder_createNew}
-            labelPlacement="end"
+          <TutorialBuilderProgressCard
+            title={title}
+            setTitle={setTitle}
+            subtitle={subtitle}
+            setSubtitle={setSubtitle}
+            steps={steps}
+            setSteps={setSteps}
+            difficulty={difficulty}
+            setDifficulty={setDifficulty}
+            selectedHardware={selectedHardware}
+            setSelectedHardware={setSelectedHardware}
+            activeStep={activeStep}
+            setActiveStep={setActiveStep}
+            autosaveEnabled={autosaveEnabled}
+            setAutosaveEnabled={setAutosaveEnabled}
+            subjects={subjects}
+            setSubjects={setSubjects}
+            topics={topics}
+            setTopics={setTopics}
+            duration={duration}
+            setDuration={setDuration}
+            year={year}
+            setYear={setYear}
           />
-          {filteredTutorials.length > 0 ? (
-            <div>
-              <FormControlLabel
-                style={{ color: "black" }}
-                disabled={this.props.index === 0}
-                value="change"
-                control={<Radio />}
-                label={Blockly.Msg.builder_changeExisting}
-                labelPlacement="end"
-              />
-              <FormControlLabel
-                style={{ color: "black" }}
-                disabled={this.props.index === 0}
-                value="delete"
-                control={<Radio />}
-                label={Blockly.Msg.builder_deleteExisting}
-                labelPlacement="end"
-              />
-            </div>
-          ) : null}
-        </RadioGroup>
-
-        <Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
-
-        {this.state.tutorial === "new" ? (
-          /*upload JSON*/
-          <div ref={this.inputRef}>
-            <input
-              style={{ display: "none" }}
-              accept="application/json"
-              onChange={(e) => {
-                this.uploadJsonFile(e.target.files[0]);
-              }}
-              id="open-json"
-              type="file"
-            />
-            <label htmlFor="open-json">
-              <Button
-                component="span"
-                style={{
-                  marginRight: "10px",
-                  marginBottom: "10px",
-                }}
-                variant="contained"
-                color="primary"
-              >
-                Datei laden
-              </Button>
-            </label>
+
+          <Button
+            variant="contained"
+            startIcon={<Save />}
+            onClick={saveTutorial}
+            disabled={saveButtonDisabled}
+          >
+            Tutorial speichern
+          </Button>
+          {existingTutorialId && (
             <Button
-              style={{
-                marginRight: "10px",
-                marginBottom: "10px",
-              }}
-              variant="contained"
-              color="primary"
-              onClick={() => this.uploadJsonString()}
+              variant="outlined"
+              startIcon={<Visibility />}
+              onClick={() =>
+                history.push(
+                  existingTutorialId
+                    ? `/tutorial/${existingTutorialId}`
+                    : "/tutorial",
+                )
+              }
+              disabled={saveButtonDisabled}
             >
-              String laden
+              Tutorial ansehen
             </Button>
-          </div>
-        ) : (
-          <FormControl variant="outlined" style={{ width: "100%" }}>
-            <InputLabel id="select-outlined-label">Tutorial</InputLabel>
-            <Select
-              variant="standard"
-              color="primary"
-              labelId="select-outlined-label"
-              value={this.props.id}
-              onChange={(e) => this.onChangeId(e.target.value)}
-              label="Tutorial"
-            >
-              {filteredTutorials.map((tutorial) => (
-                <MenuItem value={tutorial._id}>
-                  {tutorial.title}{" "}
-                  {tutorial.review && tutorial.public === false ? (
-                    <div>
-                      <FontAwesomeIcon icon={faUserCheck} />
-                      <FontAwesomeIcon icon={faEyeSlash} />
-                    </div>
-                  ) : tutorial.public === false ? (
-                    <FontAwesomeIcon icon={faEyeSlash} />
-                  ) : null}
-                </MenuItem>
-                /* ) : tutorial.public === false ? (
-                    <MenuItem value={tutorial._id}>
-                      {tutorial.title} <FontAwesomeIcon icon={faEyeSlash} />
-                    </MenuItem>
-                  ) : (
-                    <MenuItem value={tutorial._id}>{tutorial.title}</MenuItem>
-                  )} */
-              ))}
-            </Select>
-          </FormControl>
-        )}
-
-        <Divider variant="fullWidth" style={{ margin: "10px 0 15px 0" }} />
-
-        {this.state.tutorial === "new" ||
-        (this.state.tutorial === "change" && this.props.id !== "") ? (
-          /*Tutorial-Builder-Form*/
-          <div>
-            {this.props.error.type ? (
-              <FormHelperText
-                style={{ lineHeight: "initial" }}
-                className={this.props.classes.errorColor}
-              >{`Ein Tutorial muss mindestens jeweils eine Instruktion und eine Aufgabe enthalten.`}</FormHelperText>
-            ) : null}
-            {/* <Id error={this.props.error.id} value={this.props.id} /> */}
-            <Textfield
-              value={this.props.title}
-              property={"title"}
-              label={"Titel"}
-              error={this.props.error.title}
-            />
-            <div
-              style={{
-                borderRadius: "25px",
-                border: "1px solid lightgrey",
-                padding: "10px 14px 10px 10px",
-                marginBottom: "20px",
-              }}
+          )}
+        </Box>
+
+        {/* Main Content */}
+        <Box
+          sx={{
+            flex: "0 0 65%",
+            position: "relative",
+            display: "flex",
+            justifyContent: "center",
+            alignItems: "center",
+          }}
+        >
+          <AnimatePresence mode="wait">
+            <BuildSlide
+              title={currentStep.title}
+              stepNumber={activeStep + 1}
+              key={currentStep.id}
+              setType={setType}
+              type={currentStep.type}
+              setSteps={setSteps}
+              steps={steps}
             >
-              <Difficulty
-                value={this.props.difficulty}
-                property={"difficulty"}
-                label={"difficulty"}
-                error={this.props.error.difficulty}
-              />
-              <Divider
-                variant="fullWidth"
-                style={{ margin: "30px 0 10px 0" }}
-              />
-
-              <Review
-                value={this.props.review}
-                property={"review"}
-                label={"review"}
-                error={this.props.error.review}
-              />
-              <Divider
-                variant="fullWidth"
-                style={{ margin: "30px 0 10px 0" }}
-              />
-
-              {this.props.user.blocklyRole === "admin" ? (
-                <Public
-                  value={this.props.public}
-                  property={"public"}
-                  label={"public"}
-                  error={this.props.error.public}
+              <div data-color-mode="light">
+                <MDEditor
+                  height="35vh"
+                  value={currentStep.text || ""}
+                  onChange={updateStepText}
+                  preview="live"
                 />
-              ) : null}
-            </div>
-
-            {this.props.steps.map((step, i) => (
-              <Step step={step} index={i} key={i} />
-            ))}
-
-            {/*submit or reset*/}
-            {this.state.tutorial !== "delete" ? (
-              <div>
-                <Divider
-                  variant="fullWidth"
-                  style={{ margin: "30px 0 10px 0" }}
+              </div>
+              {currentStep.type === "blockly" && (
+                <BlocklyExample
+                  index={activeStep}
+                  value={currentStep.xml || ""}
+                  onXmlChange={updateStepXml}
                 />
-                {this.state.tutorial === "new" ? (
-                  <div>
-                    <Button
-                      style={{
-                        marginRight: "10px",
-                        marginTop: "10px",
-                      }}
-                      variant="contained"
-                      color="primary"
-                      onClick={() => this.submitNew()}
-                    >
-                      Tutorial erstellen
-                    </Button>
-                    <Button
-                      style={{ marginTop: "10px" }}
-                      variant="contained"
-                      onClick={() => this.resetFull()}
-                    >
-                      {Blockly.Msg.reset_text}
-                    </Button>
-                  </div>
-                ) : (
-                  <div>
-                    <Button
-                      style={{
-                        marginRight: "10px",
-                        marginTop: "10px",
+              )}
+
+              {currentStep.type === "question" && (
+                <QuestionList
+                  questions={currentStep.questionData || []}
+                  setQuestions={updateStepQuestions}
+                />
+              )}
+
+              {currentStep.type === "instruction" &&
+                selectedHardware.length > 0 && (
+                  <Box mt={2}>
+                    <Typography sx={{ fontWeight: "bold" }}>
+                      <Info sx={{ color: theme.palette.primary.main, mr: 1 }} />
+                      Benötigte Hardware
+                    </Typography>
+                    <Box
+                      sx={{
+                        display: "grid",
+                        gridTemplateColumns:
+                          "repeat(auto-fill, minmax(180px, 1fr))",
+                        gap: 2,
+                        justifyItems: "center",
+                        mt: 2,
+                        width: "100%",
                       }}
-                      variant="contained"
-                      color="primary"
-                      onClick={() => this.submitUpdate()}
                     >
-                      Tutorial ändern
-                    </Button>
-                    <Button
-                      style={{ marginTop: "10px" }}
-                      variant="contained"
-                      onClick={() => this.resetTutorial()}
-                    >
-                      {Blockly.Msg.reset_text}
-                    </Button>
-                  </div>
+                      {selectedHardware.map((sensor) => (
+                        <Box key={sensor} sx={{ width: "100%", maxWidth: 180 }}>
+                          <HardwareCard component={sensor} />
+                        </Box>
+                      ))}
+                    </Box>
+                  </Box>
                 )}
-              </div>
-            ) : null}
 
-            <Backdrop
-              className={this.props.classes.backdrop}
-              open={this.props.isProgress}
-            >
-              <CircularProgress color="inherit" />
-            </Backdrop>
-          </div>
-        ) : null}
+              {currentStep.type === "finish" && (
+                <WhatNext learnings={learnings} setLearnings={setLearnings} />
+              )}
+            </BuildSlide>
+          </AnimatePresence>
+        </Box>
+      </Box>
+
+      {/* Speicher-Dialog */}
+      <SaveStatusDialog
+        savingState={savingState}
+        onClose={() => setSavingState("idle")}
+        savedTutorialId={savedTutorialId}
+        history={history}
+        theme={theme}
+      />
+    </Box>
+  );
+};
 
-        {this.state.tutorial === "delete" && this.props.id !== "" ? (
-          <Button
-            className={this.props.classes.errorButton}
-            variant="contained"
-            color="primary"
-            onClick={() => this.props.deleteTutorial()}
-          >
-            Tutorial löschen
-          </Button>
-        ) : null}
-
-        <Dialog
-          open={this.state.open}
-          maxWidth={this.state.string ? "md" : "sm"}
-          fullWidth={this.state.string}
-          title={this.state.title}
-          content={this.state.content}
-          onClose={this.toggle}
-          onClick={this.toggle}
-          button={"Schließen"}
-          actions={
-            this.state.string ? (
-              <div>
+// 🔲 Dialog-Komponente (extrahiert für Übersicht)
+const SaveStatusDialog = ({
+  savingState,
+  onClose,
+  savedTutorialId,
+  history,
+  theme,
+}) => {
+  const renderContent = () => {
+    switch (savingState) {
+      case "loading":
+        return (
+          <>
+            <CircularProgress color="primary" />
+            <Typography variant="body2" color="text.secondary">
+              Bitte warten, das Tutorial wird gespeichert...
+            </Typography>
+          </>
+        );
+
+      case "missing":
+        return (
+          <>
+            <WarningAmber sx={{ fontSize: 64, color: "warning.main" }} />
+            <Typography variant="body1" fontWeight={600}>
+              Folgende Pflichtfelder fehlen noch:
+            </Typography>
+            <Box sx={{ mt: 1, textAlign: "left" }}>
+              <Typography color="error.main">• Titel</Typography>
+              <Typography color="error.main">• Untertitel</Typography>
+            </Box>
+            <Button variant="contained" sx={{ mt: 2 }} onClick={onClose}>
+              Verstanden
+            </Button>
+          </>
+        );
+
+      case "success":
+        return (
+          <>
+            <motion.div
+              initial={{ scale: 0 }}
+              animate={{ scale: 1 }}
+              transition={{ type: "spring", stiffness: 120 }}
+            >
+              <CheckCircle
+                sx={{ fontSize: 64, color: theme.palette.primary.main }}
+              />
+            </motion.div>
+            <Typography variant="body1" fontWeight={600}>
+              Tutorial erfolgreich gespeichert!
+            </Typography>
+            <Box sx={{ mt: 2, display: "flex", gap: 2 }}>
+              <Button
+                variant="outlined"
+                onClick={() => history.push("/tutorial")}
+              >
+                Zur Übersicht
+              </Button>
+              {savedTutorialId && (
                 <Button
-                  disabled={this.props.error.json || this.props.json === ""}
                   variant="contained"
-                  onClick={() => {
-                    this.toggle();
-                    this.props.progress(true);
-                    this.readJson(this.props.json, false);
-                  }}
-                  color="primary"
+                  onClick={() => history.push(`/tutorial/${savedTutorialId}`)}
                 >
-                  Bestätigen
+                  Zum Tutorial
                 </Button>
-                <Button
-                  onClick={() => {
-                    this.toggle();
-                    this.props.jsonString("");
-                  }}
-                  color="primary"
-                >
-                  Abbrechen
-                </Button>
-              </div>
-            ) : null
-          }
+              )}
+            </Box>
+          </>
+        );
+
+      case "error":
+        return (
+          <>
+            <ErrorIcon sx={{ fontSize: 64, color: "error.main" }} />
+            <Typography variant="body1" fontWeight={600}>
+              Beim Speichern ist ein Fehler aufgetreten.
+            </Typography>
+            <Button variant="contained" color="error" onClick={onClose}>
+              Schließen
+            </Button>
+          </>
+        );
+
+      default:
+        return null;
+    }
+  };
+
+  if (savingState === "idle") return null;
+
+  return (
+    <Dialog
+      open
+      fullWidth
+      maxWidth="xs"
+      title={
+        savingState === "loading"
+          ? "Tutorial wird gespeichert..."
+          : savingState === "success"
+            ? "Gespeichert!"
+            : savingState === "missing"
+              ? "Angaben unvollständig"
+              : "Fehler beim Speichern"
+      }
+      onClose={onClose}
+      content={
+        <Box
+          sx={{
+            textAlign: "center",
+            py: 3,
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
         >
-          {this.state.string ? (
-            <Textfield
-              value={this.props.json}
-              property={"json"}
-              label={"JSON"}
-              multiline
-              error={this.props.error.json}
-            />
-          ) : null}
-        </Dialog>
-
-        <Snackbar
-          open={this.state.snackbar}
-          message={this.state.message}
-          type={this.state.type}
-          key={this.state.key}
-        />
-      </div>
-    );
-  }
-}
+          {renderContent()}
+        </Box>
+      }
+    />
+  );
+};
 
 Builder.propTypes = {
-  getAllTutorials: PropTypes.func.isRequired,
-  getUserTutorials: PropTypes.func.isRequired,
-  getTutorials: PropTypes.func.isRequired,
-  resetTutorial: PropTypes.func.isRequired,
-  clearMessages: PropTypes.func.isRequired,
-  tutorialId: PropTypes.func.isRequired,
-  checkError: PropTypes.func.isRequired,
-  readJSON: PropTypes.func.isRequired,
-  jsonString: PropTypes.func.isRequired,
-  progress: PropTypes.func.isRequired,
-  deleteTutorial: PropTypes.func.isRequired,
-  resetTutorialBuilder: PropTypes.func.isRequired,
-  tutorialProgress: PropTypes.func.isRequired,
-  title: PropTypes.string.isRequired,
-  difficulty: PropTypes.number.isRequired,
-  public: PropTypes.bool.isRequired,
-  review: PropTypes.bool.isRequired,
-  id: PropTypes.string.isRequired,
-  steps: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
-  error: PropTypes.object.isRequired,
-  json: PropTypes.string.isRequired,
-  isProgress: PropTypes.bool.isRequired,
-  tutorials: PropTypes.array.isRequired,
-  message: PropTypes.object.isRequired,
-  user: PropTypes.object.isRequired,
-  authProgress: PropTypes.bool.isRequired,
+  existingTutorial: PropTypes.object,
 };
 
-const mapStateToProps = (state) => ({
-  title: state.builder.title,
-  difficulty: state.builder.difficulty,
-  review: state.builder.review,
-  public: state.builder.public,
-  id: state.builder.id,
-  steps: state.builder.steps,
-  change: state.builder.change,
-  error: state.builder.error,
-  json: state.builder.json,
-  isProgress: state.builder.progress,
-  userTutorials: state.tutorial.userTutorials,
-  tutorials: state.tutorial.tutorials,
-  message: state.message,
-  user: state.auth.user,
-  authProgress: state.auth.progress,
-});
-
-export default connect(mapStateToProps, {
-  checkError,
-  readJSON,
-  jsonString,
-  progress,
-  tutorialId,
-  resetTutorialBuilder,
-  getTutorials,
-  getUserTutorials,
-  getAllTutorials,
-  resetTutorial,
-  tutorialProgress,
-  clearMessages,
-  deleteTutorial,
-})(withStyles(styles, { withTheme: true })(withRouter(Builder)));
+export default Builder;
diff --git a/src/components/Tutorial/Builder/Difficulty.jsx b/src/components/Tutorial/Builder/Difficulty.jsx
deleted file mode 100644
index cd7a2c68..00000000
--- a/src/components/Tutorial/Builder/Difficulty.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  tutorialDifficulty,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import withStyles from "@mui/styles/withStyles";
-import ReactStars from "react-rating-stars-component";
-import * as Blockly from "blockly";
-import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
-
-const styles = (theme) => ({
-  multiline: {
-    padding: "18.5px 14px 18.5px 24px",
-  },
-  errorColor: {
-    color: `${theme.palette.error.dark} !important`,
-  },
-  errorColorShrink: {
-    color: `rgba(0, 0, 0, 0.54) !important`,
-  },
-  errorBorder: {
-    borderColor: `${theme.palette.error.dark} !important`,
-  },
-});
-
-class Difficulty extends Component {
-  ratingChanged = (newRating) => {
-    this.handleChange(newRating);
-  };
-
-  handleChange = (e) => {
-    var value = e;
-    if (this.props.property === "difficulty") {
-      this.props.tutorialDifficulty(value);
-    } else if (this.props.property === "json") {
-      this.props.jsonString(value);
-    } else {
-      this.props.changeContent(
-        value,
-        this.props.index,
-        this.props.property,
-        this.props.property2,
-      );
-    }
-  };
-
-  render() {
-    return (
-      <FormControl variant="standard" component="fieldset">
-        <FormLabel component="legend">
-          {Blockly.Msg.builder_difficulty}
-        </FormLabel>
-        <FormGroup aria-label="position" row>
-          <FormControlLabel
-            value="Tutorial veröffentlichen"
-            control={
-              <ReactStars
-                count={5}
-                onChange={this.handleChange}
-                value={this.props.value}
-                size={30}
-                isHalf={true}
-                emptyIcon={<i className="fa fa-star"></i>}
-                halfIcon={<i className="fa fa-star-half-alt"></i>}
-                fullIcon={<i className="fa fa-star"></i>}
-                activeColor="#ffd700"
-              />
-            }
-            label="Schwierigkeitsgrad"
-            labelPlacement="start"
-          />
-        </FormGroup>
-      </FormControl>
-    );
-  }
-}
-
-Difficulty.propTypes = {
-  tutorialDifficulty: PropTypes.func.isRequired,
-  jsonString: PropTypes.func.isRequired,
-  changeContent: PropTypes.func.isRequired,
-};
-
-export default connect(null, {
-  tutorialDifficulty,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(Difficulty));
diff --git a/src/components/Tutorial/Builder/Hardware.jsx b/src/components/Tutorial/Builder/Hardware.jsx
deleted file mode 100644
index 26f9930e..00000000
--- a/src/components/Tutorial/Builder/Hardware.jsx
+++ /dev/null
@@ -1,169 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  changeContent,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import hardware from "../../../data/hardware.json";
-
-import withStyles from "@mui/styles/withStyles";
-import ImageList from "@mui/material/ImageList";
-import ImageListItem from "@mui/material/ImageListItem";
-import ImageListItemBar from "@mui/material/ImageListItemBar";
-import FormHelperText from "@mui/material/FormHelperText";
-import FormLabel from "@mui/material/FormLabel";
-import * as Blockly from "blockly";
-import { isWidthDown } from "../../../helpers/handleBreakpoints";
-
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => (WrappedComponent) => (props) => (
-  <WrappedComponent {...props} width="xs" />
-);
-
-const styles = (theme) => ({
-  multiImageListItem: {
-    background: theme.palette.primary.main,
-    opacity: 0.9,
-    height: "30px",
-  },
-  multiImageListItemTitle: {
-    color: theme.palette.text.primary,
-  },
-  border: {
-    cursor: "pointer",
-    "&:hover": {
-      width: "calc(100% - 4px)",
-      height: "calc(100% - 4px)",
-      border: `2px solid ${theme.palette.primary.main}`,
-    },
-  },
-  active: {
-    cursor: "pointer",
-    width: "calc(100% - 4px)",
-    height: "calc(100% - 4px)",
-    border: `2px solid ${theme.palette.primary.main}`,
-  },
-  errorColor: {
-    color: theme.palette.error.dark,
-    lineHeight: "initial",
-    marginBottom: "10px",
-  },
-});
-
-class Requirements extends Component {
-  onChange = (hardware) => {
-    var hardwareArray = this.props.value;
-    if (hardwareArray.filter((value) => value === hardware).length > 0) {
-      hardwareArray = hardwareArray.filter((value) => value !== hardware);
-    } else {
-      hardwareArray.push(hardware);
-      if (this.props.error) {
-        this.props.deleteError(this.props.index, "hardware");
-      }
-    }
-    this.props.changeContent(hardwareArray, this.props.index, "hardware");
-    if (hardwareArray.length === 0) {
-      this.props.setError(this.props.index, "hardware");
-    }
-  };
-
-  render() {
-    var cols = isWidthDown("md", this.props.width)
-      ? isWidthDown("sm", this.props.width)
-        ? isWidthDown("xs", this.props.width)
-          ? 2
-          : 3
-        : 4
-      : 6;
-    return (
-      <div
-        style={{
-          marginBottom: "10px",
-          padding: "18.5px 14px",
-          borderRadius: "25px",
-          border: "1px solid lightgrey",
-          width: "calc(100% - 28px)",
-        }}
-      >
-        <FormLabel style={{ color: "black" }}>Hardware</FormLabel>
-        <FormHelperText
-          style={
-            this.props.error
-              ? { lineHeight: "initial", marginTop: "5px" }
-              : {
-                  marginTop: "5px",
-                  lineHeight: "initial",
-                  marginBottom: "10px",
-                }
-          }
-        >
-          {Blockly.Msg.builder_hardware_order}
-        </FormHelperText>
-        {this.props.error ? (
-          <FormHelperText className={this.props.classes.errorColor}>
-            {Blockly.Msg.builder_hardware_helper}
-          </FormHelperText>
-        ) : null}
-        <ImageList rowHeight={100} cols={cols} gap={10}>
-          {hardware.map((picture, i) => (
-            <ImageListItem
-              key={i}
-              onClick={() => this.onChange(picture.id)}
-              classes={{
-                item:
-                  this.props.value.filter((value) => value === picture.id)
-                    .length > 0
-                    ? this.props.classes.active
-                    : this.props.classes.border,
-              }}
-            >
-              <div style={{ margin: "auto", width: "max-content" }}>
-                <img
-                  src={`/media/hardware/${picture.src}`}
-                  alt={picture.name}
-                  height={100}
-                />
-              </div>
-              <ImageListItemBar
-                classes={{
-                  root: this.props.classes.multiImageListItem,
-                }}
-                title={
-                  <div
-                    style={{
-                      overflow: "hidden",
-                      textOverflow: "ellipsis",
-                    }}
-                    className={this.props.classes.multiImageListItemTitle}
-                  >
-                    {picture.name}
-                  </div>
-                }
-              />
-            </ImageListItem>
-          ))}
-        </ImageList>
-      </div>
-    );
-  }
-}
-
-Requirements.propTypes = {
-  changeContent: PropTypes.func.isRequired,
-  setError: PropTypes.func.isRequired,
-  deleteError: PropTypes.func.isRequired,
-  change: PropTypes.number.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  change: state.builder.change,
-});
-
-export default connect(mapStateToProps, {
-  changeContent,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(withWidth()(Requirements)));
diff --git a/src/components/Tutorial/Builder/Id.jsx b/src/components/Tutorial/Builder/Id.jsx
deleted file mode 100644
index 43144c82..00000000
--- a/src/components/Tutorial/Builder/Id.jsx
+++ /dev/null
@@ -1,164 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  tutorialId,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import withStyles from "@mui/styles/withStyles";
-import Button from "@mui/material/Button";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import InputLabel from "@mui/material/InputLabel";
-import FormControl from "@mui/material/FormControl";
-import FormHelperText from "@mui/material/FormHelperText";
-
-import { faPlus, faMinus } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-const styles = (theme) => ({
-  errorColor: {
-    color: theme.palette.error.dark,
-  },
-  errorColorShrink: {
-    color: `rgba(0, 0, 0, 0.54) !important`,
-  },
-  errorBorder: {
-    borderColor: `${theme.palette.error.dark} !important`,
-  },
-});
-
-class Id extends Component {
-  handleChange = (e) => {
-    var value = parseInt(e.target.value);
-    if (Number.isInteger(value) && value > 0) {
-      this.props.tutorialId(value);
-      if (this.props.error) {
-        this.props.deleteError(undefined, "id");
-      }
-    } else {
-      this.props.tutorialId(value.toString());
-      this.props.setError(undefined, "id");
-    }
-  };
-
-  handleCounter = (step) => {
-    if (this.props.value + step < 1) {
-      this.props.setError(undefined, "id");
-    } else if (this.props.error) {
-      this.props.deleteError(undefined, "id");
-    }
-    if (!this.props.value || !Number.isInteger(this.props.value)) {
-      this.props.tutorialId(0 + step);
-    } else {
-      this.props.tutorialId(this.props.value + step);
-    }
-  };
-
-  render() {
-    return (
-      <div style={{ display: "inline-flex", marginTop: "15px" }}>
-        <FormControl
-          variant="outlined"
-          style={{ marginBottom: "10px", width: "250px" }}
-        >
-          <InputLabel
-            htmlFor="id"
-            classes={{
-              shrink: this.props.error
-                ? this.props.classes.errorColorShrink
-                : null,
-            }}
-          >
-            ID
-          </InputLabel>
-          <OutlinedInput
-            style={{
-              borderRadius: "25px",
-              padding: "0 0 0 10px",
-              width: "200px",
-            }}
-            classes={{
-              notchedOutline: this.props.error
-                ? this.props.classes.errorBorder
-                : null,
-            }}
-            error={this.props.error}
-            value={this.props.value}
-            name="id"
-            label="ID"
-            id="id"
-            onChange={this.handleChange}
-            inputProps={{
-              style: { marginRight: "10px" },
-            }}
-            endAdornment={
-              <div style={{ display: "flex" }}>
-                <Button
-                  disabled={
-                    this.props.value === 1 ||
-                    !Number.isInteger(this.props.value)
-                  }
-                  onClick={() => this.handleCounter(-1)}
-                  variant="contained"
-                  color="primary"
-                  style={{
-                    borderRadius: "25px 0 0 25px",
-                    height: "56px",
-                    boxShadow: "0 0 transparent",
-                  }}
-                >
-                  <FontAwesomeIcon icon={faMinus} />
-                </Button>
-                <Button
-                  onClick={() => this.handleCounter(1)}
-                  variant="contained"
-                  color="primary"
-                  style={{
-                    borderRadius: "0 25px 25px 0",
-                    height: "56px",
-                    boxShadow: "0 0 transparent",
-                  }}
-                >
-                  <FontAwesomeIcon icon={faPlus} />
-                </Button>
-              </div>
-            }
-          />
-          {this.props.error ? (
-            <FormHelperText className={this.props.classes.errorColor}>
-              Gib eine positive ganzzahlige Zahl ein.
-            </FormHelperText>
-          ) : null}
-        </FormControl>
-        <FormHelperText
-          style={{
-            marginLeft: "-40px",
-            marginTop: "5px",
-            lineHeight: "initial",
-            marginBottom: "10px",
-            width: "200px",
-          }}
-        >
-          Beachte, dass die ID eindeutig sein muss. Sie muss sich also zu den
-          anderen Tutorials unterscheiden.
-        </FormHelperText>
-      </div>
-    );
-  }
-}
-
-Id.propTypes = {
-  tutorialId: PropTypes.func.isRequired,
-  setError: PropTypes.func.isRequired,
-  deleteError: PropTypes.func.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  change: state.builder.change,
-});
-
-export default connect(mapStateToProps, { tutorialId, setError, deleteError })(
-  withStyles(styles, { withTheme: true })(Id),
-);
diff --git a/src/components/Tutorial/Builder/MarkdownEditor.jsx b/src/components/Tutorial/Builder/MarkdownEditor.jsx
deleted file mode 100644
index 771f46ca..00000000
--- a/src/components/Tutorial/Builder/MarkdownEditor.jsx
+++ /dev/null
@@ -1,80 +0,0 @@
-import React from "react";
-import { connect } from "react-redux";
-import {
-  tutorialTitle,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import FormControl from "@mui/material/FormControl";
-import MarkdownIt from "markdown-it";
-import Editor from "react-markdown-editor-lite";
-import "react-markdown-editor-lite/lib/index.css";
-
-import axios from "axios";
-
-const mdParser = new MarkdownIt(/* Markdown-it options */);
-
-const MarkdownEditor = (props) => {
-  const [value, setValue] = React.useState(props.value);
-
-  const mdEditor = React.useRef(null);
-
-  function handleChange({ html, text }) {
-    setValue(text);
-    var value = text;
-    props.changeContent(value, props.index, props.property, props.property2);
-    if (value.replace(/\s/g, "") === "") {
-      props.setError(props.index, props.property);
-    } else {
-      props.deleteError(props.index, props.property);
-    }
-  }
-
-  async function uploadImage(files) {
-    return new Promise((resolve, reject) => {
-      const formData = new FormData();
-      formData.append("files", files);
-      axios({
-        method: "post",
-        url: `${import.meta.env.VITE_BLOCKLY_API}/upload/uploadImage`,
-        data: formData,
-        headers: { "Content-Type": "multipart/form-data" },
-      })
-        .then((res) => {
-          resolve(
-            `${import.meta.env.VITE_BLOCKLY_API}/upload/` + res.data.filename,
-          );
-        })
-        .catch((err) => {
-          reject(new Error("error"));
-        });
-    });
-  }
-
-  return (
-    <FormControl variant="outlined" fullWidth style={{ marginBottom: "10px" }}>
-      <Editor
-        ref={mdEditor}
-        style={{ height: "500px" }}
-        renderHTML={(text) => mdParser.render(text)}
-        onChange={handleChange}
-        value={value}
-        id={props.property}
-        label={props.label}
-        property={props.property}
-        onImageUpload={uploadImage}
-      />
-    </FormControl>
-  );
-};
-
-export default connect(null, {
-  tutorialTitle,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-})(MarkdownEditor);
diff --git a/src/components/Tutorial/Builder/Media.jsx b/src/components/Tutorial/Builder/Media.jsx
deleted file mode 100644
index 8fc8ac58..00000000
--- a/src/components/Tutorial/Builder/Media.jsx
+++ /dev/null
@@ -1,299 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  changeContent,
-  deleteProperty,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import Textfield from "./Textfield";
-
-import withStyles from "@mui/styles/withStyles";
-import Switch from "@mui/material/Switch";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormHelperText from "@mui/material/FormHelperText";
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import Button from "@mui/material/Button";
-
-const styles = (theme) => ({
-  errorColor: {
-    color: theme.palette.error.dark,
-  },
-  errorBorder: {
-    border: `1px solid ${theme.palette.error.dark}`,
-  },
-  errorButton: {
-    marginTop: "5px",
-    height: "40px",
-    backgroundColor: theme.palette.error.dark,
-    "&:hover": {
-      backgroundColor: theme.palette.error.dark,
-    },
-  },
-});
-
-class Media extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      checked: props.value ? true : false,
-      error: false,
-      radioValue:
-        !props.picture && !props.youtube
-          ? "picture"
-          : props.picture
-            ? "picture"
-            : "youtube",
-    };
-  }
-
-  componentDidUpdate(props) {
-    if (props.value !== this.props.value) {
-      this.setState({ checked: this.props.value ? true : false });
-    }
-  }
-
-  onChangeSwitch = (value) => {
-    var oldValue = this.state.checked;
-    this.setState({ checked: value });
-    if (oldValue !== value) {
-      if (value) {
-        this.props.setError(this.props.index, "media");
-      } else {
-        this.props.deleteError(this.props.index, "media");
-        this.props.deleteProperty(this.props.index, "media");
-        this.props.deleteProperty(this.props.index, "url");
-        this.setState({ error: false });
-      }
-    }
-  };
-
-  onChangeRadio = (value) => {
-    this.props.setError(this.props.index, "media");
-    var oldValue = this.state.radioValue;
-    this.setState({ radioValue: value, error: false });
-    // delete property 'oldValue', so that all old media files are reset
-    this.props.deleteProperty(this.props.index, "media", oldValue);
-    if (oldValue === "picture") {
-      this.props.deleteProperty(this.props.index, "url");
-    }
-  };
-
-  uploadPicture = (pic) => {
-    if (!/^image\/.*/.test(pic.type)) {
-      this.props.setError(this.props.index, "media");
-      this.setState({ error: true });
-      this.props.deleteProperty(this.props.index, "url");
-    } else {
-      this.props.deleteError(this.props.index, "media");
-      this.setState({ error: false });
-      this.props.changeContent(
-        URL.createObjectURL(pic),
-        this.props.index,
-        "url",
-      );
-    }
-    this.props.changeContent(pic, this.props.index, "media", "picture");
-  };
-
-  render() {
-    return (
-      <div
-        style={{
-          marginBottom: "10px",
-          padding: "18.5px 14px",
-          borderRadius: "25px",
-          border: "1px solid lightgrey",
-          width: "calc(100% - 28px)",
-        }}
-      >
-        <FormControlLabel
-          labelPlacement="end"
-          label={"Medien"}
-          control={
-            <Switch
-              checked={this.state.checked}
-              onChange={(e) => this.onChangeSwitch(e.target.checked)}
-            />
-          }
-        />
-        {this.state.checked ? (
-          <div>
-            <RadioGroup
-              row
-              value={this.state.radioValue}
-              onChange={(e) => {
-                this.onChangeRadio(e.target.value);
-              }}
-            >
-              <FormControlLabel
-                style={{ color: "black" }}
-                value="picture"
-                control={<Radio />}
-                label="Bild"
-                labelPlacement="end"
-              />
-              <FormControlLabel
-                style={{ color: "black" }}
-                value="youtube"
-                control={<Radio />}
-                label="Youtube-Video"
-                labelPlacement="end"
-              />
-            </RadioGroup>
-            {this.state.radioValue === "picture" ? (
-              <div>
-                {!this.props.error ? (
-                  <div>
-                    <img
-                      src={
-                        this.props.url
-                          ? this.props.url
-                          : this.props.picture
-                            ? `${import.meta.env.VITE_BLOCKLY_API}/media/${this.props.picture.path}`
-                            : ""
-                      }
-                      alt={""}
-                      style={{
-                        maxHeight: "180px",
-                        maxWidth: "360px",
-                        marginBottom: "5px",
-                      }}
-                    />
-                  </div>
-                ) : (
-                  <div
-                    style={{
-                      height: "150px",
-                      maxWidth: "250px",
-                      marginBottom: "5px",
-                      justifyContent: "center",
-                      alignItems: "center",
-                      display: "flex",
-                      padding: "20px",
-                    }}
-                    className={
-                      this.props.error ? this.props.classes.errorBorder : null
-                    }
-                  >
-                    {this.state.error ? (
-                      <FormHelperText
-                        style={{
-                          lineHeight: "initial",
-                          textAlign: "center",
-                        }}
-                        className={this.props.classes.errorColor}
-                      >{`Die übergebene Datei entspricht nicht dem geforderten Bild-Format. Überprüfe, ob es sich um ein Bild handelt und versuche es nochmal.`}</FormHelperText>
-                    ) : (
-                      <FormHelperText
-                        style={{
-                          lineHeight: "initial",
-                          textAlign: "center",
-                        }}
-                        className={this.props.classes.errorColor}
-                      >{`Wähle ein Bild aus.`}</FormHelperText>
-                    )}
-                  </div>
-                )}
-                {/*upload picture*/}
-                <div>
-                  <input
-                    style={{ display: "none" }}
-                    accept="image/*"
-                    onChange={(e) => {
-                      this.uploadPicture(e.target.files[0]);
-                    }}
-                    id={`picture ${this.props.index}`}
-                    type="file"
-                  />
-                  <label htmlFor={`picture ${this.props.index}`}>
-                    <Button
-                      component="span"
-                      className={
-                        this.props.error ? this.props.classes.errorButton : null
-                      }
-                      style={{
-                        marginRight: "10px",
-                        marginBottom: "10px",
-                      }}
-                      variant="contained"
-                      color="primary"
-                    >
-                      Bild auswählen
-                    </Button>
-                  </label>
-                </div>
-              </div>
-            ) : (
-              /*youtube-video*/
-              <div>
-                <Textfield
-                  value={this.props.value && this.props.value.youtube}
-                  property={"media"}
-                  property2={"youtube"}
-                  label={"Youtube-ID"}
-                  index={this.props.index}
-                  error={this.props.error}
-                  errorText={`Gib eine Youtube-ID ein.`}
-                />
-                {this.props.youtube && !this.props.error ? (
-                  /*16:9; width: 800px; height: width/16*9=450px*/
-                  <div style={{ maxWidth: "800px" }}>
-                    <FormHelperText
-                      style={{
-                        lineHeight: "initial",
-                        margin: "0 25px 10px 25px",
-                      }}
-                    >{`Stelle sicher, dass das unten angezeigte Youtube-Video funktioniert, andernfalls überprüfe die Youtube-ID.`}</FormHelperText>
-                    <div
-                      style={{
-                        position: "relative",
-                        height: 0,
-                        paddingBottom: "calc(100% / 16 * 9)",
-                      }}
-                    >
-                      <iframe
-                        title={this.props.youtube}
-                        style={{
-                          borderRadius: "25px",
-                          position: "absolute",
-                          top: "0",
-                          left: "0",
-                          width: "100%",
-                          maxWidth: "800px",
-                          height: "100%",
-                          maxHeight: "450px",
-                        }}
-                        src={`https://www.youtube.com/embed/${this.props.youtube}`}
-                        frameBorder="0"
-                        allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                        allowFullScreen
-                      />
-                    </div>
-                  </div>
-                ) : null}
-              </div>
-            )}
-          </div>
-        ) : null}
-      </div>
-    );
-  }
-}
-
-Media.propTypes = {
-  changeContent: PropTypes.func.isRequired,
-  deleteProperty: PropTypes.func.isRequired,
-  setError: PropTypes.func.isRequired,
-  deleteError: PropTypes.func.isRequired,
-};
-
-export default connect(null, {
-  changeContent,
-  deleteProperty,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(Media));
diff --git a/src/components/Tutorial/Builder/Public.jsx b/src/components/Tutorial/Builder/Public.jsx
deleted file mode 100644
index 7dba5c65..00000000
--- a/src/components/Tutorial/Builder/Public.jsx
+++ /dev/null
@@ -1,93 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  tutorialPublic,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import withStyles from "@mui/styles/withStyles";
-
-import * as Blockly from "blockly";
-import Checkbox from "@mui/material/Checkbox";
-import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
-
-const styles = (theme) => ({
-  multiline: {
-    padding: "18.5px 14px 18.5px 24px",
-  },
-  errorColor: {
-    color: `${theme.palette.error.dark} !important`,
-  },
-  errorColorShrink: {
-    color: `rgba(0, 0, 0, 0.54) !important`,
-  },
-  errorBorder: {
-    borderColor: `${theme.palette.error.dark} !important`,
-  },
-});
-
-class Public extends Component {
-  handleChange = (e) => {
-    var value = e.target.checked;
-    if (this.props.property === "public") {
-      this.props.tutorialPublic(value);
-    } else if (this.props.property === "json") {
-      this.props.jsonString(value);
-    } else {
-      this.props.changeContent(
-        value,
-        this.props.index,
-        this.props.property,
-        this.props.property2,
-      );
-    }
-  };
-
-  render() {
-    return (
-      <FormControl variant="standard" component="fieldset">
-        <FormLabel component="legend">
-          {Blockly.Msg.builder_public_head}
-        </FormLabel>
-        <FormGroup aria-label="position" row>
-          <FormControlLabel
-            value="Tutorial veröffentlichen"
-            control={
-              <Checkbox
-                checked={this.props.value}
-                onChange={this.handleChange}
-                name="checkedA"
-                inputProps={{
-                  "aria-label": "secondary checkbox",
-                }}
-              />
-            }
-            label={Blockly.Msg.builder_public_label}
-            labelPlacement="start"
-          />
-        </FormGroup>
-      </FormControl>
-    );
-  }
-}
-
-Public.propTypes = {
-  tutorialPublic: PropTypes.func.isRequired,
-  jsonString: PropTypes.func.isRequired,
-  changeContent: PropTypes.func.isRequired,
-};
-
-export default connect(null, {
-  tutorialPublic,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(Public));
diff --git a/src/components/Tutorial/Builder/QuestionEditor.jsx b/src/components/Tutorial/Builder/QuestionEditor.jsx
new file mode 100644
index 00000000..a5448261
--- /dev/null
+++ b/src/components/Tutorial/Builder/QuestionEditor.jsx
@@ -0,0 +1,215 @@
+import {
+  Box,
+  Typography,
+  Tabs,
+  Tab,
+  TextField,
+  IconButton,
+  Button,
+  Radio,
+  Checkbox,
+  Switch,
+  FormControlLabel,
+  useTheme,
+} from "@mui/material";
+import { AddCircleOutline, Delete } from "@mui/icons-material";
+import { useState } from "react";
+
+const QuestionEditor = ({ questionData, setQuestionData }) => {
+  const theme = useTheme();
+  const [tab, setTab] = useState(questionData?.h5pLink ? "h5p" : "normal");
+
+  // ✅ Multiple Choice Toggle
+  const [isMultipleChoice, setIsMultipleChoice] = useState(
+    questionData?.multipleChoice || false,
+  );
+
+  const handleAddAnswer = () => {
+    setQuestionData({
+      ...questionData,
+      answers: [
+        ...(questionData.answers || []),
+        { text: "", correct: false, feedback: "" },
+      ],
+    });
+  };
+
+  const handleDeleteAnswer = (index) => {
+    const updated = [...questionData.answers];
+    updated.splice(index, 1);
+    setQuestionData({ ...questionData, answers: updated });
+  };
+
+  const handleAnswerChange = (index, key, value) => {
+    const updated = [...questionData.answers];
+    updated[index][key] = value;
+    setQuestionData({ ...questionData, answers: updated });
+  };
+
+  const handleCorrectSelect = (index) => {
+    let updated;
+
+    if (isMultipleChoice) {
+      updated = questionData.answers.map((a, i) =>
+        i === index ? { ...a, correct: !a.correct } : a,
+      );
+    } else {
+      updated = questionData.answers.map((a, i) => ({
+        ...a,
+        correct: i === index,
+      }));
+    }
+
+    setQuestionData({ ...questionData, answers: updated });
+  };
+
+  return (
+    <Box
+      sx={{
+        mt: 3,
+        p: 3,
+        border: `1px solid ${theme.palette.divider}`,
+        borderRadius: 2,
+        bgcolor: theme.palette.background.paper,
+      }}
+    >
+      <Tabs
+        value={tab}
+        onChange={(e, val) => setTab(val)}
+        textColor="primary"
+        indicatorColor="primary"
+        sx={{ mb: 2 }}
+      >
+        <Tab value="normal" label="Normale Frage" />
+        <Tab value="h5p" label="H5P Quiz" />
+      </Tabs>
+
+      {tab === "normal" && (
+        <Box>
+          {/* Frage */}
+          <TextField
+            fullWidth
+            label="Frage"
+            value={questionData.question || ""}
+            onChange={(e) =>
+              setQuestionData({ ...questionData, question: e.target.value })
+            }
+            sx={{ mb: 2 }}
+          />
+
+          {/* Multiple Choice Umschalter */}
+          <FormControlLabel
+            control={
+              <Switch
+                checked={isMultipleChoice}
+                onChange={(e) => {
+                  const value = e.target.checked;
+                  setIsMultipleChoice(value);
+                  setQuestionData({ ...questionData, multipleChoice: value });
+                }}
+                color="primary"
+              />
+            }
+            label="Mehrere richtige Antworten erlauben"
+            sx={{ mb: 2 }}
+          />
+
+          {/* Antworten */}
+          <Typography variant="subtitle2" fontWeight={600} gutterBottom>
+            Antwortmöglichkeiten & Feedback
+          </Typography>
+
+          {(questionData.answers || []).map((answer, index) => (
+            <Box
+              key={index}
+              sx={{
+                mb: 2,
+                p: 2,
+                border: `1px solid ${theme.palette.divider}`,
+                borderRadius: 2,
+              }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  mb: 1,
+                }}
+              >
+                {isMultipleChoice ? (
+                  <Checkbox
+                    checked={answer.correct}
+                    onChange={() => handleCorrectSelect(index)}
+                    color="primary"
+                  />
+                ) : (
+                  <Radio
+                    checked={answer.correct}
+                    onChange={() => handleCorrectSelect(index)}
+                    color="primary"
+                  />
+                )}
+                <TextField
+                  fullWidth
+                  label={`Antwort ${index + 1}`}
+                  value={answer.text}
+                  onChange={(e) =>
+                    handleAnswerChange(index, "text", e.target.value)
+                  }
+                />
+                <IconButton
+                  onClick={() => handleDeleteAnswer(index)}
+                  color="error"
+                >
+                  <Delete />
+                </IconButton>
+              </Box>
+
+              {/* 🆕 Feedback-Feld */}
+              <TextField
+                fullWidth
+                multiline
+                minRows={2}
+                label="Feedback zu dieser Antwort (optional)"
+                value={answer.feedback || ""}
+                onChange={(e) =>
+                  handleAnswerChange(index, "feedback", e.target.value)
+                }
+                placeholder="z. B. 'Richtig, weil der Sensor die Temperatur misst.'"
+              />
+            </Box>
+          ))}
+
+          <Button
+            startIcon={<AddCircleOutline />}
+            onClick={handleAddAnswer}
+            variant="outlined"
+            sx={{ mt: 1 }}
+          >
+            Antwort hinzufügen
+          </Button>
+        </Box>
+      )}
+
+      {/* H5P */}
+      {tab === "h5p" && (
+        <Box>
+          <Typography variant="subtitle2" fontWeight={600} gutterBottom>
+            H5P-Embed Link
+          </Typography>
+          <TextField
+            fullWidth
+            placeholder="https://your-h5p-link.com/embed/..."
+            value={questionData.h5pLink || ""}
+            onChange={(e) =>
+              setQuestionData({ ...questionData, h5pLink: e.target.value })
+            }
+          />
+        </Box>
+      )}
+    </Box>
+  );
+};
+
+export default QuestionEditor;
diff --git a/src/components/Tutorial/Builder/QuestionList.jsx b/src/components/Tutorial/Builder/QuestionList.jsx
new file mode 100644
index 00000000..192acdb9
--- /dev/null
+++ b/src/components/Tutorial/Builder/QuestionList.jsx
@@ -0,0 +1,95 @@
+import {
+  Box,
+  Button,
+  IconButton,
+  Typography,
+  useTheme,
+  Divider,
+} from "@mui/material";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import DeleteIcon from "@mui/icons-material/Delete";
+import QuestionEditor from "./QuestionEditor";
+
+const QuestionList = ({ questions, setQuestions }) => {
+  const theme = useTheme();
+  const addQuestion = () => {
+    setQuestions([
+      ...questions,
+      { question: "", answers: [], h5pLink: "", type: "normal" },
+    ]);
+  };
+
+  const updateQuestion = (index, newData) => {
+    const updated = [...questions];
+    updated[index] = newData;
+    setQuestions(updated);
+  };
+
+  const deleteQuestion = (index) => {
+    setQuestions(questions.filter((_, i) => i !== index));
+  };
+
+  return (
+    <Box sx={{ mt: 3 }}>
+      <Typography variant="h6" fontWeight={600} color="primary" gutterBottom>
+        Fragen / Quizzes
+      </Typography>
+
+      {questions.map((q, index) => (
+        <Box
+          key={index}
+          sx={{
+            position: "relative",
+            p: 2,
+            mt: 2,
+            border: `1px solid ${theme.palette.divider}`,
+            borderRadius: 2,
+            backgroundColor: theme.palette.background.paper,
+            boxShadow: "0 2px 6px rgba(0,0,0,0.05)",
+          }}
+        >
+          <Typography
+            variant="subtitle2"
+            sx={{
+              fontWeight: 600,
+              color: theme.palette.text.secondary,
+              mb: 1,
+            }}
+          >
+            Frage {index + 1}
+          </Typography>
+
+          <QuestionEditor
+            questionData={q}
+            setQuestionData={(newData) => updateQuestion(index, newData)}
+          />
+
+          <IconButton
+            size="small"
+            onClick={() => deleteQuestion(index)}
+            sx={{
+              position: "absolute",
+              top: 8,
+              right: 8,
+              color: theme.palette.error.main,
+            }}
+          >
+            <DeleteIcon fontSize="small" />
+          </IconButton>
+        </Box>
+      ))}
+
+      <Divider sx={{ my: 3 }} />
+
+      <Button
+        variant="outlined"
+        startIcon={<AddCircleOutlineIcon />}
+        onClick={addQuestion}
+      >
+        Neue Frage hinzufügen
+      </Button>
+    </Box>
+  );
+};
+
+export default QuestionList;
diff --git a/src/components/Tutorial/Builder/Requirements.jsx b/src/components/Tutorial/Builder/Requirements.jsx
deleted file mode 100644
index 2f68d04f..00000000
--- a/src/components/Tutorial/Builder/Requirements.jsx
+++ /dev/null
@@ -1,85 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { changeContent } from "../../../actions/tutorialBuilderActions";
-
-import FormGroup from "@mui/material/FormGroup";
-import Checkbox from "@mui/material/Checkbox";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormLabel from "@mui/material/FormLabel";
-import FormHelperText from "@mui/material/FormHelperText";
-import FormControl from "@mui/material/FormControl";
-import * as Blockly from "blockly";
-class Requirements extends Component {
-  onChange = (e) => {
-    var requirements = this.props.value;
-    var value = e.target.value;
-    if (e.target.checked) {
-      requirements.push(value);
-    } else {
-      requirements = requirements.filter(
-        (requirement) => requirement !== value,
-      );
-    }
-    this.props.changeContent(requirements, this.props.index, "requirements");
-  };
-
-  render() {
-    return (
-      <FormControl
-        variant="standard"
-        style={{
-          marginBottom: "10px",
-          padding: "18.5px 14px",
-          borderRadius: "25px",
-          border: "1px solid lightgrey",
-          width: "calc(100% - 28px)",
-        }}
-      >
-        <FormLabel style={{ color: "black" }}>
-          {Blockly.Msg.builder_requirements_head}
-        </FormLabel>
-        <FormHelperText style={{ marginTop: "5px" }}>
-          {Blockly.Msg.builder_requirements_order}
-        </FormHelperText>
-        <FormGroup>
-          {this.props.tutorials
-            .filter(
-              (tutorial) => tutorial._id !== this.props.id && tutorial.public,
-            )
-            .map((tutorial, i) => (
-              <FormControlLabel
-                key={i}
-                control={
-                  <Checkbox
-                    value={tutorial._id}
-                    checked={
-                      this.props.value.filter((id) => id === tutorial._id)
-                        .length > 0
-                    }
-                    onChange={(e) => this.onChange(e)}
-                    name="requirements"
-                  />
-                }
-                label={tutorial.title}
-              />
-            ))}
-        </FormGroup>
-      </FormControl>
-    );
-  }
-}
-
-Requirements.propTypes = {
-  changeContent: PropTypes.func.isRequired,
-  id: PropTypes.string.isRequired,
-  tutorials: PropTypes.array.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  change: state.builder.change,
-  id: state.builder.id,
-  tutorials: state.tutorial.tutorials,
-});
-
-export default connect(mapStateToProps, { changeContent })(Requirements);
diff --git a/src/components/Tutorial/Builder/Review.jsx b/src/components/Tutorial/Builder/Review.jsx
deleted file mode 100644
index 8a898ce4..00000000
--- a/src/components/Tutorial/Builder/Review.jsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  tutorialReview,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import withStyles from "@mui/styles/withStyles";
-
-import * as Blockly from "blockly";
-import Checkbox from "@mui/material/Checkbox";
-import FormGroup from "@mui/material/FormGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import FormControl from "@mui/material/FormControl";
-import FormLabel from "@mui/material/FormLabel";
-
-const styles = (theme) => ({
-  multiline: {
-    padding: "18.5px 14px 18.5px 24px",
-  },
-  errorColor: {
-    color: `${theme.palette.error.dark} !important`,
-  },
-  errorColorShrink: {
-    color: `rgba(0, 0, 0, 0.54) !important`,
-  },
-  errorBorder: {
-    borderColor: `${theme.palette.error.dark} !important`,
-  },
-});
-
-class Review extends Component {
-  handleChange = (e) => {
-    var value = e.target.checked;
-    if (this.props.property === "review") {
-      this.props.tutorialReview(value);
-    } else if (this.props.property === "json") {
-      this.props.jsonString(value);
-    } else {
-      this.props.changeContent(
-        value,
-        this.props.index,
-        this.props.property,
-        this.props.property2,
-      );
-    }
-  };
-
-  render() {
-    return (
-      <FormControl variant="standard" component="fieldset">
-        <FormLabel component="legend">
-          {Blockly.Msg.builder_review_head}
-        </FormLabel>
-        {Blockly.Msg.builder_review_text}
-        <FormGroup aria-label="position" row>
-          <FormControlLabel
-            value="Tutorial veröffentlichen"
-            control={
-              <Checkbox
-                checked={this.props.value}
-                onChange={this.handleChange}
-                name="checkedA"
-                inputProps={{
-                  "aria-label": "secondary checkbox",
-                }}
-              />
-            }
-            label="Ich möchte mein Tutorial öffentlich machen"
-            labelPlacement="start"
-          />
-        </FormGroup>
-      </FormControl>
-    );
-  }
-}
-
-Review.propTypes = {
-  tutorialReview: PropTypes.func.isRequired,
-  jsonString: PropTypes.func.isRequired,
-  changeContent: PropTypes.func.isRequired,
-};
-
-export default connect(null, {
-  tutorialReview,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(Review));
diff --git a/src/components/Tutorial/Builder/Step.jsx b/src/components/Tutorial/Builder/Step.jsx
deleted file mode 100644
index 62fe70e8..00000000
--- a/src/components/Tutorial/Builder/Step.jsx
+++ /dev/null
@@ -1,217 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  addStep,
-  removeStep,
-  changeStepIndex,
-} from "../../../actions/tutorialBuilderActions";
-
-import clsx from "clsx";
-
-import Textfield from "./Textfield";
-import StepType from "./StepType";
-import BlocklyExample from "./BlocklyExample";
-import Requirements from "./Requirements";
-import Hardware from "./Hardware";
-
-import withStyles from "@mui/styles/withStyles";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-
-import {
-  faPlus,
-  faAngleDoubleUp,
-  faAngleDoubleDown,
-  faTrash,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import MarkdownEditor from "./MarkdownEditor";
-
-const styles = (theme) => ({
-  button: {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    width: "40px",
-    height: "40px",
-    "&:hover": {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-  },
-  delete: {
-    backgroundColor: theme.palette.error.dark,
-    color: theme.palette.error.contrastText,
-    "&:hover": {
-      backgroundColor: theme.palette.error.dark,
-      color: theme.palette.error.contrastText,
-    },
-  },
-});
-
-class Step extends Component {
-  render() {
-    var index = this.props.index;
-    var steps = this.props.steps;
-    return (
-      <div
-        style={{
-          borderRadius: "25px",
-          border: "1px solid lightgrey",
-          padding: "10px 14px 10px 10px",
-          marginBottom: "20px",
-        }}
-      >
-        <Typography
-          variant="h6"
-          style={{ marginBottom: "10px", marginLeft: "4px" }}
-        >
-          Schritt {index + 1}
-        </Typography>
-        <div style={{ display: "flex", position: "relative" }}>
-          <div
-            style={{
-              width: "40px",
-              marginRight: "10px",
-              position: "absolute",
-              left: "4px",
-              bottom: "10px",
-            }}
-          >
-            <Tooltip title="Schritt hinzufügen" arrow>
-              <IconButton
-                className={this.props.classes.button}
-                style={index === 0 ? {} : { marginBottom: "5px" }}
-                onClick={() => this.props.addStep(index + 1)}
-                size="large"
-              >
-                <FontAwesomeIcon icon={faPlus} size="xs" />
-              </IconButton>
-            </Tooltip>
-            {index !== 0 ? (
-              <div>
-                <Tooltip
-                  title={`Schritt ${index + 1} nach oben schieben`}
-                  arrow
-                >
-                  <IconButton
-                    disabled={index < 2}
-                    className={this.props.classes.button}
-                    style={{ marginBottom: "5px" }}
-                    onClick={() => this.props.changeStepIndex(index, index - 1)}
-                    size="large"
-                  >
-                    <FontAwesomeIcon icon={faAngleDoubleUp} size="xs" />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip
-                  title={`Schritt ${index + 1} nach unten schieben`}
-                  arrow
-                >
-                  <IconButton
-                    disabled={index === steps.length - 1}
-                    className={this.props.classes.button}
-                    style={{ marginBottom: "5px" }}
-                    onClick={() => this.props.changeStepIndex(index, index + 1)}
-                    size="large"
-                  >
-                    <FontAwesomeIcon icon={faAngleDoubleDown} size="xs" />
-                  </IconButton>
-                </Tooltip>
-                <Tooltip title={`Schritt ${index + 1} löschen`} arrow>
-                  <IconButton
-                    disabled={index === 0}
-                    className={clsx(
-                      this.props.classes.button,
-                      this.props.classes.delete,
-                    )}
-                    onClick={() => this.props.removeStep(index)}
-                    size="large"
-                  >
-                    <FontAwesomeIcon icon={faTrash} size="xs" />
-                  </IconButton>
-                </Tooltip>
-              </div>
-            ) : null}
-          </div>
-          <div style={{ width: "100%", marginLeft: "54px" }}>
-            <StepType value={this.props.step.type} index={index} />
-            <Textfield
-              value={this.props.step.headline}
-              property={"headline"}
-              label={"Überschrift"}
-              index={index}
-              error={this.props.error.steps[index].headline}
-              errorText={`Gib eine Überschrift für die ${
-                this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
-              } ein.`}
-            />
-            <MarkdownEditor
-              value={this.props.step.text}
-              property={"text"}
-              label={
-                this.props.step.type === "task"
-                  ? "Aufgabenstellung"
-                  : "Instruktionen"
-              }
-              index={index}
-              multiline
-              error={this.props.error.steps[index].text}
-              errorText={`Gib Instruktionen für die ${
-                this.props.step.type === "task" ? "Aufgabe" : "Anleitung"
-              } ein.`}
-            />
-            {index === 0 ? (
-              <div>
-                <Requirements
-                  value={
-                    this.props.step.requirements
-                      ? this.props.step.requirements
-                      : []
-                  }
-                  index={index}
-                />
-                <Hardware
-                  value={
-                    this.props.step.hardware ? this.props.step.hardware : []
-                  }
-                  index={index}
-                  error={this.props.error.steps[index].hardware}
-                />
-              </div>
-            ) : null}
-            <BlocklyExample
-              value={this.props.step.xml}
-              index={index}
-              task={this.props.step.type === "task"}
-              error={this.props.error.steps[index].xml ? true : false}
-            />
-          </div>
-        </div>
-      </div>
-    );
-  }
-}
-
-Step.propTypes = {
-  addStep: PropTypes.func.isRequired,
-  removeStep: PropTypes.func.isRequired,
-  changeStepIndex: PropTypes.func.isRequired,
-  steps: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
-  error: PropTypes.object.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  steps: state.builder.steps,
-  change: state.builder.change,
-  error: state.builder.error,
-});
-
-export default connect(mapStateToProps, {
-  addStep,
-  removeStep,
-  changeStepIndex,
-})(withStyles(styles, { withTheme: true })(Step));
diff --git a/src/components/Tutorial/Builder/StepType.jsx b/src/components/Tutorial/Builder/StepType.jsx
deleted file mode 100644
index 127de3ce..00000000
--- a/src/components/Tutorial/Builder/StepType.jsx
+++ /dev/null
@@ -1,59 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  changeContent,
-  deleteProperty,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import Radio from "@mui/material/Radio";
-import RadioGroup from "@mui/material/RadioGroup";
-import FormControlLabel from "@mui/material/FormControlLabel";
-
-class StepType extends Component {
-  onChange = (value) => {
-    this.props.changeContent(value, this.props.index, "type");
-    // delete property 'xml', so that all used blocks are reset
-    this.props.deleteProperty(this.props.index, "xml");
-    if (value === "task") {
-      this.props.deleteError(undefined, "type");
-    }
-  };
-
-  render() {
-    return (
-      <RadioGroup
-        row
-        value={this.props.value === "task" ? "task" : "instruction"}
-        onChange={(e) => this.onChange(e.target.value)}
-      >
-        <FormControlLabel
-          style={{ color: "black" }}
-          value="instruction"
-          control={<Radio />}
-          label="Anleitung"
-          labelPlacement="end"
-        />
-        <FormControlLabel
-          style={{ color: "black" }}
-          disabled={this.props.index === 0}
-          value="task"
-          control={<Radio />}
-          label="Aufgabe"
-          labelPlacement="end"
-        />
-      </RadioGroup>
-    );
-  }
-}
-
-StepType.propTypes = {
-  changeContent: PropTypes.func.isRequired,
-  deleteProperty: PropTypes.func.isRequired,
-  deleteError: PropTypes.func.isRequired,
-};
-
-export default connect(null, { changeContent, deleteProperty, deleteError })(
-  StepType,
-);
diff --git a/src/components/Tutorial/Builder/Textfield.jsx b/src/components/Tutorial/Builder/Textfield.jsx
deleted file mode 100644
index bd73e38d..00000000
--- a/src/components/Tutorial/Builder/Textfield.jsx
+++ /dev/null
@@ -1,122 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  tutorialTitle,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-} from "../../../actions/tutorialBuilderActions";
-
-import withStyles from "@mui/styles/withStyles";
-import OutlinedInput from "@mui/material/OutlinedInput";
-import InputLabel from "@mui/material/InputLabel";
-import FormControl from "@mui/material/FormControl";
-import FormHelperText from "@mui/material/FormHelperText";
-
-const styles = (theme) => ({
-  multiline: {
-    padding: "18.5px 14px 18.5px 24px",
-  },
-  errorColor: {
-    color: `${theme.palette.error.dark} !important`,
-  },
-  errorColorShrink: {
-    color: `rgba(0, 0, 0, 0.54) !important`,
-  },
-  errorBorder: {
-    borderColor: `${theme.palette.error.dark} !important`,
-  },
-});
-
-class Textfield extends Component {
-  handleChange = (e) => {
-    var value = e.target.value;
-    if (this.props.property === "title") {
-      this.props.tutorialTitle(value);
-    } else if (this.props.property === "json") {
-      this.props.jsonString(value);
-    } else {
-      this.props.changeContent(
-        value,
-        this.props.index,
-        this.props.property,
-        this.props.property2,
-      );
-    }
-    if (value.replace(/\s/g, "") === "") {
-      this.props.setError(this.props.index, this.props.property);
-    } else {
-      this.props.deleteError(this.props.index, this.props.property);
-    }
-  };
-
-  render() {
-    return (
-      <FormControl
-        variant="outlined"
-        fullWidth
-        style={{ marginBottom: "10px" }}
-      >
-        <InputLabel
-          htmlFor={this.props.property}
-          classes={{
-            shrink: this.props.error
-              ? this.props.classes.errorColorShrink
-              : null,
-          }}
-        >
-          {this.props.label}
-        </InputLabel>
-        <OutlinedInput
-          style={{ borderRadius: "25px" }}
-          classes={{
-            multiline: this.props.classes.multiline,
-            notchedOutline: this.props.error
-              ? this.props.classes.errorBorder
-              : null,
-          }}
-          error={this.props.error}
-          value={this.props.value}
-          label={this.props.label}
-          id={this.props.property}
-          multiline={this.props.multiline}
-          rows={2}
-          rowsMax={10}
-          onChange={(e) => this.handleChange(e)}
-        />
-        {this.props.error ? (
-          this.props.property === "title" ? (
-            <FormHelperText className={this.props.classes.errorColor}>
-              Gib einen Titel für das Tutorial ein.
-            </FormHelperText>
-          ) : this.props.property === "json" ? (
-            <FormHelperText className={this.props.classes.errorColor}>
-              Gib einen JSON-String ein und bestätige diesen mit einem Klick auf
-              den entsprechenden Button
-            </FormHelperText>
-          ) : (
-            <FormHelperText className={this.props.classes.errorColor}>
-              {this.props.errorText}
-            </FormHelperText>
-          )
-        ) : null}
-      </FormControl>
-    );
-  }
-}
-
-Textfield.propTypes = {
-  tutorialTitle: PropTypes.func.isRequired,
-  jsonString: PropTypes.func.isRequired,
-  changeContent: PropTypes.func.isRequired,
-};
-
-export default connect(null, {
-  tutorialTitle,
-  jsonString,
-  changeContent,
-  setError,
-  deleteError,
-})(withStyles(styles, { withTheme: true })(Textfield));
diff --git a/src/components/Tutorial/Builder/TutorialBuilderProgessCard.jsx b/src/components/Tutorial/Builder/TutorialBuilderProgessCard.jsx
new file mode 100644
index 00000000..b05c8fdf
--- /dev/null
+++ b/src/components/Tutorial/Builder/TutorialBuilderProgessCard.jsx
@@ -0,0 +1,596 @@
+import React, { act, useState } from "react";
+import {
+  Box,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  useTheme,
+  IconButton,
+  TextField,
+  ToggleButtonGroup,
+  ToggleButton,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import DeleteIcon from "@mui/icons-material/Delete";
+import DragHandleIcon from "@mui/icons-material/DragHandle";
+import { DragDropContext, Droppable, Draggable } from "react-beautiful-dnd";
+import HardwareSelectorModal from "./AddNewHardware";
+import {
+  SaveOutlined,
+  Save,
+  Expand,
+  ExpandCircleDown,
+} from "@mui/icons-material";
+import { Accordion, AccordionSummary, AccordionDetails } from "@mui/material";
+import { Autocomplete } from "@mui/material";
+const SUBJECTS = [
+  "Informatik",
+  "Physik",
+  "Mathematik",
+  "Biologie",
+  "Chemie",
+  "Technik",
+  "Digitale Bildung",
+  "Sonstiges",
+];
+
+const TOPICS = [
+  "Algorithmen",
+  "Datenstrukturen",
+  "Sensoren",
+  "Microcontroller",
+  "KI / Machine Learning",
+  "Robotik",
+  "Webentwicklung",
+  "Spieleentwicklung",
+  "Datenvisualisierung",
+  "Netzwerke",
+  "Cybersecurity",
+  "Nachhaltigkeit & Technik",
+];
+
+const TutorialBuilderProgressCard = ({
+  title,
+  setTitle,
+  subtitle,
+  setSubtitle,
+  steps,
+  setSteps,
+  difficulty,
+  setDifficulty,
+  selectedHardware,
+  setSelectedHardware,
+  activeStep,
+  setActiveStep,
+  setAutosaveEnabled,
+  autosaveEnabled,
+  subjects,
+  topics,
+  setSubjects,
+  setTopics,
+  duration,
+  setDuration,
+  year,
+  setYear,
+}) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const tutorialFromStore = useSelector((state) => state.tutorial.tutorials[0]);
+
+  const [modalOpen, setModalOpen] = useState(false);
+  const progress = ((activeStep + 1) / steps.length) * 100;
+
+  const changeStep = (stepIndex) => {
+    dispatch({ type: "TUTORIAL_STEP", payload: stepIndex });
+  };
+  const updateStep = (index, key, value) => {
+    const updated = [...steps];
+    updated[index][key] = value;
+    setSteps(updated);
+  };
+
+  const addStep = () => {
+    const newStep = {
+      id: `step-${Date.now()}`,
+      title: ``,
+      subtitle: "",
+      type: "task",
+      xml: "",
+    };
+
+    const updatedSteps = [...steps];
+    // Füge neuen Step direkt nach dem aktiven Step ein
+    updatedSteps.splice(activeStep + 1, 0, newStep);
+
+    setSteps(updatedSteps);
+    setActiveStep(activeStep + 1); // optional: gleich zum neuen Step springen
+  };
+
+  const deleteStep = (index) => {
+    const updated = [...steps];
+    updated.splice(index, 1);
+    setSteps(updated);
+  };
+
+  const handleDragEnd = (result) => {
+    if (!result.destination) return;
+    const items = Array.from(steps);
+    const [reorderedItem] = items.splice(result.source.index, 1);
+    items.splice(result.destination.index, 0, reorderedItem);
+    setActiveStep(result.destination.index);
+    setSteps(items);
+
+    // Wenn der verschobene Step aktiv war → neuen Index dispatchen
+    if (activeStep === result.source.index) {
+      dispatch({
+        type: "TUTORIAL_STEP",
+        payload: result.destination.index,
+      });
+    }
+  };
+
+  return (
+    <Card
+      sx={{ borderRadius: 3, boxShadow: 3, overflow: "scroll", height: "100%" }}
+    >
+      <CardHeader
+        title={
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <TextField
+              variant="standard"
+              id="tutorial-title"
+              fullWidth
+              value={title}
+              onChange={(e) => setTitle(e.target.value)}
+              InputProps={{
+                sx: {
+                  fontWeight: 600,
+                  fontSize: "1.25rem", // entspricht Typography h6
+                },
+              }}
+              placeholder="Tutorial Titel"
+            />
+            <IconButton
+              onClick={() => setAutosaveEnabled(!autosaveEnabled)}
+              size="small"
+              color={autosaveEnabled ? "primary" : "default"}
+              title={
+                autosaveEnabled
+                  ? "Zwischenspeichern aktiviert"
+                  : "Zwischenspeichern deaktiviert"
+              }
+            >
+              {autosaveEnabled ? <Save /> : <SaveOutlined />}
+            </IconButton>
+          </Box>
+        }
+        subheader={
+          <Box sx={{ mt: 1, display: "flex", flexDirection: "column", gap: 1 }}>
+            {/* Kurzbeschreibung */}
+            <TextField
+              id="tutorial-subtitle"
+              variant="standard"
+              fullWidth
+              value={subtitle}
+              onChange={(e) => setSubtitle(e.target.value)}
+              placeholder="Kurzbeschreibung eingeben…"
+              InputProps={{
+                sx: {
+                  fontSize: "0.875rem", // entspricht body2
+                  color: "text.secondary",
+                },
+              }}
+            />
+          </Box>
+        }
+      />
+      <CardContent
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 1,
+        }}
+      >
+        <Accordion
+          sx={{
+            boxShadow: "none",
+            border: "1px solid #e0e0e0",
+            borderRadius: 2,
+            "&:before": { display: "none" },
+          }}
+        >
+          <AccordionSummary expandIcon={<ExpandCircleDown />}>
+            <Typography
+              id={"accordion_builder_advanced"}
+              sx={{ fontWeight: 600 }}
+            >
+              Erweitert
+            </Typography>
+          </AccordionSummary>
+
+          <AccordionDetails>
+            {/* 🔥 Schwierigkeitsgrad */}
+            <Box sx={{ mb: 1.5 }}>
+              <Typography
+                sx={{ fontWeight: 600, fontSize: "0.875rem", mb: 0.5 }}
+              >
+                Schwierigkeitsgrad
+              </Typography>
+              <ToggleButtonGroup
+                value={difficulty}
+                exclusive
+                onChange={(e, newValue) => newValue && setDifficulty(newValue)}
+                sx={{
+                  justifyContent: "space-between",
+                  flexWrap: "wrap",
+                  gap: 0.5,
+                  "& .MuiToggleButton-root": {
+                    border: "1px solid #c4c4c4",
+                    borderRadius: "6px",
+                    flex: "1 1 30%",
+                    minWidth: "80px",
+                    padding: "4px 8px",
+                    fontSize: "0.75rem",
+                  },
+                  "& .MuiToggleButton-root.Mui-selected": {
+                    backgroundColor: theme.palette.primary.main,
+                    fontWeight: 700,
+                    color: "#fff",
+                    "&:hover": { backgroundColor: theme.palette.primary.dark },
+                  },
+                  "& .MuiToggleButton-root:hover": {
+                    backgroundColor: theme.palette.primary.light,
+                    color: "#fff",
+                  },
+                }}
+              >
+                <ToggleButton value={1}>Sehr leicht</ToggleButton>
+                <ToggleButton value={2}>Leicht</ToggleButton>
+                <ToggleButton value={3}>Mittel</ToggleButton>
+                <ToggleButton value={4}>Schwer</ToggleButton>
+                <ToggleButton value={5}>Sehr schwer</ToggleButton>
+              </ToggleButtonGroup>
+            </Box>
+
+            {/* 🕒 Dauer */}
+            <Box sx={{ mb: 1 }}>
+              <Typography
+                sx={{ fontWeight: 600, fontSize: "0.875rem", mb: 0.5 }}
+              >
+                Dauer (in Minuten)
+              </Typography>
+              <TextField
+                fullWidth
+                size="small"
+                type="number"
+                inputProps={{ min: 1, step: 5 }}
+                value={duration || ""}
+                onChange={(e) => setDuration(e.target.value)}
+                placeholder="z. B. 45"
+                variant="outlined"
+                sx={{ fontSize: "0.875rem" }}
+              />
+            </Box>
+
+            {/* 📚 Jahrgangsstufe */}
+            <Box sx={{ mb: 1 }}>
+              <Typography
+                sx={{ fontWeight: 600, fontSize: "0.875rem", mb: 0.5 }}
+              >
+                Jahrgangsstufe
+              </Typography>
+              <TextField
+                fullWidth
+                size="small"
+                value={year || ""}
+                onChange={(e) => setYear(e.target.value)}
+                placeholder="z. B. 7–9"
+                variant="outlined"
+                sx={{ fontSize: "0.875rem" }}
+              />
+            </Box>
+
+            {/* 📚 Fächer – Mehrfachauswahl */}
+            <Box sx={{ mb: 1 }}>
+              <Typography
+                sx={{ fontWeight: 600, fontSize: "0.875rem", mb: 0.5 }}
+              >
+                Fächer
+              </Typography>
+              <Autocomplete
+                multiple
+                freeSolo
+                options={SUBJECTS}
+                value={subjects}
+                onChange={(event, newValue) => {
+                  setSubjects(newValue);
+                }}
+                renderInput={(params) => (
+                  <TextField
+                    {...params}
+                    size="small"
+                    placeholder="Fächer hinzufügen..."
+                    variant="outlined"
+                  />
+                )}
+                ChipProps={{
+                  sx: {
+                    backgroundColor: theme.palette.primary.main,
+                    color: "white",
+                    fontWeight: 600,
+                    "& .MuiChip-deleteIcon": {
+                      color: "white",
+                      "&:hover": {
+                        color: "error.light",
+                      },
+                    },
+                  },
+                }}
+                sx={{ fontSize: "0.875rem" }}
+              />
+            </Box>
+
+            <Autocomplete
+              multiple
+              freeSolo
+              options={TOPICS}
+              value={topics}
+              onChange={(event, newValue) => {
+                setTopics(newValue);
+              }}
+              renderInput={(params) => (
+                <TextField
+                  {...params}
+                  size="small"
+                  placeholder="Themen hinzufügen..."
+                  variant="outlined"
+                />
+              )}
+              ChipProps={{
+                sx: {
+                  backgroundColor: theme.palette.primary.main,
+                  color: "white",
+                  fontWeight: 600,
+                  "& .MuiChip-deleteIcon": {
+                    color: "white",
+                    "&:hover": {
+                      color: "error.light",
+                    },
+                  },
+                },
+              }}
+              sx={{ fontSize: "0.875rem" }}
+            />
+
+            {/* 🧱 Hardware Selection */}
+            <Box sx={{ mt: 1.5 }}>
+              <Box
+                sx={{
+                  display: "flex",
+                  justifyContent: "space-between",
+                  alignItems: "center",
+                  mb: 0.5,
+                }}
+              >
+                <Typography sx={{ fontWeight: 600, fontSize: "0.875rem" }}>
+                  Benötigte Hardware
+                </Typography>
+                <HardwareSelectorModal
+                  open={modalOpen}
+                  onClose={() => setModalOpen(false)}
+                  selectedHardware={selectedHardware}
+                  onHardwareSelect={setSelectedHardware}
+                />
+              </Box>
+            </Box>
+          </AccordionDetails>
+        </Accordion>
+        {/* Übersicht der ausgewählten Hardware */}
+        {selectedHardware.length > 0 && (
+          <Box
+            sx={{
+              display: "flex",
+              flexWrap: "wrap",
+              gap: 1,
+              mt: 1,
+            }}
+          >
+            {selectedHardware.map((hw) => (
+              <Box
+                key={hw}
+                sx={{
+                  px: 1.5,
+                  py: 0.5,
+                  borderRadius: 1.5,
+                  bgcolor: theme.palette.primary.main,
+                  color: "white",
+                  fontSize: "0.8rem",
+                  fontWeight: 500,
+                }}
+              >
+                {hw}
+              </Box>
+            ))}
+          </Box>
+        )}
+
+        {/* Steps mit Drag & Drop */}
+        <Box sx={{ position: "relative" }}>
+          <DragDropContext onDragEnd={handleDragEnd}>
+            <Droppable droppableId="steps">
+              {(provided) => (
+                <Box
+                  {...provided.droppableProps}
+                  ref={provided.innerRef}
+                  sx={{
+                    overflowY: "auto",
+                    p: 1,
+                    border: "1px solid #e0e0e0",
+                    borderRadius: 2,
+                    boxShadow: "0 2px 6px rgba(0,0,0,0.1)",
+                  }}
+                >
+                  {steps.map((step, index) => {
+                    const isCurrent = index === activeStep;
+
+                    return (
+                      <Draggable
+                        key={step._id || step.id}
+                        draggableId={step._id || step.id}
+                        index={index}
+                      >
+                        {(provided, snapshot) => (
+                          <Box
+                            ref={provided.innerRef}
+                            {...provided.draggableProps} // immer hier dran!
+                            onClick={() => setActiveStep(index)}
+                            sx={{
+                              display: "flex",
+                              alignItems: "center",
+                              border: "1px solid #e0e0e0", // ✅ dünner Rahmen
+                              borderRadius: 2, // ✅ abgerundet
+                              boxShadow: "0 2px 6px rgba(0,0,0,0.1)", // ✅ dezenter Shadow
+
+                              gap: 2,
+                              px: 2,
+                              py: 1.5,
+                              mb: 1,
+                              borderRadius: 2,
+                              bgcolor: isCurrent
+                                ? theme.palette.primary.main
+                                : snapshot.isDragging
+                                  ? theme.palette.action.selected
+                                  : "transparent",
+                              color: isCurrent
+                                ? theme.palette.primary.contrastText
+                                : theme.palette.text.primary,
+                              boxShadow: snapshot.isDragging
+                                ? "0 4px 8px rgba(0,0,0,0.2)"
+                                : "none",
+                            }}
+                          >
+                            <RadioButtonUncheckedIcon
+                              sx={{
+                                color: isCurrent
+                                  ? theme.palette.primary.contrastText
+                                  : theme.palette.text.secondary,
+                                flexShrink: 0,
+                                cursor: "pointer",
+                              }}
+                            />
+
+                            {/* Titel + Untertitel */}
+                            <Box sx={{ flex: 1, minWidth: 0 }}>
+                              <TextField
+                                value={step.title}
+                                placeholder="Neuer Schritt"
+                                onChange={(e) =>
+                                  updateStep(index, "title", e.target.value)
+                                }
+                                variant="standard"
+                                fullWidth
+                                InputProps={{
+                                  disableUnderline: true,
+                                  style: {
+                                    color: isCurrent
+                                      ? theme.palette.primary.contrastText
+                                      : theme.palette.text.primary,
+                                    fontWeight: isCurrent ? 600 : 400,
+                                  },
+                                }}
+                              />
+                              <TextField
+                                id="tutorial-subtitle"
+                                value={step.subtitle}
+                                placeholder="Beschreibung hinzufügen"
+                                onChange={(e) =>
+                                  updateStep(index, "subtitle", e.target.value)
+                                }
+                                variant="standard"
+                                fullWidth
+                                InputProps={{
+                                  disableUnderline: true,
+                                  style: {
+                                    color: isCurrent
+                                      ? theme.palette.primary.contrastText
+                                      : theme.palette.text.secondary,
+                                    fontSize: "0.8rem",
+                                  },
+                                }}
+                              />
+                            </Box>
+
+                            {/* Trash Icon */}
+                            <IconButton
+                              size="small"
+                              onClick={(e) => {
+                                e.stopPropagation();
+                                deleteStep(index);
+                              }}
+                              sx={{ color: theme.palette.error.main }}
+                            >
+                              <DeleteIcon />
+                            </IconButton>
+
+                            {/* Drag Handle Icon */}
+                            <IconButton
+                              size="small"
+                              onClick={(e) => e.stopPropagation()}
+                              {...provided.dragHandleProps} // ✅ DragHandle hier
+                              sx={{
+                                color:
+                                  activeStep === index
+                                    ? theme.palette.primary.contrastText
+                                    : theme.palette.text.secondary,
+                                cursor: "grab",
+                              }}
+                            >
+                              <DragHandleIcon />
+                            </IconButton>
+                          </Box>
+                        )}
+                      </Draggable>
+                    );
+                  })}{" "}
+                  {provided.placeholder}
+                </Box>
+              )}
+            </Droppable>
+          </DragDropContext>
+
+          {/* Plus-Button sticky */}
+          <Box
+            sx={{
+              position: "sticky",
+              bottom: 0,
+              background: "white",
+              display: "flex",
+              justifyContent: "center",
+              p: 1,
+              mt: 1,
+              borderTop: "1px solid #eee",
+            }}
+          >
+            <IconButton
+              onClick={addStep}
+              color="primary"
+              sx={{
+                border: `2px dashed ${theme.palette.primary.main}`,
+                borderRadius: "50%",
+                width: 40,
+                height: 40,
+              }}
+            >
+              <AddCircleOutlineIcon />
+            </IconButton>
+          </Box>
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TutorialBuilderProgressCard;
diff --git a/src/components/Tutorial/Builder/WhatNext.jsx b/src/components/Tutorial/Builder/WhatNext.jsx
new file mode 100644
index 00000000..6379da1e
--- /dev/null
+++ b/src/components/Tutorial/Builder/WhatNext.jsx
@@ -0,0 +1,101 @@
+import {
+  Box,
+  Typography,
+  TextField,
+  IconButton,
+  Button,
+  useTheme,
+} from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
+import DeleteIcon from "@mui/icons-material/Delete";
+
+const WhatNext = ({ learnings, setLearnings }) => {
+  const theme = useTheme();
+
+  const addLearning = () =>
+    setLearnings([...learnings, { title: "", description: "" }]);
+
+  const deleteLearning = (index) =>
+    setLearnings(learnings.filter((_, i) => i !== index));
+
+  const updateLearning = (index, key, value) => {
+    const updated = [...learnings];
+    updated[index][key] = value;
+    setLearnings(updated);
+  };
+
+  return (
+    <Box
+      sx={{
+        bgcolor: theme.palette.primary[50] || theme.palette.action.hover,
+        borderRadius: 2,
+        p: 4,
+        mb: 4,
+        mt: 4,
+      }}
+    >
+      <Typography variant="h6" fontWeight={600} color="primary" gutterBottom>
+        Was du gelernt hast
+      </Typography>
+
+      <Box
+        sx={{ display: "flex", flexWrap: "wrap", gap: 2, textAlign: "left" }}
+      >
+        {learnings.map((item, index) => (
+          <Box
+            key={index}
+            sx={{ flex: "1 1 calc(50% - 10px)", boxSizing: "border-box" }}
+          >
+            <Box sx={{ display: "flex", alignItems: "flex-start", gap: 2 }}>
+              <CheckCircleIcon
+                sx={{ color: theme.palette.primary.main, mt: "2px" }}
+              />
+              <Box sx={{ flex: 1 }}>
+                <TextField
+                  variant="standard"
+                  value={item.title}
+                  onChange={(e) =>
+                    updateLearning(index, "title", e.target.value)
+                  }
+                  fullWidth
+                  placeholder="Titel des Learnings"
+                />
+                <TextField
+                  variant="standard"
+                  value={item.description}
+                  onChange={(e) =>
+                    updateLearning(index, "description", e.target.value)
+                  }
+                  fullWidth
+                  placeholder="Beschreibung des Learnings"
+                  InputProps={{
+                    sx: { fontSize: "0.85rem", color: "text.secondary" },
+                  }}
+                />
+              </Box>
+              <IconButton
+                size="small"
+                onClick={() => deleteLearning(index)}
+                sx={{ color: theme.palette.error.main }}
+              >
+                <DeleteIcon fontSize="small" />
+              </IconButton>
+            </Box>
+          </Box>
+        ))}
+      </Box>
+
+      <Button
+        variant="outlined"
+        startIcon={<AddCircleOutlineIcon />}
+        onClick={addLearning}
+        sx={{ mt: 3 }}
+      >
+        Neues Learning hinzufügen
+      </Button>
+    </Box>
+  );
+};
+
+export default WhatNext;
diff --git a/src/components/Tutorial/DifficultyLabel.jsx b/src/components/Tutorial/DifficultyLabel.jsx
new file mode 100644
index 00000000..6c90671f
--- /dev/null
+++ b/src/components/Tutorial/DifficultyLabel.jsx
@@ -0,0 +1,55 @@
+import React from "react";
+import { Box } from "@mui/material";
+
+const difficultyColors = {
+  SEHR_LEICHT: {
+    background: "#dcfce7", // bg-green-100
+    text: "#166534", // text-green-800
+    border: "#bbf7d0", // border-green-200
+  },
+  LEICHT: {
+    background: "#dbeafe", // bg-blue-100
+    text: "#1e40af", // text-blue-800
+    border: "#bfdbfe", // border-blue-200
+  },
+  MITTEL: {
+    background: "#fef3c7", // bg-yellow-100
+    text: "#92400e", // text-yellow-800
+    border: "#fde68a", // border-yellow-200
+  },
+  SCHWER: {
+    background: "#fed7aa", // bg-orange-100
+    text: "#9a3412", // text-orange-800
+    border: "#fdba74", // border-orange-200
+  },
+  SEHR_SCHWER: {
+    background: "#fee2e2", // bg-red-100
+    text: "#991b1b", // text-red-800
+    border: "#fecaca", // border-red-200
+  },
+};
+
+const DifficultyLabel = ({ level }) => {
+  const colors = difficultyColors[level] || difficultyColors.MITTEL; // Fallback
+
+  return (
+    <Box
+      sx={{
+        display: "inline-block",
+        px: 2,
+        py: 0.5,
+        borderRadius: "20px",
+        fontWeight: "bold",
+        fontSize: "0.875rem",
+        textAlign: "center",
+        color: colors.text,
+        backgroundColor: colors.background,
+        border: `1px solid ${colors.border}`,
+      }}
+    >
+      {level.replace("_", " ")} {/* Text direkt aus Key */}
+    </Box>
+  );
+};
+
+export default DifficultyLabel;
diff --git a/src/components/Tutorial/Hardware.jsx b/src/components/Tutorial/Hardware.jsx
deleted file mode 100644
index b1394c32..00000000
--- a/src/components/Tutorial/Hardware.jsx
+++ /dev/null
@@ -1,156 +0,0 @@
-import React, { Component } from "react";
-
-import Dialog from "../ui/Dialog";
-
-import hardware from "../../data/hardware.json";
-
-import withStyles from "@mui/styles/withStyles";
-import Link from "@mui/material/Link";
-import Typography from "@mui/material/Typography";
-import IconButton from "@mui/material/IconButton";
-import ImageList from "@mui/material/ImageList";
-import ImageListItem from "@mui/material/ImageListItem";
-import ImageListItemBar from "@mui/material/ImageListItemBar";
-
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-import { faExpandAlt } from "@fortawesome/free-solid-svg-icons";
-import * as Blockly from "blockly";
-import { isWidthDown } from "../../helpers/handleBreakpoints";
-
-// FIXME checkout https://mui.com/components/use-media-query/#migrating-from-withwidth
-const withWidth = () => (WrappedComponent) => (props) => (
-  <WrappedComponent {...props} width="xs" />
-);
-
-const styles = (theme) => ({
-  expand: {
-    "&:hover": {
-      color: theme.palette.primary.main,
-    },
-    "&:active": {
-      color: theme.palette.primary.main,
-    },
-    color: theme.palette.text.primary,
-  },
-  multiImageListItem: {
-    background: theme.palette.primary.main,
-    opacity: 0.9,
-    height: "30px",
-  },
-  multiImageListItemTitle: {
-    color: theme.palette.text.primary,
-  },
-});
-
-class Hardware extends Component {
-  state = {
-    open: false,
-    hardwareInfo: {},
-  };
-
-  handleClickOpen = (hardwareInfo) => {
-    this.setState({ open: true, hardwareInfo });
-  };
-
-  handleClose = () => {
-    this.setState({ open: false, hardwareInfo: {} });
-  };
-
-  render() {
-    var cols = isWidthDown("md", window.innerWidth)
-      ? isWidthDown("sm", window.innerWidth)
-        ? isWidthDown("xs", window.innerWidth)
-          ? 2
-          : 3
-        : 4
-      : 6;
-    return (
-      <div style={{ marginTop: "10px", marginBottom: "5px" }}>
-        <Typography>{Blockly.Msg.tutorials_hardware_head}</Typography>
-
-        <ImageList rowHeight={100} cols={cols} gap={10}>
-          {this.props.picture.map((picture, i) => {
-            var hardwareInfo = hardware.filter(
-              (hardware) => hardware.id === picture,
-            )[0];
-            return (
-              <ImageListItem key={i}>
-                <div
-                  style={{
-                    margin: "auto",
-                    width: "max-content",
-                  }}
-                >
-                  <img
-                    src={`/media/hardware/${hardwareInfo.src}`}
-                    alt={hardwareInfo.name}
-                    height={100}
-                    style={{ cursor: "pointer" }}
-                    onClick={() => this.handleClickOpen(hardwareInfo)}
-                  />
-                </div>
-                <ImageListItemBar
-                  classes={{
-                    root: this.props.classes.multiImageListItem,
-                  }}
-                  title={
-                    <div
-                      style={{
-                        overflow: "hidden",
-                        textOverflow: "ellipsis",
-                      }}
-                      className={this.props.classes.multiImageListItemTitle}
-                    >
-                      {hardwareInfo.name}
-                    </div>
-                  }
-                  actionIcon={
-                    <IconButton
-                      className={this.props.classes.expand}
-                      aria-label="Vollbild"
-                      onClick={() => this.handleClickOpen(hardwareInfo)}
-                      size="large"
-                    >
-                      <FontAwesomeIcon icon={faExpandAlt} size="xs" />
-                    </IconButton>
-                  }
-                />
-              </ImageListItem>
-            );
-          })}
-        </ImageList>
-
-        <Dialog
-          style={{ zIndex: 1500 }}
-          open={this.state.open}
-          title={`Hardware: ${this.state.hardwareInfo.name}`}
-          content={this.state.content}
-          onClose={this.handleClose}
-          onClick={this.handleClose}
-          button={Blockly.Msg.button_close}
-        >
-          <div>
-            <img
-              src={`/media/hardware/${this.state.hardwareInfo.src}`}
-              width="100%"
-              alt={this.state.hardwareInfo.name}
-            />
-            {Blockly.Msg.tutorials_hardware_moreInformation}{" "}
-            <Link
-              rel="noreferrer"
-              target="_blank"
-              href={this.state.hardwareInfo.url}
-              color="primary"
-              underline="hover"
-            >
-              {Blockly.Msg.tutorials_hardware_here}
-            </Link>
-            .
-          </div>
-        </Dialog>
-      </div>
-    );
-  }
-}
-
-export default withWidth()(withStyles(styles, { withTheme: true })(Hardware));
diff --git a/src/components/Tutorial/HintTutorialExists.jsx b/src/components/Tutorial/HintTutorialExists.jsx
deleted file mode 100644
index 6a32b45e..00000000
--- a/src/components/Tutorial/HintTutorialExists.jsx
+++ /dev/null
@@ -1,101 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import Dialog from "../Dialog";
-
-import withStyles from "@mui/styles/withStyles";
-import Checkbox from "@mui/material/Checkbox";
-import FormControlLabel from "@mui/material/FormControlLabel";
-import * as Blockly from "blockly";
-import ReactMarkdown from "react-markdown";
-
-const styles = (theme) => ({
-  link: {
-    color: theme.palette.primary.main,
-    textDecoration: "none",
-    "&:hover": {
-      color: theme.palette.primary.main,
-      textDecoration: `underline`,
-    },
-  },
-  label: {
-    fontSize: "0.9rem",
-    color: "grey",
-  },
-});
-
-class HintTutorialExists extends Component {
-  constructor(props) {
-    var previousPageWasAnotherDomain = props.pageVisits === 0;
-    var userDoNotWantToSeeNews = window.localStorage.getItem("news")
-      ? true
-      : false;
-    super(props);
-    this.state = {
-      open: userDoNotWantToSeeNews
-        ? !userDoNotWantToSeeNews
-        : previousPageWasAnotherDomain,
-    };
-  }
-
-  toggleDialog = () => {
-    this.setState({ open: !this.state });
-  };
-
-  onChange = (e) => {
-    if (e.target.checked) {
-      window.localStorage.setItem("news", e.target.checked);
-    } else {
-      window.localStorage.removeItem("news");
-    }
-  };
-
-  render() {
-    return (
-      <Dialog
-        style={{ zIndex: 9999999 }}
-        fullWidth
-        maxWidth={"sm"}
-        open={this.state.open}
-        title={Blockly.Msg.messages_newblockly_head}
-        content={""}
-        onClose={this.toggleDialog}
-        onClick={this.toggleDialog}
-        button={Blockly.Msg.button_close}
-      >
-        <div>
-          <ReactMarkdown linkTarget="_blank">
-            {Blockly.Msg.messages_newblockly_text}
-          </ReactMarkdown>
-        </div>
-        <FormControlLabel
-          style={{ marginTop: "20px" }}
-          classes={{ label: this.props.classes.label }}
-          control={
-            <Checkbox
-              size={"small"}
-              value={true}
-              checked={this.state.checked}
-              onChange={(e) => this.onChange(e)}
-              name="dialog"
-            />
-          }
-          label={Blockly.Msg.labels_donotshowagain}
-        />
-      </Dialog>
-    );
-  }
-}
-
-HintTutorialExists.propTypes = {
-  pageVisits: PropTypes.number.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  pageVisits: state.general.pageVisits,
-});
-
-export default connect(
-  mapStateToProps,
-  null,
-)(withStyles(styles, { withTheme: true })(HintTutorialExists));
diff --git a/src/components/Tutorial/Instruction.jsx b/src/components/Tutorial/Instruction.jsx
deleted file mode 100644
index eb0b5948..00000000
--- a/src/components/Tutorial/Instruction.jsx
+++ /dev/null
@@ -1,99 +0,0 @@
-import React, { Component } from "react";
-
-import Hardware from "./Hardware";
-import Requirement from "./Requirement";
-import BlocklyWindow from "../Blockly/BlocklyWindow";
-
-import Grid from "@mui/material/Grid";
-import Typography from "@mui/material/Typography";
-import ReactMarkdown from "react-markdown";
-import remarkGfm from "remark-gfm";
-import remarkGemoji from "remark-gemoji";
-
-class Instruction extends Component {
-  render() {
-    var step = this.props.step;
-    var isHardware = step.hardware && step.hardware.length > 0;
-    var areRequirements = step.requirements && step.requirements.length > 0;
-    return (
-      <div>
-        <Typography style={isHardware ? {} : { marginBottom: "5px" }}>
-          <ReactMarkdown
-            className={"tutorial"}
-            linkTarget={"_blank"}
-            skipHtml={false}
-            allowDangerousHtml={true}
-            remarkPlugins={[remarkGfm, remarkGemoji]}
-          >
-            {step.text}
-          </ReactMarkdown>
-        </Typography>
-        {isHardware ? <Hardware picture={step.hardware} /> : null}
-        {areRequirements > 0 ? (
-          <Requirement requirements={step.requirements} />
-        ) : null}
-        {step.media ? (
-          step.media.picture ? (
-            <div
-              style={{
-                display: "flex",
-                justifyContent: "center",
-                marginBottom: "5px",
-              }}
-            >
-              <img
-                src={`${import.meta.env.VITE_BLOCKLY_API}/media/${step.media.picture.path}`}
-                alt=""
-                style={{ maxHeight: "40vH", maxWidth: "100%" }}
-              />
-            </div>
-          ) : step.media.youtube ? (
-            /*16:9; width: 800px; height: width/16*9=450px*/
-            <div style={{ maxWidth: "800px", margin: "auto" }}>
-              <div
-                style={{
-                  position: "relative",
-                  height: 0,
-                  paddingBottom: "calc(100% / 16 * 9)",
-                }}
-              >
-                <iframe
-                  title={step.media.youtube}
-                  style={{
-                    position: "absolute",
-                    top: "0",
-                    left: "0",
-                    width: "100%",
-                    maxWidth: "800px",
-                    height: "100%",
-                    maxHeight: "450px",
-                  }}
-                  src={`https://www.youtube.com/embed/${step.media.youtube}`}
-                  frameBorder="0"
-                  allow="accelerometer; autoplay; encrypted-media; gyroscope; picture-in-picture"
-                  allowFullScreen
-                />
-              </div>
-            </div>
-          ) : null
-        ) : null}
-        {step.xml ? (
-          <Grid container spacing={2} style={{ marginBottom: "5px" }}>
-            <Grid
-              item
-              xs={12}
-              style={{
-                display: "flex",
-                justifyContent: "center",
-              }}
-            >
-              <BlocklyWindow svg blockDisabled initialXml={step.xml} />
-            </Grid>
-          </Grid>
-        ) : null}
-      </div>
-    );
-  }
-}
-
-export default Instruction;
diff --git a/src/components/Tutorial/SolutionCheck.jsx b/src/components/Tutorial/SolutionCheck.jsx
deleted file mode 100644
index 40a44bf8..00000000
--- a/src/components/Tutorial/SolutionCheck.jsx
+++ /dev/null
@@ -1,124 +0,0 @@
-import React, { useState } from "react";
-import { useSelector, useDispatch } from "react-redux";
-import { useHistory } from "react-router-dom";
-import { tutorialCheck, tutorialStep } from "../../actions/tutorialActions";
-
-import Compile from "@/components/Workspace/ToolbarItems/Compile";
-import Dialog from "@/components/ui/Dialog";
-
-import { checkXml } from "../../helpers/compareXml";
-
-import { makeStyles } from "@mui/styles";
-import IconButton from "@mui/material/IconButton";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
-
-import { faClipboardCheck } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-import * as Blockly from "blockly";
-
-const useStyles = makeStyles((theme) => ({
-  compile: {
-    backgroundColor: theme.palette.button.compile,
-    color: theme.palette.primary.contrastText,
-    "&:hover": {
-      backgroundColor: theme.palette.button.compile,
-      color: theme.palette.primary.contrastText,
-    },
-  },
-}));
-
-export default function SolutionCheck() {
-  const classes = useStyles();
-  const dispatch = useDispatch();
-  const history = useHistory();
-
-  const activeStep = useSelector((s) => s.tutorial.activeStep);
-  const xml = useSelector((s) => s.workspace.code.xml);
-  const tutorial = useSelector((s) => s.tutorial.tutorials[0]);
-
-  const [open, setOpen] = useState(false);
-  const [msg, setMsg] = useState({});
-
-  const toggleDialog = () => {
-    if (open) {
-      setOpen(false);
-      setMsg("");
-    } else {
-      setOpen(true);
-    }
-  };
-
-  const check = () => {
-    const step = tutorial.steps[activeStep];
-    const result = checkXml(step.xml, xml);
-    dispatch(tutorialCheck(result.type, step));
-    setMsg(result);
-    setOpen(true);
-  };
-
-  const isLastStep = tutorial.steps.length - 1 === activeStep;
-
-  return (
-    <div>
-      <Tooltip title={Blockly.Msg.tooltip_check_solution} arrow>
-        <IconButton
-          className={`solutionCheck ${classes.compile}`}
-          style={{
-            width: "40px",
-            height: "40px",
-            marginRight: "5px",
-          }}
-          onClick={check}
-          size="large"
-        >
-          <FontAwesomeIcon icon={faClipboardCheck} size="xs" />
-        </IconButton>
-      </Tooltip>
-
-      <Dialog
-        style={{ zIndex: 9999999 }}
-        fullWidth
-        maxWidth={"sm"}
-        open={open}
-        title={msg.type === "error" ? "Fehler" : "Erfolg"}
-        content={msg.text}
-        onClose={toggleDialog}
-        onClick={toggleDialog}
-        button={Blockly.Msg.button_close}
-      >
-        {msg.type === "success" && (
-          <div style={{ marginTop: "20px", display: "flex" }}>
-            <Compile />
-            {isLastStep ? (
-              <Button
-                style={{ marginLeft: "10px" }}
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  toggleDialog();
-                  history.push(`/tutorial/`);
-                }}
-              >
-                {Blockly.Msg.button_tutorial_overview}
-              </Button>
-            ) : (
-              <Button
-                style={{ marginLeft: "10px" }}
-                variant="contained"
-                color="primary"
-                onClick={() => {
-                  toggleDialog();
-                  dispatch(tutorialStep(activeStep + 1));
-                }}
-              >
-                {Blockly.Msg.button_next}
-              </Button>
-            )}
-          </div>
-        )}
-      </Dialog>
-    </div>
-  );
-}
diff --git a/src/components/Tutorial/StepperHorizontal.jsx b/src/components/Tutorial/StepperHorizontal.jsx
deleted file mode 100644
index cbd30f32..00000000
--- a/src/components/Tutorial/StepperHorizontal.jsx
+++ /dev/null
@@ -1,183 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-
-import { withRouter } from "react-router-dom";
-
-import clsx from "clsx";
-
-// import tutorials from '../../data/tutorials';
-import { alpha } from "@mui/material/styles";
-
-import withStyles from "@mui/styles/withStyles";
-import Typography from "@mui/material/Typography";
-import Tooltip from "@mui/material/Tooltip";
-import Button from "@mui/material/Button";
-
-import { faCheck, faTimes } from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
-
-const styles = (theme) => ({
-  stepper: {
-    width: "calc(100% - 40px)",
-    height: "40px",
-    borderRadius: "25px",
-    padding: "0 20px",
-    margin: "20px 0",
-    display: "flex",
-    justifyContent: "space-between",
-  },
-  stepperSuccess: {
-    backgroundColor: alpha(theme.palette.primary.main, 0.6),
-  },
-  stepperError: {
-    backgroundColor: alpha(theme.palette.error.dark, 0.6),
-  },
-  stepperOther: {
-    backgroundColor: alpha(theme.palette.secondary.main, 0.6),
-  },
-  color: {
-    backgroundColor: "transparent ",
-  },
-  iconDivSuccess: {
-    color: theme.palette.primary.main,
-  },
-  iconDivError: {
-    color: theme.palette.error.dark,
-  },
-});
-
-class StepperHorizontal extends Component {
-  render() {
-    var tutorialId = this.props.tutorial._id;
-    var status = this.props.status.filter(
-      (status) => status._id === tutorialId,
-    )[0];
-    var tasks = status.tasks;
-    var error = tasks.filter((task) => task.type === "error").length > 0;
-    var success =
-      tasks.filter((task) => task.type === "success").length / tasks.length;
-    var tutorialStatus = success === 1 ? "Success" : error ? "Error" : "Other";
-    var title = this.props.tutorial.title;
-    var activeStep = this.props.activeStep;
-    return (
-      <div style={{ position: "relative" }}>
-        {error || success > 0 ? (
-          <div
-            style={{
-              zIndex: -1,
-              width: error
-                ? "calc(100% - 40px)"
-                : `calc(${success * 100}% - 40px)`,
-              borderRadius: success === 1 || error ? "25px" : "25px 0 0 25px",
-              position: "absolute",
-              margin: 0,
-              left: 0,
-            }}
-            className={clsx(
-              this.props.classes.stepper,
-              error
-                ? this.props.classes.stepperError
-                : this.props.classes.stepperSuccess,
-            )}
-          ></div>
-        ) : null}
-        {success < 1 && !error ? (
-          <div
-            style={{
-              zIndex: -2,
-              width: `calc(${(1 - success) * 100}% - 40px)`,
-              borderRadius: success === 0 ? "25px" : "0px 25px 25px 0",
-              position: "absolute",
-              margin: 0,
-              right: 0,
-            }}
-            className={clsx(
-              this.props.classes.stepper,
-              this.props.classes.stepperOther,
-            )}
-          ></div>
-        ) : null}
-        <div className={this.props.classes.stepper}>
-          <Button
-            disabled //={tutorialIndex === 0}
-            //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex - 1].id}`) }}
-          >
-            {"<"}
-          </Button>
-          <Tooltip
-            style={{
-              display: "flex",
-              width: "calc(100% - 64px - 64px)",
-              justifyContent: "center",
-            }}
-            title={title}
-            arrow
-          >
-            <div>
-              {tutorialStatus !== "Other" ? (
-                <div
-                  className={
-                    tutorialStatus === "Success" && success === 1
-                      ? this.props.classes.iconDivSuccess
-                      : this.props.classes.iconDivError
-                  }
-                  style={{ margin: "auto 10px auto 0" }}
-                >
-                  <FontAwesomeIcon
-                    className={this.props.classes.icon}
-                    icon={tutorialStatus === "Success" ? faCheck : faTimes}
-                  />
-                </div>
-              ) : null}
-              <Typography
-                variant="body2"
-                style={{
-                  fontWeight: "bold",
-                  fontSize: "1.75em",
-                  margin: 0,
-                  overflow: "hidden",
-                  textOverflow: "ellipsis",
-                  whiteSpace: "nowrap",
-                  color: "rgba(0, 0, 0, 0.54)",
-                }}
-              >
-                {title}
-                {title !== this.props.tutorial.steps[activeStep].headline
-                  ? ` - ${this.props.tutorial.steps[activeStep].headline}`
-                  : null}
-              </Typography>
-            </div>
-          </Tooltip>
-          <Button
-            disabled //={tutorialIndex + 1 === tutorials.length}
-            //onClick={() => { this.props.history.push(`/tutorial/${tutorials[tutorialIndex + 1].id}`) }}
-          >
-            {">"}
-          </Button>
-        </div>
-      </div>
-    );
-  }
-}
-
-StepperHorizontal.propTypes = {
-  status: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
-  currentTutorialIndex: PropTypes.number.isRequired,
-  tutorial: PropTypes.object.isRequired,
-  activeStep: PropTypes.number.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  change: state.tutorial.change,
-  status: state.tutorial.status,
-  currentTutorialIndex: state.tutorial.currentIndex,
-  activeStep: state.tutorial.activeStep,
-  tutorial: state.tutorial.tutorials[0],
-});
-
-export default connect(
-  mapStateToProps,
-  null,
-)(withRouter(withStyles(styles, { withTheme: true })(StepperHorizontal)));
diff --git a/src/components/Tutorial/StepperVertical.jsx b/src/components/Tutorial/StepperVertical.jsx
deleted file mode 100644
index 6cff891a..00000000
--- a/src/components/Tutorial/StepperVertical.jsx
+++ /dev/null
@@ -1,171 +0,0 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { tutorialStep } from "../../actions/tutorialActions";
-
-import { withRouter } from "react-router-dom";
-
-import clsx from "clsx";
-import { alpha } from "@mui/material/styles";
-import withStyles from "@mui/styles/withStyles";
-import Stepper from "@mui/material/Stepper";
-import Step from "@mui/material/Step";
-import StepLabel from "@mui/material/StepLabel";
-import Tooltip from "@mui/material/Tooltip";
-
-const styles = (theme) => ({
-  verticalStepper: {
-    padding: 0,
-    width: "30px",
-  },
-  stepIcon: {
-    borderStyle: `solid`,
-    // borderWidth: '2px',
-    borderRadius: "50%",
-    borderColor: theme.palette.secondary.main,
-    width: "1rem",
-    margin: "0 auto",
-  },
-  stepIconLarge: {
-    width: "2rem",
-    height: "1rem",
-  },
-  stepIconLargeSuccess: {
-    borderColor: theme.palette.primary.main,
-  },
-  stepIconLargeError: {
-    borderColor: theme.palette.error.dark,
-  },
-  stepIconActiveOther: {
-    backgroundColor: theme.palette.secondary.main,
-  },
-  stepIconActiveSuccess: {
-    backgroundColor: alpha(theme.palette.primary.main, 0.6),
-  },
-  stepIconActiveError: {
-    backgroundColor: alpha(theme.palette.error.dark, 0.6),
-  },
-  connector: {
-    height: "10px",
-    borderLeft: `2px solid black`,
-    margin: "auto",
-  },
-});
-
-class StepperVertical extends Component {
-  componentDidMount() {
-    this.props.tutorialStep(0);
-  }
-
-  componentDidUpdate(props) {
-    if (props.tutorial._id !== this.props.match.params.tutorialId) {
-      this.props.tutorialStep(0);
-    }
-  }
-
-  render() {
-    var steps = this.props.steps;
-    var activeStep = this.props.activeStep;
-    var tutorialStatus = this.props.status.filter(
-      (status) => status._id === this.props.tutorial._id,
-    )[0];
-    return (
-      <div style={{ marginRight: "10px" }}>
-        <Stepper
-          activeStep={activeStep}
-          orientation="vertical"
-          connector={<div className={this.props.classes.connector}></div>}
-          classes={{ root: this.props.classes.verticalStepper }}
-        >
-          {steps.map((step, i) => {
-            var tasksIndex = tutorialStatus.tasks.findIndex(
-              (task) => task._id === step._id,
-            );
-            var taskType =
-              tasksIndex > -1 ? tutorialStatus.tasks[tasksIndex].type : null;
-            var taskStatus =
-              taskType === "success"
-                ? "Success"
-                : taskType === "error"
-                  ? "Error"
-                  : "Other";
-            return (
-              <Step key={i}>
-                <Tooltip title={step.headline} placement="right" arrow>
-                  <div
-                    style={
-                      i === activeStep
-                        ? { padding: "5px 0" }
-                        : {
-                            padding: "5px 0",
-                            cursor: "pointer",
-                          }
-                    }
-                    onClick={
-                      i === activeStep
-                        ? null
-                        : () => {
-                            this.props.tutorialStep(i);
-                          }
-                    }
-                  >
-                    <StepLabel
-                      StepIconComponent={"div"}
-                      classes={{
-                        root:
-                          step.type === "task"
-                            ? i === activeStep
-                              ? clsx(
-                                  this.props.classes.stepIcon,
-                                  this.props.classes.stepIconLarge,
-                                  this.props.classes[
-                                    "stepIconLarge" + taskStatus
-                                  ],
-                                  this.props.classes[
-                                    "stepIconActive" + taskStatus
-                                  ],
-                                )
-                              : clsx(
-                                  this.props.classes.stepIcon,
-                                  this.props.classes.stepIconLarge,
-                                  this.props.classes[
-                                    "stepIconLarge" + taskStatus
-                                  ],
-                                )
-                            : i === activeStep
-                              ? clsx(
-                                  this.props.classes.stepIcon,
-                                  this.props.classes.stepIconActiveOther,
-                                )
-                              : clsx(this.props.classes.stepIcon),
-                      }}
-                    ></StepLabel>
-                  </div>
-                </Tooltip>
-              </Step>
-            );
-          })}
-        </Stepper>
-      </div>
-    );
-  }
-}
-
-StepperVertical.propTypes = {
-  status: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
-  activeStep: PropTypes.number.isRequired,
-  tutorialStep: PropTypes.func.isRequired,
-  tutorial: PropTypes.object.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  change: state.tutorial.change,
-  status: state.tutorial.status,
-  activeStep: state.tutorial.activeStep,
-  tutorial: state.tutorial.tutorials[0],
-});
-
-export default connect(mapStateToProps, { tutorialStep })(
-  withRouter(withStyles(styles, { withTheme: true })(StepperVertical)),
-);
diff --git a/src/components/Tutorial/Tutorial.jsx b/src/components/Tutorial/Tutorial.jsx
index b539b4ea..1a199c4c 100644
--- a/src/components/Tutorial/Tutorial.jsx
+++ b/src/components/Tutorial/Tutorial.jsx
@@ -1,196 +1,235 @@
-import React, { Component } from "react";
-import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import { workspaceName } from "../../actions/workspaceActions";
-import { clearMessages } from "../../actions/messageActions";
-import {
-  getTutorial,
-  resetTutorial,
-  tutorialStep,
-  tutorialProgress,
-} from "../../actions/tutorialActions";
-
-import { withRouter } from "react-router-dom";
+import React, { useEffect, useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { useParams } from "react-router-dom";
+
+import { getTutorial } from "../../actions/tutorialActions";
 
-import Breadcrumbs from "../ui/Breadcrumbs";
-import StepperHorizontal from "./StepperHorizontal";
-import StepperVertical from "./StepperVertical";
-import Instruction from "./Instruction";
-import Assessment from "./Assessment";
 import NotFound from "../Pages/NotFound";
+import Instruction from "./TutorialItem/Instruction";
+import TaskStep from "./TutorialItem/TaskStep";
+import TutorialProgressCard from "./TutorialItem/TutorialProgessCard";
+import TutorialFooter from "./TutorialFooter";
+import TutorialFinished from "./TutorialFinished";
+
 import * as Blockly from "blockly";
-import { detectWhitespacesAndReturnReadableResult } from "../../helpers/whitespace";
-
-import Card from "@mui/material/Card";
-import Button from "@mui/material/Button";
-
-class Tutorial extends Component {
-  componentDidMount() {
-    this.props.tutorialProgress();
-    // retrieve tutorial only if a potential user is loaded - authentication
-    // is finished (success or failed)
-    if (!this.props.progress) {
-      this.props.getTutorial(this.props.match.params.tutorialId);
+import { Box, Button, useTheme } from "@mui/material";
+import { motion, AnimatePresence } from "framer-motion";
+import Breadcrumbs from "../ui/Breadcrumbs";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+
+export default function Tutorial() {
+  const { tutorialId } = useParams();
+  const dispatch = useDispatch();
+  const theme = useTheme();
+
+  const tutorial = useSelector((state) => state.tutorial.tutorials[0]);
+
+  const message = useSelector((state) => state.message);
+  const activeStep = useSelector((state) => state.tutorial.activeStep);
+  const [nextStepDisabled, setNextStepDisabled] = useState(false);
+  const [currentStep, setCurrentStep] = useState();
+  const platform = useSelector((state) => state.general.platform);
+
+  // Initial load
+  useEffect(() => {
+    dispatch(getTutorial(tutorialId));
+    dispatch({ type: "TUTORIAL_STEP", payload: 0 });
+  }, [dispatch, tutorialId]);
+
+  useEffect(() => {
+    if (tutorial?.steps && activeStep < tutorial.steps.length) {
+      setCurrentStep(tutorial.steps[activeStep]);
+    } else {
+      setCurrentStep(null);
     }
-  }
+  }, [activeStep, tutorial]);
 
-  componentDidUpdate(props, state) {
-    if (props.progress !== this.props.progress && !this.props.progress) {
-      // authentication is completed
-      this.props.getTutorial(this.props.match.params.tutorialId);
-    } else if (
-      this.props.tutorial &&
-      !this.props.isLoading &&
-      this.props.tutorial._id !== this.props.match.params.tutorialId
+  useEffect(() => {
+    if (
+      currentStep &&
+      currentStep.questionData &&
+      currentStep.type === "question" &&
+      currentStep.questionData.length > 0
     ) {
-      this.props.getTutorial(this.props.match.params.tutorialId);
+      setNextStepDisabled(true);
+    }
+  }, [currentStep]);
+
+  const changeStep = (step) => {
+    dispatch({
+      type: "TUTORIAL_STEP",
+      payload: step,
+    });
+  };
+
+  const nextStep = () => {
+    if (activeStep < tutorial.steps.length - 1) {
+      changeStep(activeStep + 1);
     }
-    if (this.props.message.id === "GET_TUTORIAL_FAIL") {
-      alert(this.props.message.msg);
+  };
+
+  const previousStep = () => {
+    if (activeStep > 0) {
+      changeStep(activeStep - 1);
     }
-  }
+  };
 
-  componentWillUnmount() {
-    this.props.resetTutorial();
-    this.props.workspaceName(null);
-    if (this.props.message.msg) {
-      this.props.clearMessages();
+  if (!tutorial) {
+    if (message.id === "GET_TUTORIAL_FAIL") {
+      return (
+        <NotFound
+          button={{
+            title: Blockly.Msg.messages_GET_TUTORIAL_FAIL,
+            link: "/tutorial",
+          }}
+        />
+      );
     }
+    return null;
   }
 
-  render() {
-    return (
-      <div>
-        {this.props.isLoading ? null : !this.props.tutorial ? (
-          this.props.message.id === "GET_TUTORIAL_FAIL" ? (
-            <NotFound
-              button={{
-                title: Blockly.Msg.messages_GET_TUTORIAL_FAIL,
-                link: "/tutorial",
+  return (
+    <Box
+      sx={{
+        display: "flex",
+        flexDirection: "column",
+        minHeight: "85vh", // 👈 volle Höhe
+        backgroundColor: theme.palette.background.default,
+      }}
+    >
+      {/* Header (Breadcrumbs) */}
+      <Box sx={{ flexShrink: 0 }}>
+        <Breadcrumbs
+          content={[
+            { link: "/tutorial", title: "Tutorials" },
+            {
+              link: `/tutorial/${tutorialId}`,
+              title: tutorial?.title || "Aktuelles Tutorial",
+            },
+          ]}
+        />
+      </Box>
+
+      {/* Hauptinhalt */}
+      <Box
+        sx={{
+          flexGrow: 1, // 👈 nimmt gesamten verfügbaren Platz ein
+          display: "flex",
+          flexDirection: "row",
+          width: "100%",
+          p: 2,
+          gap: 4,
+          justifyContent: "center",
+          alignItems: "stretch", // alles gleiche Höhe
+        }}
+      >
+        {/* ProgressCard links - 20% */}
+        <Box
+          sx={{
+            flex: "0 0 20%",
+            display: "flex",
+            flexDirection: "column",
+            justifyContent: "flex-start",
+          }}
+        >
+          <TutorialProgressCard />
+        </Box>
+        {/* Hauptbereich rechts */}
+        <Box
+          sx={{
+            flex: "1 1 auto",
+            position: "relative",
+            display: "flex",
+            flexDirection: "column",
+            borderRadius: 3,
+            boxShadow: 3,
+            mr: 5,
+
+            overflow: "scroll",
+          }}
+        >
+          <Box
+            sx={{
+              display: "flex",
+              flexDirection: "column",
+              justifyContent: "center",
+              alignItems: "center",
+              minHeight: "100%",
+            }}
+          >
+            <AnimatePresence mode="wait">
+              {(() => {
+                const currentStep = tutorial.steps[activeStep];
+                const type = currentStep?.type;
+
+                if (type === "finish") {
+                  return (
+                    <TutorialFinished key="finished" tutorial={tutorial} />
+                  );
+                }
+
+                if (type === "instruction") {
+                  return <Instruction tutorial={tutorial} key={activeStep} />;
+                }
+
+                return (
+                  <TaskStep
+                    setNextStepDisabled={setNextStepDisabled}
+                    step={currentStep}
+                    key={activeStep}
+                  />
+                );
+              })()}
+            </AnimatePresence>
+          </Box>
+          {/* {!platform && (
+            <Box
+              sx={{
+                display: "flex",
+                justifyContent: "space-around",
+                maxWidth: "960px",
+                p: 2,
               }}
-            />
-          ) : null
-        ) : (
-          (() => {
-            var tutorial = this.props.tutorial;
-            var steps = this.props.tutorial.steps;
-            var step = steps[this.props.activeStep];
-            var name = `${detectWhitespacesAndReturnReadableResult(
-              tutorial.title,
-            )}_${detectWhitespacesAndReturnReadableResult(step.headline)}`;
-            return (
-              <div>
-                <Breadcrumbs
-                  content={[
-                    {
-                      link: "/tutorial",
-                      title: "Tutorial",
-                    },
-                    {
-                      link: `/tutorial/${this.props.tutorial._id}`,
-                      title: tutorial.title,
-                    },
-                  ]}
-                />
-
-                <StepperHorizontal />
-
-                <div style={{ display: "flex" }}>
-                  <StepperVertical steps={steps} />
-                  {/* calc(Card-padding: 10px + Button-height: 35px + Button-marginTop: 15px)*/}
-                  <Card
-                    style={{
-                      padding: "10px 10px 60px 10px",
-                      display: "block",
-                      position: "relative",
-                      height: "max-content",
-                      width: "100%",
-                    }}
-                  >
-                    {step ? (
-                      step.type === "instruction" ? (
-                        <Instruction step={step} />
-                      ) : (
-                        <Assessment step={step} name={name} />
-                      ) // if step.type === 'assessment'
-                    ) : null}
-
-                    <div
-                      style={{
-                        marginTop: "20px",
-                        position: "absolute",
-                        bottom: "10px",
-                      }}
-                    >
-                      <Button
-                        style={{
-                          marginRight: "10px",
-                          height: "35px",
-                        }}
-                        variant="contained"
-                        disabled={this.props.activeStep === 0}
-                        onClick={() =>
-                          this.props.tutorialStep(this.props.activeStep - 1)
-                        }
-                      >
-                        Zurück
-                      </Button>
-                      <Button
-                        style={{ height: "35px" }}
-                        variant="contained"
-                        color="primary"
-                        disabled={
-                          this.props.activeStep === tutorial.steps.length - 1
-                        }
-                        onClick={() =>
-                          this.props.tutorialStep(this.props.activeStep + 1)
-                        }
-                      >
-                        Weiter
-                      </Button>
-                    </div>
-                  </Card>
-                </div>
-              </div>
-            );
-          })()
-        )}
-      </div>
-    );
-  }
-}
+            >
+              <Button
+                variant="outlined"
+                disabled={activeStep === 0}
+                startIcon={<ChevronLeftIcon />}
+                onClick={previousStep}
+              >
+                Zurück
+              </Button>
+
+              {activeStep === tutorial.steps.length - 1 ? (
+                <Button
+                  variant="contained"
+                  endIcon={<CheckCircleIcon />}
+                  onClick={() => (window.location.href = "/tutorial")}
+                >
+                  Zurück zur Übersicht
+                </Button>
+              ) : (
+                <Button
+                  variant="contained"
+                  endIcon={<ChevronRightIcon />}
+                  disabled={nextStepDisabled}
+                  onClick={nextStep}
+                >
+                  Weiter
+                </Button>
+              )}
+            </Box>
+          )} */}
+        </Box>
+      </Box>
 
-Tutorial.propTypes = {
-  getTutorial: PropTypes.func.isRequired,
-  resetTutorial: PropTypes.func.isRequired,
-  clearMessages: PropTypes.func.isRequired,
-  tutorialStep: PropTypes.func.isRequired,
-  tutorialProgress: PropTypes.func.isRequired,
-  workspaceName: PropTypes.func.isRequired,
-  status: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
-  activeStep: PropTypes.number.isRequired,
-  tutorial: PropTypes.object.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  message: PropTypes.object.isRequired,
-  progress: PropTypes.bool.isRequired,
-};
-
-const mapStateToProps = (state) => ({
-  change: state.tutorial.change,
-  status: state.tutorial.status,
-  activeStep: state.tutorial.activeStep,
-  tutorial: state.tutorial.tutorials[0],
-  isLoading: state.tutorial.progress,
-  message: state.message,
-  progress: state.auth.progress,
-});
-
-export default connect(mapStateToProps, {
-  getTutorial,
-  resetTutorial,
-  tutorialStep,
-  tutorialProgress,
-  clearMessages,
-  workspaceName,
-})(withRouter(Tutorial));
+      {platform && (
+        <Box sx={{ flexShrink: 0 }}>
+          <TutorialFooter nextStepDisabled={nextStepDisabled} />
+        </Box>
+      )}
+    </Box>
+  );
+}
diff --git a/src/components/Tutorial/TutorialFinished.jsx b/src/components/Tutorial/TutorialFinished.jsx
new file mode 100644
index 00000000..0d09d161
--- /dev/null
+++ b/src/components/Tutorial/TutorialFinished.jsx
@@ -0,0 +1,229 @@
+import React from "react";
+import Confetti from "react-confetti";
+import { Box, CardContent, Typography, Button, useTheme } from "@mui/material";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import HomeIcon from "@mui/icons-material/Home";
+import { ArrowForward, Celebration } from "@mui/icons-material";
+import TutorialSlide from "./TutorialItem/TutorialSlide";
+import MarkdownIt from "markdown-it";
+const md = new MarkdownIt();
+
+// Image-Renderer anpassen
+const defaultImageRenderer =
+  md.renderer.rules.image ||
+  function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+  };
+
+md.renderer.rules.image = function (tokens, idx, options, env, self) {
+  const token = tokens[idx];
+  token.attrs = token.attrs || [];
+  token.attrs = token.attrs.filter(
+    ([name]) => name !== "width" && name !== "height" && name !== "style",
+  );
+  token.attrs.push([
+    "style",
+    "max-width:250px; height:auto; display:block; margin:auto;",
+  ]);
+  const imgHtml = defaultImageRenderer(tokens, idx, options, env, self);
+  return `
+    <div style="text-align:center;">
+      <div style="display:inline-block; padding:12px; background:#f5f5f5;">
+        ${imgHtml}
+      </div>
+    </div>
+  `;
+};
+
+const TutorialFinished = ({ tutorial }) => {
+  const theme = useTheme();
+
+  // 🧩 Step mit type "finish" finden
+  const finishStep = tutorial?.steps?.find((s) => s.type === "finish");
+  const finishText =
+    finishStep?.text ||
+    "Herzlichen Glückwunsch! Du hast alle Schritte erfolgreich abgeschlossen.";
+
+  // 🎓 Dynamische Lerninhalte
+  const learnings = tutorial?.learnings || [];
+
+  // 🚀 Dynamische “Was kommt als Nächstes”
+  const upcoming = tutorial?.upcoming || [];
+
+  return (
+    <TutorialSlide>
+      {/* 🎉 Konfetti einmalig */}
+      <Confetti
+        width={window.innerWidth}
+        height={window.innerHeight}
+        numberOfPieces={300}
+        recycle={false}
+      />
+
+      <CardContent sx={{ textAlign: "center", p: 4 }}>
+        {/* 🎉 Header */}
+        <Box sx={{ mb: 4 }}>
+          <Box
+            sx={{
+              width: 56,
+              height: 56,
+              p: 1,
+              bgcolor: theme.palette.primary.light,
+              borderRadius: "50%",
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              mx: "auto",
+            }}
+          >
+            <Celebration sx={{ fontSize: 48, color: "white" }} />
+          </Box>
+          <Box sx={{ mt: 2 }}>
+            <Typography variant="h6" sx={{ fontWeight: 600, mb: 1 }}>
+              Tutorial abgeschlossen!
+            </Typography>
+            <Typography variant="body1" color="text.secondary">
+              {/* {finishText} */}
+            </Typography>
+          </Box>
+        </Box>
+        <Box sx={{ my: 2 }}>
+          <div
+            dangerouslySetInnerHTML={{ __html: md.render(finishStep.text) }}
+          />
+        </Box>
+        {/* 📘 Lerninhalte */}
+        {learnings.length > 0 && (
+          <Box
+            sx={{
+              bgcolor: theme.palette.primary[50] || theme.palette.action.hover,
+              borderRadius: 2,
+              p: 4,
+              mb: 4,
+              textAlign: "left",
+            }}
+          >
+            <Typography
+              variant="h6"
+              fontWeight={600}
+              color="primary"
+              gutterBottom
+            >
+              Was du gelernt hast
+            </Typography>
+
+            <Box
+              sx={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 2,
+              }}
+            >
+              {learnings.map((learning, index) => (
+                <Box
+                  key={index}
+                  sx={{
+                    flex: "1 1 calc(50% - 10px)",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    gap: 2,
+                    alignItems: "flex-start",
+                  }}
+                >
+                  <CheckCircleIcon
+                    sx={{
+                      color: theme.palette.primary.main,
+                      mt: "2px",
+                      flexShrink: 0,
+                    }}
+                  />
+                  <Box>
+                    <Typography variant="subtitle2" fontWeight={500}>
+                      {learning.title || "Lerninhalt"}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {learning.description || ""}
+                    </Typography>
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        )}
+
+        {/* 🚀 Was kommt als Nächstes */}
+        {upcoming.length > 0 && (
+          <Box
+            sx={{
+              bgcolor:
+                theme.palette.secondary[50] || theme.palette.action.hover,
+              borderRadius: 2,
+              p: 4,
+              mb: 4,
+              textAlign: "left",
+            }}
+          >
+            <Typography
+              variant="h6"
+              fontWeight={600}
+              color="primary"
+              gutterBottom
+            >
+              Was kommt als Nächstes
+            </Typography>
+
+            <Box
+              sx={{
+                display: "flex",
+                flexWrap: "wrap",
+                gap: 2,
+              }}
+            >
+              {upcoming.map((item, index) => (
+                <Box
+                  key={index}
+                  sx={{
+                    flex: "1 1 calc(50% - 10px)",
+                    boxSizing: "border-box",
+                    display: "flex",
+                    gap: 2,
+                  }}
+                >
+                  <ArrowForward
+                    sx={{
+                      color: theme.palette.primary.main,
+                      mt: "2px",
+                      flexShrink: 0,
+                    }}
+                  />
+                  <Box>
+                    <Typography variant="subtitle2" fontWeight={500}>
+                      {item.title || "Nächster Schritt"}
+                    </Typography>
+                    <Typography variant="body2" color="text.secondary">
+                      {item.description || ""}
+                    </Typography>
+                  </Box>
+                </Box>
+              ))}
+            </Box>
+          </Box>
+        )}
+
+        {/* 🔙 Zurück-Button */}
+        <Button
+          component="a"
+          href="/tutorial"
+          variant="contained"
+          size="large"
+          sx={{ gap: 1 }}
+          startIcon={<HomeIcon />}
+        >
+          Zur Tutorial-Übersicht
+        </Button>
+      </CardContent>
+    </TutorialSlide>
+  );
+};
+
+export default TutorialFinished;
diff --git a/src/components/Tutorial/TutorialFooter.jsx b/src/components/Tutorial/TutorialFooter.jsx
new file mode 100644
index 00000000..a8a6e9b9
--- /dev/null
+++ b/src/components/Tutorial/TutorialFooter.jsx
@@ -0,0 +1,209 @@
+import React, { useEffect, useState } from "react";
+import {
+  Box,
+  Button,
+  LinearProgress,
+  Typography,
+  useTheme,
+} from "@mui/material";
+import ChevronLeftIcon from "@mui/icons-material/ChevronLeft";
+import ChevronRightIcon from "@mui/icons-material/ChevronRight";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import { useDispatch, useSelector } from "react-redux";
+
+const TutorialFooter = ({ nextStepDisabled }) => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const activeStep = useSelector((state) => state.tutorial.activeStep);
+  const tutorial = useSelector((state) => state.tutorial.tutorials[0]);
+  const [disabled, setDisabled] = useState(false);
+  // add one extra step for "Fertig"
+  const allSteps = [...tutorial.steps];
+
+  const progress = ((activeStep + 1) / allSteps.length) * 100;
+
+  const changeStep = (step) => {
+    dispatch({
+      type: "TUTORIAL_STEP",
+      payload: step,
+    });
+  };
+
+  const nextStep = () => {
+    if (activeStep < allSteps.length - 1) {
+      changeStep(activeStep + 1);
+    }
+  };
+
+  const previousStep = () => {
+    if (activeStep > 0) {
+      changeStep(activeStep - 1);
+    }
+  };
+
+  useEffect(() => {
+    const step = tutorial.steps[activeStep];
+    if (step.type === "blockly") {
+      setDisabled(true);
+    } else {
+      setDisabled(false);
+    }
+  }, [activeStep]);
+
+  return (
+    <Box
+      component="footer"
+      sx={{
+        borderTop: `1px solid ${theme.palette.divider}`,
+        bgcolor: theme.palette.background.paper,
+        backdropFilter: "blur(4px)",
+        py: 1,
+        position: "sticky",
+        bottom: 0,
+        backgroundColor: "white",
+        zIndex: 1,
+      }}
+    >
+      <Box sx={{ maxWidth: "960px", mx: "auto", px: 2 }}>
+        {/* Progress Bar */}
+        <Box>
+          <Box
+            sx={{
+              display: "flex",
+              justifyContent: "space-between",
+            }}
+          >
+            <Typography variant="body2" fontWeight="500">
+              Tutorial Fortschritt
+            </Typography>
+            <Typography variant="body2" color="text.secondary">
+              Schritt {activeStep + 1} von {allSteps.length}
+            </Typography>
+          </Box>
+
+          <Box sx={{ position: "relative" }}>
+            <LinearProgress
+              variant="determinate"
+              value={progress}
+              sx={{ height: 8, borderRadius: 5, mb: 3 }}
+            />
+
+            {/* Step Indicators */}
+            <Box sx={{ display: "flex", justifyContent: "space-between" }}>
+              {allSteps.map((step, index) => {
+                const isCurrent = index === activeStep;
+                const isCompleted = index < activeStep;
+
+                return (
+                  <Box
+                    key={step.id || index}
+                    sx={{
+                      display: "flex",
+                      flexDirection: "column",
+                      alignItems: "center",
+                      cursor: "pointer",
+                      transition: "all 0.2s ease-in-out",
+                      "&:hover": { transform: "scale(1.05)" },
+                      color: isCurrent
+                        ? theme.palette.primary.main
+                        : isCompleted
+                          ? theme.palette.success.main
+                          : theme.palette.text.secondary,
+                    }}
+                    // onClick={() => changeStep(index)}
+                  >
+                    <Box
+                      sx={{
+                        width: 24,
+                        height: 24,
+                        borderRadius: "50%",
+                        border: "2px solid",
+                        display: "flex",
+                        alignItems: "center",
+                        justifyContent: "center",
+                        fontSize: 12,
+                        fontWeight: 500,
+                        bgcolor: isCurrent
+                          ? theme.palette.primary.main
+                          : isCompleted
+                            ? theme.palette.success.main
+                            : theme.palette.background.paper,
+                        color: isCurrent
+                          ? theme.palette.primary.contrastText
+                          : isCompleted
+                            ? theme.palette.common.white
+                            : theme.palette.text.secondary,
+                        borderColor: isCurrent
+                          ? theme.palette.primary.main
+                          : isCompleted
+                            ? theme.palette.success.main
+                            : theme.palette.divider,
+                        mb: 1,
+                      }}
+                    >
+                      {isCompleted ? (
+                        <CheckCircleIcon sx={{ fontSize: 16 }} />
+                      ) : step.isCompletion ? (
+                        "✓"
+                      ) : (
+                        index + 1
+                      )}
+                    </Box>
+                    <Typography
+                      variant="caption"
+                      fontWeight="500"
+                      align="center"
+                      sx={{ maxWidth: 80, lineHeight: 1.2 }}
+                    >
+                      {step.title}
+                    </Typography>
+                  </Box>
+                );
+              })}
+            </Box>
+          </Box>
+        </Box>
+
+        {/* Navigation */}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "space-between",
+            maxWidth: "960px",
+            mx: "auto",
+          }}
+        >
+          <Button
+            variant="outlined"
+            disabled={activeStep === 0}
+            startIcon={<ChevronLeftIcon />}
+            onClick={previousStep}
+          >
+            Zurück
+          </Button>
+
+          {activeStep === allSteps.length - 1 ? (
+            <Button
+              variant="contained"
+              endIcon={<CheckCircleIcon />}
+              onClick={() => (window.location.href = "/tutorial")}
+            >
+              Zurück zur Übersicht
+            </Button>
+          ) : (
+            <Button
+              variant="contained"
+              endIcon={<ChevronRightIcon />}
+              disabled={nextStepDisabled}
+              onClick={nextStep}
+            >
+              Weiter
+            </Button>
+          )}
+        </Box>
+      </Box>
+    </Box>
+  );
+};
+
+export default TutorialFooter;
diff --git a/src/components/Tutorial/TutorialHome.jsx b/src/components/Tutorial/TutorialHome.jsx
index ebca92d1..48476038 100644
--- a/src/components/Tutorial/TutorialHome.jsx
+++ b/src/components/Tutorial/TutorialHome.jsx
@@ -1,489 +1,258 @@
-import React, { Component } from "react";
+import React, { useEffect, useState, useMemo } from "react";
 import PropTypes from "prop-types";
-import { connect } from "react-redux";
-import {
-  getTutorials,
-  getAllTutorials,
-  getUserTutorials,
-  resetTutorial,
-  tutorialProgress,
-} from "../../actions/tutorialActions";
-import { progress } from "../../actions/tutorialBuilderActions";
-
-import { clearMessages } from "../../actions/messageActions";
-
-import clsx from "clsx";
-
+import { useSelector, useDispatch } from "react-redux";
+import { getTutorials } from "../../actions/tutorialActions";
 import Breadcrumbs from "../ui/Breadcrumbs";
-
-import { Link } from "react-router-dom";
-import { alpha } from "@mui/material/styles";
-import withStyles from "@mui/styles/withStyles";
 import Grid from "@mui/material/Grid";
-import Paper from "@mui/material/Paper";
-import Typography from "@mui/material/Typography";
-
-import {
-  faCheck,
-  faTimes,
-  faShareAlt,
-  faEye,
-  faUserCheck,
-} from "@fortawesome/free-solid-svg-icons";
-import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import * as Blockly from "blockly";
-import ReactStars from "react-rating-stars-component";
-import Tooltip from "@mui/material/Tooltip";
-import IconButton from "@mui/material/IconButton";
-import Snackbar from "../Snackbar";
-import Divider from "@mui/material/Divider";
 import DeviceSelection from "../DeviceSelection";
+import TutorialItem from "./TutorialItem";
+import {
+  Box,
+  TextField,
+  Typography,
+  FormControl,
+  InputLabel,
+  Select,
+  MenuItem,
+  ToggleButtonGroup,
+  ToggleButton,
+  useTheme,
+  Button,
+  IconButton,
+} from "@mui/material";
+import { faPencil, faPlus, faTools } from "@fortawesome/free-solid-svg-icons";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { Link } from "react-router-dom/cjs/react-router-dom.min";
 
-const styles = (theme) => ({
-  outerDiv: {
-    position: "absolute",
-    right: "-30px",
-    bottom: "-30px",
-    width: "160px",
-    height: "160px",
-    color: alpha(theme.palette.secondary.main, 0.6),
-  },
-  outerDivError: {
-    stroke: alpha(theme.palette.error.dark, 0.6),
-    color: alpha(theme.palette.error.dark, 0.6),
-  },
-  outerDivSuccess: {
-    stroke: alpha(theme.palette.primary.main, 0.6),
-    color: alpha(theme.palette.primary.main, 0.6),
-  },
-  outerDivOther: {
-    stroke: alpha(theme.palette.secondary.main, 0.6),
-  },
-  innerDiv: {
-    width: "inherit",
-    height: "inherit",
-    display: "table-cell",
-    verticalAlign: "middle",
-    textAlign: "center",
-  },
-  button: {
-    backgroundColor: theme.palette.primary.main,
-    color: theme.palette.primary.contrastText,
-    width: "40px",
-    height: "40px",
-    "&:hover": {
-      backgroundColor: theme.palette.primary.main,
-      color: theme.palette.primary.contrastText,
-    },
-  },
-  link: {
-    color: theme.palette.primary.main,
-    textDecoration: "none",
-    "&:hover": {
-      color: theme.palette.primary.main,
-      textDecoration: "underline",
-    },
-  },
-});
+function getDifficultyLevel(value) {
+  if (value <= 1) return 1;
+  if (value <= 2) return 2;
+  if (value <= 3) return 3;
+  if (value <= 4) return 4;
+  return 5;
+}
 
-class TutorialHome extends Component {
-  constructor(props) {
-    super(props);
-    this.state = {
-      userTutorials: [],
-      tutorials: [],
-      snackbar: false,
-    };
-  }
+function TutorialHome() {
+  const dispatch = useDispatch();
+  const theme = useTheme();
 
-  componentDidMount() {
-    this.props.tutorialProgress();
-    // retrieve tutorials only if a potential user is loaded - authentication
-    // is finished (success or failed)
-    // if (!this.props.progress) {
-    //   if (this.props.user) {
-    //     if (this.props.user.blocklyRole === "admin") {
-    //       this.props.getAllTutorials();
-    //     }
-    //     if (this.props.user.blocklyRole === "creator") {
-    //       this.props.getUserTutorials();
-    //       this.props.getTutorials();
-    //       console.log("get user tutorials");
-    //       console.log(this.props.userTutorials);
-    //     }
-    //   } else {
-    //     this.props.getTutorials();
-    //   }
-    // }
-    if (!this.props.authProgress) {
-      if (this.props.user) {
-        if (this.props.user.role === "admin") {
-          this.props.getAllTutorials();
-        } else {
-          this.props.getUserTutorials();
-          //this.props.getTutorials();
-        }
-      } else {
-        this.props.getTutorials();
-      }
-    }
-  }
+  const { tutorials, user } = useSelector((state) => ({
+    tutorials: state.tutorial.tutorials,
+    user: state.auth.user,
+  }));
 
-  componentDidUpdate(props, state) {
-    if (
-      props.authProgress !== this.props.authProgress &&
-      !this.props.authProgress
-    )
-      if (this.props.user) {
-        if (this.props.user.role === "admin") {
-          // authentication is completed
-          this.props.getAllTutorials();
-        } else {
-          this.props.getUserTutorials();
-        }
-      } else {
-        this.props.getTutorials();
-      }
+  const [searchQuery, setSearchQuery] = useState("");
+  const [difficulty, setDifficulty] = useState(""); // "" = alle Stufen
 
-    if (this.props.message.id === "GET_TUTORIALS_FAIL") {
-      alert(this.props.message.msg);
-    }
-  }
+  useEffect(() => {
+    dispatch(getTutorials());
+  }, [dispatch]);
 
-  componentWillUnmount() {
-    this.props.resetTutorial();
-    if (this.props.message.msg) {
-      this.props.clearMessages();
-    }
-  }
+  // Tutorials nach Suchbegriff & Schwierigkeit filtern
+  const filteredTutorials = useMemo(() => {
+    let result = tutorials;
 
-  render() {
-    var userTutorials = [];
-    const publicTutorials = this.props.tutorials.filter(
-      (tutorial) => tutorial.public === true,
-    );
-    if (this.props.user && this.props.user.blocklyRole === "admin") {
-      userTutorials = this.props.tutorials;
+    if (searchQuery.trim()) {
+      const query = searchQuery.toLowerCase();
+      result = result.filter(
+        (t) =>
+          t.title?.toLowerCase().includes(query) ||
+          t.creator?.toLowerCase().includes(query) ||
+          t.description?.toLowerCase().includes(query),
+      );
     }
-    if (this.props.user && this.props.user.blocklyRole === "creator") {
-      userTutorials = this.props.tutorials.filter(
-        (tutorial) => tutorial.creator === this.props.user.email,
+
+    if (difficulty) {
+      result = result.filter(
+        (t) => getDifficultyLevel(t.difficulty) === difficulty,
       );
     }
-    return this.props.isLoading ? null : (
-      <div>
-        <Breadcrumbs content={[{ link: "/tutorial", title: "Tutorial" }]} />
-        <h1>{Blockly.Msg.tutorials_home_head}</h1>
-        <h2>Alle Tutorials</h2>
-        <Grid container spacing={2}>
-          {publicTutorials.map((tutorial, i) => {
-            var status = this.props.status.filter(
-              (status) => status._id === tutorial._id,
-            )[0];
-            var tasks = status.tasks;
-            var error =
-              status.tasks.filter((task) => task.type === "error").length > 0;
-            var success =
-              status.tasks.filter((task) => task.type === "success").length /
-              tasks.length;
-            var tutorialStatus =
-              success === 1 ? "Success" : error ? "Error" : "Other";
-            const firstExample = {
-              size: 30,
-              value: tutorial.difficulty,
-              edit: false,
-              isHalf: true,
-            };
-            return (
-              <Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
-                <Link
-                  to={`/tutorial/${tutorial._id}`}
-                  style={{
-                    textDecoration: "none",
-                    color: "inherit",
-                  }}
-                >
-                  <Paper
-                    style={{
-                      height: "150px",
-                      padding: "10px",
-                      position: "relative",
-                      overflow: "hidden",
-                    }}
-                  >
-                    {tutorial.title}
-                    <ReactStars {...firstExample} />
-                    <div
-                      className={clsx(this.props.classes.outerDiv)}
-                      style={{
-                        width: "160px",
-                        height: "160px",
-                        border: 0,
-                      }}
-                    >
-                      <svg
-                        style={{
-                          width: "100%",
-                          height: "100%",
-                        }}
-                      >
-                        {error || success === 1 ? (
-                          <circle
-                            className={
-                              error
-                                ? this.props.classes.outerDivError
-                                : this.props.classes.outerDivSuccess
-                            }
-                            style={{
-                              transform: "rotate(-44deg)",
-                              transformOrigin: "50% 50%",
-                            }}
-                            r="75"
-                            cx="50%"
-                            cy="50%"
-                            fill="none"
-                            stroke-width="10"
-                          ></circle>
-                        ) : (
-                          <circle
-                            className={this.props.classes.outerDivOther}
-                            style={{
-                              transform: "rotate(-44deg)",
-                              transformOrigin: "50% 50%",
-                            }}
-                            r="75"
-                            cx="50%"
-                            cy="50%"
-                            fill="none"
-                            stroke-width="10"
-                            stroke-dashoffset={`${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
-                            stroke-dasharray={`${
-                              75 * 2 * Math.PI * (1 - (50 / 100 - success / 2))
-                            } ${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
-                          ></circle>
-                        )}
-                        {success < 1 && !error ? (
-                          <circle
-                            className={this.props.classes.outerDivSuccess}
-                            style={{
-                              transform: "rotate(-44deg)",
-                              transformOrigin: "50% 50%",
-                            }}
-                            r="75"
-                            cx="50%"
-                            cy="50%"
-                            fill="none"
-                            stroke-width="10"
-                            stroke-dashoffset={`${
-                              75 * 2 * Math.PI * (1 - (50 / 100 + success / 2))
-                            }`}
-                            stroke-dasharray={`${75 * 2 * Math.PI}`}
-                          ></circle>
-                        ) : null}
-                      </svg>
-                    </div>
-                    <div
-                      className={clsx(
-                        this.props.classes.outerDiv,
-                        tutorialStatus === "Error"
-                          ? this.props.classes.outerDivError
-                          : tutorialStatus === "Success"
-                            ? this.props.classes.outerDivSuccess
-                            : null,
-                      )}
-                    >
-                      <div className={this.props.classes.innerDiv}>
-                        {error || success === 1 ? (
-                          <FontAwesomeIcon
-                            size="4x"
-                            icon={
-                              tutorialStatus === "Success" ? faCheck : faTimes
-                            }
-                          />
-                        ) : (
-                          <Typography
-                            variant="h3"
-                            className={
-                              success > 0
-                                ? this.props.classes.outerDivSuccess
-                                : {}
-                            }
-                          >
-                            {Math.round(success * 100)}%
-                          </Typography>
-                        )}
-                      </div>
-                    </div>
-                  </Paper>
-                </Link>
-              </Grid>
-            );
-          })}
-        </Grid>
-        <DeviceSelection />
-        {this.props.user ? (
+
+    return result;
+  }, [tutorials, searchQuery, difficulty]);
+
+  return (
+    <div>
+      <Breadcrumbs content={[{ link: "/tutorial", title: "Tutorial" }]} />
+      <h1>{Blockly.Msg.tutorials_home_head}</h1>
+      {/* Suche + Schwierigkeit Filter */}
+      <Box
+        sx={{
+          display: "flex",
+          alignItems: "center",
+          justifyContent: "space-between",
+          flexWrap: "wrap",
+          mb: 3,
+          gap: 2,
+        }}
+      >
+        <Box sx={{ flex: "0 1 65%" }}>
+          <TextField
+            fullWidth
+            label={Blockly.Msg.searchQuery_placeholder || "Tutorials suchen"}
+            variant="outlined"
+            value={searchQuery}
+            onChange={(e) => setSearchQuery(e.target.value)}
+          />
+        </Box>
+        <Box
+          sx={{
+            flex: "0 1 20%",
+            display: "flex",
+            alignItems: "center",
+            padding: "4px",
+          }}
+        >
+          <ToggleButtonGroup
+            value={difficulty}
+            exclusive
+            onChange={(e, newValue) => setDifficulty(newValue)}
+            size="small"
+            sx={{
+              justifyContent: "space-between",
+              gap: 2,
+              "& .MuiToggleButton-root": {
+                border: "1px solid #c4c4c4 ",
+                borderRadius: "5px",
+              },
+              "& .MuiToggleButton-root.Mui-selected": {
+                backgroundColor: theme.palette.primary.main,
+                fontWeight: 800,
+                color: "#fff",
+                "&:hover": {
+                  backgroundColor: "darkgreen",
+                },
+              },
+              "& .MuiToggleButton-root:hover": {
+                backgroundColor: theme.palette.primary.main,
+                color: "#fff",
+                fontWeight: 800,
+              },
+            }}
+          >
+            <ToggleButton value={1}>Sehr leicht</ToggleButton>
+            <ToggleButton value={2}>Leicht</ToggleButton>
+            <ToggleButton value={3}>Mittel</ToggleButton>
+            <ToggleButton value={4}>Schwer</ToggleButton>
+            <ToggleButton value={5}>Sehr schwer</ToggleButton>
+          </ToggleButtonGroup>
+        </Box>
+        {user && (
+          <Box
+            sx={{
+              flex: "0 1 10%",
+              display: "flex",
+              alignItems: "center",
+              p: 0.5,
+            }}
+          >
+            <Link to="/tutorial/builder" style={{ textDecoration: "none" }}>
+              <Button
+                variant="contained"
+                startIcon={<FontAwesomeIcon icon={faPlus} />}
+                sx={{
+                  borderRadius: "5px",
+                  textTransform: "none",
+                  fontWeight: 600,
+                  backgroundColor: theme.palette.primary.main,
+                  color: "white",
+                  px: 2,
+                  py: 1,
+                  fontSize: "0.9rem",
+                  boxShadow: "none",
+                  "&:hover": {
+                    backgroundColor: theme.palette.primary.dark,
+                    boxShadow: "0 2px 6px rgba(0,0,0,0.15)",
+                  },
+                }}
+              >
+                Tutorial erstellen
+              </Button>
+            </Link>
+          </Box>
+        )}
+      </Box>
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 6,
+        }}
+      >
+        <Box
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            gap: 1,
+          }}
+        >
+          <h2>Alle Tutorials</h2>
           <div>
-            <h2>User Tutorials</h2>
+            Damit Tutorials in dieser Gallerie angezeigt werden, müssen Sie von
+            uns überprüft werden. Falls dein Tutorial hier erscheinen soll,
+            stelle dein Tutorial auf öffentlich und schreibe uns an auf
+            support@sensebox.de
+          </div>
+
+          <Grid container spacing={2}>
+            {filteredTutorials.length > 0 ? (
+              filteredTutorials.map(
+                (tutorial) =>
+                  tutorial.review &&
+                  tutorial.public && (
+                    <TutorialItem
+                      key={tutorial._id}
+                      tutorial={tutorial}
+                      level={getDifficultyLevel(tutorial.difficulty)}
+                    />
+                  ),
+              )
+            ) : (
+              <Typography variant="body1" sx={{ ml: 2 }}>
+                Keine Tutorials gefunden.
+              </Typography>
+            )}
+          </Grid>
+        </Box>
+
+        {user && (
+          <div>
+            <h2>Deine Tutorials</h2>
             <Grid container spacing={2}>
-              {userTutorials.map((tutorial, i) => {
-                var status = this.props.status.filter(
-                  (status) => status._id === tutorial._id,
-                )[0];
-                var tasks = status.tasks;
-                var error =
-                  status.tasks.filter((task) => task.type === "error").length >
-                  0;
-                var success =
-                  status.tasks.filter((task) => task.type === "success")
-                    .length / tasks.length;
-                var tutorialStatus =
-                  success === 1 ? "Success" : error ? "Error" : "Other";
-                const firstExample = {
-                  size: 30,
-                  value: tutorial.difficulty,
-                  edit: false,
-                  isHalf: true,
-                };
-                return (
-                  <Grid item xs={12} sm={6} md={4} xl={3} key={i} style={{}}>
-                    <Paper
-                      style={{
-                        height: "150",
-                        padding: "10px",
-                        position: "relative",
-                        overflow: "hidden",
-                        backgroundColor: tutorial.review
-                          ? "lightyellow"
-                          : "white",
-                      }}
-                    >
-                      <Link
-                        to={`/tutorial/${tutorial._id}`}
-                        style={{
-                          textDecoration: "none",
-                          color: "inherit",
-                        }}
-                      >
-                        {tutorial.title}
-                        <ReactStars {...firstExample} />
-                      </Link>
-                      <Divider
-                        style={{
-                          marginTop: "10px",
-                          marginBottom: "10px",
-                        }}
-                      />
-                      <p>
-                        Creator:{tutorial.creator} <br />
-                        <div style={this.props.style}>
-                          <Tooltip
-                            title={Blockly.Msg.tooltip_share_tutorial}
-                            arrow
-                          >
-                            <IconButton
-                              className={`shareTutorial ${this.props.classes.button}`}
-                              onClick={() => {
-                                navigator.clipboard.writeText(
-                                  `${window.location.origin}/tutorial/${tutorial._id}`,
-                                );
-                                this.setState({
-                                  snackbar: true,
-                                  key: Date.now(),
-                                  message:
-                                    Blockly.Msg.messages_copylink_success,
-                                  type: "success",
-                                });
-                              }}
-                              size="large"
-                            >
-                              <FontAwesomeIcon icon={faShareAlt} size="xs" />
-                            </IconButton>
-                          </Tooltip>
-                          <Tooltip
-                            title={Blockly.Msg.tooltip_share_tutorial}
-                            arrow
-                          >
-                            <IconButton
-                              className={`publicTutorial ${this.props.classes.button}`}
-                              disabled={!tutorial.public}
-                              size="large"
-                            >
-                              <FontAwesomeIcon icon={faEye} size="xs" />
-                            </IconButton>
-                          </Tooltip>
-                          {tutorial.review ? (
-                            <Tooltip
-                              title={Blockly.Msg.tooltip_share_tutorial}
-                              arrow
-                            >
-                              <IconButton
-                                className={`publicTutorial ${this.props.classes.button}`}
-                                disabled={!tutorial.review}
-                                size="large"
-                              >
-                                <FontAwesomeIcon icon={faUserCheck} size="xs" />
-                              </IconButton>
-                            </Tooltip>
-                          ) : null}
-                          <Snackbar
-                            open={this.state.snackbar}
-                            message={Blockly.Msg.messages_copylink_success}
-                            type={this.state.type}
-                            key={this.state.key}
-                          />
-                        </div>
-                      </p>
-                    </Paper>
-                  </Grid>
-                );
-              })}
+              {filteredTutorials.filter((t) => t.creator === user.email)
+                .length > 0 ? (
+                filteredTutorials
+                  .filter((t) => t.creator === user.email)
+                  .map((tutorial) => (
+                    <TutorialItem
+                      key={tutorial._id}
+                      tutorial={tutorial}
+                      level={getDifficultyLevel(tutorial.difficulty)}
+                    />
+                  ))
+              ) : (
+                <Typography variant="body1" sx={{ ml: 2 }}>
+                  Du hast noch keine Tutorials erstellt.
+                </Typography>
+              )}
             </Grid>
           </div>
-        ) : null}
-      </div>
-    );
-  }
+        )}
+      </Box>
+
+      <DeviceSelection />
+    </div>
+  );
 }
 
 TutorialHome.propTypes = {
-  getTutorials: PropTypes.func.isRequired,
-  getAllTutorials: PropTypes.func.isRequired,
-  getUserTutorials: PropTypes.func.isRequired,
-  resetTutorial: PropTypes.func.isRequired,
-  tutorialProgress: PropTypes.func.isRequired,
-  clearMessages: PropTypes.func.isRequired,
-  status: PropTypes.array.isRequired,
-  change: PropTypes.number.isRequired,
-  tutorials: PropTypes.array.isRequired,
-  isLoading: PropTypes.bool.isRequired,
-  message: PropTypes.object.isRequired,
-  progress: PropTypes.bool.isRequired,
-  user: PropTypes.object.isRequired,
-  authProgress: PropTypes.bool.isRequired,
+  status: PropTypes.array,
+  tutorials: PropTypes.array,
+  isLoading: PropTypes.bool,
+  message: PropTypes.object,
+  user: PropTypes.object,
+  authProgress: PropTypes.bool,
 };
 
-const mapStateToProps = (state) => ({
-  change: state.tutorial.change,
-  status: state.tutorial.status,
-  tutorials: state.tutorial.tutorials,
-  userTutorials: state.tutorial.userTutorials,
-  isLoading: state.tutorial.progress,
-  message: state.message,
-  progress: state.auth.progress,
-  user: state.auth.user,
-  authProgress: state.auth.progress,
-});
-
-export default connect(mapStateToProps, {
-  getTutorials,
-  progress,
-  getUserTutorials,
-  getAllTutorials,
-  resetTutorial,
-  clearMessages,
-  tutorialProgress,
-})(withStyles(styles, { withTheme: true })(TutorialHome));
+export default TutorialHome;
diff --git a/src/components/Tutorial/TutorialItem.jsx b/src/components/Tutorial/TutorialItem.jsx
new file mode 100644
index 00000000..e497b59f
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem.jsx
@@ -0,0 +1,298 @@
+import React, { useState } from "react";
+import PropTypes from "prop-types";
+import { Link } from "react-router-dom";
+import {
+  Grid,
+  Card,
+  CardActionArea,
+  CardContent,
+  Typography,
+  Box,
+  Button,
+  CircularProgress,
+} from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faPencil, faTrash } from "@fortawesome/free-solid-svg-icons";
+import { useDispatch, useSelector } from "react-redux";
+import { deleteTutorial } from "@/actions/tutorialActions";
+import DifficultyLabel from "./DifficultyLabel";
+import { motion } from "framer-motion";
+import Dialog from "@/components/ui/Dialog";
+import { CheckCircle, Error as ErrorIcon } from "@mui/icons-material";
+import { useTheme } from "@mui/material/styles";
+import Snackbar from "../Snackbar";
+import { useHistory } from "react-router-dom/cjs/react-router-dom.min";
+import TutorialOverview from "./TutorialOverview";
+
+function getDifficultyLevel(value) {
+  if (value <= 1) return 1;
+  if (value <= 2) return 2;
+  if (value <= 3) return 3;
+  if (value <= 4) return 4;
+  return 5;
+}
+
+function TutorialItem({ tutorial, level }) {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const user = useSelector((state) => state.auth.user);
+
+  // Modal states
+  const [dialogState, setDialogState] = useState("idle");
+  // idle | confirm | loading | success | error
+
+  const labels = ["Sehr leicht", "Leicht", "Mittel", "Schwer", "Sehr schwer"];
+  const getTutorialImage = (t) => t.imageUrl || "/placeholder-image.png";
+  const getDifficultyLabel = (value) => {
+    const idx = Math.max(
+      0,
+      Math.min(labels.length - 1, getDifficultyLevel(value) - 1),
+    );
+    return labels[idx].toLocaleUpperCase();
+  };
+
+  const handleDelete = async () => {
+    setDialogState("loading");
+    try {
+      await dispatch(deleteTutorial(tutorial._id));
+    } catch (err) {
+      console.error("Fehler beim Löschen:", err);
+      setDialogState("error");
+    }
+  };
+
+  const handleCloseModal = () => setDialogState("idle");
+
+  return (
+    <>
+      <Grid item xs={12} sm={6} md={4} xl={3} key={tutorial._id}>
+        <Card
+          elevation={3}
+          sx={{
+            height: "100%",
+            display: "flex",
+            flexDirection: "column",
+            transition: "transform 0.2s, box-shadow 0.2s",
+            "&:hover": { boxShadow: 6 },
+          }}
+        >
+          <CardActionArea
+            onClick={() => history.push(`/tutorial/${tutorial._id}`)}
+            sx={{
+              textAlign: "left",
+              flexGrow: 1,
+              display: "flex",
+              flexDirection: "column",
+            }}
+          >
+            <CardContent
+              sx={{
+                flexGrow: 1,
+                display: "flex",
+                flexDirection: "column",
+                p: "8px",
+              }}
+            >
+              <TutorialOverview tutorial={tutorial} />
+            </CardContent>
+          </CardActionArea>
+
+          {user && tutorial.creator === user.email && (
+            <Box sx={{ p: 2, pt: 0, gap: 2, display: "flex" }}>
+              {/* <Button
+              component={Link}
+              to={`/tutorial/${tutorial._id}`}
+              fullWidth
+              startIcon={<FontAwesomeIcon icon={faEye} />}
+              sx={{
+                background: theme.palette.background.white,
+                color: theme.palette.primary.main,
+                borderRadius: "5px",
+                fontWeight: "bold",
+                border: "1px solid",
+                borderColor: theme.palette.primary.main,
+                transition: "all 0.2s ease-in-out",
+                "&:hover": {
+                  backgroundColor: theme.palette.primary.main,
+                  color: theme.palette.background.white,
+                },
+              }}
+            >
+              Anzeigen
+            </Button> */}
+
+              <Box
+                sx={{
+                  display: "flex",
+                  gap: 1,
+                  flexGrow: 1,
+                  flexDirection: "column",
+                }}
+              >
+                <Button
+                  component={Link}
+                  id={`edit${tutorial._id}`}
+                  to={`/tutorial/${tutorial._id}/edit`}
+                  fullWidth
+                  startIcon={<FontAwesomeIcon icon={faPencil} />}
+                  sx={{
+                    background: theme.palette.background.white,
+                    color: theme.palette.primary.main,
+                    borderRadius: "5px",
+                    fontWeight: "bold",
+                    border: "1px solid",
+                    borderColor: theme.palette.primary.main,
+                    transition: "all 0.2s ease-in-out",
+                    "&:hover": {
+                      backgroundColor: theme.palette.primary.main,
+                      color: theme.palette.background.white,
+                    },
+                  }}
+                >
+                  Bearbeiten
+                </Button>
+
+                <Button
+                  fullWidth
+                  id={`delete${tutorial._id}`}
+                  startIcon={<FontAwesomeIcon icon={faTrash} />}
+                  sx={{
+                    background: theme.palette.background.white,
+                    color: "red",
+                    borderRadius: "5px",
+                    fontWeight: "bold",
+                    border: "1px solid",
+                    borderColor: "red",
+                    transition: "all 0.2s ease-in-out",
+                    "&:hover": {
+                      backgroundColor: "red",
+                      color: theme.palette.background.white,
+                    },
+                  }}
+                  onClick={() => setDialogState("confirm")}
+                >
+                  Löschen
+                </Button>
+              </Box>
+            </Box>
+          )}
+        </Card>
+      </Grid>
+
+      {/* 🧱 Modal für alle Zustände */}
+      <Dialog
+        open={dialogState !== "idle"}
+        fullWidth
+        maxWidth="xs"
+        onClose={handleCloseModal}
+        title={
+          dialogState === "confirm"
+            ? "Tutorial löschen?"
+            : dialogState === "loading"
+              ? "Tutorial wird gelöscht..."
+              : dialogState === "success"
+                ? "Erfolgreich gelöscht!"
+                : "Fehler beim Löschen"
+        }
+        content={
+          <Box
+            sx={{
+              textAlign: "center",
+              py: 3,
+              display: "flex",
+              flexDirection: "column",
+              alignItems: "center",
+              gap: 2,
+            }}
+          >
+            {/* CONFIRM */}
+            {dialogState === "confirm" && (
+              <>
+                <Typography variant="body1">
+                  Möchtest du <strong>{tutorial.title}</strong> wirklich
+                  löschen?
+                </Typography>
+                <Box sx={{ mt: 3, display: "flex", gap: 2 }}>
+                  <Button variant="outlined" onClick={handleCloseModal}>
+                    Abbrechen
+                  </Button>
+                  <Button
+                    id="confirmDelete"
+                    variant="contained"
+                    color="error"
+                    onClick={handleDelete}
+                  >
+                    Löschen
+                  </Button>
+                </Box>
+              </>
+            )}
+
+            {/* LOADING */}
+            {dialogState === "loading" && (
+              <>
+                <CircularProgress color="primary" />
+                <Typography variant="body2" color="text.secondary">
+                  Bitte warten, das Tutorial wird gelöscht...
+                </Typography>
+              </>
+            )}
+
+            {/* SUCCESS */}
+            {dialogState === "success" && (
+              <>
+                <motion.div
+                  initial={{ scale: 0 }}
+                  animate={{ scale: 1 }}
+                  transition={{ type: "spring", stiffness: 120 }}
+                >
+                  <CheckCircle sx={{ fontSize: 64, color: "success.main" }} />
+                </motion.div>
+                <Typography variant="body1" fontWeight={600}>
+                  Tutorial erfolgreich gelöscht!
+                </Typography>
+                <Button
+                  variant="contained"
+                  color="primary"
+                  onClick={handleCloseModal}
+                >
+                  OK
+                </Button>
+              </>
+            )}
+
+            {/* ERROR */}
+            {dialogState === "error" && (
+              <>
+                <ErrorIcon sx={{ fontSize: 64, color: "error.main" }} />
+                <Typography variant="body1" fontWeight={600}>
+                  Beim Löschen ist ein Fehler aufgetreten.
+                </Typography>
+                <Button
+                  variant="contained"
+                  color="error"
+                  onClick={handleCloseModal}
+                >
+                  Schließen
+                </Button>
+              </>
+            )}
+          </Box>
+        }
+        button={null}
+      />
+    </>
+  );
+}
+
+TutorialItem.propTypes = {
+  tutorial: PropTypes.shape({
+    _id: PropTypes.string.isRequired,
+    title: PropTypes.string.isRequired,
+    description: PropTypes.string,
+    imageUrl: PropTypes.string,
+  }).isRequired,
+};
+
+export default TutorialItem;
diff --git a/src/components/Tutorial/TutorialItem/HardwareCard.jsx b/src/components/Tutorial/TutorialItem/HardwareCard.jsx
new file mode 100644
index 00000000..b9e3f820
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem/HardwareCard.jsx
@@ -0,0 +1,148 @@
+import React from "react";
+import PropTypes from "prop-types";
+import {
+  Card,
+  CardContent,
+  Box,
+  Typography,
+  Chip,
+  IconButton,
+  Tooltip,
+  useTheme,
+} from "@mui/material";
+import { MenuBook } from "@mui/icons-material";
+import COMPONENT_MAP from "../componentMap"; // Pfad ggf. anpassen
+const HardwareCard = ({ component }) => {
+  const theme = useTheme();
+  const compData = COMPONENT_MAP[component] || {
+    name: component,
+    image: "/media/hardware/3dmodels/coming-soon.png", // Fallback
+    docUrl: "#",
+  };
+
+  return (
+    <Card
+      sx={{
+        height: "100%",
+
+        display: "flex",
+        flexDirection: "column",
+        justifyContent: "space-between",
+        borderRadius: 3,
+        transition: "all 0.25s ease-in-out",
+        "&:hover": { boxShadow: 6, transform: "translateY(-4px)" },
+      }}
+    >
+      <CardContent
+        sx={{
+          flex: 1,
+          display: "flex",
+          flexDirection: "column",
+          alignItems: "center",
+          gap: 2,
+          textAlign: "center",
+        }}
+      >
+        {/* Bild */}
+        {/* Bild mit Hover-Zoom */}
+        <Tooltip
+          title={
+            <Box
+              sx={{
+                p: 1,
+                bgcolor: "background.paper",
+                borderRadius: 2,
+                boxShadow: 3,
+              }}
+            >
+              <img
+                src={compData.image}
+                alt={compData.name}
+                style={{
+                  width: "200px",
+                  height: "200px",
+                  objectFit: "contain",
+                }}
+              />
+            </Box>
+          }
+          placement="top"
+          arrow
+        >
+          <Box
+            sx={{
+              width: 96,
+              height: 96,
+              borderRadius: "20%",
+              background: theme.palette.action.hover,
+              display: "flex",
+              alignItems: "center",
+              justifyContent: "center",
+              overflow: "hidden",
+              boxShadow: 1,
+              cursor: "pointer",
+            }}
+          >
+            <img
+              src={compData.image}
+              alt={compData.name}
+              style={{
+                width: "70%",
+                height: "70%",
+                objectFit: "contain",
+              }}
+            />
+          </Box>
+        </Tooltip>
+
+        {/* Titel */}
+        <Typography variant="subtitle1" fontWeight="600" noWrap>
+          {compData.name}
+        </Typography>
+
+        {/* Sensor (falls vorhanden) */}
+        {compData.sensor && (
+          <Chip
+            label={compData.sensor}
+            color="primary"
+            variant="outlined"
+            size="small"
+          />
+        )}
+      </CardContent>
+
+      {/* Footer mit Doc-Link */}
+      <Box
+        sx={{
+          p: 1,
+          display: "flex",
+          justifyContent: "center",
+          borderTop: `1px solid ${theme.palette.divider}`,
+        }}
+      >
+        <Tooltip title="Zur Dokumentation">
+          <IconButton
+            href={compData.docUrl}
+            target="_blank"
+            rel="noopener noreferrer"
+            sx={{
+              backgroundColor: theme.palette.primary.main,
+              color: "white",
+              "&:hover": {
+                backgroundColor: theme.palette.primary.dark,
+              },
+            }}
+          >
+            <MenuBook />
+          </IconButton>
+        </Tooltip>
+      </Box>
+    </Card>
+  );
+};
+
+HardwareCard.propTypes = {
+  component: PropTypes.string.isRequired, // nur Name-String notwendig
+};
+
+export default HardwareCard;
diff --git a/src/components/Tutorial/TutorialItem/Instruction.jsx b/src/components/Tutorial/TutorialItem/Instruction.jsx
new file mode 100644
index 00000000..64aaa059
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem/Instruction.jsx
@@ -0,0 +1,83 @@
+import { Info } from "@mui/icons-material";
+import { Box, Typography, useTheme } from "@mui/material";
+import HardwareCard from "./HardwareCard";
+import TutorialSlide from "./TutorialSlide";
+import MarkdownIt from "markdown-it";
+
+const md = new MarkdownIt();
+
+// Image-Renderer anpassen
+const defaultImageRenderer =
+  md.renderer.rules.image ||
+  function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+  };
+
+md.renderer.rules.image = function (tokens, idx, options, env, self) {
+  const token = tokens[idx];
+  token.attrs = token.attrs || [];
+  token.attrs = token.attrs.filter(
+    ([name]) => name !== "width" && name !== "height" && name !== "style",
+  );
+  token.attrs.push([
+    "style",
+    "max-width:250px; height:auto; display:block; margin:auto;",
+  ]);
+  const imgHtml = defaultImageRenderer(tokens, idx, options, env, self);
+  return `
+    <div style="text-align:center;">
+      <div style="display:inline-block; padding:12px; background:#f5f5f5;">
+        ${imgHtml}
+      </div>
+    </div>
+  `;
+};
+
+const Instruction = ({ tutorial }) => {
+  const theme = useTheme();
+  // find the instruction step
+  const step = (tutorial?.steps || []).find(
+    (s) => s.type === "instruction",
+  ) || { text: "", hardware: [] };
+
+  return (
+    <TutorialSlide title="Einleitung">
+      <Box sx={{ my: 2 }}>
+        <div dangerouslySetInnerHTML={{ __html: md.render(step.text) }} />
+      </Box>
+      <Typography sx={{ fontWeight: "bold" }}>
+        <Info sx={{ color: theme.palette.primary.main, mr: 1 }} />
+        Benötigte Hardware
+      </Typography>
+      <Box
+        sx={{
+          display: "flex",
+          flexWrap: "wrap",
+          justifyContent: "space-around",
+          mt: 2,
+          width: "100%",
+        }}
+      >
+        {tutorial.hardware &&
+          tutorial.hardware.map((sensor, idx) => (
+            <div key={idx}>
+              <Box
+                key={sensor.id || idx}
+                sx={{
+                  flex: "1",
+                  minWidth: "80px",
+                  boxSizing: "border-box",
+                  display: "flex",
+                  justifyContent: "center",
+                }}
+              >
+                <HardwareCard component={sensor} />
+              </Box>
+            </div>
+          ))}
+      </Box>
+    </TutorialSlide>
+  );
+};
+
+export default Instruction;
diff --git a/src/components/Tutorial/TutorialItem/QuestionCard.jsx b/src/components/Tutorial/TutorialItem/QuestionCard.jsx
new file mode 100644
index 00000000..6151874a
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem/QuestionCard.jsx
@@ -0,0 +1,269 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Card,
+  CardContent,
+  Typography,
+  Radio,
+  Checkbox,
+  FormControlLabel,
+  Button,
+  useTheme,
+} from "@mui/material";
+import { motion, AnimatePresence } from "framer-motion";
+import { CheckCircle, Cancel, HelpOutline } from "@mui/icons-material";
+
+const QuestionCard = ({ questionData, setNextStepDisabled }) => {
+  const theme = useTheme();
+  const [selected, setSelected] = useState([]);
+  const [submitted, setSubmitted] = useState(false);
+  const [isCorrect, setIsCorrect] = useState(false);
+
+  if (!questionData)
+    return (
+      <Typography variant="body2" color="text.secondary">
+        Keine Frage verfügbar.
+      </Typography>
+    );
+
+  const { question, answers = [], multipleChoice } = questionData;
+
+  const handleSelect = (value) => {
+    if (multipleChoice) {
+      setSelected((prev) =>
+        prev.includes(value)
+          ? prev.filter((v) => v !== value)
+          : [...prev, value],
+      );
+    } else {
+      setSelected([value]);
+    }
+  };
+
+  const handleSubmit = () => {
+    const correctAnswers = answers
+      .filter((a) => a.correct)
+      .map((a) => a.text)
+      .sort();
+    const selectedAnswers = [...selected].sort();
+
+    const correct =
+      correctAnswers.length === selectedAnswers.length &&
+      correctAnswers.every((val, i) => val === selectedAnswers[i]);
+
+    setIsCorrect(correct);
+    if (correct) setNextStepDisabled(false);
+    setSubmitted(true);
+  };
+
+  const resetQuestion = () => {
+    setSelected([]);
+    setSubmitted(false);
+    setIsCorrect(false);
+  };
+
+  // Sammle Feedbacks der ausgewählten Antworten (falls vorhanden)
+  const selectedFeedbacks = answers
+    .filter((a) => selected.includes(a.text) && a.feedback)
+    .map((a) => a.feedback);
+
+  return (
+    <Card
+      sx={{
+        borderRadius: 3,
+        boxShadow: 3,
+        border: `1px solid ${theme.palette.divider}`,
+        overflow: "hidden",
+        position: "relative",
+        width: "100%",
+      }}
+    >
+      <CardContent sx={{ p: 3 }}>
+        {/* Header */}
+        <Box sx={{ display: "flex", alignItems: "center", mb: 1.5 }}>
+          <HelpOutline
+            sx={{
+              mr: 1,
+              color: theme.palette.primary.main,
+              verticalAlign: "middle",
+            }}
+          />
+          <Typography variant="h6" fontWeight={600}>
+            {question}
+          </Typography>
+        </Box>
+
+        {multipleChoice && (
+          <Typography
+            variant="body2"
+            sx={{ mb: 2, color: theme.palette.text.secondary }}
+          >
+            (Mehrere Antworten möglich)
+          </Typography>
+        )}
+
+        {/* Antwortmöglichkeiten */}
+        <Box>
+          {answers.map((a, i) => {
+            const isAnswerCorrect = a.correct;
+            const isSelected = selected.includes(a.text);
+
+            let bgColor = "transparent";
+            let borderColor = theme.palette.divider;
+
+            if (submitted) {
+              if (isAnswerCorrect && isSelected) {
+                bgColor = theme.palette.success.light;
+                borderColor = theme.palette.success.main;
+              } else if (!isAnswerCorrect && isSelected) {
+                bgColor = theme.palette.error.light;
+                borderColor = theme.palette.error.main;
+              } else if (isAnswerCorrect) {
+                bgColor = theme.palette.success.light;
+                borderColor = theme.palette.success.main;
+              }
+            }
+
+            return (
+              <motion.div
+                key={i}
+                animate={{ scale: submitted && isSelected ? 1.03 : 1 }}
+                transition={{ duration: 0.2 }}
+              >
+                <Box
+                  sx={{
+                    border: `2px solid ${borderColor}`,
+                    borderRadius: 2,
+                    mb: 1,
+                    p: 1.2,
+                    transition: "all 0.25s ease",
+                    backgroundColor: bgColor,
+                    "&:hover": {
+                      backgroundColor: !submitted && theme.palette.action.hover,
+                    },
+                  }}
+                >
+                  <FormControlLabel
+                    control={
+                      multipleChoice ? (
+                        <Checkbox
+                          checked={isSelected}
+                          onChange={() => handleSelect(a.text)}
+                          disabled={submitted}
+                        />
+                      ) : (
+                        <Radio
+                          checked={isSelected}
+                          onChange={() => handleSelect(a.text)}
+                          disabled={submitted}
+                        />
+                      )
+                    }
+                    label={
+                      <Typography
+                        sx={{
+                          fontWeight: 500,
+                          color: theme.palette.text.primary,
+                        }}
+                      >
+                        {a.text}
+                      </Typography>
+                    }
+                  />
+                </Box>
+              </motion.div>
+            );
+          })}
+        </Box>
+
+        {/* Gesamtfeedback nach Abgabe */}
+        <AnimatePresence>
+          {submitted && (
+            <motion.div
+              initial={{ opacity: 0, scale: 0.8 }}
+              animate={{ opacity: 1, scale: 1 }}
+              exit={{ opacity: 0 }}
+              transition={{ duration: 0.3 }}
+            >
+              <Box
+                sx={{
+                  display: "flex",
+                  alignItems: "center",
+                  gap: 1,
+                  mt: 2,
+                }}
+              >
+                {isCorrect ? (
+                  <>
+                    <CheckCircle
+                      sx={{ color: theme.palette.success.main, fontSize: 28 }}
+                    />
+                    <Typography color="success.main" fontWeight={600}>
+                      Richtig beantwortet!
+                    </Typography>
+                  </>
+                ) : (
+                  <>
+                    <Cancel
+                      sx={{ color: theme.palette.error.main, fontSize: 28 }}
+                    />
+                    <Typography color="error.main" fontWeight={600}>
+                      Leider nicht ganz richtig.
+                    </Typography>
+                  </>
+                )}
+              </Box>
+
+              {/* 🧠 Custom Feedback der gewählten Antworten */}
+              {selectedFeedbacks.length > 0 && (
+                <Box sx={{ mt: 1.5, pl: 4 }}>
+                  {selectedFeedbacks.map((fb, idx) => (
+                    <Typography
+                      key={idx}
+                      variant="body2"
+                      sx={{
+                        color: isCorrect
+                          ? theme.palette.success.dark
+                          : theme.palette.error.dark,
+                        fontStyle: "italic",
+                        mb: 0.5,
+                      }}
+                    >
+                      💡 {fb}
+                    </Typography>
+                  ))}
+                </Box>
+              )}
+            </motion.div>
+          )}
+        </AnimatePresence>
+
+        {/* Buttons */}
+        <Box
+          sx={{
+            display: "flex",
+            justifyContent: "flex-end",
+            gap: 1,
+            mt: 3,
+          }}
+        >
+          {!submitted ? (
+            <Button
+              variant="contained"
+              onClick={handleSubmit}
+              disabled={selected.length === 0}
+            >
+              Antwort bestätigen
+            </Button>
+          ) : (
+            <Button variant="outlined" onClick={resetQuestion}>
+              Neu versuchen
+            </Button>
+          )}
+        </Box>
+      </CardContent>
+    </Card>
+  );
+};
+
+export default QuestionCard;
diff --git a/src/components/Tutorial/TutorialItem/SolutionCheck.jsx b/src/components/Tutorial/TutorialItem/SolutionCheck.jsx
new file mode 100644
index 00000000..0de70001
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem/SolutionCheck.jsx
@@ -0,0 +1,258 @@
+import React, { useState } from "react";
+import {
+  Box,
+  Typography,
+  Button,
+  Divider,
+  List,
+  ListItem,
+  ListItemIcon,
+  ListItemText,
+  Accordion,
+  AccordionSummary,
+  AccordionDetails,
+  useTheme,
+} from "@mui/material";
+import ExpandMoreIcon from "@mui/icons-material/ExpandMore";
+import Dialog from "@/components/ui/Dialog";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import {
+  faCheckCircle,
+  faTimesCircle,
+  faInfoCircle,
+  faClipboardCheck,
+} from "@fortawesome/free-solid-svg-icons";
+import * as Blockly from "blockly";
+import { useDispatch, useSelector } from "react-redux";
+import { checkXml } from "@/helpers/compareXml";
+import CompilationDialog from "@/components/Workspace/ToolbarItems/CompilationDialog/CompilationDialog";
+
+export default function SolutionCheck({
+  solutionXml,
+  isLastStep = false,
+  onFinish,
+}) {
+  const xml = useSelector((s) => s.workspace.code.xml);
+  const dispatch = useDispatch();
+  const [open, setOpen] = useState(false);
+  const [dialogOpen, setDialogOpen] = useState(false);
+  const [msg, setMsg] = useState(null);
+  const [expanded, setExpanded] = useState(false);
+  const activeStep = useSelector((state) => state.tutorial.activeStep);
+  const tutorial = useSelector((state) => state.tutorial.tutorials[0]);
+  const arduino = useSelector((s) => s.workspace.code.arduino);
+  const selectedBoard = useSelector((state) => state.board.board);
+  const theme = useTheme();
+
+  const handleClose = () => {
+    setOpen(false);
+    setMsg(null);
+    setExpanded(false);
+  };
+
+  const check = () => {
+    if (!xml || !solutionXml) {
+      setMsg({
+        type: "error",
+        text: "Es konnte kein Blockly-Code geladen werden.",
+      });
+      setOpen(true);
+      return;
+    }
+
+    const result = checkXml(solutionXml, xml);
+    setMsg(result);
+    setOpen(true);
+  };
+
+  const changeStep = (step) => {
+    dispatch({
+      type: "TUTORIAL_STEP",
+      payload: step,
+    });
+  };
+
+  const nextStep = () => {
+    const allSteps = tutorial.steps;
+    if (activeStep < allSteps.length - 1) {
+      changeStep(activeStep + 1);
+    }
+    handleClose();
+  };
+
+  const isSuccess = msg?.type === "success";
+
+  return (
+    <>
+      {/* ✅ Großer Button */}
+      <Box sx={{ display: "flex", justifyContent: "center", mt: 2 }}>
+        <Button
+          variant="contained"
+          color="primary"
+          onClick={check}
+          sx={{
+            px: 4,
+            py: 1.5,
+            borderRadius: "10px",
+            fontWeight: 600,
+            textTransform: "none",
+            fontSize: "1rem",
+          }}
+        >
+          Lösung einreichen
+        </Button>
+      </Box>
+
+      {/* Dialog mit Analyse */}
+      <Dialog
+        fullWidth
+        maxWidth="sm"
+        open={open}
+        onClose={handleClose}
+        title={
+          <Box sx={{ display: "flex", alignItems: "center", gap: 1 }}>
+            <FontAwesomeIcon
+              icon={isSuccess ? faCheckCircle : faTimesCircle}
+              style={{
+                color: isSuccess
+                  ? theme.palette.feedback.success
+                  : theme.palette.feedback.error,
+                fontSize: "1.5rem",
+              }}
+            />
+            <Typography variant="h6">
+              {isSuccess ? "Sehr gut!" : "Da fehlt noch was…"}
+            </Typography>
+          </Box>
+        }
+        button={!isSuccess ? Blockly.Msg.button_close || "Schließen" : null}
+        onClick={!isSuccess ? handleClose : undefined}
+        content={
+          <Box>
+            <Typography
+              variant="body1"
+              sx={{
+                mt: 1,
+                mb: 2,
+                color: isSuccess
+                  ? theme.palette.feedback.success
+                  : theme.palette.feedback.error,
+                fontWeight: 500,
+              }}
+            >
+              {msg?.text}
+            </Typography>
+
+            {/* Accordion für Analyse */}
+            {msg?.details && (
+              <Accordion
+                expanded={expanded}
+                onChange={() => setExpanded(!expanded)}
+                sx={{
+                  borderRadius: 2,
+                  boxShadow: "none",
+                  border: `1px solid ${theme.palette.feedback.border}`,
+                  mt: 1,
+                  "&:before": { display: "none" },
+                }}
+              >
+                <AccordionSummary
+                  expandIcon={<ExpandMoreIcon />}
+                  aria-controls="analysis-content"
+                  id="analysis-header"
+                >
+                  <Typography
+                    variant="subtitle2"
+                    sx={{ fontWeight: 600, color: "text.primary" }}
+                  >
+                    Hilfe anzeigen
+                  </Typography>
+                </AccordionSummary>
+
+                <AccordionDetails>
+                  <Divider sx={{ mb: 1 }} />
+                  <Typography
+                    variant="subtitle2"
+                    sx={{ mb: 1, fontWeight: 500 }}
+                  >
+                    Analyse:
+                  </Typography>
+                  <List dense>
+                    {msg.details.map((detail, i) => (
+                      <ListItem key={i}>
+                        <ListItemIcon>
+                          <FontAwesomeIcon
+                            icon={
+                              detail.type === "error"
+                                ? faTimesCircle
+                                : detail.type === "success"
+                                  ? faCheckCircle
+                                  : faInfoCircle
+                            }
+                            color={
+                              detail.type === "error"
+                                ? theme.palette.feedback.error
+                                : detail.type === "success"
+                                  ? theme.palette.feedback.success
+                                  : theme.palette.feedback.warning
+                            }
+                          />
+                        </ListItemIcon>
+                        <ListItemText primary={detail.text} />
+                      </ListItem>
+                    ))}
+                  </List>
+                </AccordionDetails>
+              </Accordion>
+            )}
+
+            <Box sx={{ mt: 1, color: "text.secondary" }}>
+              Du kannst den Programmcode jetzt kompilieren und live auf deiner
+              senseBox testen!
+            </Box>
+          </Box>
+        }
+      >
+        {/* ✅ Nur bei erfolgreichem Ergebnis zeigen */}
+        {isSuccess && (
+          <Box
+            sx={{ mt: 3, display: "flex", justifyContent: "flex-end", gap: 1 }}
+          >
+            <Button
+              variant="contained"
+              sx={{
+                backgroundColor: theme.palette.button.compile,
+                "&:hover": {
+                  backgroundColor: theme.palette.senseboxColors.blue,
+                },
+                color: theme.palette.primary.contrastText,
+              }}
+              onClick={() => setDialogOpen(true)}
+              startIcon={<FontAwesomeIcon icon={faClipboardCheck} />}
+            >
+              Compile
+            </Button>
+
+            <CompilationDialog
+              open={dialogOpen}
+              onClose={() => setDialogOpen(false)}
+              selectedBoard={selectedBoard}
+              code={arduino}
+              filename={"sketch"}
+            />
+
+            {isLastStep ? (
+              <Button variant="contained" color="primary" onClick={onFinish}>
+                {Blockly.Msg.button_tutorial_overview || "Zur Übersicht"}
+              </Button>
+            ) : (
+              <Button variant="contained" color="primary" onClick={nextStep}>
+                {Blockly.Msg.button_next || "Nächster Schritt"}
+              </Button>
+            )}
+          </Box>
+        )}
+      </Dialog>
+    </>
+  );
+}
diff --git a/src/components/Tutorial/TutorialItem/TaskStep.jsx b/src/components/Tutorial/TutorialItem/TaskStep.jsx
new file mode 100644
index 00000000..bd75d011
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem/TaskStep.jsx
@@ -0,0 +1,126 @@
+import { useEffect } from "react";
+import MarkdownIt from "markdown-it";
+import { useSelector } from "react-redux";
+import TutorialSlide from "./TutorialSlide";
+import QuestionBlock from "./QuestionCard";
+import QuestionCard from "./QuestionCard";
+import SolutionCheck from "./SolutionCheck";
+import BlocklyWindow from "@/components/Blockly/BlocklyWindow";
+import { Box, Grid, Typography } from "@mui/material";
+
+const md = new MarkdownIt({ html: true, linkify: true, typographer: true });
+
+// Image-Renderer anpassen
+const defaultImageRenderer =
+  md.renderer.rules.image ||
+  function (tokens, idx, options, env, self) {
+    return self.renderToken(tokens, idx, options);
+  };
+
+md.renderer.rules.image = function (tokens, idx, options, env, self) {
+  const token = tokens[idx];
+  token.attrs = token.attrs || [];
+  token.attrs = token.attrs.filter(
+    ([name]) => name !== "width" && name !== "height" && name !== "style",
+  );
+  token.attrs.push([
+    "style",
+    "max-width:250px; height:auto; display:block; margin:auto;",
+  ]);
+  const imgHtml = defaultImageRenderer(tokens, idx, options, env, self);
+  return `
+    <div style="text-align:center;">
+      <div style="display:inline-block; padding:12px; background:#f5f5f5;">
+        ${imgHtml}
+      </div>
+    </div>
+  `;
+};
+
+const TaskStep = ({ step, setNextStepDisabled }) => {
+  const activeStep = useSelector((state) => state.tutorial.activeStep);
+
+  useEffect(() => {
+    if (step.type === "question" && step.questionData) {
+      setNextStepDisabled(true);
+      console.log("disbaling");
+    }
+  }, [step]);
+
+  return (
+    <TutorialSlide stepNumber={activeStep}>
+      <div dangerouslySetInnerHTML={{ __html: md.render(step.text) }} />
+      {step.type === "question" && step.questionData && (
+        <Box
+          sx={{
+            gap: 4,
+            display: "flex",
+            flexDirection: "column",
+          }}
+        >
+          {step.questionData.map((q, idx) => {
+            return (
+              <QuestionCard
+                setNextStepDisabled={setNextStepDisabled}
+                key={idx}
+                questionData={q}
+              />
+            );
+          })}
+        </Box>
+      )}
+      {step.type === "blockly" && step.xml && (
+        <Box
+          className="blocklyWindow"
+          sx={{
+            display: "flex",
+            flexDirection: "column",
+            alignItems: "center",
+            gap: 2,
+          }}
+        >
+          {/* Blockly mit Rahmen */}
+          <Box
+            sx={{
+              width: "100%",
+              borderRadius: 3,
+              boxShadow: "0 4px 12px rgba(0,0,0,0.08)",
+              border: "1px solid rgba(0,0,0,0.1)",
+              overflow: "hidden",
+              backgroundColor: "#fff",
+              p: 1,
+            }}
+          >
+            <BlocklyWindow
+              blocklyCSS={{
+                height: "40vh",
+                width: "100%",
+              }}
+              tutorial
+            />
+            {/* Einführungstext */}
+            <Typography
+              variant="body2"
+              sx={{
+                fontStyle: "italic",
+                color: "text.secondary",
+                textAlign: "center",
+                maxWidth: "50vw",
+                mt: 2,
+              }}
+            >
+              Hier sollst du den vorgegebenen Sketch nachbauen. Wenn du fertig
+              bist, klicke auf <b>„Lösung einreichen“</b>, um zu sehen, ob dein
+              Ergebnis korrekt ist.
+            </Typography>
+          </Box>
+
+          {/* Lösung prüfen */}
+          <SolutionCheck solutionXml={step.xml} activeStep={activeStep} />
+        </Box>
+      )}
+    </TutorialSlide>
+  );
+};
+
+export default TaskStep;
diff --git a/src/components/Tutorial/TutorialItem/TutorialProgessCard.jsx b/src/components/Tutorial/TutorialItem/TutorialProgessCard.jsx
new file mode 100644
index 00000000..554445bc
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem/TutorialProgessCard.jsx
@@ -0,0 +1,152 @@
+import React from "react";
+import {
+  Box,
+  Card,
+  CardHeader,
+  CardContent,
+  Typography,
+  LinearProgress,
+  useTheme,
+  Button,
+} from "@mui/material";
+import { useDispatch, useSelector } from "react-redux";
+import CheckCircleIcon from "@mui/icons-material/CheckCircle";
+import RadioButtonUncheckedIcon from "@mui/icons-material/RadioButtonUnchecked";
+import { Edit } from "@mui/icons-material";
+import { useHistory } from "react-router-dom";
+
+const TutorialProgressCard = () => {
+  const theme = useTheme();
+  const dispatch = useDispatch();
+  const history = useHistory();
+  const activeStep = useSelector((state) => state.tutorial.activeStep);
+  const tutorial = useSelector((state) => state.tutorial.tutorials[0]);
+  const user = useSelector((state) => state.auth.user);
+  // künstlich einen "Abschluss"-Step anhängen
+  const stepsWithFinish = [...tutorial.steps];
+
+  const progress = ((activeStep + 1) / stepsWithFinish.length) * 100;
+
+  const changeStep = (step) => {
+    dispatch({
+      type: "TUTORIAL_STEP",
+      payload: step,
+    });
+  };
+
+  return (
+    <Card
+      sx={{
+        borderRadius: 3,
+        boxShadow: 3,
+        maxHeight: "80vh",
+        overflow: "scroll",
+      }}
+    >
+      <CardHeader
+        title={
+          <Typography variant="h6" fontWeight={600}>
+            {tutorial.title || ""}
+          </Typography>
+        }
+        subheader={
+          <Box>
+            {tutorial.subtitle}
+
+            <LinearProgress
+              variant="determinate"
+              value={progress}
+              sx={{
+                height: 6,
+                borderRadius: 3,
+                mb: 1,
+              }}
+            />
+            <Typography variant="body2" color="text.secondary">
+              Schritt {Math.min(activeStep + 1, stepsWithFinish.length)} von{" "}
+              {stepsWithFinish.length}
+            </Typography>
+          </Box>
+        }
+      />
+
+      <CardContent sx={{ display: "flex", flexDirection: "column", gap: 1 }}>
+        {stepsWithFinish.map((step, index) => {
+          const isCurrent = index === activeStep;
+          const isCompleted = index < activeStep;
+
+          return (
+            <Box
+              key={step.id || index}
+              component="button"
+              onClick={() => changeStep(index)}
+              sx={{
+                all: "unset",
+                cursor: "pointer",
+                display: "flex",
+                alignItems: "center",
+                gap: 2,
+                px: 2,
+                py: 1.5,
+                borderRadius: 2,
+                transition: "all 0.2s ease-in-out",
+                bgcolor: isCurrent
+                  ? theme.palette.primary.main
+                  : isCompleted
+                    ? theme.palette.action.selected
+                    : "transparent",
+                color: isCurrent
+                  ? theme.palette.primary.contrastText
+                  : theme.palette.text.primary,
+                "&:hover": {
+                  bgcolor: isCurrent
+                    ? theme.palette.primary.dark
+                    : theme.palette.action.hover,
+                },
+              }}
+            >
+              {isCompleted ? (
+                <CheckCircleIcon
+                  sx={{ color: theme.palette.success.main, flexShrink: 0 }}
+                />
+              ) : (
+                <RadioButtonUncheckedIcon
+                  sx={{
+                    color: isCurrent
+                      ? theme.palette.primary.contrastText
+                      : theme.palette.text.secondary,
+                    flexShrink: 0,
+                  }}
+                />
+              )}
+              <Box sx={{ flex: 1, minWidth: 0 }}>
+                <Typography
+                  variant="body2"
+                  fontWeight={isCurrent ? 600 : 400}
+                  noWrap
+                >
+                  {step.title ||
+                    (index === 0 ? "Einleitung" : `Schritt ${index}`)}
+                </Typography>
+                <Typography variant="caption" sx={{ opacity: 0.75 }} noWrap>
+                  {step.subtitle || ""}
+                </Typography>
+              </Box>
+            </Box>
+          );
+        })}
+        {user && tutorial.creator === user.email && (
+          <Button
+            variant="outlined"
+            startIcon={<Edit />}
+            onClick={() => history.push(`/tutorial/${tutorial._id}/edit`)}
+          >
+            Tutorial bearbeiten
+          </Button>
+        )}
+      </CardContent>
+    </Card>
+  );
+};
+
+export default TutorialProgressCard;
diff --git a/src/components/Tutorial/TutorialItem/TutorialSlide.jsx b/src/components/Tutorial/TutorialItem/TutorialSlide.jsx
new file mode 100644
index 00000000..f9a1343f
--- /dev/null
+++ b/src/components/Tutorial/TutorialItem/TutorialSlide.jsx
@@ -0,0 +1,61 @@
+import { motion } from "framer-motion";
+import { Box, Card, CardContent } from "@mui/material";
+
+const variants = {
+  initial: { opacity: 0, x: 100 },
+  animate: { opacity: 1, x: 0 },
+  exit: { opacity: 0, x: -100 },
+};
+
+const TutorialSlide = ({ children, title, stepNumber }) => {
+  return (
+    <motion.div
+      variants={variants}
+      initial="initial"
+      animate="animate"
+      exit="exit"
+      transition={{ duration: 0.4 }}
+      style={{
+        position: "absolute", // wichtig: übereinander stapeln
+        top: 0,
+        left: 0,
+        width: "100%",
+        display: "flex",
+        justifyContent: "center",
+      }}
+    >
+      <Card
+        sx={{
+          width: "100%",
+          overflow: "auto",
+          maxHeight: "80vh",
+          p: 2,
+          boxShadow: 0,
+        }}
+      >
+        <CardContent>
+          {(title || stepNumber !== undefined) && (
+            <Box
+              sx={{
+                p: 0.5,
+                border: "1px solid #ddd",
+                borderRadius: "10%",
+                display: "inline-flex",
+                textAlign: "center",
+                fontWeight: "600",
+                fontSize: "0.9rem",
+                mb: 2,
+              }}
+            >
+              {title ? title : `Schritt ${stepNumber}`}
+            </Box>
+          )}
+
+          {children}
+        </CardContent>
+      </Card>
+    </motion.div>
+  );
+};
+
+export default TutorialSlide;
diff --git a/src/components/Tutorial/TutorialOverview.jsx b/src/components/Tutorial/TutorialOverview.jsx
new file mode 100644
index 00000000..31477bcb
--- /dev/null
+++ b/src/components/Tutorial/TutorialOverview.jsx
@@ -0,0 +1,269 @@
+import { Box, Typography, Tooltip } from "@mui/material";
+import { useTheme } from "@mui/styles";
+import React, { useEffect } from "react";
+import { useSelector, useDispatch } from "react-redux";
+import { AccessTime, School, Category, Grade } from "@mui/icons-material";
+// /Users/eric/Documents/arbeit/React-Ardublockly/src/components/Tutorial/TutorialOverview.jsx
+/**
+ * TutorialOverview
+ * - reads tutorial data and global variables (e.g. theme) from the store
+ * - triggers a load request if no tutorial is present
+ *
+ * Note: this component dispatches a generic action type 'tutorial/loadRequest'.
+ * Adjust the action type or import an action creator if your app uses a different convention.
+ */
+export const TutorialOverview = ({ tutorial }) => {
+  const dispatch = useDispatch();
+
+  useEffect(() => {
+    console.log("Tutorial data:", tutorial);
+  }, [tutorial]);
+  // example of reading a global variable like theme from the store
+  const theme = useTheme();
+
+  if (!tutorial) return;
+  return (
+    <Box
+      sx={{
+        border: `2px solid ${theme.palette.primary.main}`,
+        borderRadius: "5px",
+        backgroundColor: "#f5f5f5",
+        p: 2,
+        bgcolor: "white",
+        position: "relative", // 🔑 wichtig für das absolute Tag
+        height: "100%",
+      }}
+    >
+      {/* 🟢 Grünes Tag oben links */}
+      <Box
+        sx={{
+          position: "absolute",
+          top: -8,
+          left: 8,
+          backgroundColor: theme.palette.primary.main, // Grün
+          color: "white",
+          fontWeight: 600,
+          fontSize: "1rem",
+          padding: "4px 8px",
+          borderRadius: "4px 4px 0 0", // nur unten abgerundet
+          boxShadow: "0 2px 4px rgba(0,0,0,0.1)",
+          zIndex: 1, // sicherstellen, dass es über dem Rand liegt
+        }}
+      >
+        {Array.isArray(tutorial.subjects) && tutorial.subjects.length > 0
+          ? tutorial.subjects.map((s) => s || "Thema").join(", ")
+          : "Thema"}
+      </Box>
+
+      {/* Titel */}
+      <Typography
+        variant="h6"
+        sx={{
+          fontWeight: 600,
+          mb: 1,
+          textAlign: "center",
+          p: 1, // etwas Abstand zum Tag
+          minHeight: "80px",
+        }}
+      >
+        {tutorial.title}
+      </Typography>
+
+      {/* Info-Liste */}
+      <Box
+        sx={{
+          display: "flex",
+          flexDirection: "column",
+          gap: 0.5,
+          fontSize: "0.875rem",
+          mt: 1, // Abstand nach Titel
+        }}
+      >
+        {/* Jahrgangsstufe */}
+        <Box sx={{ display: "flex", alignItems: "flex-start" }}>
+          <Typography
+            component="span"
+            sx={{
+              color: theme.palette.primary.main,
+              fontWeight: 600,
+              mr: 0.5,
+              minWidth: "100px",
+            }}
+          >
+            Jahrgangsstufe:
+          </Typography>
+          <Typography component="span">{tutorial.year || "—"}</Typography>
+        </Box>
+
+        {/* Fach */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: 1,
+          }}
+        >
+          <Typography
+            component="span"
+            sx={{
+              color: theme.palette.primary.main,
+              fontWeight: 600,
+              mr: 0.5,
+              minWidth: "100px",
+            }}
+          >
+            Fach:
+          </Typography>
+
+          {Array.isArray(tutorial.subjects) && tutorial.subjects.length > 0 ? (
+            tutorial.subjects.map((subject, i) => {
+              // Dateiname vorbereiten: z. B. "Informatik" → "informatik.svg"
+              const iconFile =
+                subject.toLowerCase().replace(/ /g, "_") + ".svg";
+              return (
+                <Tooltip key={i} title={subject} arrow>
+                  <Box
+                    component="img"
+                    src={`/media/tutorial/icons/${iconFile}`}
+                    alt={subject}
+                    sx={{
+                      width: 40,
+                      height: 40,
+                      borderRadius: "50%",
+                      cursor: "help",
+                      transition: "transform 0.2s ease",
+                      "&:hover": { transform: "scale(1.1)" },
+                    }}
+                  />
+                </Tooltip>
+              );
+            })
+          ) : (
+            <Typography component="span">—</Typography>
+          )}
+        </Box>
+
+        {/* Dauer */}
+        <Box sx={{ display: "flex", alignItems: "flex-start" }}>
+          <Typography
+            component="span"
+            sx={{
+              color: theme.palette.primary.main,
+              fontWeight: 600,
+              mr: 0.5,
+              minWidth: "100px",
+            }}
+          >
+            Dauer:
+          </Typography>
+          <Typography component="span">
+            {tutorial.duration ? `${tutorial.duration} Minuten` : "—"}
+          </Typography>
+        </Box>
+
+        {/* Themenbereiche */}
+        <Box
+          sx={{
+            display: "flex",
+            alignItems: "center",
+            flexWrap: "wrap",
+            gap: 1,
+          }}
+        >
+          <Typography
+            component="span"
+            sx={{
+              color: theme.palette.primary.main,
+              fontWeight: 600,
+              mr: 0.5,
+              minWidth: "100px",
+            }}
+          >
+            Themenbereiche:
+          </Typography>
+
+          {Array.isArray(tutorial.topics) && tutorial.topics.length > 0 ? (
+            tutorial.topics.map((topic, i) => {
+              // Dateiname vorbereiten: z. B. "KI / Machine Learning" → "ki_machine_learning.svg"
+              const iconFile =
+                topic
+                  .toLowerCase()
+                  .replace(/ /g, "_")
+                  .replace(/\//g, "")
+                  .replace(/&/g, "und")
+                  .replace(/ä/g, "ae")
+                  .replace(/ö/g, "oe")
+                  .replace(/ü/g, "ue")
+                  .replace(/ß/g, "ss") + ".svg";
+
+              return (
+                <Tooltip key={i} title={topic} arrow>
+                  <Box
+                    component="img"
+                    src={`/media/tutorial/icons/${iconFile}`}
+                    alt={topic}
+                    sx={{
+                      width: 40,
+                      height: 40,
+                      borderRadius: "50%",
+                      cursor: "help",
+                      transition: "transform 0.2s ease",
+                      "&:hover": { transform: "scale(1.1)" },
+                    }}
+                  />
+                </Tooltip>
+              );
+            })
+          ) : (
+            <Typography component="span">—</Typography>
+          )}
+        </Box>
+
+        {/* Technische Kompetenzen (optional) */}
+        {tutorial.technicalSkills && (
+          <Box sx={{ display: "flex", alignItems: "flex-start" }}>
+            <Typography
+              component="span"
+              sx={{
+                color: theme.palette.primary.main,
+                fontWeight: 600,
+                mr: 0.5,
+                minWidth: "100px",
+              }}
+            >
+              technische Kompetenzen (u.a.):
+            </Typography>
+            <Typography component="span">{tutorial.technicalSkills}</Typography>
+          </Box>
+        )}
+
+        {/* Kurzbeschreibung (Subtitle) */}
+        {tutorial.subtitle && (
+          <Box
+            sx={{
+              mt: 1.5,
+              p: 1.5,
+              bgcolor: "grey.100",
+              borderRadius: 1.5,
+              borderLeft: `3px solid ${theme.palette.primary.main}`,
+            }}
+          >
+            <Typography
+              variant="body2"
+              sx={{
+                fontStyle: "italic",
+                color: "text.secondary",
+                fontWeight: 500,
+                lineHeight: 1.5,
+              }}
+            >
+              {tutorial.subtitle}
+            </Typography>
+          </Box>
+        )}
+      </Box>
+    </Box>
+  );
+};
+export default TutorialOverview;
diff --git a/src/components/Tutorial/componentMap.js b/src/components/Tutorial/componentMap.js
new file mode 100644
index 00000000..3a8bca27
--- /dev/null
+++ b/src/components/Tutorial/componentMap.js
@@ -0,0 +1,175 @@
+// componentMap.js
+const COMPONENT_MAP = {
+  "mcu-s2": {
+    name: "MCU-S2",
+    image: "/media/hardware/3dmodels/mcus2.png",
+    docUrl:
+      "https://docs.sensebox.de/docs/boards/mcus2/mcu-s2-overview?board=edus2",
+    sensor: "Board",
+  },
+  "ble-bee": {
+    name: "BLE Bee",
+    image: "/media/hardware/3dmodels/ble-bee.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/bee/bluetooth-bee/",
+    sensor: "Bee",
+  },
+  "lan-bee": {
+    name: "LAN Bee",
+    image: "/media/hardware/3dmodels/lan_bee.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/bee/ethernet-bee/",
+    sensor: "Bee",
+  },
+  sound: {
+    name: "Sound Sensor",
+    image: "/media/hardware/3dmodels/sound.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/lautstaerke",
+    sensor: "Sensor",
+  },
+  bme: {
+    name: "BME Sensor",
+    image: "/media/hardware/3dmodels/bme.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/umweltsensor",
+    sensor: "Sensor",
+  },
+  "led-matrix": {
+    name: "LED Matrix",
+    image: "/media/hardware/3dmodels/led_matrix.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/led-matrix/",
+    sensor: "Zubehör",
+  },
+  sps30: {
+    name: "SPS30",
+    image: "/media/hardware/3dmodels/sps30.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/feinstaub-sps30",
+    sensor: "Sensor",
+  },
+  bmp280: {
+    name: "BMP280",
+    image: "/media/hardware/3dmodels/bmp280.png",
+    docUrl: "#",
+    sensor: "Sensor",
+  },
+  "lora-bee": {
+    name: "LoRa Bee",
+    image: "/media/hardware/3dmodels/lora_bee.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/bee/lora-bee",
+    sensor: "Bee",
+  },
+  tofsensor: {
+    name: "TOF Sensor",
+    image: "/media/hardware/3dmodels/tofsensor.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/tof",
+    sensor: "Sensor",
+  },
+  oled: {
+    name: "Display",
+    image: "/media/hardware/3dmodels/display.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/display",
+    sensor: "Zubehör",
+  },
+  mic: {
+    name: "Microphone",
+    image: "/media/hardware/3dmodels/mic.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/mikro",
+    sensor: "Sensor",
+  },
+  uvlux: {
+    name: "UV/Light Sensor",
+    image: "/media/hardware/3dmodels/uvlux.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/helligkeit-uv",
+    sensor: "Sensor",
+  },
+  expander: {
+    name: "Expander",
+    image: "/media/hardware/3dmodels/expander.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/expander",
+    sensor: "Zubehör",
+  },
+  scd30: {
+    name: "SCD30",
+    image: "/media/hardware/3dmodels/scd30.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/co2",
+    sensor: "Sensor",
+  },
+  wassertemperatur: {
+    name: "Wassertemperatur",
+    image: "/media/hardware/3dmodels/wassertemperatur.JPG",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/wassertemperatur",
+    sensor: "Sensor",
+  },
+  gps: {
+    name: "GPS",
+    image: "/media/hardware/3dmodels/gps.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/gps",
+    sensor: "Zubehör",
+  },
+  "sd-bee": {
+    name: "SD Bee",
+    image: "/media/hardware/3dmodels/sd_bee.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sd",
+    sensor: "Bee",
+  },
+  "wifi-bee": {
+    name: "WiFi Bee",
+    image: "/media/hardware/3dmodels/wifi_bee.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/bee/wifi-bee",
+    sensor: "Bee",
+  },
+  hcsr04: {
+    name: "HC-SR04",
+    image: "/media/hardware/3dmodels/hcsr04.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/distanz",
+    sensor: "Sensor",
+  },
+  sds011: {
+    name: "SDS011",
+    image: "/media/hardware/3dmodels/sds011.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/feinstaub-sds011",
+    sensor: "Sensor",
+  },
+  hdc1080: {
+    name: "HDC1080",
+    image: "/media/hardware/3dmodels/hdc1080.png",
+    docUrl:
+      "https://docs.sensebox.de/docs/hardware/sensors/temperatur-luftfeuchte",
+    sensor: "Sensor",
+  },
+  smt50: {
+    name: "SMT50",
+    image: "/media/hardware/3dmodels/smt50.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/sensors/truebner",
+    sensor: "Sensor",
+  },
+  senseboxmcu: {
+    name: "senseBox MCU",
+    image: "/media/hardware/3dmodels/mcu.png",
+    docUrl: "https://docs.sensebox.de/docs/boards/mcu/mcu-overview?board=edu",
+    sensor: "Board",
+  },
+  "jst-jst": {
+    name: "JST-Kabel",
+    image: "/media/hardware/3dmodels/jstjst.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/cable_overview",
+    sensor: "Kabel",
+  },
+  jumpertmt: {
+    name: "Jumper Male-To-Male",
+    image: "/media/hardware/3dmodels/jumpermtm.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/cable_overview",
+    sensor: "Kabel",
+  },
+  jstjumperfem: {
+    name: "JST-Jumper(Female)",
+    image: "/media/hardware/3dmodels/jstjumperfem.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/cable_overview",
+    sensor: "Kabel",
+  },
+  jstjumper: {
+    name: "JST-Jumper(Male)",
+    image: "media/hardware/3dmodels/jstjumper.png",
+    docUrl: "https://docs.sensebox.de/docs/hardware/accessoires/cable_overview",
+    sensor: "Kabel",
+  },
+};
+
+export default COMPONENT_MAP;
diff --git a/src/components/User/Login.jsx b/src/components/User/Login.jsx
index 75d02d6c..99aada4b 100644
--- a/src/components/User/Login.jsx
+++ b/src/components/User/Login.jsx
@@ -1,7 +1,7 @@
 import React, { useState, useEffect } from "react";
 import { useDispatch, useSelector } from "react-redux";
 import { useHistory, useLocation } from "react-router-dom";
-import { login } from "../../actions/authActions";
+import { login, loginOpenSenseMap } from "../../actions/authActions"; // ✅ beide Actions
 
 import Snackbar from "../Snackbar";
 import Alert from "../ui/Alert";
@@ -15,8 +15,16 @@ import TextField from "@mui/material/TextField";
 import Divider from "@mui/material/Divider";
 import InputAdornment from "@mui/material/InputAdornment";
 import CircularProgress from "@mui/material/CircularProgress";
-import Link from "@mui/material/Link";
+import FormControlLabel from "@mui/material/FormControlLabel";
+import Radio from "@mui/material/Radio";
+import RadioGroup from "@mui/material/RadioGroup";
+import FormControl from "@mui/material/FormControl";
+import FormLabel from "@mui/material/FormLabel";
+
 import * as Blockly from "blockly";
+import { Link } from "react-router-dom/cjs/react-router-dom.min";
+// 🔥 Importiere die neue Komponente
+import PasswordResetRequest from "./PasswordResetRequest";
 
 export default function Login() {
   const dispatch = useDispatch();
@@ -30,6 +38,7 @@ export default function Login() {
 
   const [email, setEmail] = useState("");
   const [password, setPassword] = useState("");
+  const [authProvider, setAuthProvider] = useState("native"); // ✅ Standard: native
   const [snackbar, setSnackbar] = useState(false);
   const [snackInfo, setSnackInfo] = useState({
     type: "",
@@ -38,7 +47,10 @@ export default function Login() {
   });
   const [showPassword, setShowPassword] = useState(false);
 
-  // on mount, if previous login failed, show error
+  // 🔥 Zustand für Passwort-Vergessen-View
+  const [showPasswordReset, setShowPasswordReset] = useState(false);
+
+  // Fehler bei Mount anzeigen
   useEffect(() => {
     if (message.id === "LOGIN_FAIL") {
       setEmail("");
@@ -50,9 +62,9 @@ export default function Login() {
       });
       setSnackbar(true);
     }
-  }, []); // run once on mount
+  }, []);
 
-  // on message change, handle success or failure
+  // Erfolg/Fehler behandeln
   useEffect(() => {
     if (message.id === "LOGIN_SUCCESS") {
       if (redirectPath) {
@@ -70,27 +82,56 @@ export default function Login() {
       });
       setSnackbar(true);
     }
-  }, [message]); // re-run when message changes
+  }, [message, history, redirectPath]);
 
   const handleChange = (setter) => (e) => setter(e.target.value);
 
   const handleSubmit = (e) => {
     e.preventDefault();
-    if (email && password) {
-      dispatch(login({ email, password }));
-    } else {
+    if (!email || !password) {
       setSnackInfo({
         type: "error",
         key: Date.now(),
         message: Blockly.Msg.messages_login_error,
       });
       setSnackbar(true);
+      return;
+    }
+
+    if (authProvider === "native") {
+      dispatch(login({ email, password })); // ✅ native
+    } else {
+      dispatch(loginOpenSenseMap({ email, password })); // ✅ openSenseMap
     }
   };
 
   const handleClickShowPassword = () => setShowPassword((v) => !v);
   const handleMouseDownPassword = (e) => e.preventDefault();
 
+  // 🔥 Funktion, um zur Login-Ansicht zurückzukehren
+  const handleBackToLogin = () => {
+    setShowPasswordReset(false);
+  };
+
+  // 🔥 Zeige entweder Login- oder Passwort-Reset-Formular
+  if (showPasswordReset) {
+    return (
+      <div>
+        <Breadcrumbs
+          content={[{ link: "/user/login", title: Blockly.Msg.button_login }]}
+        />
+
+        <div
+          style={{ maxWidth: "500px", marginLeft: "auto", marginRight: "auto" }}
+        >
+          <h1>Passwort vergessen?</h1>
+          <PasswordResetRequest onBackToLogin={handleBackToLogin} />
+        </div>
+      </div>
+    );
+  }
+
+  // 🔥 Ursprüngliche Login-Ansicht
   return (
     <div>
       <Breadcrumbs
@@ -101,25 +142,58 @@ export default function Login() {
         style={{ maxWidth: "500px", marginLeft: "auto", marginRight: "auto" }}
       >
         <h1>{Blockly.Msg.login_head}</h1>
-        <Alert>
-          {Blockly.Msg.login_osem_account_01}{" "}
-          <Link
-            color="primary"
-            rel="noreferrer"
-            target="_blank"
-            href="https://opensensemap.org/"
-            underline="hover"
+
+        {/* 🔘 Auth Provider Auswahl */}
+        <FormControl component="fieldset" sx={{ mb: 2 }}>
+          <FormLabel component="legend">Login mit</FormLabel>
+          <RadioGroup
+            row
+            value={authProvider}
+            onChange={(e) => setAuthProvider(e.target.value)}
           >
-            openSenseMap
-          </Link>{" "}
-          {Blockly.Msg.login_osem_account_02}.
-        </Alert>
+            <FormControlLabel
+              value="native"
+              control={<Radio />}
+              label="Eigenes Konto"
+            />
+            <FormControlLabel
+              value="opensensemap"
+              control={<Radio />}
+              label="openSenseMap"
+            />
+          </RadioGroup>
+        </FormControl>
+        {authProvider === "native" && (
+          <div style={{ textAlign: "center" }}>
+            {Blockly.Msg.no_account || "No account yet?"}{" "}
+            <Link to="/user/register">
+              {Blockly.Msg.button_register || "Register now"}
+            </Link>
+          </div>
+        )}
+
+        {authProvider === "opensensemap" && (
+          <Alert>
+            {Blockly.Msg.login_osem_account_01}{" "}
+            <Link
+              color="primary"
+              rel="noreferrer"
+              target="_blank"
+              href="https://opensensemap.org/  "
+              underline="hover"
+            >
+              openSenseMap
+            </Link>{" "}
+            {Blockly.Msg.login_osem_account_02}.
+          </Alert>
+        )}
 
         <Snackbar
           open={snackbar}
           message={snackInfo.message}
           type={snackInfo.type}
           key={snackInfo.key}
+          onClose={() => setSnackbar(false)}
         />
 
         <form onSubmit={handleSubmit}>
@@ -178,30 +252,48 @@ export default function Login() {
           </p>
         </form>
 
-        <p style={{ textAlign: "center", fontSize: "0.8rem" }}>
-          <Link
-            rel="noreferrer"
-            target="_blank"
-            href="https://opensensemap.org/"
-            color="primary"
-            underline="hover"
-          >
-            {Blockly.Msg.login_lostpassword}
-          </Link>
-        </p>
-        <Divider variant="fullWidth" />
-        <p style={{ textAlign: "center", padding: "0 34px" }}>
-          {Blockly.Msg.login_createaccount}{" "}
-          <Link
-            rel="noreferrer"
-            target="_blank"
-            href="https://opensensemap.org/"
-            underline="hover"
-          >
-            openSenseMap
-          </Link>
-          .
-        </p>
+        {/* 🔥 Neuer Link/Button für "Passwort vergessen" */}
+        {authProvider === "native" && (
+          <p style={{ textAlign: "center", fontSize: "0.8rem" }}>
+            <Button
+              variant="text"
+              color="primary"
+              size="small"
+              onClick={() => setShowPasswordReset(true)}
+            >
+              Passwort vergessen?
+            </Button>
+          </p>
+        )}
+
+        {authProvider === "opensensemap" && (
+          <>
+            <p style={{ textAlign: "center", fontSize: "0.8rem" }}>
+              <Link
+                rel="noreferrer"
+                target="_blank"
+                href="https://opensensemap.org/  "
+                color="primary"
+                underline="hover"
+              >
+                {Blockly.Msg.login_lostpassword}
+              </Link>
+            </p>
+            <Divider variant="fullWidth" />
+            <p style={{ textAlign: "center", padding: "0 34px" }}>
+              {Blockly.Msg.login_createaccount}{" "}
+              <Link
+                rel="noreferrer"
+                target="_blank"
+                href="https://opensensemap.org/  "
+                underline="hover"
+              >
+                openSenseMap
+              </Link>
+              .
+            </p>
+          </>
+        )}
       </div>
     </div>
   );
diff --git a/src/components/User/PasswordReset.jsx b/src/components/User/PasswordReset.jsx
new file mode 100644
index 00000000..6b61c478
--- /dev/null
+++ b/src/components/User/PasswordReset.jsx
@@ -0,0 +1,196 @@
+// In deiner PasswordReset.jsx
+import React, { useState } from "react";
+import { useLocation, useHistory } from "react-router-dom"; // ✅ useLocation statt useSearchParams
+import { useDispatch } from "react-redux";
+import { resetPassword } from "../../actions/authActions";
+import {
+  Box,
+  TextField,
+  Button,
+  Typography,
+  CircularProgress,
+  Alert, // 🔥 NEU: Für direkte Erfolgs-/Fehlermeldung
+} from "@mui/material";
+import Snackbar from "../Snackbar";
+
+const PasswordReset = () => {
+  const location = useLocation(); // ✅ useLocation holen
+  const history = useHistory();
+  const dispatch = useDispatch();
+
+  // 🔥 Token aus der URL parsen (ohne useSearchParams)
+  const queryParams = new URLSearchParams(location.search);
+  const token = queryParams.get("token");
+
+  const [newPassword, setNewPassword] = useState("");
+  const [confirmNewPassword, setConfirmNewPassword] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  // 🔥 NEU: Zustand für direkte Server-Meldung
+  const [serverMessage, setServerMessage] = useState({ type: "", message: "" });
+
+  const [snackbar, setSnackbar] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    type: "success",
+    key: 0,
+    message: "",
+  });
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+
+    // 🔥 Reset der vorherigen Servermeldung
+    setServerMessage({ type: "", message: "" });
+
+    if (newPassword !== confirmNewPassword) {
+      setSnackInfo({
+        type: "error",
+        key: Date.now(),
+        message: "Die Passwörter stimmen nicht überein.",
+      });
+      setSnackbar(true);
+      return;
+    }
+
+    if (newPassword.length < 6) {
+      setSnackInfo({
+        type: "error",
+        key: Date.now(),
+        message: "Das Passwort muss mindestens 6 Zeichen lang sein.",
+      });
+      setSnackbar(true);
+      return;
+    }
+
+    setLoading(true);
+
+    dispatch(resetPassword({ token, newPassword }))
+      .then((response) => {
+        console.log("Reset Password Response:", response); // 🔍 Debugging
+
+        // ✅ Prüfe explizit auf SUCCESS-Status (z. B. 200)
+        if (response?.status === 200 || response?.includes("SUCCESS")) {
+          setSnackInfo({
+            type: "success",
+            key: Date.now(),
+            message:
+              "Passwort erfolgreich zurückgesetzt. Du kannst dich jetzt anmelden.",
+          });
+          setSnackbar(true);
+
+          // 🔥 Setze Erfolgsmeldung
+          setServerMessage({
+            type: "success",
+            message: "Passwort erfolgreich zurückgesetzt!",
+          });
+
+          setTimeout(() => {
+            history.push("/user/login");
+          }, 3000);
+        } else {
+          // 🔥 Fehlermeldung vom Server anzeigen
+          const errorMsg =
+            response?.payload?.message ||
+            "Fehler beim Zurücksetzen des Passworts.";
+          setServerMessage({
+            type: "error",
+            message: errorMsg,
+          });
+        }
+      })
+      .catch((error) => {
+        console.error("Reset Password Error:", error); // 🔍 Debugging
+        // 🔥 Fehlermeldung anzeigen
+        const errorMsg =
+          error.response?.data?.message ||
+          "Ein unbekannter Fehler ist aufgetreten.";
+        setServerMessage({
+          type: "error",
+          message: errorMsg,
+        });
+      })
+      .finally(() => {
+        setLoading(false);
+      });
+  };
+
+  if (!token) {
+    return (
+      <Box sx={{ maxWidth: "500px", margin: "auto", mt: 4 }}>
+        <Typography color="error">
+          Kein gültiger Reset-Link. Bitte fordere einen neuen Link an.
+        </Typography>
+      </Box>
+    );
+  }
+
+  return (
+    <Box sx={{ maxWidth: "500px", margin: "auto", mt: 4 }}>
+      <Typography variant="h5" gutterBottom>
+        Neues Passwort setzen
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        Gib dein neues Passwort ein.
+      </Typography>
+
+      {/* 🔥 Direkte Servermeldung anzeigen */}
+      {serverMessage.message && (
+        <Alert
+          severity={serverMessage.type === "success" ? "success" : "error"}
+          sx={{ mb: 2 }}
+        >
+          {serverMessage.message}
+        </Alert>
+      )}
+
+      <form onSubmit={handleSubmit}>
+        <TextField
+          variant="standard"
+          fullWidth
+          label="Neues Passwort"
+          type="password"
+          value={newPassword}
+          onChange={(e) => setNewPassword(e.target.value)}
+          margin="normal"
+          required
+        />
+        <TextField
+          variant="standard"
+          fullWidth
+          label="Neues Passwort bestätigen"
+          type="password"
+          value={confirmNewPassword}
+          onChange={(e) => setConfirmNewPassword(e.target.value)}
+          margin="normal"
+          required
+        />
+        <Box sx={{ mt: 2, display: "flex", justifyContent: "space-between" }}>
+          <Button
+            variant="outlined"
+            onClick={() => history.push("/user/login")}
+          >
+            Abbrechen
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={loading}
+          >
+            {loading ? <CircularProgress size={20} /> : "Passwort setzen"}
+          </Button>
+        </Box>
+      </form>
+
+      <Snackbar
+        open={snackbar}
+        message={snackInfo.message}
+        type={snackInfo.type}
+        key={snackInfo.key}
+        onClose={() => setSnackbar(false)}
+      />
+    </Box>
+  );
+};
+
+export default PasswordReset;
diff --git a/src/components/User/PasswordResetRequest.jsx b/src/components/User/PasswordResetRequest.jsx
new file mode 100644
index 00000000..7281c363
--- /dev/null
+++ b/src/components/User/PasswordResetRequest.jsx
@@ -0,0 +1,120 @@
+// src/components/User/PasswordResetRequest.jsx
+import React, { useState } from "react";
+import { useDispatch, useSelector } from "react-redux";
+import { requestPasswordReset } from "../../actions/authActions"; // Stelle sicher, dass du diese Action erstellst
+import Snackbar from "../Snackbar";
+import Button from "@mui/material/Button";
+import TextField from "@mui/material/TextField";
+import Box from "@mui/material/Box";
+import Typography from "@mui/material/Typography";
+import CircularProgress from "@mui/material/CircularProgress";
+import { useTheme } from "@mui/material/styles";
+
+const PasswordResetRequest = ({ onBackToLogin }) => {
+  const dispatch = useDispatch();
+  const theme = useTheme();
+
+  const [email, setEmail] = useState("");
+  const [loading, setLoading] = useState(false);
+
+  const message = useSelector((s) => s.message);
+
+  const [snackbar, setSnackbar] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    type: "success",
+    key: 0,
+    message: "",
+  });
+
+  // Optional: Zeige Erfolgsmeldung nach erfolgreicher Anfrage
+  React.useEffect(() => {
+    if (message.id === "REQUEST_PASSWORD_RESET_SUCCESS") {
+      setSnackInfo({
+        type: "success",
+        key: Date.now(),
+        message: "Wenn die E-Mail existiert, wurde ein Link gesendet.",
+      });
+      setSnackbar(true);
+    } else if (message.id === "REQUEST_PASSWORD_RESET_FAIL") {
+      setSnackInfo({
+        type: "error",
+        key: Date.now(),
+        message: message.msg || "Fehler beim Senden der E-Mail.",
+      });
+      setSnackbar(true);
+    }
+  }, [message]);
+
+  const handleSubmit = (e) => {
+    e.preventDefault();
+    if (!email) {
+      setSnackInfo({
+        type: "error",
+        key: Date.now(),
+        message: "Bitte gib deine E-Mail-Adresse ein.",
+      });
+      setSnackbar(true);
+      return;
+    }
+
+    setLoading(true);
+    // 🔥 Dispatche die neue Action
+    dispatch(requestPasswordReset({ email }))
+      .then(() => {
+        setLoading(false);
+      })
+      .catch(() => {
+        setLoading(false);
+      });
+  };
+
+  return (
+    <Box>
+      <Typography variant="h6" gutterBottom>
+        Passwort zurücksetzen
+      </Typography>
+      <Typography variant="body2" color="text.secondary" sx={{ mb: 2 }}>
+        Gib deine E-Mail-Adresse ein, um einen Link zum Zurücksetzen deines
+        Passworts zu erhalten.
+      </Typography>
+
+      <form onSubmit={handleSubmit}>
+        <TextField
+          variant="standard"
+          style={{ marginBottom: "10px" }}
+          type="email"
+          label="E-Mail-Adresse"
+          name="email"
+          value={email}
+          onChange={(e) => setEmail(e.target.value)}
+          fullWidth
+          required
+        />
+        <Box sx={{ display: "flex", gap: 1, mt: 2 }}>
+          <Button variant="outlined" onClick={onBackToLogin} disabled={loading}>
+            Zurück
+          </Button>
+          <Button
+            variant="contained"
+            color="primary"
+            type="submit"
+            disabled={loading}
+            sx={{ flex: 1 }}
+          >
+            {loading ? <CircularProgress size={20} /> : "Link senden"}
+          </Button>
+        </Box>
+      </form>
+
+      <Snackbar
+        open={snackbar}
+        message={snackInfo.message}
+        type={snackInfo.type}
+        key={snackInfo.key}
+        onClose={() => setSnackbar(false)}
+      />
+    </Box>
+  );
+};
+
+export default PasswordResetRequest;
diff --git a/src/components/User/Register.jsx b/src/components/User/Register.jsx
new file mode 100644
index 00000000..bbf01c74
--- /dev/null
+++ b/src/components/User/Register.jsx
@@ -0,0 +1,181 @@
+// src/components/Auth/Register.jsx
+import React, { useState } from "react";
+import { useHistory } from "react-router-dom";
+import Snackbar from "../Snackbar";
+import Breadcrumbs from "../ui/Breadcrumbs";
+import Button from "@mui/material/Button";
+import IconButton from "@mui/material/IconButton";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faEye, faEyeSlash } from "@fortawesome/free-solid-svg-icons";
+import TextField from "@mui/material/TextField";
+import InputAdornment from "@mui/material/InputAdornment";
+import CircularProgress from "@mui/material/CircularProgress";
+import * as Blockly from "blockly";
+import { Link } from "react-router-dom/cjs/react-router-dom.min";
+
+export default function Register() {
+  const history = useHistory();
+
+  const [email, setEmail] = useState("");
+  const [password, setPassword] = useState("");
+  const [confirmPassword, setConfirmPassword] = useState("");
+  const [snackbar, setSnackbar] = useState(false);
+  const [snackInfo, setSnackInfo] = useState({
+    type: "",
+    key: "",
+    message: "",
+  });
+  const [showPassword, setShowPassword] = useState(false);
+  const [showConfirmPassword, setShowConfirmPassword] = useState(false);
+  const [loading, setLoading] = useState(false);
+
+  const handleSubmit = async (e) => {
+    e.preventDefault();
+
+    if (!email || !password) {
+      showError("Bitte E-Mail und Passwort eingeben.");
+      return;
+    }
+
+    if (password !== confirmPassword) {
+      showError("Passwörter stimmen nicht überein.");
+      return;
+    }
+
+    if (password.length < 6) {
+      showError("Das Passwort muss mindestens 6 Zeichen lang sein.");
+      return;
+    }
+
+    try {
+      setLoading(true);
+
+      const res = await fetch(
+        `${import.meta.env.VITE_BLOCKLY_API}/user/register`,
+        {
+          method: "POST",
+          headers: { "Content-Type": "application/json" },
+          body: JSON.stringify({ email, password }),
+        },
+      );
+
+      const data = await res.json();
+
+      if (res.ok) {
+        // ✅ Weiterleiten zum Success Screen
+        history.push("/user/register/success");
+      } else {
+        showError(data.message || "Registrierung fehlgeschlagen.");
+      }
+    } catch (err) {
+      console.error(err);
+      showError("Serverfehler bei der Registrierung.");
+    } finally {
+      setLoading(false);
+    }
+  };
+
+  const showError = (msg) => {
+    setSnackInfo({
+      type: "error",
+      key: Date.now(),
+      message: msg,
+    });
+    setSnackbar(true);
+  };
+
+  return (
+    <div>
+      <Breadcrumbs
+        content={[{ link: "/user/register", title: "Registrieren" }]}
+      />
+
+      <div style={{ maxWidth: "500px", margin: "0 auto" }}>
+        <h1>Konto erstellen</h1>
+
+        <Snackbar
+          open={snackbar}
+          message={snackInfo.message}
+          type={snackInfo.type}
+          key={snackInfo.key}
+          onClose={() => setSnackbar(false)}
+        />
+
+        <form onSubmit={handleSubmit}>
+          <TextField
+            variant="standard"
+            label="E-Mail"
+            name="email"
+            type="email"
+            value={email}
+            onChange={(e) => setEmail(e.target.value)}
+            fullWidth
+            sx={{ mb: 2 }}
+          />
+          <TextField
+            variant="standard"
+            label="Passwort"
+            name="password"
+            type={showPassword ? "text" : "password"}
+            value={password}
+            onChange={(e) => setPassword(e.target.value)}
+            fullWidth
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={() => setShowPassword(!showPassword)}
+                    edge="end"
+                  >
+                    <FontAwesomeIcon
+                      icon={showPassword ? faEyeSlash : faEye}
+                      size="xs"
+                    />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            sx={{ mb: 2 }}
+          />
+          <TextField
+            variant="standard"
+            label="Passwort bestätigen"
+            name="confirmPassword"
+            type={showConfirmPassword ? "text" : "password"}
+            value={confirmPassword}
+            onChange={(e) => setConfirmPassword(e.target.value)}
+            fullWidth
+            InputProps={{
+              endAdornment: (
+                <InputAdornment position="end">
+                  <IconButton
+                    onClick={() => setShowConfirmPassword(!showConfirmPassword)}
+                    edge="end"
+                  >
+                    <FontAwesomeIcon
+                      icon={showConfirmPassword ? faEyeSlash : faEye}
+                      size="xs"
+                    />
+                  </IconButton>
+                </InputAdornment>
+              ),
+            }}
+            sx={{ mb: 3 }}
+          />
+
+          <Button variant="contained" color="primary" type="submit" fullWidth>
+            {loading ? (
+              <CircularProgress color="inherit" size={20} />
+            ) : (
+              "Registrieren"
+            )}
+          </Button>
+        </form>
+
+        <p style={{ textAlign: "center", marginTop: "1rem" }}>
+          Bereits ein Konto? <Link to="/user/login">Anmelden</Link>
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/User/RegisterSuccess.jsx b/src/components/User/RegisterSuccess.jsx
new file mode 100644
index 00000000..39867e2f
--- /dev/null
+++ b/src/components/User/RegisterSuccess.jsx
@@ -0,0 +1,30 @@
+import React from "react";
+import { useHistory } from "react-router-dom";
+import { Button, Typography, Box } from "@mui/material";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faCheckCircle } from "@fortawesome/free-solid-svg-icons";
+
+export default function RegisterSuccess() {
+  const history = useHistory();
+
+  return (
+    <Box sx={{ textAlign: "center", mt: 8 }}>
+      <FontAwesomeIcon icon={faCheckCircle} color="#4CAF50" size="4x" />
+      <Typography variant="h4" sx={{ mt: 2 }}>
+        Konto erfolgreich erstellt!
+      </Typography>
+      <Typography variant="body1" sx={{ mt: 1, color: "text.secondary" }}>
+        Du kannst dich jetzt mit deinen Zugangsdaten anmelden.
+      </Typography>
+
+      <Button
+        variant="contained"
+        color="primary"
+        sx={{ mt: 3 }}
+        onClick={() => history.push("/user/login")}
+      >
+        Zum Login
+      </Button>
+    </Box>
+  );
+}
diff --git a/src/components/Workspace/ToolbarItems/CompilationDialog/CompilationDialog.jsx b/src/components/Workspace/ToolbarItems/CompilationDialog/CompilationDialog.jsx
index 5a214eaa..c8012c21 100644
--- a/src/components/Workspace/ToolbarItems/CompilationDialog/CompilationDialog.jsx
+++ b/src/components/Workspace/ToolbarItems/CompilationDialog/CompilationDialog.jsx
@@ -39,7 +39,7 @@ function CompilationDialog({ open, code, selectedBoard, onClose, platform }) {
   const [counter, setCounter] = useState(0);
   const filename = useSelector((state) => state.workspace.name) || "sketch";
   const compilerUrl = useSelector((state) => state.general.compiler);
-
+  const sessionId = useSelector((state) => state.general.sessionId);
   useEffect(() => {
     if (open) {
       handleCompile();
@@ -77,6 +77,7 @@ function CompilationDialog({ open, code, selectedBoard, onClose, platform }) {
         body: JSON.stringify({
           sketch: code,
           board,
+          projectId: sessionId,
         }),
       });
       const data = await response.json();
@@ -107,9 +108,8 @@ function CompilationDialog({ open, code, selectedBoard, onClose, platform }) {
     const shouldClose =
       error ||
       activeStep === 2 ||
-      (platform && activeStep === 1)(
-        reason !== "backdropClick" && reason !== "escapeKeyDown",
-      );
+      (activeStep === 1 && platform && !error) ||
+      (reason !== "backdropClick" && reason !== "escapeKeyDown");
 
     if (!shouldClose) return;
 
diff --git a/src/components/Workspace/ToolbarItems/CompilationDialog/TransferStep.jsx b/src/components/Workspace/ToolbarItems/CompilationDialog/TransferStep.jsx
index 280397c5..3f47bb75 100644
--- a/src/components/Workspace/ToolbarItems/CompilationDialog/TransferStep.jsx
+++ b/src/components/Workspace/ToolbarItems/CompilationDialog/TransferStep.jsx
@@ -28,7 +28,6 @@ export default function TransferStep() {
   const theme = useTheme();
   const filename = useSelector((state) => state.workspace.name);
   const selectedBoard = useSelector((state) => state.board.board);
-  console.log("Selected Board in TransferStep:", selectedBoard);
   return (
     <Box
       sx={{
diff --git a/src/components/Workspace/TooltipViewer.jsx b/src/components/Workspace/TooltipViewer.jsx
index 70deee0a..70b5a8c3 100644
--- a/src/components/Workspace/TooltipViewer.jsx
+++ b/src/components/Workspace/TooltipViewer.jsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect } from "react";
 import { useSelector } from "react-redux";
 import {
   Card,
@@ -16,6 +16,9 @@ const TooltipViewer = () => {
   const tooltip = useSelector((s) => s.workspace.code.tooltip);
   const helpurl = useSelector((s) => s.workspace.code.helpurl);
 
+  useEffect(() => {
+    console.log("tooltip changed", tooltip);
+  }, [tooltip]);
   return (
     <Card
       className="helpSection"
@@ -57,7 +60,11 @@ const TooltipViewer = () => {
           ></span>
         </Typography>
 
-        <ReactMarkdown linkTarget="_blank">{tooltip}</ReactMarkdown>
+        {tooltip ? (
+          <ReactMarkdown linkTarget="_blank">{tooltip}</ReactMarkdown>
+        ) : (
+          <Typography>{Blockly.Msg.tooltip_hint}</Typography>
+        )}
 
         {helpurl && (
           <Button
diff --git a/src/components/Workspace/WorkspaceToolbar.jsx b/src/components/Workspace/WorkspaceToolbar.jsx
index 75f66ade..5792c231 100644
--- a/src/components/Workspace/WorkspaceToolbar.jsx
+++ b/src/components/Workspace/WorkspaceToolbar.jsx
@@ -13,7 +13,7 @@ import ResetWorkspace from "./ToolbarItems/ResetWorkspace";
 import DeleteProject from "./ToolbarItems/DeleteProject";
 import CopyCode from "./ToolbarItems/CopyCode";
 import AutoSave from "./ToolbarItems/AutoSave";
-import SolutionCheck from "../Tutorial/SolutionCheck";
+import SolutionCheck from "../Tutorial/TutorialItem/SolutionCheck";
 
 const containerStyle = {
   width: "max-content",
diff --git a/src/helpers/compareXml.js b/src/helpers/compareXml.js
index 6453bc2a..bb5bb243 100644
--- a/src/helpers/compareXml.js
+++ b/src/helpers/compareXml.js
@@ -1,7 +1,68 @@
-export const checkXml = (originalXmlString, userXmlString) => {
-  var originalXml = parseXml(originalXmlString);
-  var userXml = parseXml(userXmlString);
-  return compareXml(originalXml, userXml);
+export const checkXml = (solutionXmlString, userXmlString) => {
+  const parser = new DOMParser();
+  const solutionXml = parser.parseFromString(solutionXmlString, "text/xml");
+  const userXml = parser.parseFromString(userXmlString, "text/xml");
+
+  const solutionBlocks = Array.from(solutionXml.getElementsByTagName("block"));
+  const userBlocks = Array.from(userXml.getElementsByTagName("block"));
+
+  const solutionTypes = solutionBlocks.map((b) => b.getAttribute("type"));
+  const userTypes = userBlocks.map((b) => b.getAttribute("type"));
+
+  // --- Analyse ---
+  const missingBlocks = solutionTypes.filter((t) => !userTypes.includes(t));
+  const extraBlocks = userTypes.filter((t) => !solutionTypes.includes(t));
+
+  const details = [];
+
+  if (missingBlocks.length === 0 && extraBlocks.length === 0) {
+    return {
+      type: "success",
+      text: "Super! Dein Blockly-Programm enthält alle wichtigen Blöcke der Musterlösung.",
+      details: [
+        {
+          type: "success",
+          text: "Alle benötigten Blocktypen wurden gefunden.",
+        },
+      ],
+    };
+  }
+
+  if (missingBlocks.length === 0 && extraBlocks.length > 0) {
+    details.push({
+      type: "info",
+      text: `Du hast zusätzliche Blöcke verwendet (${extraBlocks.join(", ")}).`,
+    });
+    return {
+      type: "success",
+      text: "Sehr gut! Du hast alle notwendigen Blöcke verwendet. Es sind nur einige zusätzliche Blöcke enthalten, das ist aber kein Problem.",
+      details,
+    };
+  }
+
+  if (missingBlocks.length > 0) {
+    details.push({
+      type: "error",
+      text: `Dir fehlen folgende Blocktypen: ${missingBlocks.join(", ")}.`,
+    });
+    if (extraBlocks.length > 0) {
+      details.push({
+        type: "info",
+        text: `Zusätzlich hast du einige weitere Blöcke verwendet (${extraBlocks.join(", ")}).`,
+      });
+    }
+    return {
+      type: "error",
+      text: "Fast geschafft! Es fehlen noch einige wichtige Blöcke, damit dein Programm vollständig ist.",
+      details,
+    };
+  }
+
+  return {
+    type: "error",
+    text: "Das XML konnte nicht vollständig verglichen werden.",
+    details,
+  };
 };
 
 const parseXml = (xmlString) => {
diff --git a/src/index.jsx b/src/index.jsx
index 4cef2f24..3ca40e6b 100644
--- a/src/index.jsx
+++ b/src/index.jsx
@@ -5,7 +5,6 @@ import App from "./App";
 import * as serviceWorker from "./serviceWorker";
 import store from "./store";
 import { fetchSensors } from "./actions/sensorwikiActions";
-
 // store.dispatch(fetchSensors());
 
 // fetchSensors();
diff --git a/src/reducers/authReducer.js b/src/reducers/authReducer.js
index f0fdcaff..32bc2fe1 100644
--- a/src/reducers/authReducer.js
+++ b/src/reducers/authReducer.js
@@ -7,14 +7,17 @@ import {
   LOGOUT_SUCCESS,
   LOGOUT_FAIL,
   REFRESH_TOKEN_SUCCESS,
+  REGISTER_SUCCESS,
 } from "../actions/types";
 
+// authReducer.js
 const initialState = {
-  token: localStorage.getItem("token"),
-  refreshToken: localStorage.getItem("refreshToken"),
-  isAuthenticated: null,
-  progress: true,
+  token: localStorage.getItem("token") || null,
+  refreshToken: localStorage.getItem("refreshToken") || null,
   user: null,
+  isAuthenticated: !!localStorage.getItem("token"),
+  isLoading: false,
+  error: null,
 };
 
 export default function foo(state = initialState, action) {
@@ -57,6 +60,13 @@ export default function foo(state = initialState, action) {
         isAuthenticated: false,
         progress: false,
       };
+    case REGISTER_SUCCESS:
+      return {
+        ...state,
+        ...action.payload,
+        isAuthenticated: true,
+        isLoading: false,
+      };
     default:
       return state;
   }
diff --git a/src/reducers/boardReducer.js b/src/reducers/boardReducer.js
index 218d0226..e13a6187 100644
--- a/src/reducers/boardReducer.js
+++ b/src/reducers/boardReducer.js
@@ -13,6 +13,9 @@ const initialValue = () => {
 
 const setBackgroundImage = (board) => {
   const root = document.querySelector(":root");
+  if (window.location.pathname === "/basic") {
+    return;
+  }
   switch (board) {
     case "MCU":
       root.style.setProperty("--url", `url(${mcu_opacity})`);
diff --git a/src/reducers/generalReducer.js b/src/reducers/generalReducer.js
index 213d2565..5614164a 100644
--- a/src/reducers/generalReducer.js
+++ b/src/reducers/generalReducer.js
@@ -58,6 +58,16 @@ export const getPlatform = () => {
   return os;
 };
 
+const initialSessionId = () => {
+  const key = "sessionId";
+  const existing = window.sessionStorage.getItem(key);
+  if (existing) return existing;
+  const id =
+    Date.now().toString(36) + "-" + Math.random().toString(36).slice(2, 10);
+  window.sessionStorage.setItem(key, id);
+  return id;
+};
+
 const initialRenderer = () => {
   if (window.localStorage.getItem("renderer")) {
     return window.localStorage.getItem("renderer");
@@ -80,6 +90,7 @@ const initialState = {
   statistics: initialStatistics(),
   platform: initialPlatform(),
   compiler: initialCompiler(),
+  sessionId: initialSessionId(),
 };
 
 export default function foo(state = initialState, action) {
diff --git a/src/reducers/index.js b/src/reducers/index.js
index e5f844f2..0622d3a1 100644
--- a/src/reducers/index.js
+++ b/src/reducers/index.js
@@ -14,7 +14,7 @@ export default combineReducers({
   board: boardReducer,
   workspace: workspaceReducer,
   tutorial: tutorialReducer,
-  builder: tutorialBuilderReducer,
+  tutorialBuilder: tutorialBuilderReducer,
   project: projectReducer,
   general: generalReducer,
   message: messageReducer,
diff --git a/src/store.js b/src/store.js
index f124f980..aa0305bc 100644
--- a/src/store.js
+++ b/src/store.js
@@ -1,6 +1,7 @@
 import { createStore, applyMiddleware, compose } from "redux";
 import thunk from "redux-thunk";
 import rootReducer from "./reducers";
+import { loadUser, setupInterceptors } from "./actions/authActions";
 
 const initialState = {};
 
@@ -14,5 +15,11 @@ const store = createStore(
     // window.__REDUX_DEVTOOLS_EXTENSION__ && window.__REDUX_DEVTOOLS_EXTENSION__()
   ),
 );
+setupInterceptors(store);
+
+const token = localStorage.getItem("token");
+if (token) {
+  store.dispatch(loadUser());
+}
 
 export default store;