diff --git a/3655db7bb80e7185ec222aa0864e9a0d,b7106cf.webp b/3655db7bb80e7185ec222aa0864e9a0d,b7106cf.webp
new file mode 100644
index 0000000..46c35cc
Binary files /dev/null and b/3655db7bb80e7185ec222aa0864e9a0d,b7106cf.webp differ
diff --git a/index.html b/index.html
index 5b59e36..1adde65 100644
--- a/index.html
+++ b/index.html
@@ -2,7 +2,8 @@
 <html lang="en">
 <head>
 <meta charset="UTF-8">
-<title>My Life in Twenty Years - Ultimate Insane</title>
+<title>My Life in Twenty Years</title>
+
 <style>
 body {
   margin:0;
@@ -13,14 +14,64 @@ body {
   justify-content:center;
   align-items:center;
   height:100vh;
-  overflow:hidden;
 }
+
 #app {
-  max-width:900px;
-  width:90%;
-  text-align:center;
-  position:relative;
+  width:100%;
+  max-width:1200px;
 }
+
+/* 3-Spalten Layout */
+.slide-layout {
+  display:grid;
+  grid-template-columns: 1fr 2fr 1fr;
+  align-items:center;
+}
+
+/* TEXT MITTE */
+.text-content {
+  grid-column:2;
+  text-align:center;
+}
+
+h1 {font-size:70px;}
+h2 {font-size:45px;}
+li {font-size:28px; margin:10px 0;}
+
+ul {
+  padding-left:0;
+  list-style-position:inside;
+}
+
+/* BILDER RECHTS */
+.image-container {
+  grid-column:3;
+  display:flex;
+  flex-wrap:wrap;
+  gap:10px;
+  justify-content:center;
+  align-items:center;
+}
+
+/* 🔥 ANIMATION FIX */
+.image-container img {
+  width:auto;
+  height:auto;
+  max-width:180px;
+
+  border-radius:10px;
+
+  opacity:0;
+  transform: scale(0.2) translateY(80px);
+  transition: all 0.8s cubic-bezier(.68,-0.55,.27,1.55);
+}
+
+/* großes Bild erste Seite */
+.big-image img {
+  max-width:400px;
+}
+
+/* Buttons */
 button {
   padding:10px 20px;
   font-size:18px;
@@ -28,232 +79,163 @@ button {
   border:none;
   border-radius:8px;
   cursor:pointer;
-  background-color:#fff;
-  color:#4e54c8;
-  font-weight:bold;
 }
-button:hover {background-color:#ddd;}
+
 #progress {
-  margin-top:20px;
-  font-size:18px;
-}
-.slide h1,h2,li {
-  opacity:0;
-  transform:translateX(200px) scale(0.6);
-}
-.slide-title {
-  transform:translateY(-100px) scale(0.5);
-  opacity:0;
-  text-shadow: 0 0 0px #fff;
-}
-ul {
-  text-align:left;
-  display:inline-block;
-  font-size:22px;
-  margin:0 auto;
-  padding-left:20px;
-}
-li:hover {
-  transform:scale(1.3);
-  color:#ffd700;
-  text-shadow:0 0 20px #fff;
-  transition: all 0.3s ease;
-}
-.sparkle {
-  position:absolute;
-  width:5px;
-  height:5px;
-  background:yellow;
-  border-radius:50%;
-  opacity:0.8;
-  pointer-events:none;
-  animation: sparkleAnim 1s linear forwards;
-}
-@keyframes sparkleAnim {
-  0%{transform:translate(0,0) scale(1);opacity:1;}
-  100%{transform:translate(var(--dx),var(--dy)) scale(0);opacity:0;}
-}
-.unsitbar{
-  display: none;
+  text-align:center;
+  margin-top:10px;
+  font-size:20px;
 }
+
 </style>
 </head>
+
 <body>
+
 <div id="app">
   <div id="slide-container"></div>
-  <div>
-    
-    <button id="prev" class="unsitbar">Back</button>
-    <button id="next" class="unsitbar">Next</button>
+
+  <div style="text-align:center;">
+    <button onclick="prevSlide()">Back</button>
+    <button onclick="nextSlide()">Next</button>
   </div>
-  <div id="progress" class="unsitbar"></div>
+
+  <div id="progress"></div>
 </div>
 
 <script>
+
 // --- Slides ---
 const slidesData = [
-{type:"title", content:"Cro"},
+
+{type:"title", content:"Cro", images:[
+  "img1.jpg"
+]},
+
 {type:"list", title:"My Job", items:[
   "I will work as a programmer!",
-  "I will love my job so much!",
+  "I will love my job!",
   "I will earn good money!"
+], images:[
+  "img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
 ]},
+
 {type:"list", title:"My Home", items:[
   "I will live in a modern house.",
-  "Maybe I will live in a small city.",
-  "My home will be very comfortable.",
-  "I will have my own gaming room."
+  "Maybe in a small city.",
+  "Very comfortable."
+], images:[
+  "img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
 ]},
+
 {type:"list", title:"My Family", items:[
-  "Family will be very important to me.",
-  "I will have my own family.!",
+  "Family is important.",
   "I will be married.",
   "I will have children."
-]},
-{type:"list", title:"My Free Time", items:[
-  "I will do play american football.",
-  "I will travel to countries.",
-  "I will see the world and enjoy it."
-]},
-{type:"list", title:"My favourite food and drinks", items:[
-  "My favourite food is kebap.",
-  "My favourite drink is Fanta Exotic."
-]},
-  {type:"list", title:"The End", items:[
-  "Thank you for listening.",
-  "Do you have a Question?"
+], images:[
+  "img1.jpg","img2.jpg","img3.jpg","img4.jpg","img5.jpg"
 ]}
+
 ];
 
-// --- Variables ---
 let currentSlide=0;
 const container=document.getElementById('slide-container');
 const progress=document.getElementById('progress');
-const app=document.getElementById('app');
-const bgColors=[
-  "#4e54c8,#8f94fb",
-  "#ff512f,#f09819",
-  "#00c6ff,#0072ff",
-  "#43e97b,#38f9d7",
-  "#ffafbd,#ffc3a0",
-  "#667eea,#764ba2",
-  "#667eea,#764ba2"
-];
 
-// --- Background animation ---
-function animateBackground(){
-  const c=bgColors[currentSlide%bgColors.length];
-  document.body.style.transition="background 1s ease";
-  document.body.style.background=`linear-gradient(to right,${c})`;
-}
-
-// --- Sparkles ---
-function createSparkle(x,y){
-  const s=document.createElement('div');
-  s.classList.add('sparkle');
-  s.style.left=x+'px';
-  s.style.top=y+'px';
-  s.style.setProperty('--dx',(Math.random()*200-100)+'px');
-  s.style.setProperty('--dy',(Math.random()*200-100)+'px');
-  document.body.appendChild(s);
-  setTimeout(()=>s.remove(),1000);
-}
-
-// --- Animate title ---
-function animateTitle(el){
-  el.style.opacity=0;
-  el.style.transform="translateY(-100px) scale(0.5)";
-  setTimeout(()=>{
-    el.style.transition="all 0.8s cubic-bezier(.68,-0.55,.27,1.55)";
-    el.style.opacity=1;
-    el.style.transform="translateY(0) scale(1)";
-    for(let i=0;i<15;i++){
-      createSparkle(Math.random()*window.innerWidth, Math.random()*window.innerHeight/2);
-    }
-  },200);
-}
-
-// --- Animate items ---
-function animateItems(){
-  const elems=container.querySelectorAll('li');
-  elems.forEach((el,i)=>{
-    el.style.opacity=0;
-    const dir=Math.random()>0.5?200:-200;
-    el.style.transform=`translateX(${dir}px) scale(0.7)`;
-    setTimeout(()=>{
-      el.style.transition="all 0.6s cubic-bezier(.68,-0.55,.27,1.55)";
-      el.style.opacity=1;
-      el.style.transform="translateX(0) scale(1)";
-      for(let j=0;j<5;j++){
-        createSparkle(el.getBoundingClientRect().left + Math.random()*50, el.getBoundingClientRect().top + Math.random()*20);
-      }
-    }, i*300+400);
-  });
-}
-
-// --- Render slide ---
+// --- RENDER ---
 function renderSlide(index){
+
   container.innerHTML="";
+
   const slide=slidesData[index];
+
   const div=document.createElement('div');
-  div.classList.add('slide','active');
+  div.classList.add('slide-layout');
+
+  // TEXT
+  const textDiv=document.createElement('div');
+  textDiv.classList.add('text-content');
+
   if(slide.type==="title"){
     const h1=document.createElement('h1');
     h1.textContent=slide.content;
-    h1.classList.add('slide-title');
-    div.appendChild(h1);
-    container.appendChild(div);
-    animateTitle(h1);
-  } else if(slide.type==="list"){
+    textDiv.appendChild(h1);
+  }
+
+  if(slide.type==="list"){
     const h2=document.createElement('h2');
     h2.textContent=slide.title;
-    div.appendChild(h2);
+    textDiv.appendChild(h2);
+
     const ul=document.createElement('ul');
+
     slide.items.forEach(item=>{
       const li=document.createElement('li');
       li.textContent=item;
       ul.appendChild(li);
     });
-    div.appendChild(ul);
-    container.appendChild(div);
-    animateTitle(h2);
-    animateItems();
+
+    textDiv.appendChild(ul);
   }
+
+  // BILDER
+  const imgDiv=document.createElement('div');
+  imgDiv.classList.add('image-container');
+
+  if(index===0){
+    imgDiv.classList.add('big-image');
+  }
+
+  if(slide.images){
+    slide.images.forEach((src,i)=>{
+      const img=document.createElement('img');
+      img.src=src;
+
+      imgDiv.appendChild(img);
+
+      // 🔥 FIXED ANIMATION
+      setTimeout(()=>{
+        requestAnimationFrame(()=>{
+          img.style.opacity=1;
+          img.style.transform="scale(1) translateY(0)";
+        });
+      }, i*180);
+    });
+  }
+
+  div.appendChild(textDiv);
+  div.appendChild(imgDiv);
+
+  container.appendChild(div);
+
   progress.textContent=`Slide ${index+1} / ${slidesData.length}`;
-  animateBackground();
 }
 
-// --- Buttons ---
-document.getElementById('next').addEventListener('click',()=>{
-  if(currentSlide<slidesData.length-1) currentSlide++;
-  renderSlide(currentSlide);
-});
-document.getElementById('prev').addEventListener('click',()=>{
-  if(currentSlide>0) currentSlide--;
-  renderSlide(currentSlide);
-});
+// --- NAVIGATION ---
+function nextSlide(){
+  if(currentSlide<slidesData.length-1){
+    currentSlide++;
+    renderSlide(currentSlide);
+  }
+}
 
-// --- Arrow keys ---
+function prevSlide(){
+  if(currentSlide>0){
+    currentSlide--;
+    renderSlide(currentSlide);
+  }
+}
+
+// KEYBOARD
 document.addEventListener('keydown', e=>{
-  if(e.key==="ArrowUp" && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);}
-  else if(e.key==="ArrowDown" && currentSlide>0){currentSlide--; renderSlide(currentSlide);}
-});
-document.addEventListener('keydown', e=>{
-  if(e.key==="ArrowRight" && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);}
-  else if(e.key==="ArrowLeft" && currentSlide>0){currentSlide--; renderSlide(currentSlide);}
+  if(e.key==="ArrowRight") nextSlide();
+  if(e.key==="ArrowLeft") prevSlide();
 });
 
-// --- Touch swipe ---
-let touchStartX=0;
-document.addEventListener('touchstart', e=>{touchStartX=e.changedTouches[0].screenX;});
-document.addEventListener('touchend', e=>{
-  const touchEndX=e.changedTouches[0].screenX;
-  if(touchEndX<touchStartX-50 && currentSlide<slidesData.length-1){currentSlide++; renderSlide(currentSlide);}
-  else if(touchEndX>touchStartX+50 && currentSlide>0){currentSlide--; renderSlide(currentSlide);}
-});
-
-// --- Initial render ---
+// START
 renderSlide(currentSlide);
+
 </script>
+
 </body>
-</html>
+</html>
\ No newline at end of file
