diff --git a/source/js/app.js b/source/js/app.js
index 736fa94d1..be185ad6d 100644
--- a/source/js/app.js
+++ b/source/js/app.js
@@ -21,7 +21,6 @@ import DynamicSidebar from './dynamicSidebar';
 import Navbar from './navbar';
 import Table from './table';
 import Segment from './segment';
-import ContainerMediaQuery from './mediaQuery';
 import {initializePagination} from './pagination';
 import ResizeByChildren from './resizeByChildren';
 import KeepInViewPort from './keepInViewPort';
@@ -46,6 +45,8 @@ import {initializeOpenStreetMaps} from './openStreetMap';
 import {setupCopy} from './copy';
 import { initializeCompressed } from './compressed';
 import {DeviceDetect} from './deviceDetect';
+import {initializeComponentResize} from './resizeMediaQuery';
+import {initializeResizeMediaQuery} from './resizeMediaQuery';
 
 expandSection();
 setScrollbarCSS();
@@ -67,7 +68,6 @@ const NotificationInstance = new Notification();
 const NotificationDocInstance = new NotificationDoc();
 const SidebarInstance = new Sidebar();
 const NavbarInstance = new Navbar();
-const ContainerMediaQueryInstance = new ContainerMediaQuery();
 const KeepInViewPortInstance = new KeepInViewPort();
 const ResizeByChildrenInstance = new ResizeByChildren();
 const ButtonToggleContentInstance = new ButtonToggleContent();
@@ -80,6 +80,7 @@ initializeMenus();
 initializeSlider();
 initializeCompressed();
 setupCopy();
+initializeResizeMediaQuery();
 selectComponentObserverInstance.observe();
 
 const tables = document.querySelectorAll('.c-table');
diff --git a/source/js/mediaQuery.js b/source/js/mediaQuery.js
deleted file mode 100644
index 2e54995e5..000000000
--- a/source/js/mediaQuery.js
+++ /dev/null
@@ -1,89 +0,0 @@
-/* eslint-disable no-restricted-globals */
-/* eslint-disable class-methods-use-this */
-/**
- * Component Image
- */
-class ContainerMediaQuery {
-  constructor() {
-
-    // Class vars
-    const prefixName = "--size-"; 
-      
-    // Init only if browser supports ResizeObserver
-    if ('ResizeObserver' in self) {
-      this.resizeObserver = new ResizeObserver((entries) => {
-        const defaultBreakpoints = {xs: 384, sm: 576, md: 768, lg: 960, xl: 1200};
-
-        entries.forEach((entry) => {
-          
-          // If breakpoints are defined on the observed element,
-          const breakpoints = entry.target.dataset.breakpoints ?
-          JSON.parse(entry.target.dataset.breakpoints) :
-          defaultBreakpoints;
-
-          // Update the matching breakpoints on the observed element.
-          Object.keys(breakpoints).forEach((breakpoint) => {
-
-            const minWidth = breakpoints[breakpoint];
-
-            if (entry.contentRect.width >= minWidth) {
-              entry.target.classList.add(entry.target.classList[0] + prefixName + breakpoint);
-            } else {
-              entry.target.classList.remove(entry.target.classList[0] + prefixName + breakpoint);
-            }
-
-          });
-        });  
-      }); 
-
-      this.initMediaQueryElements(); 
-      this.observerNewElements();
-    }
-  }
-
-  observerNewElements() {
-    const observer = new MutationObserver(mutationsList => {
-      mutationsList.forEach(mutation => {
-        const elements = mutation.addedNodes;
-        if (elements?.length) {
-          elements.forEach(element => {
-            if (element?.nodeType === Node.ELEMENT_NODE && element.matches('[data-observe-resizes]')) {
-              this.resizeObserver.observe(element);
-            }
-          });
-        }
-      });
-    });
-    
-    observer.observe(document.body, {
-      childList: true,
-      subtree: true,
-    });
-  }
-
-  /**
-   * Init
-   * @return void
-   */
-  initMediaQueryElements() {
-
-    // Get elements
-    const targetElemets = this.getTargetElements(); 
-
-    // Init observer on all target elements
-    if(targetElemets.length) {
-      targetElemets.forEach((element) => {
-        this.resizeObserver.observe(element);
-      }); 
-    }
-  }
-
-  /**
-   * Makes query to dom, for observe data attr. 
-   */
-  getTargetElements() {
-    return document.querySelectorAll('[data-observe-resizes]');
-  }
-}
-
-export default ContainerMediaQuery;
\ No newline at end of file
diff --git a/source/js/resizeMediaQuery.ts b/source/js/resizeMediaQuery.ts
new file mode 100644
index 000000000..0483f9d50
--- /dev/null
+++ b/source/js/resizeMediaQuery.ts
@@ -0,0 +1,87 @@
+/* eslint-disable no-restricted-globals */
+/* eslint-disable class-methods-use-this */
+/**
+ * Component Image
+ */
+class ResizeMediaQuery {
+    private prefixName: string;
+    private element: HTMLElement;
+    private defaultBreakpoints: Object;
+    private resizeClass: string | null;
+
+    constructor(element: HTMLElement) {
+  
+        // Class vars
+        this.prefixName = "--size-"; 
+        this.defaultBreakpoints = {xs: 384, sm: 576, md: 768, lg: 960, xl: 1200};
+        this.element = element;
+        this.resizeClass = null;
+
+        let resizeClass = element.getAttribute('data-observe-resizes');
+        if (resizeClass !== '') {
+            this.resizeClass = resizeClass;
+        }
+
+        // Init only if browser supports ResizeObserver
+        if ('ResizeObserver' in self) {
+            this.resizeObserver();
+        }
+    }
+
+    private resizeObserver () {
+        new ResizeObserver((entries) => {
+            entries.forEach((entry) => {
+                this.handleResize(entry);
+            });  
+        }).observe(this.element); 
+    }
+
+    private handleResize(entry: ResizeObserverEntry) {
+        // If breakpoints are defined on the observed element,
+        
+        const element = entry.target as HTMLElement;
+        const breakpoints = element.dataset.breakpoints ?
+        JSON.parse(element.dataset.breakpoints) :
+        this.defaultBreakpoints;
+
+        // Update the matching breakpoints on the observed element.
+        Object.keys(breakpoints).forEach((breakpoint) => {
+            const minWidth = breakpoints[breakpoint];
+            if (entry.contentRect.width >= minWidth) {
+                element.classList.add((this.resizeClass ?? element.classList[0]) + this.prefixName + breakpoint);
+            } else {
+                element.classList.remove((this.resizeClass ?? element.classList[0]) + this.prefixName + breakpoint);
+            }
+        });
+    }
+}
+
+export function initializeResizeMediaQuery() {
+    document.addEventListener('DOMContentLoaded', () => {
+        const elements = document.querySelectorAll('[data-observe-resizes]');
+    
+        if (elements.length) {
+            elements.forEach((element) => {
+                new ResizeMediaQuery(element as HTMLElement);
+            }); 
+        }
+      
+        const observer = new MutationObserver(mutationsList => {
+          mutationsList.forEach(mutation => {
+            const elements = mutation.addedNodes;
+            if (elements?.length) {
+              elements.forEach(element => {
+                        if (element?.nodeType === Node.ELEMENT_NODE && (element as HTMLElement).matches('[data-observe-resizes]')) {
+                            new ResizeMediaQuery(element as HTMLElement);
+                        }
+                    });
+                }
+            });
+        });
+        
+        observer.observe(document.body, {
+            childList: true,
+            subtree: true,
+        });
+    });
+}
\ No newline at end of file