diff --git a/app.py b/app.py
new file mode 100644
index 0000000..f1545d3
--- /dev/null
+++ b/app.py
@@ -0,0 +1,234 @@
+from flask import Flask, request, jsonify, redirect, url_for, session, render_template
+from flask_sqlalchemy import SQLAlchemy
+from werkzeug.security import generate_password_hash, check_password_hash
+from flask_session import Session
+from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user
+import random
+
+
+app = Flask(__name__)
+app.config['SECRET_KEY'] = 'your_secret_key'  # Ändere dies zu einem echten geheimen Schlüssel
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///vocab.db'
+app.config['SESSION_TYPE'] = 'filesystem'
+app.config['SESSION_PERMANENT'] = False
+app.config['SESSION_USE_SIGNER'] = True
+
+db = SQLAlchemy(app)
+Session(app)
+
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'
+
+# Models
+class User(db.Model, UserMixin):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(150), unique=True, nullable=False)
+    password = db.Column(db.String(150), nullable=False)
+    vocabularies = db.relationship('Vocabulary', backref='owner', lazy=True)
+
+class Vocabulary(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    english = db.Column(db.String(100), nullable=False)
+    german = db.Column(db.String(100), nullable=False)
+    level = db.Column(db.Integer, nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+
+
+def get_random_vocab(user_id):
+    vocab_list = Vocabulary.query.filter_by(user_id=user_id).all()
+    if not vocab_list:
+        return None
+    
+    # Weight levels: Level 1 should be most common, Level 5 the least
+    weighted_vocab_list = []
+    for vocab in vocab_list:
+        weight = max(1, 6 - vocab.level)  # Weight 5 for level 1, 4 for level 2, ..., 1 for level 5
+        weighted_vocab_list.extend([vocab] * weight)
+    
+    return random.choice(weighted_vocab_list)
+
+@app.route('/get_random_vocab', methods=['GET'])
+@login_required
+def get_random_vocab_route():
+    vocab = get_random_vocab(current_user.id)
+    if vocab:
+        return jsonify({
+            'english': vocab.english,
+            'german': vocab.german,
+            'level': vocab.level,
+            'id': vocab.id,
+        }), 200
+    return jsonify({'error': 'No vocabulary found'}), 404
+
+@app.route('/update_vocab_level/<int:id>', methods=['POST'])
+@login_required
+def update_vocab_level(id):
+    vocab = Vocabulary.query.get(id)
+    if vocab and vocab.user_id == current_user.id:
+        if vocab.level < 5:
+            vocab.level += 1
+            db.session.commit()
+            return jsonify({'success': True}), 200
+        return jsonify({'message': 'Max level reached'}), 200
+    return jsonify({'error': 'Not found or unauthorized'}), 404
+
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
+@app.route('/')
+def index():
+    return render_template('start.html')
+
+@app.route('/train')
+@login_required
+def train():
+    return render_template('train.html')
+
+@app.route('/settings')
+@login_required
+def settings():
+    return render_template('settings.html')
+
+@app.route('/vocab')
+@login_required
+def vocab():
+    return render_template('vocab.html')
+
+@app.route('/register', methods=['GET', 'POST'])
+def register():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        
+        if not username or not password:
+            return render_template('register.html', error='Username and password are required'), 400
+        
+        existing_user = User.query.filter_by(username=username).first()
+        if existing_user:
+            return render_template('register.html', error='Username already taken'), 409  # 409 Conflict
+
+        hashed_password = generate_password_hash(password, method='pbkdf2:sha256')
+        new_user = User(username=username, password=hashed_password)
+        
+        db.session.add(new_user)
+        db.session.commit()
+
+        return redirect(url_for('login'))
+
+    return render_template('register.html')
+
+@app.route('/login', methods=['GET', 'POST'])
+def login():
+    if request.method == 'POST':
+        username = request.form.get('username')
+        password = request.form.get('password')
+        user = User.query.filter_by(username=username).first()
+        if user and check_password_hash(user.password, password):
+            login_user(user)
+            return jsonify({'success': True}), 200
+        else:
+            return jsonify({'error': 'Invalid credentials'}), 401
+
+    # GET request: render login page
+    return render_template('login.html')
+
+@app.route('/logout', methods=['POST'])
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('index'))
+
+@app.route('/add_vocab', methods=['POST'])
+@login_required
+def add_vocab():
+    english = request.form.get('english')
+    german = request.form.get('german')
+    level = int(request.form.get('level', 1))
+
+    if not english or not german or not level:
+        return jsonify({'error': 'All fields are required'}), 400
+
+    vocab = Vocabulary(english=english, german=german, level=level, user_id=current_user.id)
+    try:
+        db.session.add(vocab)
+        db.session.commit()
+        return jsonify({'success': True}), 201
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/update_vocab/<int:id>', methods=['PUT'])
+@login_required
+def update_vocab(id):
+    vocab = Vocabulary.query.get(id)
+    if not vocab or vocab.user_id != current_user.id:
+        return jsonify({'error': 'Not found or unauthorized'}), 404
+
+    english = request.json.get('english')
+    german = request.json.get('german')
+    level = request.json.get('level')
+
+    if english:
+        vocab.english = english
+    if german:
+        vocab.german = german
+    if level:
+        vocab.level = level
+
+    try:
+        db.session.commit()
+        return jsonify({'success': True}), 200
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/delete_vocab/<int:id>', methods=['DELETE'])
+@login_required
+def delete_vocab(id):
+    vocab = Vocabulary.query.get(id)
+    if not vocab or vocab.user_id != current_user.id:
+        return jsonify({'error': 'Not found or unauthorized'}), 404
+
+    try:
+        db.session.delete(vocab)
+        db.session.commit()
+        return jsonify({'success': True}), 200
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/get_vocab', methods=['GET'])
+@login_required
+def get_vocab():
+    vocab_list = Vocabulary.query.filter_by(user_id=current_user.id).all()
+    result = [{'id': v.id, 'english': v.english, 'german': v.german, 'level': v.level} for v in vocab_list]
+    return jsonify(result)
+
+@app.route('/change_username', methods=['POST'])
+@login_required
+def change_username():
+    new_username = request.form.get('new_username')
+    
+    if not new_username:
+        return jsonify({'error': 'Benutzername ist erforderlich'}), 400
+    
+    if User.query.filter_by(username=new_username).first():
+        return jsonify({'error': 'Benutzername bereits vergeben'}), 409
+
+    current_user.username = new_username
+    try:
+        db.session.commit()
+        return jsonify({'success': True}), 200
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+if __name__ == '__main__':
+    with app.app_context():
+        db.create_all()
+    app.run(debug=True)
+
+
+
diff --git a/defindatabank.py b/defindatabank.py
new file mode 100644
index 0000000..813c4e2
--- /dev/null
+++ b/defindatabank.py
@@ -0,0 +1,3 @@
+from app import db
+db.create_all()
+
diff --git a/forms.py b/forms.py
new file mode 100644
index 0000000..7ea561a
--- /dev/null
+++ b/forms.py
@@ -0,0 +1,13 @@
+from app import db
+from flask_login import UserMixin
+
+class User(db.Model, UserMixin):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(150), unique=True, nullable=False)
+    password = db.Column(db.String(150), nullable=False)
+    notes = db.relationship('Note', backref='author', lazy=True)
+
+class Note(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.Text, nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
diff --git a/instance/vocab.db b/instance/vocab.db
new file mode 100644
index 0000000..3cd3e0c
Binary files /dev/null and b/instance/vocab.db differ
diff --git a/models.py b/models.py
new file mode 100644
index 0000000..40c9d0e
--- /dev/null
+++ b/models.py
@@ -0,0 +1,18 @@
+from flask_sqlalchemy import SQLAlchemy
+from flask_login import UserMixin
+
+db = SQLAlchemy()
+
+class User(db.Model, UserMixin):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(150), unique=True, nullable=False)
+    password = db.Column(db.String(150), nullable=False)
+    notes = db.relationship('Note', backref='author', lazy=True)
+
+class Note(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    content = db.Column(db.Text, nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+
+
+
diff --git a/static/script.js b/static/script.js
new file mode 100644
index 0000000..3855e4b
--- /dev/null
+++ b/static/script.js
@@ -0,0 +1,151 @@
+const canvas = document.getElementById('drawingCanvas');
+const ctx = canvas.getContext('2d');
+const textElement = document.getElementById('text');
+const wordDisplay = document.getElementById('wordDisplay');
+const textInput = document.getElementById('textInput');
+const submitAnswer = document.getElementById('submitAnswer');
+const toggleInput = document.getElementById('toggleInput');
+const clearCanvas = document.getElementById('clearCanvas');
+const previewDrawing = document.getElementById('previewDrawing');
+const recognizedText = document.getElementById('recognizedText');
+
+let currentWord = null;
+let currentInputMode = 'text';  // 'text' or 'drawing'
+let isDrawing = false;
+
+// Initialize input mode
+function initializeInputMode() {
+    textInput.style.display = 'block';
+    canvas.style.display = 'none';
+    clearCanvas.style.display = 'none';
+    previewDrawing.style.display = 'none';
+    toggleInput.textContent = 'Zu Zeichnen wechseln';
+    recognizedText.textContent = '';
+}
+
+// Load a new word
+function loadWord() {
+    fetch('/get_random_vocab')
+        .then(response => response.json())
+        .then(data => {
+            if (data.error) {
+                wordDisplay.textContent = 'Keine Vokabeln gefunden.';
+            } else {
+                currentWord = data;
+                const isEnglish = Math.random() < 0.5;
+                wordDisplay.textContent = isEnglish ? `English: ${currentWord.english}` : `Deutsch: ${currentWord.german}`;
+                textElement.textContent = '';
+                textInput.value = '';
+                recognizedText.textContent = '';
+                if (currentInputMode === 'drawing') {
+                    ctx.clearRect(0, 0, canvas.width, canvas.height);
+                }
+            }
+        })
+        .catch(error => console.error('Fehler beim Laden der Vokabel:', error));
+}
+
+// Switch between input modes
+toggleInput.addEventListener('click', () => {
+    if (currentInputMode === 'text') {
+        textInput.style.display = 'none';
+        canvas.style.display = 'block';
+        clearCanvas.style.display = 'inline-block';
+        previewDrawing.style.display = 'inline-block';
+        toggleInput.textContent = 'Zu Texteingabe wechseln';
+        currentInputMode = 'drawing';
+    } else {
+        textInput.style.display = 'block';
+        canvas.style.display = 'none';
+        clearCanvas.style.display = 'none';
+        previewDrawing.style.display = 'none';
+        toggleInput.textContent = 'Zu Zeichnen wechseln';
+        currentInputMode = 'text';
+    }
+});
+
+// Clear the canvas
+clearCanvas.addEventListener('click', () => {
+    ctx.clearRect(0, 0, canvas.width, canvas.height);
+    recognizedText.textContent = '';  // Clear the recognized text as well
+});
+
+// Drawing functionality
+canvas.addEventListener('mousedown', () => {
+    isDrawing = true;
+});
+
+canvas.addEventListener('mouseup', () => {
+    isDrawing = false;
+    ctx.beginPath();
+});
+
+canvas.addEventListener('mousemove', draw);
+
+function draw(event) {
+    if (!isDrawing) return;
+    ctx.lineWidth = 5;
+    ctx.lineCap = 'round';
+    ctx.strokeStyle = 'black';
+    
+    ctx.lineTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
+    ctx.stroke();
+    ctx.beginPath();
+    ctx.moveTo(event.clientX - canvas.offsetLeft, event.clientY - canvas.offsetTop);
+}
+
+// Preview the drawing recognition
+previewDrawing.addEventListener('click', () => {
+    const dataURL = canvas.toDataURL('image/png');
+
+    fetch(dataURL)
+        .then(res => res.blob())
+        .then(blob => {
+            Tesseract.recognize(
+                blob,
+                'eng',
+                { logger: info => console.log(info) }
+            ).then(({ data: { text } }) => {
+                recognizedText.textContent = `Erkannter Text: ${text.trim()}`;
+            });
+        })
+        .catch(error => {
+            console.error('Fehler beim Erkennen des Textes:', error);
+        });
+});
+
+// Submit answer
+submitAnswer.addEventListener('click', () => {
+    let answer = '';
+
+    if (currentInputMode === 'text') {
+        answer = textInput.value.trim();
+    } else {
+        answer = recognizedText.textContent.replace('Erkannter Text:', '').trim();
+    }
+
+    checkAnswer(answer);
+});
+
+// Check if the answer is correct
+function checkAnswer(answer) {
+    const correctAnswer = (wordDisplay.textContent.startsWith('English:') ? currentWord.german : currentWord.english).trim().toLowerCase();
+    if (answer.toLowerCase() === correctAnswer) {
+        textElement.textContent = 'Richtig!';
+        textElement.style.color = 'green';
+        // Update the vocabulary level
+        fetch(`/update_vocab_level/${currentWord.id}`, { method: 'POST' })
+            .then(() => {
+                setTimeout(loadWord, 2000);  // Show the result for 2 seconds before loading the next word
+            });
+    } else {
+        textElement.textContent = `Falsch! Die richtige Antwort ist: ${correctAnswer}`;
+        textElement.style.color = 'red';
+        setTimeout(loadWord, 3000);  // Show the result for 3 seconds before loading the next word
+    }
+}
+
+// Initialize the input mode and load the first word
+initializeInputMode();
+loadWord();
+
diff --git a/static/styles.css b/static/styles.css
new file mode 100644
index 0000000..b72a21c
--- /dev/null
+++ b/static/styles.css
@@ -0,0 +1,33 @@
+
+body {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    height: 100vh;
+    margin: 0;
+    background-color: #f4f4f4;
+}
+
+.container {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+}
+
+canvas {
+    border: 1px solid #000;
+    background-color: #fff;
+}
+
+button {
+    margin-top: 10px;
+    padding: 10px 20px;
+    background-color: #007bff;
+    color: #fff;
+    border: none;
+    cursor: pointer;
+}
+
+button:hover {
+    background-color: #0056b3;
+}
diff --git a/static/vocab.js b/static/vocab.js
new file mode 100644
index 0000000..514eed6
--- /dev/null
+++ b/static/vocab.js
@@ -0,0 +1,160 @@
+document.addEventListener('DOMContentLoaded', () => {
+    loadVocab();
+
+    document.getElementById('addVocab').addEventListener('click', () => {
+        const englishInput = document.getElementById('englishInput').value;
+        const germanInput = document.getElementById('germanInput').value;
+
+        if (englishInput && germanInput) {
+            fetch('/add_vocab', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                body: new URLSearchParams({
+                    english: englishInput,
+                    german: germanInput,
+                    level: 1 // Automatisch Level 1 setzen
+                })
+            }).then(response => response.json())
+            .then(data => {
+                if (data.success) {
+                    loadVocab();
+
+                    document.getElementById('englishInput').value = '';
+                    document.getElementById('germanInput').value = '';
+                } else {
+                    alert(data.error);
+                }
+            }).catch(error => {
+                console.error('Fehler beim Hinzufügen der Vokabel:', error);
+            });
+        } else {
+            alert('Bitte alle Felder ausfüllen.');
+        }
+    });
+
+    document.getElementById('backToHome').addEventListener('click', () => {
+        window.location.href = '/'; // Pfad zur Startseite anpassen
+    });
+});
+
+function loadVocab() {
+    fetch('/get_vocab')
+        .then(response => response.json())
+        .then(vocabList => {
+            const tables = [1, 2, 3, 4, 5].map(level => document.getElementById(`vocab-list-${level}`));
+            tables.forEach(table => table.querySelector('tbody').innerHTML = '');
+
+            vocabList.forEach(vocab => {
+                const row = document.createElement('tr');
+                row.dataset.id = vocab.id;
+                row.dataset.level = vocab.level; // Level in dataset speichern
+                row.innerHTML = `
+                    <td class="editable">${vocab.english}</td>
+                    <td class="editable">${vocab.german}</td>
+                    <td>
+                        <button class="edit-btn">Bearbeiten</button>
+                        <button class="delete-btn" data-id="${vocab.id}">Löschen</button>
+                    </td>
+                `;
+
+                const targetTable = document.getElementById(`vocab-list-${vocab.level}`);
+                targetTable.querySelector('tbody').appendChild(row);
+            });
+
+            // Event-Listener für den „Löschen“-Button
+            document.querySelectorAll('.delete-btn').forEach(btn => {
+                btn.addEventListener('click', (event) => {
+                    const vocabId = event.target.getAttribute('data-id');
+                    fetch(`/delete_vocab/${vocabId}`, {
+                        method: 'DELETE'
+                    }).then(response => response.json())
+                    .then(data => {
+                        if (data.success) {
+                            loadVocab();
+                        } else {
+                            alert(data.error);
+                        }
+                    }).catch(error => {
+                        console.error('Fehler beim Löschen der Vokabel:', error);
+                    });
+                });
+            });
+
+            // Event-Listener für den „Bearbeiten“-Button
+            document.querySelectorAll('.edit-btn').forEach(btn => {
+                btn.addEventListener('click', (event) => {
+                    const row = event.target.closest('tr');
+                    const id = row.dataset.id;
+                    const english = row.children[0].textContent;
+                    const german = row.children[1].textContent;
+                    const level = row.dataset.level || 1; // Level aus dem dataset lesen, Fallback auf 1
+
+                    // Setze die Zeile in den Bearbeitungsmodus
+                    row.innerHTML = `
+                        <td><input type="text" class="editable-input" value="${english}"></td>
+                        <td><input type="text" class="editable-input" value="${german}"></td>
+                        <td class="edit-controls">
+                            <div class="level-input-container">
+                                <label for="levelInput">Level:</label>
+                                <input type="number" id="levelInput" class="level-input" min="1" max="5" value="${level}">
+                            </div>
+                            <button class="save-btn">Speichern</button>
+                            <button class="cancel-btn">Abbrechen</button>
+                        </td>
+                    `;
+
+                    row.querySelector('.save-btn').addEventListener('click', () => {
+                        const englishInput = row.querySelector('.editable-input').value;
+                        const germanInput = row.querySelectorAll('.editable-input')[1].value;
+                        const levelInput = row.querySelector('#levelInput').value;
+
+                        fetch(`/update_vocab/${id}`, {
+                            method: 'PUT',
+                            headers: {
+                                'Content-Type': 'application/json'
+                            },
+                            body: JSON.stringify({
+                                english: englishInput,
+                                german: germanInput,
+                                level: parseInt(levelInput, 10)
+                            })
+                        }).then(response => response.json())
+                        .then(data => {
+                            if (data.success) {
+                                loadVocab();
+                            } else {
+                                alert(data.error);
+                            }
+                        }).catch(error => {
+                            console.error('Fehler beim Aktualisieren der Vokabel:', error);
+                        });
+                    });
+
+                    row.querySelector('.cancel-btn').addEventListener('click', () => {
+                        loadVocab();
+                    });
+                });
+            });
+        }).catch(error => {
+            console.error('Fehler beim Laden der Vokabeln:', error);
+        });
+}
+
+
+
+
+
+//sqlite3 anstatt cokkies
+
+
+
+
+
+
+
+
+
+
+
diff --git a/templates/login.html b/templates/login.html
new file mode 100644
index 0000000..f2a6124
--- /dev/null
+++ b/templates/login.html
@@ -0,0 +1,98 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Anmelden</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            color: #333;
+            margin-top: 50px;
+        }
+        .container {
+            margin-top: 30px;
+        }
+        form {
+            display: inline-block;
+            text-align: left;
+            background-color: #fff;
+            padding: 20px;
+            border-radius: 5px;
+            box-shadow: 0 0 10px rgba(0,0,0,0.1);
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 10px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .button {
+            display: inline-block;
+            padding: 15px 25px;
+            font-size: 18px;
+            color: white;
+            background-color: #007bff;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            cursor: pointer;
+        }
+        .button:hover {
+            background-color: #0056b3;
+        }
+        .flash-message {
+            margin-bottom: 15px;
+            padding: 10px;
+            border-radius: 5px;
+        }
+        .flash-message.success {
+            color: green;
+            border: 1px solid green;
+            background-color: #d4edda;
+        }
+        .flash-message.error {
+            color: red;
+            border: 1px solid red;
+            background-color: #f8d7da;
+        }
+    </style>
+</head>
+<body>
+    <h1>Anmelden</h1>
+    <div class="container">
+        {% with messages = get_flashed_messages(with_categories=True) %}
+            {% if messages %}
+                {% for category, message in messages %}
+                    <div class="flash-message {{ category }}">{{ message }}</div>
+                {% endfor %}
+            {% endif %}
+        {% endwith %}
+        <form method="post" action="/login">
+            <div class="form-group">
+                <label for="username">Benutzername:</label>
+                <input type="text" id="username" name="username" required>
+            </div>
+            <div class="form-group">
+                <label for="password">Passwort:</label>
+                <input type="password" id="password" name="password" required>
+            </div>
+            <button type="submit" class="button">Anmelden</button>
+        </form>
+        <a href="/register" class="button">Noch kein Konto? Registrieren</a>
+    </div>
+</body>
+</html>
diff --git a/templates/register.html b/templates/register.html
new file mode 100644
index 0000000..3123801
--- /dev/null
+++ b/templates/register.html
@@ -0,0 +1,77 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Register</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            color: #333;
+            margin-top: 50px;
+        }
+        .container {
+            margin-top: 30px;
+            width: 100%;
+            max-width: 400px;
+            margin: 50px auto;
+            padding: 20px;
+            background-color: white;
+            border-radius: 8px;
+            box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
+        }
+        .form-group {
+            margin-bottom: 15px;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .form-group button {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            color: white;
+            background-color: #007bff;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .form-group button:hover {
+            background-color: #0056b3;
+        }
+        .error {
+            color: red;
+        }
+    </style>
+</head>
+<body>
+    <h1>Register</h1>
+    <div class="container">
+        <form method="POST" action="/register">
+            <div class="form-group">
+                <input type="text" name="username" placeholder="Username" required>
+            </div>
+            <div class="form-group">
+                <input type="password" name="password" placeholder="Password" required>
+            </div>
+            <div class="form-group">
+                <button type="submit">Register</button>
+            </div>
+            <div class="form-group">
+                <p class="error">{{ error }}</p>
+            </div>
+        </form>
+    </div>
+</body>
+</html>
+
diff --git a/templates/settings.html b/templates/settings.html
new file mode 100644
index 0000000..6b9f3e0
--- /dev/null
+++ b/templates/settings.html
@@ -0,0 +1,127 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Einstellungen</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            color: #333;
+            margin-top: 50px;
+        }
+        .container {
+            margin: 20px auto;
+            max-width: 600px;
+            padding: 20px;
+            background-color: white;
+            border-radius: 10px;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+        }
+        .button {
+            display: inline-block;
+            padding: 15px 25px;
+            font-size: 18px;
+            color: white;
+            background-color: #007bff;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            margin: 10px;
+        }
+        .button:hover {
+            background-color: #0056b3;
+        }
+        .form-group {
+            margin: 15px 0;
+        }
+        .form-group label {
+            display: block;
+            margin-bottom: 5px;
+            font-weight: bold;
+        }
+        .form-group input {
+            width: 100%;
+            padding: 10px;
+            font-size: 16px;
+            border: 1px solid #ccc;
+            border-radius: 5px;
+        }
+        .form-group button {
+            padding: 10px 15px;
+            font-size: 16px;
+            color: white;
+            background-color: #28a745;
+            border: none;
+            border-radius: 5px;
+            cursor: pointer;
+        }
+        .form-group button:hover {
+            background-color: #218838;
+        }
+        .error {
+            color: red;
+            margin-top: 10px;
+        }
+    </style>
+</head>
+<body>
+    <h1>Einstellungen</h1>
+    <div class="container">
+        <!-- Formular zum Ändern des Benutzernamens -->
+        <form id="username-form">
+            <div class="form-group">
+                <label for="new-username">Neuer Benutzername:</label>
+                <input type="text" id="new-username" name="new-username" placeholder="Neuer Benutzername" required>
+            </div>
+            <button type="submit">Benutzernamen ändern</button>
+            <div id="username-error" class="error"></div>
+        </form>
+
+        <!-- Formular zum Abmelden -->
+        <form id="logout-form" action="/logout" method="POST" style="display: inline;">
+            <button type="submit" class="button">Abmelden</button>
+        </form>
+    </div>
+
+    <script>
+        document.getElementById('username-form').addEventListener('submit', function(event) {
+            event.preventDefault();
+            const newUsername = document.getElementById('new-username').value;
+
+            fetch('/change_username', {
+                method: 'POST',
+                headers: {
+                    'Content-Type': 'application/x-www-form-urlencoded'
+                },
+                body: new URLSearchParams({
+                    new_username: newUsername
+                })
+            }).then(response => response.json())
+              .then(data => {
+                  if (data.success) {
+                      window.location.reload();
+                  } else {
+                      document.getElementById('username-error').textContent = data.error;
+                  }
+              }).catch(error => {
+                  console.error('Error changing username:', error);
+                  document.getElementById('username-error').textContent = 'Ein Fehler ist aufgetreten.';
+              });
+        });
+    </script>
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/templates/start.html b/templates/start.html
new file mode 100644
index 0000000..f8f66a2
--- /dev/null
+++ b/templates/start.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vokabeltrainer</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            color: #333;
+            margin-top: 50px;
+        }
+        .container {
+            margin-top: 30px;
+        }
+        .button {
+            display: inline-block;
+            padding: 15px 25px;
+            font-size: 18px;
+            color: white;
+            background-color: #007bff;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            margin: 10px;
+        }
+        .button:hover {
+            background-color: #0056b3;
+        }
+    </style>
+</head>
+<body>
+    <h1>Vokabeltrainer</h1>
+    <div class="container">
+        <a href="/train" class="button">Vokabeln trainieren</a>
+        <a href="/settings" class="button">Einstellungen</a>
+        <a href="/vocab" class="button">Meine Vokabeln</a>
+    </div>
+</body>
+</html>
+
diff --git a/templates/train.html b/templates/train.html
new file mode 100644
index 0000000..55a5d57
--- /dev/null
+++ b/templates/train.html
@@ -0,0 +1,89 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Vokabeln trainieren</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            color: #333;
+            margin-top: 50px;
+        }
+        #wordDisplay {
+            font-size: 24px;
+            margin: 20px 0;
+        }
+        #inputArea {
+            margin: 20px 0;
+        }
+        #textInput {
+            font-size: 18px;
+            padding: 10px;
+            width: 300px;
+        }
+        canvas {
+            border: 1px solid black;
+            margin: 0 auto;
+            background-color: white;
+        }
+        .button {
+            display: inline-block;
+            padding: 15px 25px;
+            font-size: 18px;
+            color: white;
+            background-color: #007bff;
+            border: none;
+            border-radius: 5px;
+            text-decoration: none;
+            margin: 10px;
+            cursor: pointer;
+        }
+        .button:hover {
+            background-color: #0056b3;
+        }
+        #result {
+            margin-top: 20px;
+            font-size: 20px;
+            color: green;
+            min-height: 50px;
+        }
+        #recognizedText {
+            margin-top: 10px;
+            font-size: 18px;
+            color: #333;
+        }
+    </style>
+</head>
+<body>
+    <h1>Vokabeln trainieren</h1>
+    <div id="wordDisplay">Lade...</div>
+    
+    <div id="inputArea">
+        <input type="text" id="textInput" placeholder="Antwort eingeben">
+        <canvas id="drawingCanvas" width="600" height="400"></canvas>
+        <button id="clearCanvas" class="button">Zeichnung löschen</button>
+    </div>
+    
+    <button id="toggleInput" class="button">Zu Zeichnen wechseln</button>
+    <button id="previewDrawing" class="button">Zeichnung prüfen</button>
+    <button id="submitAnswer" class="button">Abgeben</button>
+    
+    <div id="recognizedText"></div>
+    
+    <div id="result">
+        <pre id="text"></pre>
+    </div>
+    <a href="/" class="button">Zurück zur Startseite</a>
+    <script src="https://cdn.jsdelivr.net/npm/tesseract.js@2.1.1/dist/tesseract.min.js"></script>
+    <script src="/static/script.js"></script>
+</body>
+</html>
+
+
diff --git a/templates/vocab.html b/templates/vocab.html
new file mode 100644
index 0000000..44c99a4
--- /dev/null
+++ b/templates/vocab.html
@@ -0,0 +1,268 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title>Meine Vokabeln</title>
+    <style>
+        body {
+            font-family: Arial, sans-serif;
+            text-align: center;
+            background-color: #f0f0f0;
+            margin: 0;
+            padding: 0;
+        }
+        h1 {
+            color: #333;
+            margin-top: 50px;
+        }
+        .container {
+            margin: 0 auto;
+            max-width: 1200px;
+            padding: 20px;
+        }
+        table {
+            width: 100%;
+            border-collapse: collapse;
+            margin: 10px 0;
+            border-radius: 15px;
+            overflow: hidden;
+            box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
+            border: 1px solid #cccccc;
+        }
+        th, td {
+            padding: 10px;
+            border-bottom: 1px solid #cccccc;
+            text-align: left;
+        }
+        th {
+            background-color: white; /* Weiß für Tabelleninhalt */
+        }
+        .table-header {
+            text-align: center;
+            color: white;
+            font-weight: bold;
+        }
+        .red .table-header, .red th { background-color: #d9534f; color: white; }
+        .orange .table-header, .orange th { background-color: #f0ad4e; color: white; }
+        .yellow .table-header, .yellow th { background-color: #ffd500; color: white; }
+        .green .table-header, .green th { background-color: #4dd64d; color: white; }
+        .darkgreen .table-header, .darkgreen th { background-color: #2f742f; color: white; }
+        .actions button {
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            margin-right: 5px;
+            cursor: pointer;
+            font-size: 14px;
+        }
+        /* Allgemeine Button-Stile */
+        button {
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            font-size: 14px;
+            color: white;
+            margin-right: 5px;
+        }
+        /* Spezielle Button-Stile */
+        .edit-btn, .delete-btn, .save-btn, .cancel-btn, #moveUp, #moveDown, #moveFinish {
+            border-radius: 5px; /* Gleiche abgerundete Ecken für alle Buttons */
+            padding: 5px 10px;
+            cursor: pointer;
+            font-size: 14px;
+            color: white;
+        }
+        .edit-btn {
+            background-color: #007bff; /* Blau */
+        }
+        .delete-btn {
+            background-color: #dc3545; /* Rot */
+        }
+        .save-btn {
+            background-color: #28a745; /* Grün */
+        }
+        .cancel-btn {
+            background-color: #dc3545; /* Rot */
+        }
+        /* Level-Input-Feld */
+        .level-input-container {
+            display: inline-block;
+            margin-right: 10px;
+        }
+        .level-input {
+            width: 60px;
+            text-align: center;
+        }
+        /* Bearbeitungsmodus-Stil */
+        .editing {
+            background-color: #e7f0ff; /* Hellblau als Hinweis für Bearbeitungsmodus */
+            border: 1px solid #007bff;
+            padding: 5px;
+        }
+        #backToHome {
+            border: none;
+            border-radius: 5px;
+            padding: 5px 10px;
+            cursor: pointer;
+            background-color: #007bff; /* Blau */
+            color: white;
+            margin: 20px;
+            position: absolute;
+            top: 10px;
+            left: 10px;
+        }
+
+        /* Stile für den Container */
+#vocab-add-container {
+    margin-bottom: 20px; /* Abstand nach unten für die Tabelle */
+}
+
+/* Stile für das Formular */
+#add-vocab-form {
+    margin-bottom: 10px; /* Abstand nach unten für den Button */
+}
+
+/* Stile für den "Hinzufügen"-Button */
+#addVocab {
+    background-color: #007bff; /* Hintergrundfarbe des Buttons */
+    color: #fff; /* Schriftfarbe */
+    border: none; /* Kein Rand */
+    border-radius: 5px; /* Abgerundete Ecken */
+    padding: 10px 20px; /* Innenabstand (Padding) */
+    font-size: 16px; /* Schriftgröße */
+    cursor: pointer; /* Zeiger-Cursor beim Hover */
+    transition: background-color 0.3s ease; /* Übergangseffekt für Hover */
+}
+
+/* Hover-Effekt für den Button */
+#addVocab:hover {
+    background-color: #0056b3; /* Dunklere Hintergrundfarbe beim Hover */
+}
+
+/* Stile für die Tabelle */
+#vocab-list {
+    width: 100%; /* Tabellenbreite auf 100% setzen */
+    border-collapse: collapse; /* Ränder zusammenführen */
+}
+
+/* Stile für die Tabellenüberschriften */
+#vocab-list th {
+    background-color: #f2f2f2; /* Hintergrundfarbe der Überschriften */
+    padding: 10px; /* Innenabstand der Überschriften */
+    text-align: left; /* Textausrichtung */
+    border-bottom: 2px solid #ddd; /* Untere Grenze der Überschriften */
+}
+
+/* Stile für die Tabellenzellen */
+#vocab-list td {
+    padding: 10px; /* Innenabstand der Zellen */
+    border-bottom: 1px solid #ddd; /* Untere Grenze der Zellen */
+}
+
+    </style>
+</head>
+<body>
+    <button id="backToHome">Zurück zur Startseite</button>
+    <h1>Meine Vokabeln</h1>
+    <div class="container">
+        <!-- Input-Bereich für Vokabeln -->
+        <div id="vocab-input">
+            <input type="text" id="englishInput" placeholder="Englisch">
+            <input type="text" id="germanInput" placeholder="Deutsch">
+            <!-- Das Level-Feld wird entfernt -->
+            <button id="addVocab">Hinzufügen</button>
+        </div>
+
+        <!-- Tabellen für Vokabeln -->
+        <table id="vocab-list-1" class="red">
+            <thead>
+                <tr class="table-header">
+                    <td colspan="4">Neue Vokabeln</td>
+                </tr>
+                <tr>
+                    <th>Englisch</th>
+                    <th>Deutsch</th>
+                    <th>Aktionen</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+
+        <table id="vocab-list-2" class="orange">
+            <thead>
+                <tr class="table-header">
+                    <td colspan="4">Vokabeln, die noch nicht sitzen</td>
+                </tr>
+                <tr>
+                    <th>Englisch</th>
+                    <th>Deutsch</th>
+                    <th>Aktionen</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+
+        <table id="vocab-list-3" class="yellow">
+            <thead>
+                <tr class="table-header">
+                    <td colspan="4">Vokabeln, die fast sitzen</td>
+                </tr>
+                <tr>
+                    <th>Englisch</th>
+                    <th>Deutsch</th>
+                    <th>Aktionen</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+
+        <table id="vocab-list-4" class="green">
+            <thead>
+                <tr class="table-header">
+                    <td colspan="4">Vokabeln, die gut sitzen</td>
+                </tr>
+                <tr>
+                    <th>Englisch</th>
+                    <th>Deutsch</th>
+                    <th>Aktionen</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+
+        <table id="vocab-list-5" class="darkgreen">
+            <thead>
+                <tr class="table-header">
+                    <td colspan="4">Perfekte Vokabeln</td>
+                </tr>
+                <tr>
+                    <th>Englisch</th>
+                    <th>Deutsch</th>
+                    <th>Aktionen</th>
+                </tr>
+            </thead>
+            <tbody></tbody>
+        </table>
+    </div>
+
+    <script src="static/vocab.js"></script>
+</body>
+</html>
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/test.txt b/test.txt
new file mode 100644
index 0000000..39bd657
--- /dev/null
+++ b/test.txt
@@ -0,0 +1,168 @@
+from flask import Flask, request, jsonify, redirect, url_for, session, render_template
+from flask_sqlalchemy import SQLAlchemy
+from werkzeug.security import generate_password_hash, check_password_hash
+from flask_session import Session
+from flask_login import LoginManager, UserMixin, login_user, login_required, logout_user, current_user, login_manager
+
+app = Flask(__name__)
+app.config['SQLALCHEMY_DATABASE_URI'] = 'sqlite:///vocab.db'
+app.config['SECRET_KEY'] = 'your_secret_key'  # Ändere dies zu einem echten geheimen Schlüssel
+app.config['SESSION_TYPE'] = 'filesystem'
+app.config['SESSION_PERMANENT'] = False
+app.config['SESSION_USE_SIGNER'] = True
+
+db = SQLAlchemy(app)
+Session(app)
+
+# Flask-Login Setup
+login_manager = LoginManager()
+login_manager.init_app(app)
+login_manager.login_view = 'login'
+
+# Models
+class User(db.Model, UserMixin):
+    id = db.Column(db.Integer, primary_key=True)
+    username = db.Column(db.String(150), unique=True, nullable=False)
+    password = db.Column(db.String(150), nullable=False)
+    vocabularies = db.relationship('Vocabulary', backref='owner', lazy=True)
+
+class Vocabulary(db.Model):
+    id = db.Column(db.Integer, primary_key=True)
+    english = db.Column(db.String(100), nullable=False)
+    german = db.Column(db.String(100), nullable=False)
+    level = db.Column(db.Integer, nullable=False)
+    user_id = db.Column(db.Integer, db.ForeignKey('user.id'), nullable=False)
+
+# User loader callback for Flask-Login
+@login_manager.user_loader
+def load_user(user_id):
+    return User.query.get(int(user_id))
+
+# Route Handlers
+@app.route('/')
+def index():
+    return render_template('start.html')
+
+@app.route('/train')
+@login_required
+def train():
+    return render_template('train.html')  # Stelle sicher, dass diese Datei existiert
+
+@app.route('/settings')
+@login_required
+def settings():
+    return render_template('settings.html')  # Stelle sicher, dass diese Datei existiert
+
+@app.route('/vocab')
+@login_required
+def vocab():
+    return render_template('vocab.html')
+
+@app.route('/register', methods=['POST'])
+def register():
+    username = request.form.get('username')
+    password = request.form.get('password')
+    if not username or not password:
+        return jsonify({'error': 'Username and password are required'}), 400
+
+    hashed_password = generate_password_hash(password, method='pbkdf2:sha256')
+    user = User(username=username, password=hashed_password)
+
+    try:
+        db.session.add(user)
+        db.session.commit()
+        return jsonify({'success': True}), 201
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/login', methods=['POST'])
+def login():
+    username = request.form['username']
+    password = request.form['password']
+
+    user = User.query.filter_by(username=username).first()
+    if user and check_password_hash(user.password, password):
+        session['logged_in'] = True
+        session['user_id'] = user.id
+        return redirect('/settings')
+    else:
+        return jsonify({"error": "Invalid credentials"}), 401
+
+
+@app.route('/logout', methods=['POST'])
+@login_required
+def logout():
+    logout_user()
+    return redirect(url_for('index'))
+
+@app.route('/add_vocab', methods=['POST'])
+@login_required
+def add_vocab():
+    english = request.form.get('english')
+    german = request.form.get('german')
+    level = int(request.form.get('level'))
+
+    if not english or not german or not level:
+        return jsonify({'error': 'All fields are required'}), 400
+
+    vocab = Vocabulary(english=english, german=german, level=level, user_id=current_user.id)
+    try:
+        db.session.add(vocab)
+        db.session.commit()
+        return jsonify({'success': True}), 201
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/update_vocab/<int:id>', methods=['PUT'])
+@login_required
+def update_vocab(id):
+    vocab = Vocabulary.query.get(id)
+    if not vocab or vocab.user_id != current_user.id:
+        return jsonify({'error': 'Not found or unauthorized'}), 404
+
+    english = request.json.get('english')
+    german = request.json.get('german')
+    level = request.json.get('level')
+
+    if english:
+        vocab.english = english
+    if german:
+        vocab.german = german
+    if level:
+        vocab.level = level
+
+    try:
+        db.session.commit()
+        return jsonify({'success': True}), 200
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/delete_vocab/<int:id>', methods=['DELETE'])
+@login_required
+def delete_vocab(id):
+    vocab = Vocabulary.query.get(id)
+    if not vocab or vocab.user_id != current_user.id:
+        return jsonify({'error': 'Not found or unauthorized'}), 404
+
+    try:
+        db.session.delete(vocab)
+        db.session.commit()
+        return jsonify({'success': True}), 200
+    except Exception as e:
+        db.session.rollback()
+        return jsonify({'error': str(e)}), 500
+
+@app.route('/get_vocab', methods=['GET'])
+@login_required
+def get_vocab():
+    vocab_list = Vocabulary.query.filter_by(user_id=current_user.id).all()
+    result = [{'id': v.id, 'english': v.english, 'german': v.german, 'level': v.level} for v in vocab_list]
+    return jsonify(result)
+
+if __name__ == '__main__':
+    with app.app_context():
+        db.create_all()
+    app.run(debug=True)