diff --git a/src/app/sessions/[id]/page.tsx b/src/app/sessions/[id]/page.tsx
index b6655be..beba47d 100644
--- a/src/app/sessions/[id]/page.tsx
+++ b/src/app/sessions/[id]/page.tsx
@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect } from 'react';
 import { createClientComponentClient } from '@supabase/auth-helpers-nextjs';
-import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play } from 'lucide-react';
+import { ChevronLeft, Users, Calendar, GlassWater, Plus, Trash2, Loader2, Sparkles, ChevronRight, Play, Square } from 'lucide-react';
 import Link from 'next/link';
 import { useSession } from '@/context/SessionContext';
 import { useParams, useRouter } from 'next/navigation';
@@ -198,10 +198,13 @@ export default function SessionDetailPage() {
                                     Session Starten
                                 </button>
                             ) : (
-                                <div className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800">
-                                    <Sparkles size={18} className="text-amber-500" />
-                                    Aktiv
-                                </div>
+                                <button
+                                    onClick={() => setActiveSession(null)}
+                                    className="px-6 py-3 bg-zinc-900 dark:bg-zinc-100 text-white dark:text-zinc-900 rounded-2xl text-sm font-black uppercase tracking-widest flex items-center gap-2 border border-zinc-200 dark:border-zinc-800 hover:bg-red-600 hover:text-white dark:hover:bg-red-600 dark:hover:text-white transition-all group"
+                                >
+                                    <Square size={18} className="text-red-500 group-hover:text-white transition-colors" fill="currentColor" />
+                                    Session Stoppen
+                                </button>
                             )}
                         </div>
                     </div>
diff --git a/src/components/ActiveSessionBanner.tsx b/src/components/ActiveSessionBanner.tsx
index d1a6e02..713dcce 100644
--- a/src/components/ActiveSessionBanner.tsx
+++ b/src/components/ActiveSessionBanner.tsx
@@ -2,7 +2,7 @@
 
 import React from 'react';
 import { useSession } from '@/context/SessionContext';
-import { GlassWater, X, ArrowRight, Sparkles } from 'lucide-react';
+import { GlassWater, Square, ArrowRight, Sparkles } from 'lucide-react';
 import Link from 'next/link';
 import { useI18n } from '@/i18n/I18nContext';
 
@@ -34,7 +34,7 @@ export default function ActiveSessionBanner() {
                     className="ml-4 p-2 hover:bg-white/10 rounded-full transition-colors"
                     title="End Session"
                 >
-                    <X size={20} />
+                    <Square size={20} fill="currentColor" />
                 </button>
             </div>
         </div>