diff --git a/CHANGELOG.md b/CHANGELOG.md
index 2d3a9acc7..bd895dc5f 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -15,6 +15,50 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#728]: https://github.com/learningequality/kolibri-design-system/pull/728
 
+- [#738]
+  - **Description:** Bump KDS version to 5.0.0-rc2.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#738]: https://github.com/learningequality/kolibri-design-system/pull/738
+
+- [705]
+  - **Description:**  Update`KCard`  updates: Adds 'preserveAboveTitle`, `preserveBelowTitle`, `preserveFooter` prop for flexible  slot management.
+  - **Products impact:**  Card updates 
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/702
+  - **Components:** `KCard` 
+  - **Breaking:** N0
+  - **Impacts a11y:** No
+  - **Guidance:**
+
+[705]: https://github.com/learningequality/kolibri-design-system/pull/705
+
+- [719]
+  - **Description:** Removes KResponsiveWindowMixin.
+  - **Products impact:** removed API.
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/679.
+  - **Components:** KResponsiveWindowMixin.
+  - **Breaking:** yes.
+  - **Impacts a11y:** no.
+  - **Guidance:** Replace any use of KResponsiveWindowMixin with the new composable useKResponsiveWindow.
+
+[719]: https://github.com/learningequality/kolibri-design-system/pull/719
+
+- [#718]
+  - **Description:** This pull request resolves failing `KDateCalendar` component tests that occurred on the last day of the month in open pull requests by setting dates manually in the tests. Additionally, the `KDateCalendar` is updated to show the month of the `lastAllowedDate` property.
+  - **Products impact:** none
+  - **Addresses:** https://github.com/learningequality/kolibri-design-system/issues/713
+  - **Components:** -
+  - **Breaking:** no
+  - **Impacts a11y:** -
+  - **Guidance:** -
+
+[#718]: https://github.com/learningequality/kolibri-design-system/pull/718
+
 - [#687]
   - **Description:** Adds logic that inserts ARIA live assertive and polite regions to an application's document body during KDS initialization and documents this on the new "Installation" page. Relatedly adds `useKLiveRegion` composable with public methods for updating the live regions with assertive and polite messages. 
   - **Products impact:** new API
@@ -26,7 +70,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
 
 [#687]: https://github.com/learningequality/kolibri-design-system/pull/687
 
- [#688]
+- [#688]
   - **Description:**  Update`KCard` styling 
   - **Products impact:**  Card updates 
   - **Addresses:** 
@@ -34,9 +78,10 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Breaking:** N0
   - **Impacts a11y:** No
   - **Guidance:**
- [#688] https://github.com/learningequality/kolibri-design-system/pull/688
 
-[#707]
+[#688]: https://github.com/learningequality/kolibri-design-system/pull/688
+
+- [#707]
   - **Description:** Card Validations
   - **Products impact:**  
   - **Addresses:** [#695](https://github.com/learningequality/kolibri-design-system/issues/695)
@@ -44,9 +89,22 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Breaking:** No
   - **Impacts a11y:**  No
   - **Guidance:**
- [#707] https://github.com/learningequality/kolibri-design-system/pull/707
 
-[#709]
+[#707]: https://github.com/learningequality/kolibri-design-system/pull/707
+
+- [#706]
+  - **Description:** Add new alignment options to `KCard` 
+  - **Products impact:**  new alignment 
+  - **Addresses:** [#701](https://github.com/learningequality/kolibri-design-system/issues/701)
+  - **Components:** `KCard` 
+  - **Breaking:** N0
+  - **Impacts a11y:** No
+  - **Guidance:**
+
+[#706]: https://github.com/learningequality/kolibri-design-system/pull/706
+
+
+- [#709]
   - **Description:**  Update spaces to the latest design`KCard` 
   - **Products impact:**  Card updates 
   - **Addresses:** [#704](https://github.com/learningequality/kolibri-design-system/issues/704)
@@ -54,9 +112,10 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Breaking:** N0
   - **Impacts a11y:** No
   - **Guidance:**
- [#709] https://github.com/learningequality/kolibri-design-system/pull/709
 
-[#625]
+[#709]: https://github.com/learningequality/kolibri-design-system/pull/709
+
+- [#625]
   - **Description:** Initial implementation of `KCard` component
   - **Products impact:** New Component
   - **Addresses:** [#530](https://github.com/learningequality/kolibri-design-system/issues/530)
@@ -64,6 +123,7 @@ Changelog is rather internal in nature. See release notes for the public overvie
   - **Breaking:** No
   - **Impacts a11y:**  Yes
   - **Guidance:**
+
 [#625]: https://github.com/learningequality/kolibri-design-system/pull/625
 
 - [#678]
@@ -146,6 +206,28 @@ Changelog is rather internal in nature. See release notes for the public overvie
 ## Version 4.x.x (`release-v4` branch)
 
 
+- [#737]
+  - **Description:** Bump KDS version to 4.4.1.
+  - **Products impact:** -.
+  - **Addresses:** -.
+  - **Components:** -.
+  - **Breaking:** -.
+  - **Impacts a11y:** -.
+  - **Guidance:** -.
+
+[#737]: https://github.com/learningequality/kolibri-design-system/pull/737
+
+- [#717]
+  - **Description:** Fix ResizeOserver errors when KListWithOverflow resize very quickly.
+  - **Products impact:** bugfix.
+  - **Addresses:** Sentry error.
+  - **Components:** KListWithOverflow.
+  - **Breaking:** no.
+  - **Impacts a11y:** no.
+  - **Guidance:** -.
+
+[#717]: https://github.com/learningequality/kolibri-design-system/pull/717
+
 - [#680]
   - **Description:** Adds boolean `appendToRoot` prop to teleport the modal to the body element if true.
   - **Products impact:** new API.
diff --git a/docs/pages/accessibility.vue b/docs/pages/accessibility.vue
index 98546a024..4e1263e91 100644
--- a/docs/pages/accessibility.vue
+++ b/docs/pages/accessibility.vue
@@ -24,7 +24,7 @@
         We should aim to allow zooming up to 200%, and down to 480x600 px in both profile and landscape. The app should always remain functional in all extreme screen sizes. Depending on the context, we may want to put additional effort into creating custom layouts optimized for particular screen sizes. For example, we should put additional effort into optimizing the mobile Learner experience, while for administrators this might not be as critical.
       </p>
       <p>
-        When designing and building layouts, we use the breakpoints defined by Material Design. These are exposed in our app by the <code>responsiveWindow</code> Vue component mixin. We should never use CSS media queries. See the <DocsInternalLink href="/layout" text="See the Layout page" /> for more information.
+        When designing and building layouts, we use the breakpoints defined by Material Design. These are exposed in our app by the <DocsLibraryLink component="useKResponsiveWindow" /> composable. We should never use CSS media queries. See the <DocsInternalLink href="/layout" text="See the Layout page" /> for more information.
       </p>
     </DocsPageSection>
 
diff --git a/docs/pages/kcard.vue b/docs/pages/kcard.vue
index 3a10b622d..8e9f0f699 100644
--- a/docs/pages/kcard.vue
+++ b/docs/pages/kcard.vue
@@ -24,6 +24,7 @@
             :headingLevel="2"
             layout="horizontal"
             thumbnailDisplay="large"
+            thumbnailAlign="right"
             :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
           >
             <template #title>
@@ -76,6 +77,73 @@
           </kcard>
         </div>
       </DocsShow>
+      <p>
+        In this layout, the thumbnail image can displayed on either left or right side of the card using
+        the <DocsInternalLink href="/kcard#prop:thumbnailAlign">
+          <code>thumbnailAlign</code>
+        </DocsInternalLink> prop.
+      </p>
+      <p> Here's an example of usage of the thumbnailAlign: </p>
+      <DocsShow block>
+        <div>
+          <KCard
+            :to="{ name: 'kcard' }"
+            :headingLevel="2"
+            layout="horizontal"
+            thumbnailDisplay="large"
+            thumbnailAlign="left"
+            :thumbnailSrc="require('../assets/hummingbird CC BY-SA 4.0.jpg')"
+          >
+            <template #title>
+              <div>
+                <KTextTruncator
+                  text="This is a sample resource title that goes to three lines and truncates at the end of the three lines This is a sample title that goes"
+                  :maxLines="2"
+                />
+              </div>
+            </template>
+            <template #aboveTitle>
+              <KGrid>
+
+                <KGridItem
+                  :layout12="{ span: 9 }"
+                  :layout8="{ span: 6 }"
+                >
+                  <span><KIcon icon="readSolid" class="icon-size" /></span>
+                  <span
+                    :style="{ 'color': $themePalette.grey.v_400,
+                              'font-size': '1.2em' }"
+                  >Rutrum pellentesque utrum...</span>
+                </KGridItem>
+
+                <KGridItem
+                  :layout12="{ span: 3 }"
+                  :layout8="{ span: 2 }"
+                >
+                  <div style="float:right">
+                    <KIcon icon="infoOutline" class="icon-size" />
+                  </div>
+                </KGridItem>
+              </KGrid>
+            </template>
+            <template #footer>
+              <div>
+                <div class="footer-top-header">
+                  <span>
+                    <KIcon icon="practiceSolid" class="icon-size" />
+                    Practice
+                  </span>
+                  <span
+                    :style="{ 'background-color': $themePalette.grey.v_100 , 'padding': '2px' }"
+                  >
+                    Short Activity
+                  </span>
+                </div>
+              </div>
+            </template>
+          </kcard>
+        </div>
+      </DocsShow>
 
       <h3>Vertical Layout</h3>
       <p> The vertical layout displays the thumbnail image above the content. </p>
diff --git a/docs/pages/klistwithoverflow.vue b/docs/pages/klistwithoverflow.vue
index 495321f6b..fa7bc5570 100644
--- a/docs/pages/klistwithoverflow.vue
+++ b/docs/pages/klistwithoverflow.vue
@@ -231,6 +231,7 @@
   }
 
   .divider-wrapper {
+    align-self: stretch;
     padding: 8px 12px;
   }
 
diff --git a/docs/pages/layout/index.vue b/docs/pages/layout/index.vue
index a63fd5e80..264498573 100644
--- a/docs/pages/layout/index.vue
+++ b/docs/pages/layout/index.vue
@@ -69,7 +69,7 @@
         <li>Level 7: <code>&gt;= 1600px</code></li>
       </ul>
       <p>
-        Responsive layouts in the design system are built using reactive JavaScript state in Vue components rather than CSS media queries. This is done using <DocsLibraryLink component="KResponsiveWindow" /> when reactive window's size information is needed or <DocsLibraryLink component="KResponsiveElement" /> when reactive component's size information is needed.
+        Responsive layouts in the design system are built using reactive JavaScript state in Vue components rather than CSS media queries. This is done using <DocsLibraryLink component="useKResponsiveWindow" /> when reactive window's size information is needed or <DocsLibraryLink component="KResponsiveElement" /> when reactive component's size information is needed.
       </p>
     </DocsPageSection>
 
diff --git a/docs/pages/playground.vue b/docs/pages/playground.vue
index 686423285..dc02d415d 100644
--- a/docs/pages/playground.vue
+++ b/docs/pages/playground.vue
@@ -44,4 +44,4 @@
     methods: {},
   };
 
-</script>
+</script>
\ No newline at end of file
diff --git a/lib/KCard/BaseCard.vue b/lib/KCard/BaseCard.vue
index 3864e73b3..15b6a86bc 100644
--- a/lib/KCard/BaseCard.vue
+++ b/lib/KCard/BaseCard.vue
@@ -36,7 +36,10 @@
           class="base-card-title"
           :style="{ color: $themeTokens.text }"
         >
-          <slot v-if="$slots.title" name="title"></slot>
+          <slot 
+            v-if="$slots.title"
+            name="title"
+          ></slot>
           <KTextTruncator
             v-else
             :text="title"
diff --git a/lib/KCard/__tests__/KCard.spec.js b/lib/KCard/__tests__/KCard.spec.js
index 7c619b643..6a72dd20c 100644
--- a/lib/KCard/__tests__/KCard.spec.js
+++ b/lib/KCard/__tests__/KCard.spec.js
@@ -128,4 +128,93 @@ describe('KCard', () => {
       expect(footerSlot.text()).toBe('footer slot content goes here');
     });
   });
+  describe('it renders slot behaviors', () => {
+    it('preserves space when preserve prop is true and slot is not empty', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
+        },
+        slots: {
+          aboveTitle: 'above title',
+          belowTitle: 'below title',
+          footer: 'footer slot content goes here',
+        },
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(true);
+      expect(belowTitleSlot.exists()).toBe(true);
+      expect(footerSlot.exists()).toBe(true);
+    });
+
+    it('preserves space when preserve prop is true and slot is empty', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
+        },
+        slots: {},
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(true);
+      expect(belowTitleSlot.exists()).toBe(true);
+      expect(footerSlot.exists()).toBe(true);
+    });
+
+    it('removes space when preserve prop is false and slot is empty', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: false,
+          preserveBelowTitle: false,
+          preserveFooter: false,
+        },
+        slots: {},
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.exists()).toBe(false);
+      expect(belowTitleSlot.exists()).toBe(false);
+      expect(footerSlot.exists()).toBe(false);
+    });
+
+    it('show slots content regardless of whether the preserve prop is true', () => {
+      const wrapper = makeWrapper({
+        propsData: {
+          to: { path: '/some-link' },
+          title: 'sample title ',
+          headingLevel: 4,
+          preserveAboveTitle: true,
+          preserveBelowTitle: true,
+          preserveFooter: true,
+        },
+        slots: {
+          aboveTitle: 'above title',
+          belowTitle: 'below title',
+          footer: 'footer slot content goes here',
+        },
+      });
+      const aboveTitleSlot = wrapper.find('[data-test="aboveTitle"]');
+      const belowTitleSlot = wrapper.find('[data-test="belowTitle"]');
+      const footerSlot = wrapper.find('[data-test="footer"]');
+      expect(aboveTitleSlot.text()).toBe('above title');
+      expect(belowTitleSlot.text()).toBe('below title');
+      expect(footerSlot.text()).toBe('footer slot content goes here');
+    });
+  });
 });
diff --git a/lib/KCard/index.vue b/lib/KCard/index.vue
index 0f8008bf9..f3ec1a99f 100644
--- a/lib/KCard/index.vue
+++ b/lib/KCard/index.vue
@@ -5,7 +5,7 @@
     :title="title"
     :headingLevel="headingLevel"
     :titleLines="titleLines"
-    :class="['k-card', rootClass]"
+    :class="['k-card', rootClass, thumbnailAlignClass]"
     :headingStyles="headingStyles"
   >
     <template v-if="$slots.title" #title>
@@ -42,6 +42,7 @@
         </span>
       </div>
       <div
+        v-if="$slots.aboveTitle || preserveAboveTitle"
         data-test="aboveTitle"
         class="above-title"
       >
@@ -49,6 +50,7 @@
         <slot name="aboveTitle"></slot>
       </div>
       <div
+        v-if="$slots.belowTitle || preserveBelowTitle"
         data-test="belowTitle"
         class="below-title"
       >
@@ -56,6 +58,7 @@
         <slot name="belowTitle"></slot>
       </div>
       <div
+        v-if="$slots.footer || preserveFooter"
         data-test="footer"
         class="footer"
       >
@@ -83,6 +86,11 @@
     LARGE: 'large',
   };
 
+  const thumbnailAlignOptions = {
+    LEFT: 'left',
+    RIGHT: 'right',
+  };
+
   function cardValidator(allowedValues, propName) {
     return function(value) {
       if (!Object.values(allowedValues).includes(value)) {
@@ -167,14 +175,65 @@
         type: String,
         default: 'centerInside',
       },
+      /**
+       * Controls the alignment of the thumbnail area in horizontal layouts.
+       * Only applies to horizontal layouts with 'small' or 'large' thumbnail display.
+       * Ignored in other layouts.
+       * @type {String}
+       * @values 'left', 'right'
+       * @default 'left'
+       */
+      thumbnailAlign: {
+        type: String,
+        default: 'left',
+        validator: cardValidator(thumbnailAlignOptions, 'thumbnailAlign'),
+      },
+      /**
+       * Specifies the number of lines allowed for the title before truncation occurs.
+       * @type {number}
+       * @default 2
+       */
+      titleLines: {
+        type: Number,
+        required: false,
+        default: 2,
+      },
+
+      /**
+       * When true, preserves the space for the aboveTitle slot even when it's empty.
+       * When false, removes the space entirely if the slot is empty.
+       * @type {Boolean}
+       * @default false
+       */
+      preserveAboveTitle: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * When true, preserves the space for the belowTitle slot even when it's empty.
+       * When false, removes the space entirely if the slot is empty.
+       * @type {Boolean}
+       * @default false
+       */
+      preserveBelowTitle: {
+        type: Boolean,
+        default: false,
+      },
+      /**
+       * When true, preserves the space for the footer slot even when it's empty.
+       * When false, removes the space entirely if the slot is empty.
+       * @type {Boolean}
+       * @default false
+       */
+      preserveFooter: {
+        type: Boolean,
+        default: false,
+      },
     },
     computed: {
       rootClass() {
         return this.stylesAndClasses.rootClass;
       },
-      titleLines() {
-        return this.stylesAndClasses.titleLines;
-      },
       thumbnailAspectRatio() {
         return this.stylesAndClasses.thumbnailAspectRatio;
       },
@@ -184,6 +243,9 @@
       thumbnailStyles() {
         return this.stylesAndClasses.thumbnailStyles;
       },
+      thumbnailAlignClass() {
+        return this.stylesAndClasses.thumbnailAlignClass;
+      },
       /*
           Returns dynamic classes and few style-like data that CSS was cumbersome/impossible to use for ,or are in need of using theme, grouped by all possible combinations of layouts.
 
@@ -208,7 +270,7 @@
         if (this.layout === 'vertical' && this.thumbnailDisplay === 'large') {
           return {
             rootClass: 'vertical-with-large-thumbnail',
-            titleLines: 3,
+            thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
             headingStyles: {
               ...headingCommonStyles,
@@ -222,7 +284,7 @@
         if (this.layout === 'vertical' && this.thumbnailDisplay === 'small') {
           return {
             rootClass: 'vertical-with-small-thumbnail',
-            titleLines: 3,
+            thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
             headingStyles: {
               ...headingCommonStyles,
@@ -235,8 +297,8 @@
         }
         if (this.layout === 'vertical' && this.thumbnailDisplay === 'none') {
           return {
-            rootClass: 'vertical-with-no-thumbnail',
-            titleLines: 2,
+            rootClass: undefined,
+            thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
             headingStyles: {
               ...headingCommonStyles,
@@ -246,10 +308,11 @@
             },
           };
         }
+
         if (this.layout === 'horizontal' && this.thumbnailDisplay === 'large') {
           return {
             rootClass: 'horizontal-with-large-thumbnail',
-            titleLines: 3,
+            thumbnailAlignClass: `thumbnail-align-${this.thumbnailAlign}`,
             thumbnailAspectRatio: undefined,
             headingStyles: {
               ...headingCommonStyles,
@@ -264,7 +327,7 @@
         if (this.layout === 'horizontal' && this.thumbnailDisplay === 'small') {
           return {
             rootClass: 'horizontal-with-small-thumbnail',
-            titleLines: 2,
+            thumbnailAlignClass: `thumbnail-align-${this.thumbnailAlign}`,
             thumbnailAspectRatio: '1:1',
             headingStyles: {
               ...headingCommonStyles,
@@ -278,15 +341,12 @@
         }
         if (this.layout === 'horizontal' && this.thumbnailDisplay === 'none') {
           return {
-            rootClass: 'horizontal-with-no-thumbnail',
-            titleLines: 2,
+            rootClass: undefined,
+            thumbnailAlignClass: undefined,
             thumbnailAspectRatio: undefined,
             headingStyles: {
               ...headingCommonStyles,
             },
-            thumbnailStyles: {
-              ...thumbnailCommonStyles,
-            },
           };
         }
         return {};
@@ -303,10 +363,10 @@
   $spacer: 24px;
 
   /*
-      Just couple of comments that are referenced from several places:
-      - (1) Intentionally fixed. Cards on the same row of a grid should have the same overall height and their sections too should have the same height so that information is placed consistently. As documented, consumers need to ensure that contents provided via slots fits well or is truncated.
-      - (2) Solves issues with fixed height in a flex item
-    */
+        Just couple of comments that are referenced from several places:
+        - (1) Intentionally fixed. Cards on the same row of a grid should have the same overall height and their sections too should have the same height so that information is placed consistently. As documented, consumers need to ensure that contents provided via slots fits well or is truncated.
+        - (2) Solves issues with fixed height in a flex item
+      */
 
   /************* Common styles **************/
 
@@ -334,9 +394,8 @@
 
   .below-title {
     order: 4;
-    height: 26px; /* (1) */
     min-height: 26px; /* (2) */
-    margin: 0 $spacer $spacer;
+    margin: 0 $spacer 0 $spacer;
     overflow: hidden; /* (1) */
   }
 
@@ -377,14 +436,12 @@
       margin: $spacer $spacer 0;
     }
   }
-
   .horizontal-with-large-thumbnail {
-    align-items: flex-end;
+    position: relative;
     height: 240px; /* (1) */
 
     .thumbnail {
       position: absolute;
-      left: 0;
       width: 40%;
       height: 100%;
     }
@@ -394,16 +451,40 @@
     .footer {
       width: calc(60% - 2 * #{$spacer}); /* same as heading width defined in script */
     }
+
+    &.thumbnail-align-left {
+      align-items: flex-end;
+      .thumbnail {
+        left: 0;
+      }
+
+      .above-title,
+      .below-title,
+      .footer {
+        margin-right: $spacer;
+      }
+    }
+
+    &.thumbnail-align-right {
+      align-items: flex-start;
+      .thumbnail {
+        right: 0;
+      }
+
+      .above-title,
+      .below-title,
+      .footer {
+        margin-left: $spacer;
+      }
+    }
   }
 
   .horizontal-with-small-thumbnail {
-    align-items: flex-start;
     height: 220px; /* (1) */
 
     .thumbnail {
       position: absolute;
       top: $spacer;
-      right: $spacer;
       width: 30%; /* square dimension achieved via KImgs's aspect-ratio 1:1 */
       min-width: 80px;
     }
@@ -416,6 +497,20 @@
     .footer {
       width: calc(100% - 2 * #{$spacer});
     }
+
+    &.thumbnail-align-left {
+      align-items: flex-end;
+      .thumbnail {
+        left: $spacer;
+      }
+    }
+
+    &.thumbnail-align-right {
+      align-items: flex-start;
+      .thumbnail {
+        right: $spacer;
+      }
+    }
   }
 
 </style>
\ No newline at end of file
diff --git a/lib/KDateRange/KDateCalendar.vue b/lib/KDateRange/KDateCalendar.vue
index f9c1869d2..5fca08778 100644
--- a/lib/KDateRange/KDateCalendar.vue
+++ b/lib/KDateRange/KDateCalendar.vue
@@ -157,8 +157,9 @@
         },
         numOfDays: 7,
         isFirstChoice: this.selectedStartDate == null ? true : false,
-        activeMonth: new Date().getMonth() - 1 == -1 ? 11 : new Date().getMonth() - 1,
-        activeYearStart: new Date().getFullYear(),
+        activeMonth:
+          this.lastAllowedDate.getMonth() - 1 == -1 ? 11 : this.lastAllowedDate.getMonth() - 1,
+        activeYearStart: this.lastAllowedDate.getFullYear(),
       };
     },
     computed: {
diff --git a/lib/KDateRange/__tests__/KDateRange.spec.js b/lib/KDateRange/__tests__/KDateRange.spec.js
index bcf51c83b..ae7d3d0ae 100644
--- a/lib/KDateRange/__tests__/KDateRange.spec.js
+++ b/lib/KDateRange/__tests__/KDateRange.spec.js
@@ -90,9 +90,9 @@ describe('KDateRange component', () => {
 
 const KDATECALENDAR_PROPS = {
   firstAllowedDate: new Date(2022, 0, 1),
-  lastAllowedDate: new Date(),
+  lastAllowedDate: new Date(2022, 10, 1),
   selectedStartDate: new Date(2022, 8, 1),
-  selectedEndDate: new Date(),
+  selectedEndDate: new Date(2022, 10, 1),
   previousMonthText: 'Previous Month',
   nextMonthText: 'Next Month',
 };
@@ -120,16 +120,19 @@ describe('KDateCalendar component', () => {
     expect(wrapper.exists()).toBe(true);
   });
 
-  it('the month and year display on the left-side calendar view should contain the previous month', async () => {
+  it('the month and year display on the left-side calendar view should display the previous month of the lastAllowedDate', async () => {
     const previousMonthDisplay = getKDateCalendarElements(wrapper).previousMonthDisplay();
-    const previousMonth = new Date().setDate(0);
+    const lastAllowedDate = wrapper.props().lastAllowedDate;
+    const previousMonth = new Date(lastAllowedDate);
+    previousMonth.setMonth(lastAllowedDate.getMonth() - 1);
     const date = Vue.prototype.$formatDate(previousMonth, { month: 'long', year: 'numeric' });
     expect(previousMonthDisplay.text()).toBe(date);
   });
 
-  it('the month and year display on the right-side calendar view should contain the current month', async () => {
+  it('the month and year display on the right-side calendar view should display the current month of the lastAllowedDate', async () => {
     const currentMonthDisplay = getKDateCalendarElements(wrapper).currentMonthDisplay();
-    const date = Vue.prototype.$formatDate(new Date(), { month: 'long', year: 'numeric' });
+    const lastAllowedDate = wrapper.props().lastAllowedDate;
+    const date = Vue.prototype.$formatDate(lastAllowedDate, { month: 'long', year: 'numeric' });
     expect(currentMonthDisplay.text()).toBe(date);
   });
 });
diff --git a/lib/KListWithOverflow.vue b/lib/KListWithOverflow.vue
index 5cd0b2f55..5b65fda4a 100644
--- a/lib/KListWithOverflow.vue
+++ b/lib/KListWithOverflow.vue
@@ -104,7 +104,9 @@
 
       // Add resize observer to watch inner list items size changes
       if (typeof window !== 'undefined' && window.ResizeObserver) {
-        this.resizeObserver = new ResizeObserver(this.throttledSetOverflowItems);
+        this.resizeObserver = new ResizeObserver(() =>
+          requestAnimationFrame(this.throttledSetOverflowItems)
+        );
         this.resizeObserver.observe(this.$refs.list);
       }
     },
diff --git a/lib/KResponsiveWindowMixin.js b/lib/KResponsiveWindowMixin.js
deleted file mode 100644
index 345055958..000000000
--- a/lib/KResponsiveWindowMixin.js
+++ /dev/null
@@ -1,196 +0,0 @@
-/*
-  Apply this mixin to your vue components to get reactive information about window sizes.
-
-  Adds a few new reactive properties to your vue model:
-
-    this.windowHeight       // height in pixels
-    this.windowWidth        // width in pixels
-    this.windowBreakpoint   // breakpoint level as described below
-    this.windowIsSmall      // boolean for small range (level < 2)
-    this.windowIsMedium     // boolean for medium range (level = 2)
-    this.windowIsLarge      // boolean for large range (level > 2)
-
-  The breakpoint levels are numbers following Material guidelinse:
-    https://material.io/guidelines/layout/responsive-ui.html#responsive-ui-breakpoints
-
-  Breakpoint Breakdown:
-
-    level 0 (small)
-      < 480 px
-      portrait handset, xsmall window
-      4 columns, 16px gutter
-
-    level 1 (small)
-      < 600 px
-      landscape or large portait handset, small portrait tablet, xsmall window,
-      4 columns, 16px gutter
-
-    level 2 (medium)
-      < 840 px
-      large landscape handset, large portrait tablet, small window,
-      8 columns, 16px gutter
-
-    level 3 (large)
-      < 960 px
-      large landscape handset, large portrait tablet, small window,
-      12 columns, 16px gutter
-
-    level 4 (large)
-      < 1280 px
-      landscape tablet, small or medium window
-      12 columns, 24px gutter
-
-    level 5 (large)
-      < 1440 px
-      large landscape tablet, medium window
-      12 columns, 24px gutter
-
-    level 6 (large)
-      < 1600 px
-      large window
-      12 columns, 24px gutter
-
-    level 7 (large)
-      >= 1600 px
-      large or xlarge window
-      12 columns, 24px gutter
-*/
-
-import { throttle } from 'frame-throttle';
-
-/* module internal state */
-
-const windowListeners = [];
-
-/* methods */
-
-function windowMetrics() {
-  return {
-    width: window.innerWidth,
-    height: window.innerHeight,
-  };
-}
-
-const windowResizeHandler = throttle(() => {
-  const metrics = windowMetrics();
-  windowListeners.forEach(cb => cb(metrics));
-});
-
-function addWindowListener(cb) {
-  windowListeners.push(cb);
-  cb(windowMetrics()); // call it once initially
-}
-
-function removeWindowListener(cb) {
-  windowListeners.splice(windowListeners.indexOf(cb), 1);
-}
-
-// check for Nuxt.js SSR
-const nuxtServerSideRendering = process && process.server;
-
-// setup
-if (!nuxtServerSideRendering) {
-  if (window.addEventListener) {
-    window.addEventListener('resize', windowResizeHandler, true);
-  } else if (window.attachEvent) {
-    window.attachEvent('onresize', windowResizeHandler);
-  }
-  // call it once initially
-  windowResizeHandler();
-}
-
-/* export mixin */
-
-export default {
-  data() {
-    return {
-      windowWidth: undefined,
-      windowHeight: undefined,
-
-      /*
-        Implementing breakpoint as data controlled by watchers to work around
-        optimization issue: https://github.com/vuejs/vue/issues/10344
-        If that issue ever gets addressed, we should make them computed props.
-      */
-      windowBreakpoint: undefined,
-      windowIsPortrait: false,
-      windowIsLandscape: false,
-      windowGutter: 16,
-      windowIsShort: false,
-    };
-  },
-  watch: {
-    windowWidth() {
-      this._updateBreakpoint();
-      this._updateGutter();
-      this._updateOrientation();
-    },
-    windowHeight() {
-      this.windowIsShort = this.windowHeight < 600;
-      this._updateGutter();
-      this._updateOrientation();
-    },
-  },
-  computed: {
-    /*
-      CAUTION: do not reference windowWidth or windowHeight in computed props.
-    */
-    windowIsLarge() {
-      return this.windowBreakpoint > 2;
-    },
-    windowIsMedium() {
-      return this.windowBreakpoint === 2;
-    },
-    windowIsSmall() {
-      return this.windowBreakpoint < 2;
-    },
-  },
-  methods: {
-    _updateWindow(metrics) {
-      this.windowWidth = metrics.width;
-      this.windowHeight = metrics.height;
-    },
-    _updateBreakpoint() {
-      const SCROLL_BAR = 16;
-      if (this.windowWidth < 480) {
-        this.windowBreakpoint = 0;
-      } else if (this.windowWidth < 600) {
-        this.windowBreakpoint = 1;
-      } else if (this.windowWidth < 840) {
-        this.windowBreakpoint = 2;
-      } else if (this.windowWidth < 960 - SCROLL_BAR) {
-        this.windowBreakpoint = 3;
-      } else if (this.windowWidth < 1280 - SCROLL_BAR) {
-        this.windowBreakpoint = 4;
-      } else if (this.windowWidth < 1440 - SCROLL_BAR) {
-        this.windowBreakpoint = 5;
-      } else if (this.windowWidth < 1600 - SCROLL_BAR) {
-        this.windowBreakpoint = 6;
-      } else {
-        this.windowBreakpoint = 7;
-      }
-    },
-    _updateOrientation() {
-      this.windowIsPortrait = this.windowWidth < this.windowHeight;
-      this.windowIsLandscape = !this.windowIsPortrait;
-    },
-    _updateGutter() {
-      if (this.windowIsSmall) {
-        this.windowGutter = 16;
-      } else if (this.windowBreakpoint < 4 && Math.min(this.windowWidth, this.windowHeight) < 600) {
-        // 16px when the smallest dimension of the window is < 600
-        this.windowGutter = 16;
-      } else {
-        this.windowGutter = 24;
-      }
-    },
-  },
-  mounted() {
-    // prettier-ignore
-    console.warn(`Please use 'useKResponsiveWindow' composable instead of 'KResponsiveWindow' mixin`);
-    addWindowListener(this._updateWindow);
-  },
-  beforeDestroy() {
-    removeWindowListener(this._updateWindow);
-  },
-};
diff --git a/package.json b/package.json
index d3c965911..0ca2dc1fe 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "kolibri-design-system",
-  "version": "5.0.0-rc1",
+  "version": "5.0.0-rc2",
   "private": false,
   "description": "The Kolibri Design System defines common design patterns and code for use in Kolibri applications",
   "repository": {