diff --git a/Devvlogs/Your Simulation/index.html b/Devvlogs/Your Simulation/index.html
new file mode 100644
index 0000000..5053d96
--- /dev/null
+++ b/Devvlogs/Your Simulation/index.html	
@@ -0,0 +1,374 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <link rel="icon" href="/img/favicon.jpg" type="image/png">
+  <meta charset="UTF-8">
+  <title>BR0TCRAFT</title>
+  <style>
+    @font-face {
+      font-family: 'Orbitron';
+      src: url('/fonts/Orbitron-Black.ttf') format('truetype');
+    }
+    @font-face {
+      font-family: 'Roboto';
+      src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: #120000;
+      color: #ffeded;
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .header {
+      background-color: #330000;
+      padding: 20px;
+      text-align: center;
+      border-bottom: 5px solid #660000;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 2.5em;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    h2 {
+      text-align: center;
+      margin-bottom: 20px;
+    }
+    .container {
+      display: flex;
+      flex-direction: column;
+      align-items: center; /* Zentriert alle Elemente innerhalb von .container */
+    }
+
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: left;
+      width: 80%;
+      margin: 20px auto;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
+      transform-style: preserve-3d;
+    }
+    .section-title {
+      font-size: 2em;
+      margin-bottom: 10px;
+      width: 100%;
+      text-align: left;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 10px;
+      width: calc(100% - 0px);
+      height: 200px;
+    }
+
+    .buttonsklein {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 46%;
+      width: 30%;
+    }
+
+    .button {
+      background-color: #660000;
+      color: #ffffff;
+      padding: 10px 0px;
+      border: none;
+      border-radius: 0px;
+      margin-bottom: 0px;
+      font-family: 'Roboto', sans-serif;
+      font-size: 1.2em;
+      text-align: center;
+      text-decoration: none;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      cursor: pointer;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      width: 100%;
+    }
+
+    .buttonklein {
+      background-color: #660000;
+      color: #ffffff;
+      padding: 10px 0px;
+      border: none;
+      border-radius: 0px;
+      margin-bottom: 0px;
+      font-family: 'Roboto', sans-serif;
+      font-size: 1.2em;
+      text-align: center;
+      text-decoration: none;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      cursor: pointer;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      width: 30%;
+    }
+
+    .button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+
+    .buttonklein:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+    .description {
+      margin-top: 20px; /* Space from the carousel */
+      padding: 15px;
+      background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+      border-radius: 10px;
+      border: 2px solid #660000; /* Red border */
+    }
+    .description p {
+      color: #ffffff; /* Light red text color */
+      font-size: 1.1em;
+      line-height: 1.6; 
+    }
+    @media (max-width: 800px) {
+      .content {
+        flex-direction: column;
+        align-items: center;
+      }
+      .buttons {
+        width: 100%;
+        margin-left: 0;
+        height: auto;
+      }
+    }
+    .carousel-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      perspective: 1200px;
+      position: relative;
+      height: 250px;
+      overflow: hidden;
+      margin-top: 20px;
+    }
+    .carousel {
+      display: flex;
+      transition: transform 0.5s ease;
+      transform-style: preserve-3d;
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+    .carousel-item {
+      width: 250px;
+      height: 100%;
+      box-sizing: border-box;
+      transition: transform 0.5s ease, opacity 0.5s ease;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      opacity: 1;
+    }
+    .carousel-item:nth-child(1) {
+      transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
+    }
+    .carousel-item:nth-child(2) {
+      transform: translateX(-50%);
+    }
+    .carousel-item:nth-child(3) {
+      transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
+    }
+
+    h5 {
+      font-size: 1.7em;
+      justify-items: left;
+    }
+    
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    display: block;
+    object-fit: cover;
+    }
+.carousel-controls {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  padding: 0; /* Remove padding */
+}
+.carousel-button {
+  background-color: #660000;
+  color: #ffffff;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5em;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  margin: 0 10px; /* Add margin */
+}
+    .carousel-button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <a href="/" style="text-decoration: none; color: inherit;">
+      <h1>BR0TCRAFT</h1>
+    </a>
+  </div>
+  <div class="container">
+
+    <h2>Gamename</h2>
+    <div class="section">
+
+
+
+
+      <p>Datum</p>
+      <div class="section-title">Update: 12.10.2024</div>
+
+
+
+
+      <p>ein Button zum Interaktieren</p>
+      <div class="content">
+        <div class="buttons">
+          <a href="/play/Tiny-Snake/snake.html" class="button">Spielen</a>
+        </div>
+      </div>
+
+
+
+      <p>ein kleiner Button zum Interaktieren</p>
+      <div class="content">
+        <div class="buttonsklein">
+          <a href="/play/Tiny-Snake/snake.html" class="buttonklein">Spielen</a>
+        </div>
+      </div>
+
+
+
+
+      <h5>Unter Überschrift:</h5>
+
+
+
+
+      <div class="description">
+        <p>Eine simple zwischennotiz</p>
+      </div>    
+      
+
+
+
+      <p>Karusell zur Bilder implementierung</p>
+      <div class="carousel-container">
+        <div class="carousel">
+          <div class="carousel-item">
+            <img src="/img/Apps/Snake/snake1.PNG" alt="App 1 Image 1"> 
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/snake.jpg" alt="App 1 Image 2">
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/Snake/Snake2.png" alt="App 1 Image 3">
+          </div>
+        </div>
+       <div class="carousel-controls">
+          <button class="carousel-button prev">&lt;</button>
+          <button class="carousel-button next">&gt;</button>
+        </div>
+      </div>
+
+    
+
+  </div>
+
+  <div class=" section">
+    <p>Noch eine Kategorie für weiteres Datum</p>
+  </div>
+  <script>
+    const carousel = document.querySelector('.carousel');
+    const items = document.querySelectorAll('.carousel-item');
+    const prevButton = document.querySelector('.prev');
+    const nextButton = document.querySelector('.next');
+
+    let currentItem = 2; // Start with the middle item
+
+    function updateCarousel() {
+      items.forEach((item, index) => {
+        if (index === currentItem - 1) {
+          // Center item
+          item.style.transform = 'translateX(-50%)';
+        } else if (index < currentItem - 1) {
+          // Items to the left
+          item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
+        } else {
+          // Items to the right
+          item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
+        }
+      });
+    }
+
+    prevButton.addEventListener('click', () => {
+      currentItem--;
+      if (currentItem < 1) {
+        currentItem = items.length;
+      }
+      updateCarousel();
+    });
+
+    nextButton.addEventListener('click', () => {
+      currentItem++;
+      if (currentItem > items.length) {
+        currentItem = 1;
+      }
+      updateCarousel();
+    });
+
+    // Initial setup
+    updateCarousel();
+  </script>
+
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/apps/Br0tkabeln/index.html b/apps/Br0tkabeln/index.html
new file mode 100644
index 0000000..735b67d
--- /dev/null
+++ b/apps/Br0tkabeln/index.html
@@ -0,0 +1,345 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <link rel="icon" href="/img/favicon.jpg" type="image/png">
+  <meta charset="UTF-8">
+  <title>BR0TCRAFT</title>
+  <style>
+    @font-face {
+      font-family: 'Orbitron';
+      src: url('/fonts/Orbitron-Black.ttf') format('truetype');
+    }
+    @font-face {
+      font-family: 'Roboto';
+      src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: #120000;
+      color: #ffb3b3;
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .header {
+      background-color: #330000;
+      padding: 20px;
+      text-align: center;
+      border-bottom: 5px solid #660000;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 2.5em;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .container {
+      padding-top: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      perspective: 1000px;
+    }
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 80%;
+      margin: 20px auto;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
+      transform-style: preserve-3d;
+    }
+    .section-title {
+      font-size: 2em;
+      margin-bottom: 10px;
+      width: 100%;
+      text-align: left;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+    }
+    .item {
+      background-color: #220000;
+      color: #ffcccc;
+      border-radius: 10px;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      width: 200px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .item-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+    }
+
+    .item-content img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 20px;
+      width: calc(100% - 220px);
+      height: 200px;
+    }
+
+    .button {
+      background-color: #660000;
+      color: #ffffff;
+      padding: 10px 0px;
+      border: none;
+      border-radius: 5px;
+      margin-bottom: 10px;
+      font-family: 'Roboto', sans-serif;
+      font-size: 1.2em;
+      text-align: center;
+      text-decoration: none;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      cursor: pointer;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      width: 100%;
+    }
+
+    .button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+    .description {
+      margin-top: 20px; /* Space from the carousel */
+      padding: 15px;
+      background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+      border-radius: 10px;
+      border: 2px solid #660000; /* Red border */
+    }
+    .description p {
+      color: #ffcccc; /* Light red text color */
+      font-size: 1.1em;
+      line-height: 1.6; 
+    }
+    @media (max-width: 800px) {
+      .content {
+        flex-direction: column;
+        align-items: center;
+      }
+      .item {
+        width: 100%;
+        height: auto;
+        margin-bottom: 20px;
+      }
+      .buttons {
+        width: 100%;
+        margin-left: 0;
+        height: auto;
+      }
+    }
+    .carousel-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      perspective: 1200px;
+      position: relative;
+      height: 250px;
+      overflow: hidden;
+      margin-top: 20px;
+    }
+    .carousel {
+      display: flex;
+      transition: transform 0.5s ease;
+      transform-style: preserve-3d;
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+    .carousel-item {
+      width: 250px;
+      height: 100%;
+      box-sizing: border-box;
+      transition: transform 0.5s ease, opacity 0.5s ease;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      opacity: 1;
+    }
+    .carousel-item:nth-child(1) {
+      transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
+    }
+    .carousel-item:nth-child(2) {
+      transform: translateX(-50%);
+    }
+    .carousel-item:nth-child(3) {
+      transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
+    }
+    
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    display: block;
+    object-fit: cover;
+    }
+.carousel-controls {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  padding: 0; /* Remove padding */
+}
+.carousel-button {
+  background-color: #660000;
+  color: #ffffff;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5em;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  margin: 0 10px; /* Add margin */
+}
+    .carousel-button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+
+  </style>
+</head>
+<body>
+  <div class="header">
+    <a href="/" style="text-decoration: none; color: inherit;">
+      <h1>BR0TCRAFT</h1>
+    </a>
+  </div>
+  <div class="container">
+    <div class="section">
+      <div class="section-title">Br0tkabeln (beta)</div>
+      <div class="content">
+        <div class="item">
+          <div class="item-content">
+            <img src="/img/Apps/Br0tkabeln.jpg" alt="App 1 Image">
+          </div>
+        </div>
+        <div class="buttons">
+          <a href="https://vocabulary.br0tcraft.de/" class="button">Starten</a>
+          <a href="#" class="button">Github-Repository</a>
+        </div>
+      </div>
+      <div class="description">
+        <p>
+          Ein simpler und hoffentlich auch einfach zu verstehender Vokabeltrainer
+        </p>
+        
+        <p>
+          Der Vokabeltrainer wurde mit Python, Html, Css, Javascript und Flask erstellt. Deine Vokabeln werden kostenlos auf dem Server gespeichert
+        </p>
+        
+        <p>
+          Es werden jediglich Benutzername, Vokabeln(English & Deutsch) und deren Level in Klartext auf dem Server gespeichert. Das Passwort wiederum wird zur Sicherheit gehasht.
+        </p>  
+        <p>
+          Es gehen keine Daten an Dritte weiter und nur ich (und der jeweilge Besitzer seiner bzw mit ihm geteilten Acountdaten) haben Zugriff auf diese oben genannten Informationen
+        </p>      
+      </div>      
+      <div class="carousel-container">
+        <div class="carousel">
+          <div class="carousel-item">
+            <img src="/img/Apps/Br0tkabeln/Vocabbild.PNG" alt="App 1 Image 1"> 
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/Br0tkabeln.jpg" alt="App 1 Image 2">
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/Br0tkabeln/Vocabbild2.PNG" alt="App 1 Image 3">
+          </div>
+        </div>
+        <div class="carousel-controls">
+          <button class="carousel-button prev">&lt;</button>
+          <button class="carousel-button next">&gt;</button>
+        </div>
+    </div>
+  </div>
+  <script>
+    const carousel = document.querySelector('.carousel');
+    const items = document.querySelectorAll('.carousel-item');
+    const prevButton = document.querySelector('.prev');
+    const nextButton = document.querySelector('.next');
+
+    let currentItem = 2; // Start with the middle item
+
+    function updateCarousel() {
+      items.forEach((item, index) => {
+        if (index === currentItem - 1) {
+          // Center item
+          item.style.transform = 'translateX(-50%)';
+        } else if (index < currentItem - 1) {
+          // Items to the left
+          item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
+        } else {
+          // Items to the right
+          item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
+        }
+      });
+    }
+
+    prevButton.addEventListener('click', () => {
+      currentItem--;
+      if (currentItem < 1) {
+        currentItem = items.length;
+      }
+      updateCarousel();
+    });
+
+    nextButton.addEventListener('click', () => {
+      currentItem++;
+      if (currentItem > items.length) {
+        currentItem = 1;
+      }
+      updateCarousel();
+    });
+
+    // Initial setup
+    updateCarousel();
+  </script>
+
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/apps/PocketCode/Sensor-datas/index.html b/apps/PocketCode/Sensor-datas/index.html
new file mode 100644
index 0000000..6e544a1
--- /dev/null
+++ b/apps/PocketCode/Sensor-datas/index.html
@@ -0,0 +1,274 @@
+!DOCTYPE html>
+<html lang="de">
+<head>
+  <link rel="icon" href="/img/favicon.jpg" type="image/png">
+  <meta charset="UTF-8">
+  <title>BR0TCRAFT</title>
+  <style>
+    @font-face {
+      font-family: 'Orbitron';
+      src: url('/fonts/Orbitron-Black.ttf') format('truetype');
+    }
+    @font-face {
+      font-family: 'Roboto';
+      src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: #120000;
+      color: #ffb3b3;
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .header {
+      background-color: #330000;
+      padding: 20px;
+      text-align: center;
+      border-bottom: 5px solid #660000;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 2.5em;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .container {
+      padding-top: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      perspective: 1000px;
+    }
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 80%;
+      margin: 20px auto;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
+      transform-style: preserve-3d;
+    }
+    .section-title {
+      font-size: 2em;
+      margin-bottom: 10px;
+      width: 100%;
+      text-align: left;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+    }
+    .item {
+      background-color: #220000;
+      color: #ffcccc;
+      border-radius: 10px;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      width: 200px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .item-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+    }
+
+    .item-content img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 20px;
+      width: calc(100% - 220px);
+      height: 200px;
+    }
+
+    .button {
+      background-color: #660000;
+      color: #ffffff;
+      padding: 10px 0px;
+      border: none;
+      border-radius: 5px;
+      margin-bottom: 10px;
+      font-family: 'Roboto', sans-serif;
+      font-size: 1.2em;
+      text-align: center;
+      text-decoration: none;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      cursor: pointer;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      width: 100%;
+    }
+
+    .button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+    .description {
+      margin-top: 20px; /* Space from the carousel */
+      padding: 15px;
+      background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+      border-radius: 10px;
+      border: 2px solid #660000; /* Red border */
+    }
+    .description p {
+      color: #ffcccc; /* Light red text color */
+      font-size: 1.1em;
+      line-height: 1.6; 
+    }
+    @media (max-width: 800px) {
+      .content {
+        flex-direction: column;
+        align-items: center;
+      }
+      .item {
+        width: 100%;
+        height: auto;
+        margin-bottom: 20px;
+      }
+      .buttons {
+        width: 100%;
+        margin-left: 0;
+        height: auto;
+      }
+    }
+    .carousel-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      perspective: 1200px;
+      position: relative;
+      height: 250px;
+      overflow: hidden;
+      margin-top: 20px;
+    }
+    .carousel {
+      display: flex;
+      transition: transform 0.5s ease;
+      transform-style: preserve-3d;
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+    .carousel-item {
+      width: 250px;
+      height: 100%;
+      box-sizing: border-box;
+      transition: transform 0.5s ease, opacity 0.5s ease;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      opacity: 1;
+    }
+    .carousel-item:nth-child(1) {
+      transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
+    }
+    .carousel-item:nth-child(2) {
+      transform: translateX(-50%);
+    }
+    .carousel-item:nth-child(3) {
+      transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
+    }
+    
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    display: block;
+    object-fit: cover;
+    }
+.carousel-controls {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  padding: 0; /* Remove padding */
+}
+.carousel-button {
+  background-color: #660000;
+  color: #ffffff;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5em;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  margin: 0 10px; /* Add margin */
+}
+    .carousel-button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <a href="/" style="text-decoration: none; color: inherit;">
+      <h1>BR0TCRAFT</h1>
+    </a>
+  </div>
+  <div class="container">
+    <div class="section">
+      <div class="section-title">Sensor data</div>
+      <div class="content">
+        <div class="item">
+          <div class="item-content">
+            <img src="/img/Apps/PocketCode/Sensor/Sensor.png" alt="App 1 Image">
+          </div>
+        </div>
+        <div class="buttons">
+          <a href="https://share.catrob.at/app/project/445cff43-cbda-401a-bae7-924ec0dc6384" class="button">Spielen/Herunterladen</a>
+        </div>
+      </div>
+      <div class="description">
+        <p>Diese App ist dazu gedacht Programmteile in sein eigenes Pocket Code Projekt einzufügen. Es hat einfach schon bestimmte komplizierte programme erstellt bei denen es evtl. sinvoll ist diese auch in sein Spiel hinzuzufügen, ohne daran ewig zu arbeiten</p>
+
+        <p>Diese App erlaubt dir herauszufinden ob und wie lange die App im Hintergrund lief. Wie lange es her ist das die App das letzte mal geöffnet wurde. Eine automatische Update erkennen für dein Spiel, um zu checken obn das game sich aktualisieren soll und zu guter letzt noch die funktion eine Liste anzuzeigen (praktisch zum debuggen von Spielen). Benutzt diese App wie ihr wollt, sie gehört ganz euch (Lizenz: CC0)</p>
+      
+        <p> Spielbar nur am Handy mit der App <a href="/enviroments/PocketCode/index.html">Pocket Code</a></p>
+      </div>
+  </div>
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/apps/PocketCode/Tower-defense/index.html b/apps/PocketCode/Tower-defense/index.html
new file mode 100644
index 0000000..1c926ff
--- /dev/null
+++ b/apps/PocketCode/Tower-defense/index.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <link rel="icon" href="/img/favicon.jpg" type="image/png">
+  <meta charset="UTF-8">
+  <title>BR0TCRAFT</title>
+  <style>
+    @font-face {
+      font-family: 'Orbitron';
+      src: url('/fonts/Orbitron-Black.ttf') format('truetype');
+    }
+    @font-face {
+      font-family: 'Roboto';
+      src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: #120000;
+      color: #ffb3b3;
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .header {
+      background-color: #330000;
+      padding: 20px;
+      text-align: center;
+      border-bottom: 5px solid #660000;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 2.5em;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .container {
+      padding-top: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      perspective: 1000px;
+    }
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 80%;
+      margin: 20px auto;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
+      transform-style: preserve-3d;
+    }
+    .section-title {
+      font-size: 2em;
+      margin-bottom: 10px;
+      width: 100%;
+      text-align: left;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+    }
+    .item {
+      background-color: #220000;
+      color: #ffcccc;
+      border-radius: 10px;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      width: 200px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .item-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+    }
+
+    .item-content img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 20px;
+      width: calc(100% - 220px);
+      height: 200px;
+    }
+
+    .button {
+      background-color: #660000;
+      color: #ffffff;
+      padding: 10px 0px;
+      border: none;
+      border-radius: 5px;
+      margin-bottom: 10px;
+      font-family: 'Roboto', sans-serif;
+      font-size: 1.2em;
+      text-align: center;
+      text-decoration: none;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      cursor: pointer;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      width: 100%;
+    }
+
+    .button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+    .description {
+      margin-top: 20px; /* Space from the carousel */
+      padding: 15px;
+      background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+      border-radius: 10px;
+      border: 2px solid #660000; /* Red border */
+    }
+    .description p {
+      color: #ffcccc; /* Light red text color */
+      font-size: 1.1em;
+      line-height: 1.6; 
+    }
+    @media (max-width: 800px) {
+      .content {
+        flex-direction: column;
+        align-items: center;
+      }
+      .item {
+        width: 100%;
+        height: auto;
+        margin-bottom: 20px;
+      }
+      .buttons {
+        width: 100%;
+        margin-left: 0;
+        height: auto;
+      }
+    }
+    .carousel-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      perspective: 1200px;
+      position: relative;
+      height: 250px;
+      overflow: hidden;
+      margin-top: 20px;
+    }
+    .carousel {
+      display: flex;
+      transition: transform 0.5s ease;
+      transform-style: preserve-3d;
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+    .carousel-item {
+      width: 250px;
+      height: 100%;
+      box-sizing: border-box;
+      transition: transform 0.5s ease, opacity 0.5s ease;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      opacity: 1;
+    }
+    .carousel-item:nth-child(1) {
+      transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
+    }
+    .carousel-item:nth-child(2) {
+      transform: translateX(-50%);
+    }
+    .carousel-item:nth-child(3) {
+      transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
+    }
+    
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    display: block;
+    object-fit: cover;
+    }
+.carousel-controls {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  padding: 0; /* Remove padding */
+}
+.carousel-button {
+  background-color: #660000;
+  color: #ffffff;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5em;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  margin: 0 10px; /* Add margin */
+}
+    .carousel-button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <a href="/" style="text-decoration: none; color: inherit;">
+      <h1>BR0TCRAFT</h1>
+    </a>
+  </div>
+  <div class="container">
+    <div class="section">
+      <div class="section-title">Tower defense (Beta)</div>
+      <div class="content">
+        <div class="item">
+          <div class="item-content">
+            <img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image">
+          </div>
+        </div>
+        <div class="buttons">
+          <a href="https://share.catrob.at/app/project/ef0b260c-a0a6-4e87-9eab-d7759de1f092" class="button">Spielen/Herunterladen</a>
+        </div>
+      </div>
+      <div class="description">
+        <p>Ein kleines unvertiges Tower-Defense-game, welches Leider überhaupt nicht mehr funktioniert. Immerhin sind die Assets recht schön geworden die kann man/irgendjemand ja noch verwenden(Lizenz: CC0). Ich hab jedenfalls momentan keine Lust daran weiter zu arbeiten </p>
+
+        <p>In dem Spiel gibt es Münzen mit denen kannst du dir Verteidigungsposten kaufen bzw Verbessern.  Geld bekommst du von den Angriffen von Gegnern die du starten kannst, welche auch immer stärker werden</p>
+      
+        <p> Spielbar nur am Handy mit der App <a href="/enviroments/PocketCode/index.html">Pocket Code</a></p>
+      </div>      
+      <div class="carousel-container">
+        <div class="carousel">
+          <div class="carousel-item">
+            <img src="/img/Apps/PocketCode/Tower/Tower1.jpg" alt="App 1 Image 1"> 
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image 2">
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/PocketCode/Tower/Tower2.jpg" alt="App 1 Image 3">
+          </div>
+        </div>
+        <div class="carousel-controls">
+          <button class="carousel-button prev">&lt;</button>
+          <button class="carousel-button next">&gt;</button>
+        </div>
+    </div>
+  </div>
+  <script>
+    const carousel = document.querySelector('.carousel');
+    const items = document.querySelectorAll('.carousel-item');
+    const prevButton = document.querySelector('.prev');
+    const nextButton = document.querySelector('.next');
+
+    let currentItem = 2; // Start with the middle item
+
+    function updateCarousel() {
+      items.forEach((item, index) => {
+        if (index === currentItem - 1) {
+          // Center item
+          item.style.transform = 'translateX(-50%)';
+        } else if (index < currentItem - 1) {
+          // Items to the left
+          item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
+        } else {
+          // Items to the right
+          item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
+        }
+      });
+    }
+
+    prevButton.addEventListener('click', () => {
+      currentItem--;
+      if (currentItem < 1) {
+        currentItem = items.length;
+      }
+      updateCarousel();
+    });
+
+    nextButton.addEventListener('click', () => {
+      currentItem++;
+      if (currentItem > items.length) {
+        currentItem = 1;
+      }
+      updateCarousel();
+    });
+
+    // Initial setup
+    updateCarousel();
+  </script>
+
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/apps/PocketCode/auto-clicker/index.html b/apps/PocketCode/auto-clicker/index.html
new file mode 100644
index 0000000..9c29946
--- /dev/null
+++ b/apps/PocketCode/auto-clicker/index.html
@@ -0,0 +1,334 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <link rel="icon" href="/img/favicon.jpg" type="image/png">
+  <meta charset="UTF-8">
+  <title>BR0TCRAFT</title>
+  <style>
+    @font-face {
+      font-family: 'Orbitron';
+      src: url('/fonts/Orbitron-Black.ttf') format('truetype');
+    }
+    @font-face {
+      font-family: 'Roboto';
+      src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: #120000;
+      color: #ffb3b3;
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .header {
+      background-color: #330000;
+      padding: 20px;
+      text-align: center;
+      border-bottom: 5px solid #660000;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 2.5em;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .container {
+      padding-top: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      perspective: 1000px;
+    }
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 80%;
+      margin: 20px auto;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
+      transform-style: preserve-3d;
+    }
+    .section-title {
+      font-size: 2em;
+      margin-bottom: 10px;
+      width: 100%;
+      text-align: left;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+    }
+    .item {
+      background-color: #220000;
+      color: #ffcccc;
+      border-radius: 10px;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      width: 200px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .item-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+    }
+
+    .item-content img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 20px;
+      width: calc(100% - 220px);
+      height: 200px;
+    }
+
+    .button {
+      background-color: #660000;
+      color: #ffffff;
+      padding: 10px 0px;
+      border: none;
+      border-radius: 5px;
+      margin-bottom: 10px;
+      font-family: 'Roboto', sans-serif;
+      font-size: 1.2em;
+      text-align: center;
+      text-decoration: none;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      cursor: pointer;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      width: 100%;
+    }
+
+    .button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+    .description {
+      margin-top: 20px; /* Space from the carousel */
+      padding: 15px;
+      background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+      border-radius: 10px;
+      border: 2px solid #660000; /* Red border */
+    }
+    .description p {
+      color: #ffcccc; /* Light red text color */
+      font-size: 1.1em;
+      line-height: 1.6; 
+    }
+    @media (max-width: 800px) {
+      .content {
+        flex-direction: column;
+        align-items: center;
+      }
+      .item {
+        width: 100%;
+        height: auto;
+        margin-bottom: 20px;
+      }
+      .buttons {
+        width: 100%;
+        margin-left: 0;
+        height: auto;
+      }
+    }
+    .carousel-container {
+      width: 100%;
+      display: flex;
+      justify-content: center;
+      padding: 20px;
+      perspective: 1200px;
+      position: relative;
+      height: 250px;
+      overflow: hidden;
+      margin-top: 20px;
+    }
+    .carousel {
+      display: flex;
+      transition: transform 0.5s ease;
+      transform-style: preserve-3d;
+      width: 100%;
+      height: 100%;
+      position: relative;
+    }
+    .carousel-item {
+      width: 250px;
+      height: 100%;
+      box-sizing: border-box;
+      transition: transform 0.5s ease, opacity 0.5s ease;
+      position: absolute;
+      top: 0;
+      left: 50%;
+      opacity: 1;
+    }
+    .carousel-item:nth-child(1) {
+      transform: translateX(-150%) translateY(20px) scale(0.8) rotateY(-30deg);
+    }
+    .carousel-item:nth-child(2) {
+      transform: translateX(-50%);
+    }
+    .carousel-item:nth-child(3) {
+      transform: translateX(50%) translateY(20px) scale(0.8) rotateY(30deg);
+    }
+    
+.carousel-item img {
+    width: 100%;
+    height: 100%;
+    border-radius: 10px;
+    display: block;
+    object-fit: cover;
+    }
+.carousel-controls {
+  display: flex;
+  justify-content: space-between;
+  position: absolute;
+  top: 50%;
+  left: 0;
+  transform: translateY(-50%);
+  width: 100%;
+  padding: 0; /* Remove padding */
+}
+.carousel-button {
+  background-color: #660000;
+  color: #ffffff;
+  border: none;
+  border-radius: 50%;
+  width: 40px;
+  height: 40px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  font-size: 1.5em;
+  cursor: pointer;
+  transition: background-color 0.2s, box-shadow 0.2s;
+  margin: 0 10px; /* Add margin */
+}
+    .carousel-button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <a href="/" style="text-decoration: none; color: inherit;">
+      <h1>BR0TCRAFT</h1>
+    </a>
+  </div>
+  <div class="container">
+    <div class="section">
+      <div class="section-title">auto-clicker</div>
+      <div class="content">
+        <div class="item">
+          <div class="item-content">
+            <img src="/img/Apps/PocketCode/auto-clicker/auto-clicker.png" alt="App 1 Image">
+          </div>
+        </div>
+        <div class="buttons">
+          <a href="https://share.catrob.at/app/project/13f85a59-ae25-416f-a9b8-33ad1ab3a430" class="button">Spielen/Herunterladen</a>
+        </div>
+      </div>
+      <div class="description">
+        <p>Ein meiner Meinung nach sehr einfach zu bedienender auto-clicker</p>
+
+        <p>Es ist an sich ganz einfach. Die App besteht nur aus einem ObjeKt, dieses Objekt kopierst du dir und fügst es in das Spiel deiner Wahl ein und schon hast du einen automatischen Klicker immer an deiner Seite</p>
+      
+        <p> Spielbar nur am Handy mit der App <a href="/enviroments/PocketCode/index.html">Pocket Code</a></p>
+      </div>      
+      <div class="carousel-container">
+        <div class="carousel">
+          <div class="carousel-item">
+            <img src="/img/Apps/PocketCode/auto-clicker/clicker1.jpg" alt="App 1 Image 1"> 
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/PocketCode/auto-clicker/auto-clicker.png" alt="App 1 Image 2">
+          </div>
+          <div class="carousel-item">
+            <img src="/img/Apps/PocketCode/auto-clicker/clicker2.jpg" alt="App 1 Image 3">
+          </div>
+        </div>
+        <div class="carousel-controls">
+          <button class="carousel-button prev">&lt;</button>
+          <button class="carousel-button next">&gt;</button>
+        </div>
+    </div>
+  </div>
+  <script>
+    const carousel = document.querySelector('.carousel');
+    const items = document.querySelectorAll('.carousel-item');
+    const prevButton = document.querySelector('.prev');
+    const nextButton = document.querySelector('.next');
+
+    let currentItem = 2; // Start with the middle item
+
+    function updateCarousel() {
+      items.forEach((item, index) => {
+        if (index === currentItem - 1) {
+          // Center item
+          item.style.transform = 'translateX(-50%)';
+        } else if (index < currentItem - 1) {
+          // Items to the left
+          item.style.transform = `translateX(${-150 - (currentItem - index - 2) * 100}%) translateY(20px) scale(0.8) rotateY(-30deg)`;
+        } else {
+          // Items to the right
+          item.style.transform = `translateX(${50 + (index - currentItem) * 100}%) translateY(20px) scale(0.8) rotateY(30deg)`;
+        }
+      });
+    }
+
+    prevButton.addEventListener('click', () => {
+      currentItem--;
+      if (currentItem < 1) {
+        currentItem = items.length;
+      }
+      updateCarousel();
+    });
+
+    nextButton.addEventListener('click', () => {
+      currentItem++;
+      if (currentItem > items.length) {
+        currentItem = 1;
+      }
+      updateCarousel();
+    });
+
+    // Initial setup
+    updateCarousel();
+  </script>
+
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/apps/Tiny-Snake/index.html b/apps/Tiny-Snake/index.html
index c46faac..8c46c0e 100644
--- a/apps/Tiny-Snake/index.html
+++ b/apps/Tiny-Snake/index.html
@@ -252,7 +252,7 @@
           </div>
         </div>
         <div class="buttons">
-          <a href="#" class="button">Spielen</a>
+          <a href="/play/Tiny-Snake/snake.html" class="button">Spielen</a>
           <a href="#" class="button">Herunterladen</a>
           <a href="#" class="button">Github-Repository</a>
         </div>
diff --git a/enviroments/PocketCode/index.html b/enviroments/PocketCode/index.html
new file mode 100644
index 0000000..c2a30c7
--- /dev/null
+++ b/enviroments/PocketCode/index.html
@@ -0,0 +1,311 @@
+<!DOCTYPE html>
+<html lang="de">
+<head>
+  <link rel="icon" href="/img/favicon.jpg" type="image/png">
+  <meta charset="UTF-8">
+  <title>BR0TCRAFT</title>
+  <style>
+    @font-face {
+      font-family: 'Orbitron';
+      src: url('/fonts/Orbitron-Black.ttf') format('truetype');
+    }
+    @font-face {
+      font-family: 'Roboto';
+      src: url('/fonts/Roboto-Regular.ttf') format('truetype');
+    }
+    body {
+      font-family: 'Roboto', sans-serif;
+      background-color: #120000;
+      color: #ffb3b3;
+      margin: 0;
+      overflow-x: hidden;
+    }
+    .header {
+      background-color: #330000;
+      padding: 20px;
+      text-align: center;
+      border-bottom: 5px solid #660000;
+      position: fixed;
+      top: 0;
+      width: 100%;
+      z-index: 10;
+    }
+    .header h1 {
+      margin: 0;
+      font-size: 2.5em;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .container {
+      padding-top: 80px;
+      display: flex;
+      flex-wrap: wrap;
+      justify-content: center;
+      perspective: 1000px;
+    }
+    .section {
+      display: flex;
+      flex-direction: column;
+      justify-content: flex-start;
+      align-items: center;
+      width: 80%;
+      margin: 20px auto;
+      background-color: rgba(0, 0, 0, 0.2);
+      border-radius: 10px;
+      padding: 20px;
+      box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
+      transform-style: preserve-3d;
+    }
+    .section-title {
+      font-size: 2em;
+      margin-bottom: 10px;
+      width: 100%;
+      text-align: left;
+      font-family: 'Orbitron', sans-serif;
+      color: #ffffff;
+      text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+    }
+    .content {
+      display: flex;
+      align-items: center;
+      width: 100%;
+      justify-content: space-between;
+    }
+    .item {
+      background-color: #220000;
+      color: #ffcccc;
+      border-radius: 10px;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      width: 200px;
+      height: 200px;
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      position: relative;
+    }
+    .item-content {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      width: 100%;
+      height: 100%;
+      padding: 10px;
+    }
+
+    .item-content img {
+      max-width: 100%;
+      max-height: 100%;
+      object-fit: cover;
+      border-radius: 10px;
+    }
+
+    .buttons {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: flex-start;
+      margin-left: 20px;
+      width: calc(100% - 220px);
+      height: 200px;
+    }
+
+    .button {
+      background-color: #660000;
+      color: #ffffff;
+      padding: 10px 0px;
+      border: none;
+      border-radius: 5px;
+      margin-bottom: 10px;
+      font-family: 'Roboto', sans-serif;
+      font-size: 1.2em;
+      text-align: center;
+      text-decoration: none;
+      box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+      cursor: pointer;
+      transition: background-color 0.2s, box-shadow 0.2s;
+      width: 100%;
+    }
+
+    .button:hover {
+      background-color: #ff6666;
+      box-shadow: 0px 4px 10px rgba(255, 0, 0, 0.4);
+    }
+    .description {
+      margin-top: 20px; /* Space from the carousel */
+      padding: 15px;
+      background-color: rgba(0, 0, 0, 0.3); /* Semi-transparent background */
+      border-radius: 10px;
+      border: 2px solid #660000; /* Red border */
+    }
+    .description p {
+      color: #ffcccc; /* Light red text color */
+      font-size: 1.1em;
+      line-height: 1.6; 
+    }
+    .item-content {
+    position: relative;
+    width: 100%;
+    height: 100%;
+    padding: 10px; /* Spacing around the content */
+  }
+  
+  .item-content2 img {
+    position: absolute;
+    top: 0;
+    left: 25%;
+    width: 50%; 
+    margin: auto;
+    height: auto;
+    max-height: calc(100% - 0px); /* Adjust image height here */
+    top: 5px;
+    object-fit: contain;/* Cover the area and maintain aspect ratio */
+    border-radius: 10px; /* Round all corners of the image */
+  }
+    .devvlog-item {
+    height: 200px;
+  }
+  .item-text {
+    position: absolute;
+    bottom: 10px; /* Space from the bottom */
+    left: 0;
+    width: 100%;
+    text-align: center;
+    font-size: 1.8em;
+  }
+  
+  .item:hover {
+    box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.5);
+  }
+  .item::before {
+    content: '';
+    position: absolute;
+    top: -1px; 
+    left: -1px; 
+    right: -1px; 
+    bottom: -1px; 
+    border: 1px solid #ff6666; 
+    border-radius: 11px;
+    opacity: 0;
+    transition: opacity 0.2s;
+  }
+  .item:hover::before {
+    opacity: 1;
+  }
+  .item2 {
+    background-color: #220000;
+    color: #ffcccc;
+    border-radius: 10px;
+    padding: 20px;
+    margin: 10px;
+    box-shadow: 0px 2px 5px rgba(255, 0, 0, 0.2);
+    transition: transform 0.2s, box-shadow 0.2s;
+    width: 200px;
+    height: 200px;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    position: relative;
+  }
+  .section2 {
+    display: flex;
+    flex-wrap: wrap;
+    justify-content: center;
+    width: 80%;
+    margin: 20px auto;
+    background-color: rgba(0, 0, 0, 0.2);
+    border-radius: 10px;
+    padding: 20px;
+    box-shadow: 0px 5px 15px rgba(255, 0, 0, 0.3);
+    transform-style: preserve-3d;
+  }
+  .section-title2 {
+    font-size: 2em;
+    margin-bottom: 10px;
+    width: 100%;
+    text-align: center;
+    font-family: 'Orbitron', sans-serif;
+    color: #ff6666;
+    text-shadow: 0px 2px 5px rgba(255, 0, 0, 0.5);
+  }
+    @media (max-width: 800px) {
+      .content {
+        flex-direction: column;
+        align-items: center;
+      }
+      .item {
+        width: 100%;
+        height: auto;
+        margin-bottom: 20px;
+      }
+      .buttons {
+        width: 100%;
+        margin-left: 0;
+        height: auto;
+      }
+    }
+  </style>
+</head>
+<body>
+  <div class="header">
+    <a href="/" style="text-decoration: none; color: inherit;">
+      <h1>BR0TCRAFT</h1>
+    </a>
+  </div>
+  <div class="container">
+    <div class="section">
+      <div class="section-title">Pocket Code</div>
+      <div class="content">
+        <div class="item">
+          <div class="item-content">
+            <img src="/img/developmentEnvironment/PocketCodetiny.png" alt="App 1 Image">
+          </div>
+        </div>
+        <div class="buttons">
+          <a href="https://play.google.com/store/apps/details?id=org.catrobat.catroid&hl=de&pli=1" class="button">Herunterladen</a>
+          <a href="https://share.catrob.at/app/user/3a747897-7a83-11eb-a92d-005056a36f47" class="button">Mein Catrobat-Acount</a>
+        </div>
+      </div>
+      <div class="description">
+        <p>Pocket Code ist eine von Catroabt programmierte Entwicklungsumgebung fürs Handy. Darin lassen sich Spiele fürs Handy am Handy entwickeln. Ich selber habe dort auch schon das ein oder andere gemacht, von denen auch ein paar Apps online zu finden sind.</p>
+      </div>
+  </div>
+
+  <div class="section2">
+    <div class="section-title2">Meine Apps</div>
+    <a href="/" class="item devvlog-item">
+      <div class="item-content2">
+        <img src="img/Apps/Earthlarge.png" alt="App 1 Image">
+        <div class="item-text">Ki-Chatbot</div>
+      </div>
+    </a>
+    <a href="/apps/PocketCode/Tower-defense/index.html" class="item devvlog-item">
+      <div class="item-content2">
+        <img src="/img/Apps/PocketCode/Tower/Tower.png" alt="App 1 Image">
+        <div class="item-text">Tower defense (Beta)</div>
+      </div>
+    </a>
+    <a href="/apps/PocketCode/auto-clicker/index.html" class="item devvlog-item">
+      <div class="item-content2">
+        <img src="/img/Apps/PocketCode/auto-clicker/auto-clicker.png" alt="App 1 Image">
+        <div class="item-text">auto-clicker</div>
+      </div>
+      <a href="/apps/PocketCode/Sensor-datas/index.html" class="item devvlog-item">
+        <div class="item-content2">
+          <img src="/img/Apps/PocketCode/Sensor/Sensor.png" alt="App 1 Image">
+          <div class="item-text">Sensor Datas</div>
+        </div>
+      </a>
+    </a>
+  </div>
+
+
+</body>
+</html>
+
+
+
+
+
+
+
diff --git a/img/Apps/Br0tkabeln.jpg b/img/Apps/Br0tkabeln.jpg
new file mode 100644
index 0000000..2b4c342
Binary files /dev/null and b/img/Apps/Br0tkabeln.jpg differ
diff --git a/img/Apps/Br0tkabeln/Vocabbild.PNG b/img/Apps/Br0tkabeln/Vocabbild.PNG
new file mode 100644
index 0000000..107fc26
Binary files /dev/null and b/img/Apps/Br0tkabeln/Vocabbild.PNG differ
diff --git a/img/Apps/Br0tkabeln/Vocabbild2.PNG b/img/Apps/Br0tkabeln/Vocabbild2.PNG
new file mode 100644
index 0000000..8bd58c9
Binary files /dev/null and b/img/Apps/Br0tkabeln/Vocabbild2.PNG differ
diff --git a/img/Apps/Br0tkabelnlarge.png b/img/Apps/Br0tkabelnlarge.png
new file mode 100644
index 0000000..4238c7e
Binary files /dev/null and b/img/Apps/Br0tkabelnlarge.png differ
diff --git a/img/Apps/Earth.jpg b/img/Apps/Earth.jpg
new file mode 100644
index 0000000..b4b05f0
Binary files /dev/null and b/img/Apps/Earth.jpg differ
diff --git a/img/Apps/Earthlarge.png b/img/Apps/Earthlarge.png
new file mode 100644
index 0000000..7b9cb2c
Binary files /dev/null and b/img/Apps/Earthlarge.png differ
diff --git a/img/Apps/PocketCode/Sensor/Sensor.png b/img/Apps/PocketCode/Sensor/Sensor.png
new file mode 100644
index 0000000..fb08ea7
Binary files /dev/null and b/img/Apps/PocketCode/Sensor/Sensor.png differ
diff --git a/img/Apps/PocketCode/Tower/Tower.png b/img/Apps/PocketCode/Tower/Tower.png
new file mode 100644
index 0000000..a765182
Binary files /dev/null and b/img/Apps/PocketCode/Tower/Tower.png differ
diff --git a/img/Apps/PocketCode/Tower/Tower1.jpg b/img/Apps/PocketCode/Tower/Tower1.jpg
new file mode 100644
index 0000000..bb11dbf
Binary files /dev/null and b/img/Apps/PocketCode/Tower/Tower1.jpg differ
diff --git a/img/Apps/PocketCode/Tower/Tower2.jpg b/img/Apps/PocketCode/Tower/Tower2.jpg
new file mode 100644
index 0000000..075d76c
Binary files /dev/null and b/img/Apps/PocketCode/Tower/Tower2.jpg differ
diff --git a/img/Apps/PocketCode/auto-clicker/auto-clicker.png b/img/Apps/PocketCode/auto-clicker/auto-clicker.png
new file mode 100644
index 0000000..055ff23
Binary files /dev/null and b/img/Apps/PocketCode/auto-clicker/auto-clicker.png differ
diff --git a/img/Apps/PocketCode/auto-clicker/clicker1.jpg b/img/Apps/PocketCode/auto-clicker/clicker1.jpg
new file mode 100644
index 0000000..c2ca014
Binary files /dev/null and b/img/Apps/PocketCode/auto-clicker/clicker1.jpg differ
diff --git a/img/Apps/PocketCode/auto-clicker/clicker2.jpg b/img/Apps/PocketCode/auto-clicker/clicker2.jpg
new file mode 100644
index 0000000..265f118
Binary files /dev/null and b/img/Apps/PocketCode/auto-clicker/clicker2.jpg differ
diff --git a/img/developmentEnvironment/PocketCode.jpeg b/img/developmentEnvironment/PocketCode.jpeg
new file mode 100644
index 0000000..82cb8ea
Binary files /dev/null and b/img/developmentEnvironment/PocketCode.jpeg differ
diff --git a/img/developmentEnvironment/PocketCodetiny.png b/img/developmentEnvironment/PocketCodetiny.png
new file mode 100644
index 0000000..8cd033c
Binary files /dev/null and b/img/developmentEnvironment/PocketCodetiny.png differ
diff --git a/index.html b/index.html
index 44aab5e..ee87ec5 100644
--- a/index.html
+++ b/index.html
@@ -33,21 +33,57 @@
         <div class="item-text">Tiny Snake</div>
       </div>
     </a>
+    <a href="apps/Br0tkabeln/index.html" class="item">
+      <div class="item-content">
+        <img src="img/Apps/Br0tkabelnlarge.png" alt="App 1 Image">
+        <div class="item-text">Br0tkabeln</div>
+      </div>
+    </a>
  </div>
  <div class="section">
-  <div class="section-title">Skripts</div>
-  <a href="link-to-script1" class="item devvlog-item">Skript1</a>
-  <a href="link-to-script2" class="item devvlog-item">Skript2</a>
+  <div class="section-title">Entwicklungsumgebungen</div>
+  <a href="/enviroments/PocketCode/index.html" class="item devvlog-item">
+    <div class="item-content">
+      <img src="img/developmentEnvironment/PocketCode.jpeg" alt="App 1 Image">
+      <div class="item-text">Pocket Code</div>
+    </div>
+  </a>
+  <a href="" class="item devvlog-item">
+    <div class="item-content">
+      <img src="img/Background3.jpg" alt="App 1 Image">
+      <div class="item-text">bald kommt mehr</div>
+    </div>
+  </a>
 </div>
   <div class="section">
     <div class="section-title">Devvlogs</div>
-    <a href="link-to-devvlog1" class="item devvlog-item">Devvlog 1</a>
-    <a href="link-to-devvlog2" class="item devvlog-item">Devvlog 2</a>
+    <a href="apps/Tiny-Snake/index.html" class="item devvlog-item">
+      <div class="item-content">
+        <img src="img/Apps/Earthlarge.png" alt="App 1 Image">
+        <div class="item-text">The Simulation</div>
+      </div>
+    </a>
+    <a href="" class="item devvlog-item">
+      <div class="item-content">
+        <img src="img/Background3.jpg" alt="App 1 Image">
+        <div class="item-text">Bald kommt mehr</div>
+      </div>
+    </a>
   </div>
   <div class="section">
     <div class="section-title">Anleitungen</div>
-    <a href="link-to-anleitung1" class="item anleitung-item">Anleitung 1</a>
-    <a href="link-to-anleitung2" class="item anleitung-item">Anleitung 2</a>
+    <a href="/" class="item anleitung-item">
+      <div class="item-content">
+        <img src="/img/developmentEnvironment/PocketCode.jpeg" alt="App 1 Image">
+        <div class="item-text">Erstes Handy game (Pocket Code) kommt bald</div>
+      </div>
+    </a>
+    <a href="/" class="item anleitung-item">
+      <div class="item-content">
+        <img src="/img/Background3.jpg" alt="App 1 Image">
+        <div class="item-text">mehr kommt bald ... irgendwann ... vielleicht ...</div>
+      </div>
+    </a>
   </div>
 </div>
 <script>
diff --git a/style.css b/style.css
index 987a26f..7269b2b 100644
--- a/style.css
+++ b/style.css
@@ -118,7 +118,7 @@
     left: 0;
     width: 100%;
     text-align: center;
-    font-size: 2em;
+    font-size: 1.8em;
   }
   
   .item:hover {
