diff --git a/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
index 6e6b165..4a06d22 100644
--- a/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
+++ b/app/@modal/(.)schedule/event-groups/[alias]/export/page.tsx
@@ -108,8 +108,7 @@ export default function Page({ params: { alias } }: Props) {
                       </li>
                       <li>Paste the link and click Add.</li>
                     </ul>
-                    {/* TODO: Determine what to do with calendar margin */}
-                    <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
+                    <div className="-mx-4 -mb-4 @lg/export:-mx-8 @lg/export:-mb-8">
                       <Calendar
                         urls={calendarURL ? [calendarURL] : []}
                         viewId="popup"
diff --git a/app/@modal/(.)schedule/event-groups/[alias]/page.tsx b/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
index ca778ca..fdd0dd0 100644
--- a/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
+++ b/app/@modal/(.)schedule/event-groups/[alias]/page.tsx
@@ -110,8 +110,7 @@ export default function Page({ params: { alias } }: Props) {
                         </h2>
                         <ExportButton alias={group.alias} />
                       </div>
-                      {/* TODO: Determine what to do with calendar margin */}
-                      <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
+                      <div className="-mx-4 -mb-4 @lg/event:-mx-8 @lg/event:-mb-8">
                         <Calendar
                           urls={[getICSLink(group.alias, user?.id)]}
                           viewId="popup"
diff --git a/app/dashboard/page.tsx b/app/dashboard/page.tsx
index 94de41e..96c3c76 100644
--- a/app/dashboard/page.tsx
+++ b/app/dashboard/page.tsx
@@ -113,9 +113,7 @@ export default function Page() {
         </div>
       </div>
       <h2 className="my-4 text-3xl font-medium">Your calendar</h2>
-      <div className="">
-        {" "}
-        {/* TODO: -mx-8 makes calendars margin not equal on PC. is it good or not? */}
+      <div className="-mx-4 -mb-4 @lg/content:-mx-8 @lg/content:-mb-8">
         {!user ? (
           <>Loading...</>
         ) : (
diff --git a/app/music-room/page.tsx b/app/music-room/page.tsx
index 967062f..84f0d36 100644
--- a/app/music-room/page.tsx
+++ b/app/music-room/page.tsx
@@ -90,8 +90,7 @@ export default function Page() {
         </div>
       </div>
       <h2 className="my-4 text-3xl font-medium">Booking calendar</h2>
-      {/* TODO: Determine what to do with the margin of calendar */}
-      <div className="lg:-mx-8">
+      <div className="@lg/content:-mx-8">
         <Calendar
           urls={[
             `${EVENTS_API_URL}/music-room.ics`,
diff --git a/app/schedule/event-groups/[alias]/page.tsx b/app/schedule/event-groups/[alias]/page.tsx
index 11c554b..5b7c232 100644
--- a/app/schedule/event-groups/[alias]/page.tsx
+++ b/app/schedule/event-groups/[alias]/page.tsx
@@ -55,9 +55,7 @@ export default function Page({ params: { alias } }: Props) {
             <h2 className="flex grow text-3xl font-medium">Calendar</h2>
             <ExportButton alias={group.alias} />
           </div>
-          <div className="-mx-4 -mb-4 lg:-mx-8 lg:-mb-8">
-            {" "}
-            {/* TODO: Calendar margin is not good? */}
+          <div className="-mx-4 -mb-4 @lg/content:-mx-8 @lg/content:-mb-8">
             <Calendar
               urls={[getICSLink(group.alias, user?.id)]}
               initialView={