diff --git a/src/routes/Calendar/Calendar.less b/src/routes/Calendar/Calendar.less
index 7f4e5252d..202b2d776 100644
--- a/src/routes/Calendar/Calendar.less
+++ b/src/routes/Calendar/Calendar.less
@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 :import('~stremio/common/PaginationInput/styles.less') {
     pagination-prev-button-container: prev-button-container;
     pagination-next-button-container: next-button-container;
@@ -38,7 +40,6 @@
                 .pagination-input {
                     flex: none;
                     height: 3rem;
-                    margin-left: 1.5rem;
 
                     .pagination-prev-button-container, .pagination-next-button-container {
                         width: 3rem;
@@ -58,4 +59,20 @@
             }
         }
     }
-}
\ No newline at end of file
+}
+
+@media only screen and (max-width: @minimum) {
+    .calendar {
+        .content {
+            padding: 0;
+        }
+    }
+}
+
+@media only screen and (max-width: @small) and (orientation: landscape) {
+    .calendar {
+        .content {
+            padding: 0 0 0 1rem;
+        }
+    }
+}
diff --git a/src/routes/Calendar/List/Item/Item.less b/src/routes/Calendar/List/Item/Item.less
index e0e0d0a5e..9d4f1efe4 100644
--- a/src/routes/Calendar/List/Item/Item.less
+++ b/src/routes/Calendar/List/Item/Item.less
@@ -32,12 +32,24 @@
             flex-direction: row;
             align-items: center;
             justify-content: space-between;
+            gap: 1rem;
             height: 3rem;
             padding: 0 1rem;
             font-size: 1rem;
             font-weight: 500;
             color: var(--primary-foreground-color);
 
+            .name {
+                flex: auto;
+                white-space: nowrap;
+                text-overflow: ellipsis;
+                overflow: hidden;
+            }
+
+            .info {
+                flex: none;
+            }
+
             &:hover {
                 background-color: var(--overlay-color);
             }
@@ -55,4 +67,4 @@
             opacity: 0.5;
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/routes/Calendar/List/List.less b/src/routes/Calendar/List/List.less
index c01168846..36165bb50 100644
--- a/src/routes/Calendar/List/List.less
+++ b/src/routes/Calendar/List/List.less
@@ -1,5 +1,7 @@
 // Copyright (C) 2017-2024 Smart code 203358507
 
+@import (reference) '~stremio/common/screen-sizes.less';
+
 .list {
     flex: none;
     display: flex;
@@ -8,4 +10,16 @@
     width: 20rem;
     padding-right: 1rem;
     overflow-y: auto;
+}
+
+@media only screen and (max-width: @minimum) and (orientation: portrait) {
+    .list {
+        display: none;
+    }
+}
+
+@media only screen and (max-width: @small) and (orientation: landscape) {
+    .list {
+        width: 15rem;
+    }
 }
\ No newline at end of file
diff --git a/src/routes/Calendar/Table/Cell/Cell.less b/src/routes/Calendar/Table/Cell/Cell.less
index 62cf37706..30204016f 100644
--- a/src/routes/Calendar/Table/Cell/Cell.less
+++ b/src/routes/Calendar/Table/Cell/Cell.less
@@ -30,6 +30,7 @@
     }
 
     .heading {
+        flex: none;
         position: relative;
         padding: 1rem;
 
@@ -48,15 +49,26 @@
     }
 
     .body {
+        flex: 1 1 auto;
         position: relative;
-        display: grid;
-        grid-template-columns: repeat(3, 1fr);
-        height: 6rem;
+        display: flex;
+        flex-direction: row;
+        gap: 1rem;
+        height: 0;
+        padding: 1rem;
+        overflow-x: scroll;
 
-        .poster {
+        .item {
+            flex: none;
             height: 100%;
-            width: 100%;
-            object-fit: cover;
+            aspect-ratio: 2 / 3;
+            border-radius: var(--border-radius);
+
+            .poster {
+                height: 100%;
+                width: 100%;
+                object-fit: cover;
+            }
         }
     }
-}
\ No newline at end of file
+}
diff --git a/src/routes/Calendar/Table/Cell/Cell.tsx b/src/routes/Calendar/Table/Cell/Cell.tsx
index 248067e85..be003dfa1 100644
--- a/src/routes/Calendar/Table/Cell/Cell.tsx
+++ b/src/routes/Calendar/Table/Cell/Cell.tsx
@@ -27,7 +27,7 @@ const Cell = ({ today, date, items, onClick }: Props) => {
             <div className={styles['body']}>
                 {
                     items.map(({ id, name, poster, deepLinks }) => (
-                        <Button key={id} href={deepLinks.metaDetailsStreams}>
+                        <Button key={id} className={styles['item']} href={deepLinks.metaDetailsStreams}>
                             <Image
                                 className={styles['poster']}
                                 src={poster}
diff --git a/src/routes/Calendar/Table/Table.less b/src/routes/Calendar/Table/Table.less
index 1d680c040..3ac24fc0a 100644
--- a/src/routes/Calendar/Table/Table.less
+++ b/src/routes/Calendar/Table/Table.less
@@ -7,12 +7,12 @@
     flex-direction: column;
 
     .week {
-        flex: auto;
+        flex: none;
         position: relative;
         height: 3rem;
         width: 100%;
         display: grid;
-        grid-template-columns: repeat(7, minmax(5rem, 1fr));
+        grid-template-columns: repeat(7, 1fr);
         align-items: center;
 
         .item {
@@ -21,6 +21,9 @@
             font-size: 1rem;
             font-weight: 500;
             color: var(--primary-foreground-color);
+            white-space: nowrap;
+            text-overflow: ellipsis;
+            overflow: hidden;
         }
     }
 
@@ -30,7 +33,7 @@
         width: 100%;
         height: 100%;
         display: grid;
-        grid-template-columns: repeat(7, minmax(5rem, 1fr));
+        grid-template-columns: repeat(7, 1fr);
         gap: 1px;
         border-radius: var(--border-radius);
     }