diff --git a/src/components/generator/Calendar/CalendarComponent.jsx b/src/components/generator/Calendar/CalendarComponent.jsx
index d3e5b53..415b4ee 100644
--- a/src/components/generator/Calendar/CalendarComponent.jsx
+++ b/src/components/generator/Calendar/CalendarComponent.jsx
@@ -524,37 +524,40 @@ export default function CalendarComponent({
           selectedDuration={selectedDuration}
         />
 
-        <CalendarNavBar
-          isTruncated={isTruncated}
-          noTimetablesGenerated={noTimetablesGenerated}
-          timeslotsOverridden={timeslotsOverridden}
-          handleFirst={handleFirst}
-          handlePrevious={handlePrevious}
-          handleNext={handleNext}
-          handleLast={handleLast}
-          currentTimetableIndex={currentTimetableIndex}
-          timetables={visibleTimetables}
-          selectedDuration={selectedDuration}
-          setSelectedDuration={setSelectedDuration}
-          durations={durations}
-          sortByBracketContent={sortByBracketContent}
-        />
-
-        <FullCalendar
-          {...getFullCalendarConfig({
-            calendarRef,
-            showWeekends,
-            events: calendarEvents,
-            handleDatesSet,
-            handleEventClick,
-            handleSelect,
-            handleSelectAllow,
-            handleUnselect,
-            handleEventMouseEnter,
-            handleEventMouseLeave,
-            isMobile,
-          })}
-        />
+        <div className="calendar-shell">
+          <CalendarNavBar
+            isTruncated={isTruncated}
+            noTimetablesGenerated={noTimetablesGenerated}
+            timeslotsOverridden={timeslotsOverridden}
+            handleFirst={handleFirst}
+            handlePrevious={handlePrevious}
+            handleNext={handleNext}
+            handleLast={handleLast}
+            currentTimetableIndex={currentTimetableIndex}
+            timetables={visibleTimetables}
+            selectedDuration={selectedDuration}
+            setSelectedDuration={setSelectedDuration}
+            durations={durations}
+            sortByBracketContent={sortByBracketContent}
+          />
+          <div className="calendar-shell-divider" aria-hidden="true" />
+
+          <FullCalendar
+            {...getFullCalendarConfig({
+              calendarRef,
+              showWeekends,
+              events: calendarEvents,
+              handleDatesSet,
+              handleEventClick,
+              handleSelect,
+              handleSelectAllow,
+              handleUnselect,
+              handleEventMouseEnter,
+              handleEventMouseLeave,
+              isMobile,
+            })}
+          />
+        </div>
 
         <RenameBlockedSlotDialog
           open={renameDialogOpen}
diff --git a/src/components/generator/Calendar/CalendarNavBar.jsx b/src/components/generator/Calendar/CalendarNavBar.jsx
index fb0ffe7..9f2e94a 100644
--- a/src/components/generator/Calendar/CalendarNavBar.jsx
+++ b/src/components/generator/Calendar/CalendarNavBar.jsx
@@ -55,7 +55,7 @@ export default function CalendarNavBar({
   return (
     <div
       id="calendarNavBar"
-      className="mb-4 flex h-auto items-center rounded-lg border border-border bg-card p-2"
+      className="flex h-auto items-center px-3 py-3 sm:px-4"
     >
       <div
         id="infoButtonBox"
diff --git a/src/styles/generator/Calendar.css b/src/styles/generator/Calendar.css
index 079f0dd..5387a6b 100644
--- a/src/styles/generator/Calendar.css
+++ b/src/styles/generator/Calendar.css
@@ -19,6 +19,21 @@
   margin-left: 0;
 }
 
+.calendar-shell {
+  overflow: hidden;
+  border: 1px solid hsl(var(--border) / 0.72);
+  border-radius: calc(var(--radius) + 2px);
+  background: hsl(var(--background));
+  box-shadow:
+    inset 0 1px 0 hsl(var(--background) / 0.6),
+    0 1px 3px hsl(var(--foreground) / 0.04);
+}
+
+.calendar-shell-divider {
+  height: 1px;
+  background: hsl(var(--border) / 0.7);
+}
+
 #calPrev,
 #calNext {
   margin: 0 1%;
@@ -90,6 +105,12 @@
   }
 }
 
+.dark .calendar-shell {
+  box-shadow:
+    inset 0 1px 0 hsl(var(--background) / 0.3),
+    0 1px 2px hsl(var(--foreground) / 0.12);
+}
+
 @media (max-width: 599px) {
   .fc-event-main {
     font-size: 9px;
diff --git a/src/styles/generator/CustomCalendar.css b/src/styles/generator/CustomCalendar.css
index c75a3c8..406018a 100644
--- a/src/styles/generator/CustomCalendar.css
+++ b/src/styles/generator/CustomCalendar.css
@@ -8,13 +8,10 @@
 }
 
 #Calendar .fc .fc-scrollgrid {
-  border: 1px solid hsl(var(--border) / 0.72);
-  border-radius: calc(var(--radius) + 2px);
+  border: 0;
+  border-radius: 0;
   overflow: hidden;
   background: hsl(var(--background));
-  box-shadow:
-    inset 0 1px 0 hsl(var(--background) / 0.6),
-    0 1px 3px hsl(var(--foreground) / 0.04);
 }
 
 #Calendar .fc .fc-timegrid-slot,
@@ -141,12 +138,6 @@
   color: hsl(var(--muted-foreground));
 }
 
-.dark #Calendar .fc .fc-scrollgrid {
-  box-shadow:
-    inset 0 1px 0 hsl(var(--background) / 0.3),
-    0 1px 2px hsl(var(--foreground) / 0.12);
-}
-
 .dark #Calendar .fc .fc-timegrid-slot,
 .dark #Calendar .fc .fc-col-header-cell,
 .dark #Calendar .fc .fc-daygrid-day,