diff --git a/website/templates/index.html b/website/templates/index.html
index 470154a..3e165a2 100644
--- a/website/templates/index.html
+++ b/website/templates/index.html
@@ -75,6 +75,62 @@
     height: 100vh;
     z-index: -1;
   }
+  
+  /* Chat-Animationen */
+  .typing-dots span {
+    animation-duration: 1.2s;
+    animation-iteration-count: infinite;
+  }
+  
+  /* Chat-Nachrichten-Animation */
+  @keyframes fadeInUp {
+    from {
+      opacity: 0;
+      transform: translate3d(0, 10px, 0);
+    }
+    to {
+      opacity: 1;
+      transform: translate3d(0, 0, 0);
+    }
+  }
+  
+  #embedded-chat-messages > div {
+    animation: fadeInUp 0.3s ease-out forwards;
+  }
+  
+  /* Sanftes Scrollen im Chat */
+  #embedded-chat-messages {
+    scroll-behavior: smooth;
+  }
+  
+  /* Benutzerdefinierter Scrollbar für den Chat */
+  #embedded-chat-messages::-webkit-scrollbar {
+    width: 6px;
+  }
+  
+  #embedded-chat-messages::-webkit-scrollbar-track {
+    background-color: rgba(0, 0, 0, 0.05);
+    border-radius: 10px;
+  }
+  
+  #embedded-chat-messages::-webkit-scrollbar-thumb {
+    background-color: rgba(139, 92, 246, 0.3);
+    border-radius: 10px;
+  }
+  
+  .dark #embedded-chat-messages::-webkit-scrollbar-thumb {
+    background-color: rgba(139, 92, 246, 0.5);
+  }
+  
+  /* Hover-Effekt für Quick-Query-Buttons */
+  .quick-query-btn:hover {
+    cursor: pointer;
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.1), rgba(96, 165, 250, 0.1));
+  }
+  
+  .dark .quick-query-btn:hover {
+    background: linear-gradient(to right, rgba(139, 92, 246, 0.2), rgba(96, 165, 250, 0.2));
+  }
 </style>
 {% endblock %}