diff --git a/04_browser-api/uebungen/o01_navigation-mit-hamburger-icon/README.md b/04_browser-api/uebungen/o01_navigation-mit-hamburger-icon/README.md
new file mode 100644
index 0000000..aaca98c
--- /dev/null
+++ b/04_browser-api/uebungen/o01_navigation-mit-hamburger-icon/README.md
@@ -0,0 +1,41 @@
+## Optionale Übungsaufgabe 1: Responsive Navigation mit Hamburger-Menü
+
+### 1. HTML-Struktur & Icon-Vorbereitung
+
+Erweitere die bestehende Navigationsstruktur im Projet `webseite-frontend` um das notwendige Markup für einen Menü-Toggle.
+
+1.  **Hamburger-Icon-Markup einfügen:** Füge innerhalb Deines `<nav>`-Elements das HTML für den Menü-Toggle ein.
+    - Du kannst hierfür die animierten Icons von [jonsuh.com/hamburgers/](https://jonsuh.com/hamburgers/) verwenden.
+2.  **Zustandsklasse definieren:** Überlege Dir eine **Kontrollklasse** (z.B. `nav-open` oder `is-active`), die Du später per JavaScript auf das `<body>`-Tag oder das `<nav>`-Element setzt, um den **geöffneten Zustand** zu signalisieren.
+
+### 2. CSS-Styling & Media Query (Mobile First)
+
+Stelle sicher, dass die Navigation standardmäßig für die mobile Ansicht funktioniert, und passe sie dann für größere Bildschirme an.
+
+1.  **Mobile Standard (bis $575\text{px}$):**
+
+    - Die **Hauptmenüpunkte** müssen standardmäßig **versteckt** sein (`display: none;` oder per `transform` aus dem Sichtfeld geschoben).
+    - Das **Hamburger-Icon** muss in dieser Ansicht **sichtbar** sein.
+    - Definiere die **Darstellung des geöffneten Menüs** (mithilfe Deiner Zustandsklasse, z.B. `.nav-open .menu-list`). Gestalte es als nutzerfreundliches Fullscreen-Overlay oder Sidebar für mobile Geräte.
+
+2.  **Desktop-Übergang (ab $576\text{px}$):**
+
+    - Füge die notwendige **Media Query** hinzu:
+      ```css
+      @media (min-width: 576px) {
+        /* ... hier die Desktop-Regeln ... */
+      }
+      ```
+    - Innerhalb dieser Media Query:
+      - Mache die **Hauptmenüpunkte dauerhaft sichtbar** und ordne sie im Desktop-Layout an.
+      - Blende das **Hamburger-Icon aus** (`display: none;`).
+
+---
+
+### 3. JavaScript-Interaktivität (Menü-Toggle)
+
+Implementiere die Logik, die das Umschalten des Menüzustands steuert, wenn das Icon geklickt wird.
+
+1.  **Event-Listener:** Füge dem **Hamburger-Icon** einen `click`-Event-Listener hinzu.
+
+2.  **Klasse togglen:** Im Click-Handler **togglet** Du die **Zustandsklasse** (`nav-open` oder `is-active`) auf dem Element (z.B. dem `<body>` oder `<nav>`), das Du im CSS zur Steuerung verwendest. Ein Klick öffnet das Menü, der erneute Klick schließt es. Vergesse dabei nicht dem Menü Icon die passende Klasse zum hinzufügen des Effekts zu vergeben.
diff --git a/04_browser-api/uebungen/o02_website-with-plugins/README.md b/04_browser-api/uebungen/o02_website-with-plugins/README.md
new file mode 100644
index 0000000..6b78232
--- /dev/null
+++ b/04_browser-api/uebungen/o02_website-with-plugins/README.md
@@ -0,0 +1,34 @@
+# Optionale Übungen
+
+## 1. Optimierung vom ProduktManager
+
+- 1. Positionen sollen an die API gesendet werden und gespeichert werden.
+- 2. Refactoring vom Modul
+  - Optimierung der Übergabeparameter: Element oder Selector (CSS Selektion als String) kann übergeben werden. Tipp: `module instanceof HTMLElement`
+   - Die Wiederholungen der Fetch Anfragen in eine `api.request` Methode zusammenfassen 
+
+
+## 2. Integration Modul Splide in den Header
+
+- Intergriere ein weiteres Modul [`@splidejs/splide`](https://splidejs.com/guides/getting-started/) in den Webseiten Header. Nutze zum Testen Dummyimages mit verschiedenen Farben (https://dummyimage.com/1920x450/f90/fff.jpg)
+
+## 3. Tooltip als Modul verwenden
+
+Intergriere das Plugin [`floating-ui`](https://floating-ui.com/)
+in die [Webseite](../../unterricht/tag21/03_website-gulp-js/index.html) .
+
+
+
+## 4. Formularvalidierung als Modul
+
+Erstelle ein Modul für die Validierung von einem Formular (`FormValidator`) mit folgenden Feldern
+
+- Vor- und Nachname
+- E-Mail
+- Adresse bestehend aus:
+  - Strasse, Hausnummer
+  - PLZ, Ort
+  - Land
+- Nachricht
+
+Die Validierung soll direkt während (`input`) oder nach der Eingabe (`blur`) der Felder stattfinden. Die Verwendung von Validierungsmodulen wie `validator` dürfen dabei verwenden werden.
\ No newline at end of file
diff --git a/04_browser-api/uebungen/o02_website-with-plugins/README.pdf b/04_browser-api/uebungen/o02_website-with-plugins/README.pdf
new file mode 100644
index 0000000..fdc8bf8
Binary files /dev/null and b/04_browser-api/uebungen/o02_website-with-plugins/README.pdf differ