diff --git a/app/[locale]/layout.tsx b/app/[locale]/layout.tsx
index e8f523827..14ee955a5 100644
--- a/app/[locale]/layout.tsx
+++ b/app/[locale]/layout.tsx
@@ -157,7 +157,7 @@ export default async function Layout(props: {
   const feedbackEnabled = process.env.NEXT_PUBLIC_FEEDBACK_ENABLED === 'true';
 
   const cookieStore = await cookies();
-  const hasSeenLoader = cookieStore.has('etib_initial_loader_v3');
+  const hasSeenLoader = cookieStore.has('etib_initial_loader_v4');
 
   return (
     <html
diff --git a/components/providers/InitialLoader.tsx b/components/providers/InitialLoader.tsx
index d36e86259..1a591fcf8 100644
--- a/components/providers/InitialLoader.tsx
+++ b/components/providers/InitialLoader.tsx
@@ -2,6 +2,7 @@
 
 import React, { useEffect, useState } from 'react';
 import { motion, AnimatePresence } from 'framer-motion';
+import Image from 'next/image';
 
 const PRELOAD_VIDEOS = [
   '/assets/videos/web/hero-bohrung.mp4'
@@ -44,7 +45,7 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
 
   const finishLoading = () => {
     // Set a session cookie so the server knows not to render the loader again
-    document.cookie = "etib_initial_loader_v3=true; path=/; samesite=lax";
+    document.cookie = "etib_initial_loader_v4=true; path=/; samesite=lax";
     setIsLoading(false);
   };
 
@@ -59,57 +60,59 @@ export function InitialLoader({ shouldShowLoader = true }: { shouldShowLoader?:
           initial={{ y: 0 }}
           exit={{ y: '-100%' }}
           transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1], delay: 0.2 }}
-          className="fixed inset-0 z-[9999] bg-neutral-dark flex flex-col items-center justify-center overflow-hidden"
+          className="fixed inset-0 z-[9999] bg-[#050B14] flex flex-col items-center justify-center overflow-hidden"
         >
-          {/* E-TIB Premium Glow */}
-          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/20 via-transparent to-transparent opacity-60" />
+          {/* Subtle grid background */}
+          <div className="absolute inset-0 bg-[linear-gradient(to_right,#8080800a_1px,transparent_1px),linear-gradient(to_bottom,#8080800a_1px,transparent_1px)] bg-[size:32px_32px] [mask-image:radial-gradient(ellipse_60%_50%_at_50%_50%,#000_70%,transparent_100%)]" />
+
+          {/* Deep Glow */}
+          <div className="absolute inset-0 bg-[radial-gradient(circle_at_center,_var(--tw-gradient-stops))] from-primary/10 via-transparent to-transparent opacity-80 mix-blend-screen" />
           
           <motion.div 
-            initial={{ opacity: 0, scale: 0.95 }}
+            initial={{ opacity: 0, scale: 0.9 }}
             animate={{ opacity: 1, scale: 1 }}
-            transition={{ duration: 0.8, ease: "easeOut" }}
-            className="relative z-10 flex flex-col items-center"
+            transition={{ duration: 1.2, ease: [0.16, 1, 0.3, 1] }}
+            className="relative z-10 flex flex-col items-center w-full px-4"
           >
-            {/* Minimalistisches Logo oder Loader */}
-            <div className="w-24 h-24 relative mb-8">
-              <motion.div 
-                className="absolute inset-0 border-2 border-primary/20 rounded-xl"
-                animate={{ rotate: 360 }}
-                transition={{ duration: 8, ease: "linear", repeat: Infinity }}
+            {/* Logo Container with Shimmer / Reflection effect */}
+            <div className="relative w-64 h-20 sm:w-80 sm:h-24 mb-12 overflow-hidden mix-blend-plus-lighter">
+              <Image 
+                src="/assets/logo-white.png"
+                alt="E-TIB Gruppe"
+                fill
+                className="object-contain filter drop-shadow-[0_0_15px_rgba(255,255,255,0.2)]"
+                priority
               />
-              <motion.div 
-                className="absolute inset-2 border-2 border-accent/40 rounded-lg"
-                animate={{ rotate: -360 }}
-                transition={{ duration: 6, ease: "linear", repeat: Infinity }}
+              {/* Animated Light Sweep over Logo */}
+              <motion.div
+                className="absolute inset-0 bg-gradient-to-r from-transparent via-white/40 to-transparent skew-x-[-25deg]"
+                initial={{ left: '-150%' }}
+                animate={{ left: '250%' }}
+                transition={{ duration: 2.5, ease: "easeInOut", repeat: Infinity, repeatDelay: 0.5 }}
+                style={{ mixBlendMode: 'overlay' }}
               />
-              <motion.div 
-                className="absolute inset-4 border-2 border-white rounded-md bg-white/5 backdrop-blur-sm flex items-center justify-center"
-              >
-                <span className="text-white font-bold text-xl tracking-tighter">E-TIB</span>
-              </motion.div>
             </div>
             
-            <motion.div 
-              initial={{ opacity: 0, y: 10 }}
-              animate={{ opacity: 1, y: 0 }}
-              transition={{ delay: 0.4 }}
-              className="h-1 w-48 bg-neutral-800 rounded-full overflow-hidden"
-            >
+            {/* Elegant Progress Bar */}
+            <div className="flex flex-col items-center w-full max-w-xs">
+              <div className="flex justify-between w-full mb-3 text-[10px] sm:text-xs font-mono text-white/40 tracking-[0.2em] uppercase">
+                <span>System</span>
+                <span className="text-primary/80 animate-pulse">Online</span>
+              </div>
               <motion.div 
-                className="h-full bg-primary"
-                initial={{ width: "0%" }}
-                animate={{ width: "100%" }}
-                transition={{ duration: 3.5, ease: [0.16, 1, 0.3, 1] }}
-              />
-            </motion.div>
-            <motion.p 
-              initial={{ opacity: 0 }}
-              animate={{ opacity: 1 }}
-              transition={{ delay: 0.6 }}
-              className="mt-4 text-xs text-neutral-400 font-mono tracking-widest uppercase"
-            >
-              Loading Infrastructure
-            </motion.p>
+                initial={{ opacity: 0, y: 10 }}
+                animate={{ opacity: 1, y: 0 }}
+                transition={{ delay: 0.3 }}
+                className="h-[2px] w-full bg-white/5 overflow-hidden relative rounded-full"
+              >
+                <motion.div 
+                  className="absolute inset-y-0 left-0 bg-gradient-to-r from-primary-dark via-primary to-primary-light"
+                  initial={{ width: "0%" }}
+                  animate={{ width: "100%" }}
+                  transition={{ duration: 3.8, ease: [0.16, 1, 0.3, 1] }}
+                />
+              </motion.div>
+            </div>
           </motion.div>
         </motion.div>
       )}
diff --git a/next-env.d.ts b/next-env.d.ts
index 9edff1c7c..c4b7818fb 100644
--- a/next-env.d.ts
+++ b/next-env.d.ts
@@ -1,6 +1,6 @@
 /// <reference types="next" />
 /// <reference types="next/image-types/global" />
-import "./.next/types/routes.d.ts";
+import "./.next/dev/types/routes.d.ts";
 
 // NOTE: This file should not be edited
 // see https://nextjs.org/docs/app/api-reference/config/typescript for more information.
