diff --git a/static/css/style.css b/static/css/style.css
index 3312423..0317b06 100644
--- a/static/css/style.css
+++ b/static/css/style.css
@@ -108,3 +108,26 @@ tr.htmx-swapping td {
 .htmx-request.loading-indicator{
     display:flex;
 }
+
+
+@keyframes slideInLeft {
+    from { transform: translateX(-100%); opacity: 0; }
+    to { transform: translateX(0); opacity: 1; }
+}
+
+.animate-slideInLeft {
+    animation-name: slideInLeft;
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+}
+
+@keyframes fadeIn {
+    from { opacity: 0; }
+    to { opacity: 1; }
+}
+
+.animate-fadeIn {
+    animation-name: fadeIn;
+    animation-duration: 0.5s;
+    animation-fill-mode: both;
+}
diff --git a/templates/calendar.html b/templates/calendar.html
index 8305020..83c7cf7 100644
--- a/templates/calendar.html
+++ b/templates/calendar.html
@@ -6,7 +6,7 @@
     hx-vals='{"date": "{{ date }}", "view": "{{ view }}"}' hx-trigger="refreshView" id="refreshViewElement"
     hx-swap="innerHTML swap:0.5s"></a>
 
-<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden">
+<div class="flex flex-grow flex-col bg-white sm:rounded shadow overflow-hidden animate-fadeIn">
     <div class="flex items-center justify-between pt-2 pb-2">
         <div class="flex">
             <div class="flex ml-1 md:ml-6">