diff --git a/frontend/src/App.jsx b/frontend/src/App.jsx
index 56fd27e..7901790 100644
--- a/frontend/src/App.jsx
+++ b/frontend/src/App.jsx
@@ -3220,18 +3220,33 @@ function ScrollToTop({ scrollRef }) {
   const [visible, setVisible] = useState(false);
 
   useEffect(() => {
+    // Prüfe sowohl window als auch den Ref-Container
     const el = scrollRef?.current;
-    if (!el) return;
-    const onScroll = () => setVisible(el.scrollTop > 300);
-    el.addEventListener('scroll', onScroll, { passive: true });
-    return () => el.removeEventListener('scroll', onScroll);
+
+    function check() {
+      const winScroll = window.scrollY || document.documentElement.scrollTop;
+      const elScroll  = el ? el.scrollTop : 0;
+      setVisible(winScroll > 300 || elScroll > 300);
+    }
+
+    window.addEventListener('scroll', check, { passive: true });
+    if (el) el.addEventListener('scroll', check, { passive: true });
+    return () => {
+      window.removeEventListener('scroll', check);
+      if (el) el.removeEventListener('scroll', check);
+    };
   }, [scrollRef]);
 
+  function scrollUp() {
+    window.scrollTo({ top: 0, behavior: 'smooth' });
+    if (scrollRef?.current) scrollRef.current.scrollTo({ top: 0, behavior: 'smooth' });
+  }
+
   if (!visible) return null;
 
   return (
     <button
-      onClick={() => scrollRef.current?.scrollTo({ top: 0, behavior: 'smooth' })}
+      onClick={scrollUp}
       style={{
         position: 'fixed',
         bottom: 'calc(70px + env(safe-area-inset-bottom, 0px))',
@@ -3240,17 +3255,16 @@ function ScrollToTop({ scrollRef }) {
         width: 40,
         height: 40,
         borderRadius: '50%',
-        background: 'rgba(255,255,255,0.08)',
-        border: '1px solid rgba(255,255,255,0.15)',
-        backdropFilter: 'blur(8px)',
-        color: 'rgba(255,255,255,0.7)',
-        fontSize: 16,
+        background: 'rgba(30,30,40,0.85)',
+        border: '1px solid rgba(255,255,255,0.18)',
+        backdropFilter: 'blur(10px)',
+        color: 'rgba(255,255,255,0.85)',
+        fontSize: 18,
         cursor: 'pointer',
         display: 'flex',
         alignItems: 'center',
         justifyContent: 'center',
-        boxShadow: '0 4px 16px rgba(0,0,0,0.4)',
-        transition: 'opacity 0.2s',
+        boxShadow: '0 4px 20px rgba(0,0,0,0.5)',
       }}
       title="Nach oben"
     >
@@ -3355,6 +3369,7 @@ export default function App() {
   const mainStyle = {
     flex:1,
     overflowY: 'auto',
+    height: '100vh',
     ...(mobile ? { paddingBottom:'calc(56px + env(safe-area-inset-bottom, 0px))' } : {}),
   };