diff --git a/icons/ubuntu.svg b/icons/ubuntu.svg
new file mode 100644
index 0000000..41d3d82
--- /dev/null
+++ b/icons/ubuntu.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 32 32" preserveAspectRatio="xMidYMid"><path d="M32 16c0 8.836-7.164 16-16 16S0 24.836 0 16 7.164 0 16 0s16 7.164 16 16z" fill="#dd4814"/><path d="M5.12 13.864c-1.18 0-2.137.956-2.137 2.137s.956 2.136 2.137 2.136S7.257 17.18 7.257 16 6.3 13.864 5.12 13.864zm15.252 9.71c-1.022.6-1.372 1.896-.782 2.917s1.895 1.372 2.917.782 1.372-1.895.782-2.917-1.896-1.37-2.917-.782zM9.76 16a6.23 6.23 0 0 1 2.653-5.105L10.852 8.28a9.3 9.3 0 0 0-3.838 5.394C7.69 14.224 8.12 15.06 8.12 16s-.432 1.776-1.106 2.326c.577 2.237 1.968 4.146 3.838 5.395l1.562-2.616A6.23 6.23 0 0 1 9.761 16zM16 9.76a6.24 6.24 0 0 1 6.215 5.687l3.044-.045a9.25 9.25 0 0 0-2.757-6.019c-.812.307-1.75.26-2.56-.208a2.99 2.99 0 0 1-1.461-2.118C17.7 6.84 16.86 6.72 16 6.72c-1.477 0-2.873.347-4.113.96l1.484 2.66c.8-.372 1.69-.58 2.628-.58zm0 12.48c-.94 0-1.83-.21-2.628-.58l-1.484 2.66c1.24.614 2.636.96 4.113.96a9.28 9.28 0 0 0 2.479-.338c.14-.858.65-1.648 1.46-2.118s1.75-.514 2.56-.207a9.25 9.25 0 0 0 2.757-6.019l-3.045-.045A6.24 6.24 0 0 1 16 22.24zm4.372-13.813c1.022.6 2.328.24 2.917-.78s.24-2.328-.78-2.918-2.328-.24-2.918.783-.24 2.327.782 2.917z" fill="#fff"/></svg>
\ No newline at end of file
diff --git a/index.php b/index.php
index 8e9581e..0daf7e2 100644
--- a/index.php
+++ b/index.php
@@ -26,6 +26,14 @@ $projects = [
             "color" => "#0082c9",
             "external" => true
         ],
+        [
+            "title" => "Server Dashboard",
+            "description" => "Server-Verwaltung mit Cockpit",
+            "url" => "https://fabianschieder.com:9090",
+            "logo" => "/icons/ubuntu.svg",
+            "color" => "#E95420",
+            "external" => true
+        ],
     ],
     "schule" => [
         [
@@ -134,6 +142,22 @@ $projects = [
     <p>&copy; <?= date('Y') ?> Fabian Schieder — Alle Rechte vorbehalten.</p>
 </footer>
 
+<script>
+document.querySelectorAll('.card').forEach(card => {
+    card.addEventListener('click', function (e) {
+        const circle = document.createElement('span');
+        const diameter = Math.max(this.clientWidth, this.clientHeight);
+        const rect = this.getBoundingClientRect();
+        circle.classList.add('ripple');
+        circle.style.width = circle.style.height = diameter + 'px';
+        circle.style.left = (e.clientX - rect.left - diameter / 2) + 'px';
+        circle.style.top  = (e.clientY - rect.top  - diameter / 2) + 'px';
+        this.querySelector('.ripple')?.remove();
+        this.appendChild(circle);
+    });
+});
+</script>
+
 </body>
 </html>
 
diff --git a/style.css b/style.css
index f65f170..cfb1700 100644
--- a/style.css
+++ b/style.css
@@ -34,21 +34,41 @@ body {
 }
 
 /* ===== BACKGROUND GLOW ===== */
+@keyframes bgShift {
+    0%   { opacity: 1; transform: scale(1) translate(0, 0); }
+    33%  { opacity: 0.85; transform: scale(1.08) translate(2%, 3%); }
+    66%  { opacity: 0.9; transform: scale(0.97) translate(-3%, -2%); }
+    100% { opacity: 1; transform: scale(1) translate(0, 0); }
+}
+
 .background-blur {
     position: fixed;
     inset: 0;
     z-index: -1;
     background:
-        radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99, 102, 241, 0.15), transparent),
-        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14, 165, 233, 0.10), transparent);
+        radial-gradient(ellipse 60% 40% at 20% 10%, rgba(99, 102, 241, 0.18), transparent),
+        radial-gradient(ellipse 50% 40% at 80% 80%, rgba(14, 165, 233, 0.13), transparent),
+        radial-gradient(ellipse 40% 30% at 60% 40%, rgba(168, 85, 247, 0.08), transparent);
     pointer-events: none;
+    animation: bgShift 12s ease-in-out infinite;
 }
 
 /* ===== HEADER ===== */
+@keyframes fadeDown {
+    from { opacity: 0; transform: translateY(-20px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
 header {
     text-align: center;
     margin-bottom: 3.5rem;
     margin-top: 2rem;
+    animation: fadeDown 0.7s ease both;
+}
+
+@keyframes avatarPulse {
+    0%, 100% { box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2), 0 0 20px rgba(99, 102, 241, 0.1); }
+    50%       { box-shadow: 0 0 0 8px rgba(99, 102, 241, 0.12), 0 0 40px rgba(99, 102, 241, 0.2); }
 }
 
 .avatar {
@@ -64,6 +84,14 @@ header {
     margin: 0 auto 1.2rem;
     letter-spacing: 1px;
     box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
+    animation: avatarPulse 3s ease-in-out infinite;
+    transition: transform 0.3s ease;
+    cursor: default;
+    user-select: none;
+}
+
+.avatar:hover {
+    transform: scale(1.08) rotate(6deg);
 }
 
 h1 {
@@ -93,12 +121,23 @@ main {
 }
 
 /* ===== CATEGORY SECTION ===== */
+@keyframes fadeUp {
+    from { opacity: 0; transform: translateY(24px); }
+    to   { opacity: 1; transform: translateY(0); }
+}
+
 section {
     display: flex;
     flex-direction: column;
     gap: 1rem;
+    animation: fadeUp 0.6s ease both;
 }
 
+section:nth-child(1) { animation-delay: 0.15s; }
+section:nth-child(2) { animation-delay: 0.30s; }
+section:nth-child(3) { animation-delay: 0.45s; }
+section:nth-child(4) { animation-delay: 0.60s; }
+
 .category-title {
     font-size: 0.78rem;
     font-weight: 600;
@@ -146,13 +185,13 @@ section {
 
 .card:hover {
     background: var(--surface-hover);
-    border-color: rgba(255, 255, 255, 0.14);
-    transform: translateY(-2px);
-    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
+    border-color: color-mix(in srgb, var(--accent, #6366f1) 40%, transparent);
+    transform: translateY(-3px) scale(1.01);
+    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.4), 0 0 0 1px color-mix(in srgb, var(--accent, #6366f1) 20%, transparent);
 }
 
 .card:hover::before {
-    opacity: 0.07;
+    opacity: 0.10;
 }
 
 .card:active {
@@ -172,11 +211,12 @@ section {
     justify-content: center;
     font-size: 1.25rem;
     color: var(--accent, #6366f1);
-    transition: background var(--transition);
+    transition: background var(--transition), transform var(--transition);
 }
 
 .card:hover .card-icon {
     background: rgba(255, 255, 255, 0.09);
+    transform: scale(1.1) rotate(-4deg);
 }
 
 .card-logo {
@@ -240,6 +280,12 @@ footer {
     color: var(--text-muted);
     font-size: 0.8rem;
     text-align: center;
+    animation: fadeUp 0.6s ease 0.7s both;
+    transition: color 0.3s;
+}
+
+footer:hover {
+    color: var(--text);
 }
 
 /* ===== RESPONSIVE ===== */
@@ -253,5 +299,19 @@ footer {
     }
 }
 
+/* ===== RIPPLE ===== */
+.card .ripple {
+    position: absolute;
+    border-radius: 50%;
+    transform: scale(0);
+    animation: ripple-anim 0.55s linear;
+    background: rgba(255, 255, 255, 0.15);
+    pointer-events: none;
+}
+
+@keyframes ripple-anim {
+    to { transform: scale(4); opacity: 0; }
+}
+