diff --git a/templates/connections.html b/templates/connections.html
index c1763c5..ad0e15d 100644
--- a/templates/connections.html
+++ b/templates/connections.html
@@ -1,12 +1,17 @@
 <!DOCTYPE html>
 <html lang="en">
   <head>
-    <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, initial-scale=1">
+    <meta charset="UTF-8" />
+    <meta name="viewport" content="width=device-width, initial-scale=1" />
     <title>Recent Connections</title>
-    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css" rel="stylesheet">
+    <link
+      href="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/css/bootstrap.min.css"
+      rel="stylesheet"
+    />
     <style>
-      html, body {
+      /* Basic layout */
+      html,
+      body {
         height: 100%;
         margin: 0;
         padding: 0;
@@ -20,6 +25,39 @@
         flex: 1;
         overflow-y: auto;
       }
+      /* Animate the table body moving down via transform */
+      #connectionsTableBody {
+        transition: transform 0.5s ease-out;
+        transform: translateY(0);
+      }
+      /* Advanced animation for new rows */
+      @keyframes slideIn {
+        0% {
+          opacity: 0;
+          transform: scale(0.8);
+        }
+        100% {
+          opacity: 1;
+          transform: scale(1);
+        }
+      }
+      .slide-in {
+        animation: slideIn 0.5s ease-out;
+      }
+      /* Animation for disappearing rows */
+      @keyframes slideOut {
+        0% {
+          opacity: 1;
+          transform: scale(1);
+        }
+        100% {
+          opacity: 0;
+          transform: scale(0.1);
+        }
+      }
+      .slide-out {
+        animation: slideOut 0.5s ease-in forwards;
+      }
     </style>
   </head>
   <body>
@@ -29,10 +67,18 @@
         <a class="navbar-brand" href="#">Downloads der letzten 10 Minuten</a>
         <div class="navbar-collapse" id="navbarNav">
           <ul class="navbar-nav ms-auto">
-            <li class="nav-item"><a href="{{ url_for('index') }}" class="nav-link">App</a></li>
-            <li class="nav-item"><a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a></li>
-            <li class="nav-item"><a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a></li>
-            <li class="nav-item"><a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung</a></li>
+            <li class="nav-item">
+              <a href="{{ url_for('index') }}" class="nav-link">App</a>
+            </li>
+            <li class="nav-item">
+              <a href="{{ url_for('mylinks') }}" class="nav-link">Meine Links</a>
+            </li>
+            <li class="nav-item">
+              <a href="{{ url_for('connections') }}" class="nav-link">Verbindungen</a>
+            </li>
+            <li class="nav-item">
+              <a href="{{ url_for('dashboard') }}" class="nav-link">Auswertung</a>
+            </li>
           </ul>
         </div>
       </div>
@@ -47,13 +93,13 @@
               <th>Location</th>
               <th>User Agent</th>
               <th>File Path</th>
-              <td>File Size</td>
-              <td>MIME-Typ</td>
-              <td>Cached</td>
+              <th>File Size</th>
+              <th>MIME-Typ</th>
+              <th>Cached</th>
             </tr>
           </thead>
           <tbody id="connectionsTableBody">
-            <!-- Rows will be dynamically inserted here -->
+            <!-- Rows are dynamically inserted here -->
           </tbody>
         </table>
       </div>
@@ -64,28 +110,106 @@
     <script>
       const socket = io();
 
-      // Request initial data immediately on connection
-      socket.on('connect', () => {
-        socket.emit('request_initial_data');
+      // Request initial data once connected.
+      socket.on("connect", () => {
+        socket.emit("request_initial_data");
       });
 
-      socket.on('recent_connections', function(data) {
-        const tbody = document.getElementById('connectionsTableBody');
-        tbody.innerHTML = ''; // Clear previous content
+      // Helper: Create a table row.
+      // When applyAnimation is true, the row uses the slide-in animation.
+      function createRow(record, applyAnimation = true) {
+        const row = document.createElement("tr");
+        row.setAttribute("data-timestamp", record.timestamp);
+        if (applyAnimation) {
+          row.classList.add("slide-in");
+          row.addEventListener("animationend", () =>
+            row.classList.remove("slide-in"), { once: true });
+        }
+        row.innerHTML = `
+          <td>${record.timestamp}</td>
+          <td>${record.location}</td>
+          <td>${record.user_agent}</td>
+          <td>${record.full_path}</td>
+          <td>${record.filesize}</td>
+          <td>${record.mime_typ}</td>
+          <td>${record.cached}</td>
+        `;
+        return row;
+      }
 
-        data.forEach(record => {
-          const row = document.createElement('tr');
-          row.innerHTML = `
-            <td>${record.timestamp}</td>
-            <td>${record.location}</td>
-            <td>${record.user_agent}</td>
-            <td>${record.full_path}</td>
-            <td>${record.filesize}</td>
-            <td>${record.mime_typ}</td>
-            <td>${record.cached}</td>
-          `;
-          tbody.appendChild(row);
+      // Update the table body with the new data.
+      // New rows animate in; existing rows simply update.
+      function updateTable(data) {
+        const tbody = document.getElementById("connectionsTableBody");
+        // Map current rows by their timestamp.
+        const currentRows = {};
+        Array.from(tbody.children).forEach(row => {
+          currentRows[row.getAttribute("data-timestamp")] = row;
         });
+        const fragment = document.createDocumentFragment();
+        data.forEach(record => {
+          let row;
+          if (currentRows[record.timestamp]) {
+            // Existing row: update content without new animation.
+            row = currentRows[record.timestamp];
+            row.innerHTML = `
+              <td>${record.timestamp}</td>
+              <td>${record.location}</td>
+              <td>${record.user_agent}</td>
+              <td>${record.full_path}</td>
+              <td>${record.filesize}</td>
+              <td>${record.mime_typ}</td>
+              <td>${record.cached}</td>
+            `;
+            row.classList.remove("slide-out");
+          } else {
+            // New row: create with slide-in animation.
+            row = createRow(record, true);
+          }
+          fragment.appendChild(row);
+        });
+        tbody.innerHTML = "";
+        tbody.appendChild(fragment);
+      }
+
+      // Animate the table body moving down by the height of a new row before updating.
+      function animateTableWithNewRow(data) {
+        const tbody = document.getElementById("connectionsTableBody");
+        // Identify any new records (by comparing timestamps).
+        const currentTimestamps = new Set(
+          Array.from(tbody.children).map(row => row.getAttribute("data-timestamp"))
+        );
+        const newRecords = data.filter(record => !currentTimestamps.has(record.timestamp));
+
+        if (newRecords.length > 0) {
+          // Create a temporary row to measure its height.
+          const tempRow = createRow(newRecords[0], false);
+          tempRow.style.visibility = "hidden";
+          tbody.appendChild(tempRow);
+          const newRowHeight = tempRow.getBoundingClientRect().height;
+          tempRow.remove();
+
+          // Animate the tbody moving down by the measured height.
+          tbody.style.transform = `translateY(${newRowHeight}px)`;
+
+          // After the transition, update the table and reset the transform.
+          setTimeout(() => {
+            updateTable(data);
+            // Remove the transform instantly.
+            tbody.style.transition = "none";
+            tbody.style.transform = "translateY(0)";
+            // Force reflow to apply the style immediately.
+            void tbody.offsetWidth;
+            tbody.style.transition = "transform 0.5s ease-out";
+          }, 500);
+        } else {
+          updateTable(data);
+        }
+      }
+
+      // Listen for incoming connection data from the server.
+      socket.on("recent_connections", function(data) {
+        animateTableWithNewRow(data);
       });
     </script>
     <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.0.2/dist/js/bootstrap.bundle.min.js"></script>
