diff --git a/app.js b/app.js
index 523a650..b92fc65 100644
--- a/app.js
+++ b/app.js
@@ -422,6 +422,7 @@ class TeeTracker {
             color: tea.color || '#8B4513',
             organic: tea.organic || false,
             rating: tea.rating || 3,
+            image: tea.image || '',
             createdAt: new Date().toISOString()
         };
         this.teas.push(newTea);
@@ -636,6 +637,12 @@ class TeeTracker {
             teaRating.addEventListener('click', (e) => this.handleStarRatingClick(e));
         }
         
+        // Tea image upload
+        const teaImageUpload = document.getElementById('tea-image-upload');
+        if (teaImageUpload) {
+            teaImageUpload.addEventListener('change', (e) => this.handleImageUpload(e));
+        }
+        
         // Confirm modal
         if (document.getElementById('close-confirm')) {
             document.getElementById('close-confirm').addEventListener('click', () => this.closeConfirmModal());
@@ -1252,9 +1259,12 @@ class TeeTracker {
             <div class="tea-card" data-id="${tea.id}">
                 <div class="tea-card-header">
                     <div>
-                        <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
-                        <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
-                        <span class="tea-type">${tea.type}</span>
+                        ${tea.image ? `<img src="${tea.image}" class="tea-image" alt="${tea.name}">` : ''}
+                        <div>
+                            <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                            <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
+                            <span class="tea-type">${tea.type}</span>
+                        </div>
                     </div>
                 </div>
                 ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
@@ -1297,9 +1307,12 @@ class TeeTracker {
             <div class="tea-card" data-id="${tea.id}">
                 <div class="tea-card-header">
                     <div>
-                        <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
-                        <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
-                        <span class="tea-type">${tea.type}</span>
+                        ${tea.image ? `<img src="${tea.image}" class="tea-image" alt="${tea.name}">` : ''}
+                        <div>
+                            <h3 class="tea-name">${tea.name} ${tea.organic ? '<span class="organic-badge" title="Bio-Tee">🌱</span>' : ''}</h3>
+                            <div class="tea-rating-display">${this.renderStarRatingStatic(tea.rating || 3)}</div>
+                            <span class="tea-type">${tea.type}</span>
+                        </div>
                     </div>
                 </div>
                 ${tea.brand ? `<div class="tea-brand">Marke: ${tea.brand}</div>` : ''}
@@ -1332,6 +1345,15 @@ class TeeTracker {
                 document.getElementById('tea-organic').checked = tea.organic || false;
                 document.getElementById('tea-rating-value').value = tea.rating || 3;
                 this.renderStarRating(tea.rating || 3, 'tea-rating');
+                if (tea.image) {
+                    document.getElementById('tea-image-data').value = tea.image;
+                    document.getElementById('tea-image-preview-img').src = tea.image;
+                    document.getElementById('tea-image-preview').style.display = 'block';
+                } else {
+                    document.getElementById('tea-image-data').value = '';
+                    document.getElementById('tea-image-preview-img').src = '';
+                    document.getElementById('tea-image-preview').style.display = 'none';
+                }
                 deleteBtn.style.display = 'inline-flex';
                 this.currentTeaId = tea.id;
             }
@@ -1341,6 +1363,9 @@ class TeeTracker {
             document.getElementById('tea-id').value = '';
             document.getElementById('tea-rating-value').value = 3;
             this.renderStarRating(3, 'tea-rating');
+            document.getElementById('tea-image-data').value = '';
+            document.getElementById('tea-image-preview-img').src = '';
+            document.getElementById('tea-image-preview').style.display = 'none';
             deleteBtn.style.display = 'none';
             this.currentTeaId = null;
         }
@@ -1368,7 +1393,8 @@ class TeeTracker {
             description: document.getElementById('tea-description').value.trim(),
             color: document.getElementById('tea-color').value,
             organic: document.getElementById('tea-organic').checked,
-            rating: parseInt(document.getElementById('tea-rating-value').value) || 3
+            rating: parseInt(document.getElementById('tea-rating-value').value) || 3,
+            image: document.getElementById('tea-image-data').value || ''
         };
         
         const teaId = document.getElementById('tea-id').value;
@@ -1408,6 +1434,25 @@ class TeeTracker {
         }
     }
     
+    handleImageUpload(e) {
+        const file = e.target.files[0];
+        if (!file || !file.type.startsWith('image/')) return;
+        
+        const preview = document.getElementById('tea-image-preview-img');
+        const previewContainer = document.getElementById('tea-image-preview');
+        const imageDataInput = document.getElementById('tea-image-data');
+        
+        if (preview && previewContainer && imageDataInput) {
+            const reader = new FileReader();
+            reader.onload = (event) => {
+                preview.src = event.target.result;
+                previewContainer.style.display = 'block';
+                imageDataInput.value = event.target.result;
+            };
+            reader.readAsDataURL(file);
+        }
+    }
+    
     renderStarRating(rating, containerId) {
         const container = document.getElementById(containerId);
         if (!container) return;
diff --git a/index.html b/index.html
index 8d46073..f67f3d3 100644
--- a/index.html
+++ b/index.html
@@ -302,6 +302,15 @@
                         <input type="hidden" id="tea-rating-value" value="3">
                     </div>
                     
+                    <div class="form-group">
+                        <label for="tea-image-upload">Tee-Foto</label>
+                        <input type="file" id="tea-image-upload" accept="image/*">
+                        <div id="tea-image-preview" class="image-preview" style="display: none; margin-top: 10px;">
+                            <img id="tea-image-preview-img" style="max-width: 150px; max-height: 150px; border-radius: 8px; box-shadow: 0 2px 5px rgba(0,0,0,0.2);">
+                        </div>
+                        <input type="hidden" id="tea-image-data" value="">
+                    </div>
+                    
                     <div class="form-group">
                         <label for="tea-color">Farbe</label>
                         <input type="color" id="tea-color" value="#8B4513">
diff --git a/styles.css b/styles.css
index a08f907..c52871d 100644
--- a/styles.css
+++ b/styles.css
@@ -1013,3 +1013,26 @@ header p {
     color: #FFD700;
     font-size: 1rem;
 }
+
+/* Image Upload Preview */
+.image-preview {
+    margin-top: 10px;
+}
+
+.image-preview img {
+    max-width: 150px;
+    max-height: 150px;
+    border-radius: var(--border-radius);
+    box-shadow: var(--box-shadow);
+    object-fit: cover;
+}
+
+/* Tea card image */
+.tea-image {
+    width: 60px;
+    height: 60px;
+    border-radius: var(--border-radius);
+    object-fit: cover;
+    box-shadow: var(--box-shadow);
+    margin-right: 10px;
+}