diff --git a/src/components/tile-manager/themes/tile-manager.base.scss b/src/components/tile-manager/themes/tile-manager.base.scss
index f1aa50f5e..ddba3fc05 100644
--- a/src/components/tile-manager/themes/tile-manager.base.scss
+++ b/src/components/tile-manager/themes/tile-manager.base.scss
@@ -3,11 +3,13 @@
 
 [part='base'] {
     display: grid;
-    grid-template-columns: repeat(auto-fit, 20px);
-    grid-template-rows: repeat(auto-fit, 20px) ;
-    grid-auto-columns: 20px;
-    grid-auto-rows: 20px;
+    grid-template-columns: repeat(auto-fit, minmax(20px, auto));
+    grid-template-rows: repeat(auto-fit, minmax(20px, auto));
+    grid-auto-columns: minmax(20px, 1fr);
+    grid-auto-rows: minmax(20px, 1fr);
     grid-gap: 10px;
-    //dense option rearranges the items to remove the empty spaces when possible
-    //grid-auto-flow: dense;
+    grid-auto-flow: dense;
+    box-sizing: border-box;
+    width: 100%;
+    max-width: 100%;
 }
diff --git a/src/components/tile-manager/themes/tile.base.scss b/src/components/tile-manager/themes/tile.base.scss
index 4d11095ca..7ed7abbe3 100644
--- a/src/components/tile-manager/themes/tile.base.scss
+++ b/src/components/tile-manager/themes/tile.base.scss
@@ -6,6 +6,8 @@
     grid-column: span 5;
     border: 5px solid blue;
     background-color: yellow;
+    position: relative;
+    box-sizing: border-box;
 }
 
 .dragging {
@@ -14,3 +16,36 @@
     opacity: 0.8;
     cursor: grabbing;
 }
+
+.resize-handle {
+    position: absolute;
+    width: 15px;
+    height: 15px;
+    right: 0;
+    bottom: 0;
+    cursor: se-resize;
+    background: rgba(0, 0, 0);
+    z-index: 999;
+}
+
+.resizer {
+    position: absolute;
+    background: pink;  /* Color for visibility */
+    z-index: 10;
+}
+  
+.resizer.right {
+    top: 0;
+    right: -4px;
+    bottom: 0;
+    width: 2px;
+    cursor: ew-resize;
+}
+
+.resizer.bottom {
+    left: 0;
+    right: 0;
+    bottom: -4px;
+    height: 2px;
+    cursor: ns-resize;
+}
diff --git a/src/components/tile-manager/tile.ts b/src/components/tile-manager/tile.ts
index 0277df612..a5fbdc047 100644
--- a/src/components/tile-manager/tile.ts
+++ b/src/components/tile-manager/tile.ts
@@ -12,6 +12,7 @@ import { styles } from './themes/tile.base.css.js';
 export default class IgcTileComponent extends LitElement {
   public static readonly tagName = 'igc-tile';
   public static override styles = [styles];
+  protected activeResizer = '';
 
   /* blazorSuppress */
   public static register() {
@@ -44,11 +45,64 @@ export default class IgcTileComponent extends LitElement {
     this.classList.remove('dragging');
   }
 
+  startResize(event: MouseEvent) {
+    event.preventDefault();
+
+    if (event.target instanceof Element) {
+      this.activeResizer = event.target.classList.contains('right')
+        ? 'right'
+        : event.target.classList.contains('bottom')
+          ? 'bottom'
+          : 'handle';
+    }
+
+    this.onResizing = this.onResizing.bind(this);
+    this.stopResize = this.stopResize.bind(this);
+
+    window.addEventListener('mousemove', this.onResizing);
+    window.addEventListener('mouseup', this.stopResize);
+  }
+
+  onResizing(event: MouseEvent) {
+    const startPos = this.getBoundingClientRect();
+
+    const newWidth = event.clientX - startPos.left;
+    const newHeight = event.clientY - startPos.top;
+
+    const colSpan = Math.max(1, Math.floor(newWidth / 30));
+    const rowSpan = Math.max(1, Math.floor(newHeight / 30));
+
+    if (this.activeResizer === 'right' || this.activeResizer === 'handle') {
+      this.style.gridColumn = `span ${colSpan}`;
+    }
+
+    if (this.activeResizer === 'bottom' || this.activeResizer === 'handle') {
+      this.style.gridRow = `span ${rowSpan}`;
+    }
+  }
+
+  stopResize() {
+    window.removeEventListener('mousemove', this.onResizing);
+    window.removeEventListener('mouseup', this.stopResize);
+  }
+
   protected override render() {
     return html`
       <div part="base">
         <slot name="header"></slot>
         <slot></slot>
+        <div
+          class="resize-handle"
+          @mousedown=${this.startResize.bind(this)}
+        ></div>
+        <div
+          class="resizer right"
+          @mousedown=${this.startResize.bind(this)}
+        ></div>
+        <div
+          class="resizer bottom"
+          @mousedown=${this.startResize.bind(this)}
+        ></div>
       </div>
     `;
   }