diff --git a/assets/styles/app.css b/assets/styles/app.css
index 91b438b..8bcc165 100644
--- a/assets/styles/app.css
+++ b/assets/styles/app.css
@@ -29,6 +29,7 @@
 
 :root {
     --fc-border-color: #a65b27;
+    --fc-page-bg-color: #a65b27;
 }
 
 /* Prevent scrolling while dialog is open */
diff --git a/templates/monitor/upcoming-episodes.html.twig b/templates/monitor/upcoming-episodes.html.twig
index 93b43b5..0233633 100644
--- a/templates/monitor/upcoming-episodes.html.twig
+++ b/templates/monitor/upcoming-episodes.html.twig
@@ -22,14 +22,24 @@
     </div>
 
     <script>
+        function getView() {
+            if (window.innerWidth < 768) {
+                return 'listWeek';
+            } else {
+                return 'dayGridMonth';
+            }
+        }
         document.addEventListener('DOMContentLoaded', async function() {
             let data = await fetch('/api/monitor/upcoming-episodes');
             data = (await data.json())['data'];
 
             const calendarEl = document.getElementById('calendar');
             const calendar = new FullCalendar.Calendar(calendarEl, {
-                initialView: 'dayGridMonth',
+                initialView: getView(),
                 events: data['episodes'],
+                windowResize: function(arg) {
+                    this.changeView(getView());
+                }
             });
             calendar.render();
         });