diff --git a/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx b/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx
index 97ddbb2a0..f598cd509 100644
--- a/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx
+++ b/packages/esm-commons-lib/src/components/card-summary/summary-card.component.tsx
@@ -72,26 +72,28 @@ export const SummaryCard: React.FC<SummaryCardProps> = ({ patientUuid, columns,
       {isLoading ? (
         <SkeletonText paragraph={true} />
       ) : (
-        <Tile className={styles.tile}>
-          <div className={styles.cardTitle}>
-            <h4 className={styles.title}> {headerTitle} </h4>
-          </div>
-          {maxRowItems ? (
-            groupedEncounterMappings.map((group) => (
+        <div className={styles.tilesContainer}>
+          <Tile className={styles.tile}>
+            <div className={styles.cardTitle}>
+              <h4 className={styles.title}> {headerTitle} </h4>
+            </div>
+            {maxRowItems ? (
+              groupedEncounterMappings.map((group) => (
+                <Column className={styles.columnContainer}>
+                  {group.map(({ column, encounters }) => (
+                    <SummaryItem column={column} encounters={encounters} />
+                  ))}
+                </Column>
+              ))
+            ) : (
               <Column className={styles.columnContainer}>
-                {group.map(({ column, encounters }) => (
+                {columnEncountersMappings.map(({ column, encounters }) => (
                   <SummaryItem column={column} encounters={encounters} />
                 ))}
               </Column>
-            ))
-          ) : (
-            <Column className={styles.columnContainer}>
-              {columnEncountersMappings.map(({ column, encounters }) => (
-                <SummaryItem column={column} encounters={encounters} />
-              ))}
-            </Column>
-          )}
-        </Tile>
+            )}
+          </Tile>
+        </div>
       )}
     </>
   );
diff --git a/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx b/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx
index 14621761d..fc0f5bd79 100644
--- a/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx
+++ b/packages/esm-commons-lib/src/components/encounter-tile/encounter-tile.component.tsx
@@ -27,7 +27,7 @@ export interface EncounterValuesTileProps {
 
 export const EncounterTile: React.FC<EncounterTileProps> = ({ patientUuid, columns, headerTitle }) => {
   return (
-    <>
+    <div className={styles.tilesContainer}>
       <Tile className={styles.tile}>
         <div className={styles.cardTitle}>
           <h4 className={styles.title}> {headerTitle} </h4>
@@ -38,7 +38,7 @@ export const EncounterTile: React.FC<EncounterTileProps> = ({ patientUuid, colum
           ))}
         </Column>
       </Tile>
-    </>
+    </div>
   );
 };
 
diff --git a/packages/esm-commons-lib/src/styleguide/tiles.scss b/packages/esm-commons-lib/src/styleguide/tiles.scss
index af5ed3148..5b0323e00 100644
--- a/packages/esm-commons-lib/src/styleguide/tiles.scss
+++ b/packages/esm-commons-lib/src/styleguide/tiles.scss
@@ -21,8 +21,11 @@
   border-bottom: 0.375rem solid $brand-teal-01;
 }
 
+.tilesContainer {
+  height: fit-content;
+}
+
 .tile {
-  height: 100%;
   padding: 1px 0 16px 16px;
   margin: 0.5rem;
   border: solid 1px #e0e0e0;