diff --git a/Views/Slides/Preview.cshtml b/Views/Slides/Preview.cshtml
index b151a4e..862c6d1 100644
--- a/Views/Slides/Preview.cshtml
+++ b/Views/Slides/Preview.cshtml
@@ -1,6 +1,11 @@
 @model Slide
 @{
     Layout = null;
+    var bgStyle = $"background: {Model.BackgroundColor ?? "#1a1a2e"};";
+    if (!string.IsNullOrEmpty(Model.BackgroundImage))
+    {
+        bgStyle += $" background-image: url('{Model.BackgroundImage}'); background-size: cover; background-position: center;";
+    }
 }
 <!DOCTYPE html>
 <html lang="en">
@@ -11,32 +16,69 @@
     <style>
         * { margin: 0; padding: 0; box-sizing: border-box; }
         html, body { width: 100%; height: 100%; overflow: hidden; }
-        body { background: @(Model.BackgroundColor ?? "#1a1a2e"); color: #fff; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
-            @if (!string.IsNullOrEmpty(Model.BackgroundImage)) { @:background-image: url('@Model.BackgroundImage'); @:background-size: cover; @:background-position: center; }
+        body {
+            @Html.Raw(bgStyle)
+            color: #fff;
+            font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
+        }
+        .slide-content {
+            width: 100%;
+            height: 100%;
+            @Html.Raw(Model.CustomCss ?? "")
         }
-        .slide-content { width: 100%; height: 100%; @Html.Raw(Model.CustomCss ?? "") }
         .slide-content img { max-width: 100%; height: auto; }
         .slide-content table { border-collapse: collapse; }
         .slide-content table td, .slide-content table th { border: 1px solid rgba(255,255,255,0.3); padding: 8px 12px; }
         iframe.embed-frame { width: 100%; height: 100%; border: none; }
-        .ics-events { padding: 2em; } .ics-events h2 { margin-bottom: 1em; font-size: 2em; }
+        .ics-events { padding: 2em; }
+        .ics-events h2 { margin-bottom: 1em; font-size: 2em; }
         .event-card { background: rgba(255,255,255,0.1); border-radius: 12px; padding: 1.2em; margin-bottom: 1em; }
+        .event-card h3 { font-size: 1.3em; margin-bottom: 0.3em; }
+        .event-meta { opacity: 0.7; font-size: 0.9em; }
         .back-link { position: fixed; top: 10px; right: 10px; z-index: 999; }
     </style>
 </head>
 <body>
     <a href="/admin/slides" class="back-link btn btn-sm btn-light"><i class="bi bi-x-lg"></i> Close</a>
-    @if (Model.SlideType == SlideType.Content) { <div class="slide-content">@Html.Raw(Model.Content ?? "")</div> }
-    else if (Model.SlideType == SlideType.Embed) { <iframe class="embed-frame" src="@Model.EmbedUrl"></iframe> }
-    else if (Model.SlideType == SlideType.IcsCalendar) {
-        <div class="ics-events" id="icsContainer"><h2>Upcoming Events</h2><p>Loading...</p></div>
+
+    @if (Model.SlideType == SlideType.Content)
+    {
+        <div class="slide-content">@Html.Raw(Model.Content ?? "")</div>
+    }
+    else if (Model.SlideType == SlideType.Embed)
+    {
+        <iframe class="embed-frame" src="@Model.EmbedUrl"></iframe>
+    }
+    else if (Model.SlideType == SlideType.IcsCalendar)
+    {
+        <div class="ics-events" id="icsContainer">
+            <h2><i class="bi bi-calendar-event me-2"></i>Upcoming Events</h2>
+            <p>Loading calendar...</p>
+        </div>
         <script>
-            fetch('/api/parseics?url=' + encodeURIComponent('@Model.IcsSource')).then(r => r.json()).then(data => {
-                var html = '<h2>Upcoming Events</h2>';
-                if (data.events && data.events.length > 0) { data.events.forEach(function(e) { html += '<div class="event-card"><h3>' + (e.summary||'Event') + '</h3><div style="opacity:0.7;">' + (e.start||'') + '</div></div>'; }); }
-                else { html += '<p>No upcoming events.</p>'; }
-                document.getElementById('icsContainer').innerHTML = html;
-            });
+            fetch('/api/parseics?url=' + encodeURIComponent('@Model.IcsSource'))
+                .then(r => r.json())
+                .then(data => {
+                    var html = '<h2><i class="bi bi-calendar-event" style="margin-right:0.5em;"></i>Upcoming Events</h2>';
+                    if (data.events && data.events.length > 0) {
+                        data.events.forEach(function(e) {
+                            html += '<div class="event-card"><h3>' + (e.summary || 'Event') + '</h3>';
+                            html += '<div class="event-meta">';
+                            if (e.start) html += '<i class="bi bi-clock"></i> ' + e.start;
+                            if (e.end) html += ' — ' + e.end;
+                            if (e.location) html += ' | <i class="bi bi-geo-alt"></i> ' + e.location;
+                            html += '</div>';
+                            if (e.description) html += '<p style="margin-top:0.5em;opacity:0.8;">' + e.description + '</p>';
+                            html += '</div>';
+                        });
+                    } else {
+                        html += '<p>No upcoming events found.</p>';
+                    }
+                    document.getElementById('icsContainer').innerHTML = html;
+                })
+                .catch(err => {
+                    document.getElementById('icsContainer').innerHTML = '<h2>Calendar</h2><p>Error loading calendar: ' + err + '</p>';
+                });
         </script>
     }
 </body>
