diff --git a/src/cards/button/styles.ts b/src/cards/button/styles.ts
index c7129f81..f80a1ed1 100644
--- a/src/cards/button/styles.ts
+++ b/src/cards/button/styles.ts
@@ -21,11 +21,12 @@ export default `
         width: 100%;
         height: 50px;
         background-color: var(--bubble-button-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
         box-shadow: var(--bubble-button-box-shadow, var(--bubble-box-shadow, none));
         overflow: scroll;
         touch-action: pan-y;
     }
+        
 
     .bubble-button-card,
     .bubble-range-slider,
@@ -41,7 +42,7 @@ export default `
     .bubble-button-background {
         background-color: var(--bubble-button-background-color);
         opacity: .5;
-        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: inherit;
     }
     .bubble-range-fill {
         position: absolute;
@@ -65,7 +66,7 @@ export default `
     }
     .bubble-range-slider {
         cursor: ew-resize;
-        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: inherit);
         overflow: hidden;
         mask-image: radial-gradient(white, black);
         -webkit-mask-image: -webkit-radial-gradient(white, black);
@@ -80,7 +81,7 @@ export default `
         margin: 6px;
         border-radius: var(--bubble-button-icon-border-radius, var(--bubble-icon-border-radius, var(--bubble-border-radius, 50%)));
         background-color: var(--bubble-button-icon-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));
-        overflow: hidden;
+        overflow: hidden; 
         position: relative;
         cursor: pointer;
     }
@@ -150,30 +151,83 @@ export default `
         100% {transform: translateX(100%); opacity: 0;}
     }
 
+    .large .bubble-button-card{
+        --line-height: 18px;
+        --gap-to-edge: 7px;
+        display: grid;
+        grid-template-areas:
+        'i n c a' 'b b b b' !important;
+        grid-template-columns: var(--row-height,56px) 1fr auto auto;
+        grid-template-rows: var(--row-height,56px) 1fr;
+        justify-self: start;
+        justify-items: start;
+        align-self: center;
+        align-items: center;
+    }
+    .large.bubble-empty-sub-buttons .bubble-button-card{
+        grid-template-rows: 1fr 0;
+        align-content: center;
+    }
+
+
+
     .large .bubble-button-card-container {
-      height: 56px;
-      border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 32px));
+      height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
     }
 
-    .large .bubble-icon-container {
+    .large .bubble-button-card .bubble-icon-container {
       --mdc-icon-size: 24px;
-      min-width: 42px !important;
-      min-height: 42px !important;
-      margin-left: 8px;
+      width: calc(var(--row-height,56px) - 14px);
+      height: calc(var(--row-height,56px) - 14px);
+      grid-area: i;
+      margin: 7px;
+    }
+    
+    .large .bubble-button-card .bubble-name-container {
+      justify-content: flex-start;
+      grid-area: n;
+      overflow: hidden;
+      margin: 0px;
+      max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+    }
+
+    .large .bubble-button-card .bubble-sub-button-container {
+        grid-area: c;
+        max-width: 100%;
+        height: 36px;
+        flex-wrap: wrap-reverse;
+        row-gap: 4px;
+        align-self: center;
+        align-content: center;
+    }
+
+    .large .bubble-button-card .bubble-sub-button-container.expanded {
+        max-height: 100%;
+        height: auto;
+        max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+        grid-area: b;
+        flex-wrap: wrap;
+        justify-self: center;
+        align-self: center;
+        justify-content: center;
+        align-content: start;
+        justify-items: center;
+        padding-bottom: 7px;
     }
 
-    .rows-2 .bubble-sub-button-container {
+    .rows-2 .bubble-button-card .bubble-sub-button-container {
       flex-direction: column;
       gap: 4px !important;
       display: grid !important;
       grid-template-columns: repeat(2, min-content);
       grid-template-rows: repeat(2, 1fr);
       grid-auto-flow: column;
+      align-self: center;
       width: auto;
-      padding-right: 14px;
+      padding-right: 7px;
     }
 
-    .rows-2 .bubble-sub-button {
+    .rows-2 .bubble-button-card .bubble-sub-button {
       height: 20px !important;
     }
 `;
\ No newline at end of file
diff --git a/src/cards/climate/styles.ts b/src/cards/climate/styles.ts
index c1c4928f..b5ac5d36 100644
--- a/src/cards/climate/styles.ts
+++ b/src/cards/climate/styles.ts
@@ -17,7 +17,7 @@ export default `
         width: 100%;
         height: 50px;
         background-color: var(--bubble-climate-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-        border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
         box-shadow: var(--bubble-climate-box-shadow, var(--bubble-box-shadow, none));
         overflow: visible;
         touch-action: pan-y;
@@ -97,7 +97,7 @@ export default `
         width: 100%;
         height: 100%;
         position: absolute;
-        border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: var(--bubble-sub-button-border-radius, var(--bubble-border-radius, 50%));
         overflow: hidden;
         pointer-events: none;
     }
@@ -118,7 +118,7 @@ export default `
         width: 100%;
         height: 100%;
         position: absolute;
-        border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: inherit;
         opacity: 0.7;
         transition: background-color 2s ease;
     }
@@ -219,29 +219,119 @@ export default `
         100% {transform: translateX(100%); opacity: 0;}
     }
 
+    .large .bubble-climate{
+        --line-height: 18px;
+        --gap-to-edge: 7px;
+        display: grid;
+        gap: 4px;
+        grid-template-areas:
+        'i n c a' 'b b b b' !important;
+        grid-template-columns: var(--row-height,56px) 1fr auto auto;
+        grid-template-rows: var(--row-height,56px) 1fr;
+        justify-self: start;
+        justify-items: start;
+        align-self: center;
+        align-items: center;
+    }
+    .large.bubble-empty-sub-buttons .bubble-climate{
+        grid-template-rows: 1fr 0;
+        align-content: center;
+    }
+
     .large .bubble-climate-container {
-      height: 56px;
-      border-radius: var(--bubble-climate-border-radius, var(--bubble-border-radius, 32px));
+      height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
     }
 
-    .large .bubble-icon-container {
+    .large .bubble-climate .bubble-icon-container {
       --mdc-icon-size: 24px;
-      min-width: 42px !important;
-      min-height: 42px !important;
-      margin-left: 8px;
+      width: calc(var(--row-height,56px) - 14px);
+      height: calc(var(--row-height,56px) - 14px);
+      grid-area: i;
+      margin: 7px;
+    }
+    
+    .large .bubble-climate .bubble-button-container{
+        grid-area: a;
+        display: contents !important;
+    }
+
+
+    .large.AlternativeLayout.bubble-multi-row .bubble-climate .bubble-button-container {
+        grid-area: b;
+        height: calc(100% - 7px);
+        width: calc(100% - 2 * var(--gap-to-edge,7px));
+        display: flex !important;
+        row-gap: 4px;
+        flex-wrap: wrap;
+        align-self: center;
+        justify-self: center;
+        justify-content: center;
+        align-items: center;
+        justify-items: center;
+        padding-bottom: 7px;
+        margin-right: 0px;
+    }
+    
+    .large .bubble-climate .bubble-temperature-container{
+        grid-area: a;
+        height: calc(var(--row-height,56px) - 20px);
+        width: auto;
+        justify-self: center;
+        margin-right: var(--gap-to-edge,7px);
+    }
+    .large.AlternativeLayout .bubble-climate .bubble-temperature-container{
+        margin-right: 0px;
+    }
+    
+    .large .bubble-climate .bubble-name-container {
+        justify-content: flex-start;
+        grid-area: n;
+        overflow: hidden;
+        margin: 0px;
+        max-width: 100%;
+    }
+
+    .large .bubble-climate .bubble-sub-button-container {
+        grid-area: c;
+        max-width: 100%;
+        height: 36px;
+        flex-wrap: wrap-reverse;
+        row-gap: 4px;
+        align-self: center;
+        align-content: center;
+    }
+
+    .large .bubble-climate .bubble-sub-button-container.expanded {
+        max-height: 100%;
+        height: auto;
+        max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+        grid-area: b;
+        flex-wrap: wrap;
+        justify-self: center;
+        align-self: center;
+        justify-content: center;
+        align-content: start;
+        justify-items: center;
+        padding-bottom: 7px;
+    }
+
+    .large.AlternativeLayout.bubble-multi-row .bubble-climate .bubble-sub-button-container{
+        padding-bottom: 0px;   
+        display: contents;
     }
 
-    .rows-2 .bubble-sub-button-container {
+    .rows-2 .bubble-climate .bubble-sub-button-container {
       flex-direction: column;
       gap: 4px !important;
       display: grid !important;
       grid-template-columns: repeat(2, min-content);
       grid-template-rows: repeat(2, 1fr);
       grid-auto-flow: column;
+      align-self: center;
       width: auto;
     }
 
-    .rows-2 .bubble-sub-button {
+    .rows-2 .bubble-climate .bubble-sub-button {
       height: 20px !important;
     }
 `;
diff --git a/src/cards/cover/styles.ts b/src/cards/cover/styles.ts
index 1b44663f..733c9b08 100644
--- a/src/cards/cover/styles.ts
+++ b/src/cards/cover/styles.ts
@@ -11,6 +11,7 @@ export default `
         display: grid;
         gap: 10px;
         overflow: hidden;
+        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
     }
 
     .bubble-header {
@@ -95,71 +96,109 @@ export default `
         justify-content: center;
         cursor: pointer;
         border: none;
-    }
-
+    }      
+    
     .large .bubble-cover-card-container {
-      height: 56px;
-      display: flex;
+      height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
       background: var(--bubble-cover-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-      border-radius: var(--bubble-cover-border-radius, var(--bubble-border-radius, 32px));
+      --line-height: 18px;
+      --gap-to-edge: 7px;
+      display: grid;
+      gap: 4px;
+      grid-template-areas:
+      'i n c a' 'b b b b' !important;
+      grid-template-columns: var(--row-height,56px) 1fr auto auto;
+      grid-template-rows: var(--row-height,56px) 1fr;
+      justify-self: start;
+      justify-items: start;
+      align-self: center;
+      align-items: center;
       box-shadow: var(--bubble-cover-box-shadow, var(--bubble-button-box-shadow, var(--bubble-box-shadow, none)));
     }
+    .large.bubble-empty-sub-buttons .bubble-cover-card-container{
+        grid-template-rows: 1fr 0;
+        align-content: center;
+    }
 
-    .large .bubble-buttons .bubble-icon {
+    .large .bubble-cover-card-container .bubble-buttons .bubble-icon {
       color: var(--primary-text-color) !important;
       opacity: 1;
     }
-
-    .large .bubble-header-container {
-        height: 56px;
-    }
-
-    .large .bubble-header {
-        width: 100%;
+    
+    .large .bubble-cover-card-container .bubble-header {
+      display: contents;
+      height: var(--row-height,56);
+      width: 100%;
     }
 
-    .large .bubble-icon-container {
+    .large .bubble-cover-card-container .bubble-header .bubble-icon-container {
       --mdc-icon-size: 24px;
-      min-width: 42px !important;
-      min-height: 42px !important;
-      align-content: center;
-      border: none;
-      margin: 8px 6px 8px 8px;
-    }
-
-    .large .bubble-icon {
-      align-items: center;
+      width: calc(var(--row-height,56px) - 14px);
+      height: calc(var(--row-height,56px) - 14px);
+      grid-area: i;
+      margin: 7px;
     }
 
-    .large .bubble-buttons {
+    .large .bubble-cover-card-container .bubble-buttons {
       display: flex;
       position: relative;
-      right: 18px;
       align-self: center;
-      grid-gap: 18px;
+      padding-right: var(--line-height,18px);
+      grid-gap: var(--line-height,18px);
+      grid-area: a;
+    }
+
+    .large .bubble-cover-card-container .bubble-name-container {
+      justify-content: flex-start;
+      grid-area: n;
+      overflow: hidden;
+      margin: 0px;
+      max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+    }
+    
+
+    .large .bubble-cover-card-container .bubble-sub-button-container {
+      grid-area: c;
+        max-width: 100%;
+        height: 36px;
+        flex-wrap: wrap-reverse;
+        row-gap: 4px;
+        align-self: center;
+        align-content: center;
     }
-
+    
+    .large.bubble-multi-row .bubble-cover-card-container .bubble-sub-button-container {
+        max-height: 100%;
+        height: auto;
+        max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+        grid-area: b;
+        flex-wrap: wrap;
+        justify-self: center;
+        align-self: center;
+        justify-content: center;
+        align-content: start;
+        justify-items: center;
+        padding-bottom: 7px;
+    }
+    
     .large .bubble-button,
     .large .bubble-sub-button {
       box-shadow: none;
     }
-
-    .large .bubble-sub-button-container {
-      margin-right: 14px;
-    }
-
-    .rows-2 .bubble-sub-button-container {
+    
+    .rows-2 .bubble-cover-card-container .bubble-sub-button-container {
       flex-direction: column;
       gap: 4px !important;
       display: grid !important;
       grid-template-columns: repeat(2, min-content);
       grid-template-rows: repeat(2, 1fr);
       grid-auto-flow: column;
+      align-self: center;
       width: auto;
-      padding-right: 14px;
+      padding-right: 7px;
     }
 
-    .rows-2 .bubble-sub-button {
+    .rows-2 .bubble-cover-card-container .bubble-sub-button {
       height: 20px !important;
     }
 `
\ No newline at end of file
diff --git a/src/cards/media-player/changes.ts b/src/cards/media-player/changes.ts
index 425080f0..984af081 100644
--- a/src/cards/media-player/changes.ts
+++ b/src/cards/media-player/changes.ts
@@ -168,10 +168,11 @@ export function changeVolumeIcon(context) {
     context.elements.volumeButton.setAttribute("icon", newIcon);
     context.elements.mediaInfoContainer.style.opacity = newOpacity;
     context.elements.nameContainer.style.opacity = newOpacity;
-    if (context.elements.subButtonContainer) context.elements.subButtonContainer.style.opacity = newOpacity;
-    context.elements.previousButton.style.opacity = newOpacity;
-    context.elements.nextButton.style.opacity = newOpacity;
-    context.elements.powerButton.style.opacity = newOpacity;
+
+    if(context.elements.subButtonContainer && !context.content.classList.contains('bubble-multi-row'))context.elements.subButtonContainer.style.opacity = newOpacity;
+    if(!context.content.classList.contains('AlternativeLayout') || !context.content.classList.contains('bubble-multi-row'))context.elements.previousButton.style.opacity = newOpacity;
+    if(!context.content.classList.contains('AlternativeLayout') || !context.content.classList.contains('bubble-multi-row'))context.elements.nextButton.style.opacity = newOpacity;
+    if(!context.content.classList.contains('AlternativeLayout') || !context.content.classList.contains('bubble-multi-row'))context.elements.powerButton.style.opacity = newOpacity;
     
     context.elements.volumeButton.isHidden = !isHidden;
 }
diff --git a/src/cards/media-player/styles.ts b/src/cards/media-player/styles.ts
index 4e6394fa..9eced31c 100644
--- a/src/cards/media-player/styles.ts
+++ b/src/cards/media-player/styles.ts
@@ -19,7 +19,7 @@ export default `
         height: 50px;
         background-color: var(--bubble-media-player-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
         touch-action: pan-y;
-        border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
         box-shadow: var(--bubble-media-player-box-shadow, var(--bubble-box-shadow, none));
     }
 
@@ -51,7 +51,7 @@ export default `
         background: none;
         border: none;
         cursor: pointer;
-        border-radius: var(--bubble-media-player-buttons-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: var(--bubble-media-player-buttons-border-radius, var(--bubble-border-radius, 50%));
         padding: 6px;
         height: 24px;
         width: 24px;
@@ -69,7 +69,7 @@ export default `
         height: 38px;
         left: 50px;
         overflow: hidden;
-        border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: var(--bubble-media-player-border-radius, calc(var(--row-height,56px)/2));
         z-index: 1;
         background-color: var(--bubble-media-player-slider-background-color, var(--bubble-icon-background-color, var(--bubble-secondary-background-color, var(--card-background-color, var(--ha-card-background)))));
         opacity: 1;
@@ -275,54 +275,153 @@ export default `
         100% {transform: translateX(100%); opacity: 0;}
     }
 
-    .large .bubble-media-player-container {
-      height: 56px;
-      border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
+    .large .bubble-media-player-container{
+      display: flex;
+      height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
+    }
+
+    .large .bubble-media-player{
+      --line-height: 18px;
+      --gap-to-edge: 7px;
+      display: grid;
+      gap: 4px;
+      grid-template-areas:
+      'i n c a1 a2 a3 a4 a5' 'b b b b b b b b' !important;
+      grid-template-columns: var(--row-height,56px) 1fr auto auto auto auto auto auto;
+      grid-template-rows: var(--row-height,56px) 1fr;
+      justify-self: start;
+      justify-items: start;
+      align-self: center;
+      align-items: center;
+    }
+    .large.bubble-empty-sub-buttons .bubble-media-player{
+        grid-template-rows: 1fr 0;
+        align-content: center;
     }
 
-    .large .bubble-icon-container {
+    .large .bubble-media-player-container .bubble-icon-container {
       --mdc-icon-size: 24px;
-      min-width: 42px !important;
-      min-height: 42px !important;
-      margin-left: 8px;
+      width: calc(var(--row-height,56px) - 14px);
+      height: calc(var(--row-height,56px) - 14px);
+      grid-area: i;
+      margin: 7px;
+    }
+    
+    .large .bubble-media-player-container .bubble-button-container{
+        grid-area: a1;
+        display: contents;
+    }
+
+    .large.AlternativeLayout.bubble-multi-row .bubble-media-player-container .bubble-button-container {
+        grid-area: b;
+        height: calc(100% - 7px);
+        width: calc(100% - 2 * var(--gap-to-edge,7px));
+        display: flex !important;
+        row-gap: 4px;
+        flex-wrap: wrap;
+        align-self: center;
+        justify-self: center;
+        justify-content: center;
+        align-items: center;
+        justify-items: center;
+        padding-bottom: 7px;
+        margin-right: 0px;
     }
     
-    .large .bubble-play-pause-button {
+   .large .bubble-media-player-container .bubble-power-button{
+      grid-area: a1;
+   }
+
+   .large .bubble-media-player-container .bubble-previous-button{
+      grid-area: a2;
+   }
+
+   .large .bubble-media-player-container .bubble-next-button{
+      grid-area: a3;
+   }
+
+   .large .bubble-media-player-container .bubble-volume-button{
+      grid-area: a4;
+   }
+
+    .large .bubble-media-player-container  .bubble-play-pause-button {
       display: flex;
       height: 42px;
       width: 42px;
       padding: 0;
+      grid-area: a5;
       align-items: center;
       justify-content: center;
+      margin: var(--gap-to-edge,7px) var(--gap-to-edge,7px) var(--gap-to-edge,7px) 0;
     }
 
-    .large .bubble-volume-slider {
-      height: 42px;
-      border-radius: var(--bubble-media-player-border-radius, var(--bubble-border-radius, 32px));
-      left: 60px;
-      width: calc(100% - 168px);
+    .large .bubble-media-player-container .bubble-volume-slider {
+      height: 80%;
+      position: relative;
+      left: 0px;
+      width: calc(100%);
+      grid-column-start: 2;
+      grid-column-end: 7;
+      grid-row-start: 1;
+      grid-row-end: 1;
+
     }
 
-    .large .bubble-range-value {
+    .large .bubble-media-player-container .bubble-range-value {
       place-items: center;
       height: 42px;
     }
+      
+    .large .bubble-media-player-container .bubble-name-container,.bubble-media-info-container {
+      justify-content: flex-start;
+      grid-area: n;
+      overflow: hidden;
+      margin: 0px;
+      max-width: calc(100% - 2 * var(--gap-to-edge,7px));
 
-    .large .bubble-button-container {
-      align-items: center;
     }
 
-    .rows-2 .bubble-sub-button-container {
+    .large .bubble-media-player-container .bubble-sub-button-container {
+      grid-area: c;
+      max-width: 100%;
+      height: 36px;
+      flex-wrap: wrap-reverse;
+      row-gap: 4px;
+      align-self: center;
+      align-content: center;
+    }
+
+    .large.bubble-multi-row .bubble-media-player-container .bubble-sub-button-container {
+        max-height: 100%;
+        height: auto;
+        max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+        grid-area: b;
+        flex-wrap: wrap;
+        justify-self: center;
+        align-self: center;
+        justify-content: center;
+        align-content: start;
+        justify-items: center;
+        padding-bottom: 7px;
+    }    
+    
+    .large.AlternativeLayout.bubble-multi-row .bubble-media-player-container .bubble-sub-button-container{
+        padding-bottom: 0px;   
+        display: contents;
+    }
+    
+    .rows-2 .bubble-media-player-container .bubble-sub-button-container {
       flex-direction: column;
       gap: 4px !important;
       display: grid !important;
       grid-template-columns: repeat(2, 1fr);
       grid-template-rows: repeat(2, minmax(auto, max-content));
       grid-auto-flow: column;
+      align-self: center;
       width: auto;
     }
 
-    .rows-2 .bubble-sub-button {
+    .rows-2 .bubble-media-player-container .bubble-sub-button-container .bubble-sub-button {
       height: 20px !important;
     }
 `;
\ No newline at end of file
diff --git a/src/cards/pop-up/styles.ts b/src/cards/pop-up/styles.ts
index 42fea4d2..4c4715f9 100644
--- a/src/cards/pop-up/styles.ts
+++ b/src/cards/pop-up/styles.ts
@@ -167,7 +167,7 @@ export default `
   }
 
   .large .bubble-button-card-container {
-    height: 56px;
+    height: calc( var(--row-height) * var(--row-size) + var(--row-gap) * ( var(--row-size) - 1 ));
     border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, 36px));
   }
   .large .bubble-pop-up-container {
@@ -180,7 +180,7 @@ export default `
     margin-left: 8px;
   }
   .large .bubble-close-button {
-      height: 56px;
+      height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
       width: 56px;
       border: none;
       border-radius: var(--bubble-pop-up-border-radius, var(--bubble-border-radius, 42px));
diff --git a/src/cards/select/styles.ts b/src/cards/select/styles.ts
index 44be5015..c71fe942 100644
--- a/src/cards/select/styles.ts
+++ b/src/cards/select/styles.ts
@@ -81,7 +81,7 @@ export default `
         width: 100%;
         height: 50px;
         background-color: var(--bubble-select-main-background-color, var(--bubble-main-background-color, var(--background-color-2, var(--secondary-background-color))));
-        border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: var(--bubble-button-border-radius, var(--bubble-border-radius, calc(var(--row-height,56px)/2)));
         box-shadow: var(--bubble-select-box-shadow, var(--bubble-box-shadow, none));
         touch-action: pan-y;
         box-sizing: border-box;
@@ -103,7 +103,7 @@ export default `
         background-color: var(--bubble-select-background-color);
         opacity: .5;
         overflow: hidden !important;
-        border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+        border-radius: inherit;
     }
     .is-unavailable .bubble-select-card {
         cursor: not-allowed;
@@ -195,29 +195,93 @@ export default `
         100% {transform: translateX(100%); opacity: 0;}
     }
 
+    .large .bubble-select-card{
+        --line-height: 18px;
+        --gap-to-edge: 7px;
+        display: grid;
+        gap: 4px;
+        grid-template-areas:
+        'i n c a' 'b b b b' !important;
+        grid-template-columns: var(--row-height,56px) 1fr auto auto;
+        grid-template-rows: calc(var(--row-height,56px) - 4px) 1fr; # -4px for border thickness
+        justify-self: start;
+        justify-items: start;
+        align-self: center;
+        align-items: center;
+    }
+    .large.bubble-empty-sub-buttons .bubble-select-card{
+        grid-template-rows: 1fr 0;
+        align-content: center;
+    }
+
+
+
     .large .bubble-select-card-container {
-      height: 56px;
-      border-radius: var(--bubble-select-border-radius, var(--bubble-border-radius, 32px));
+      height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
     }
 
-    .large .bubble-icon-container {
+    .large .bubble-select-card .bubble-icon-container {
       --mdc-icon-size: 24px;
-      min-width: 42px !important;
-      min-height: 42px !important;
-      margin-left: 6px;
+      width: calc(var(--row-height,56px) - 2 * var(--gap-to-edge,7px));
+      height: calc(var(--row-height,56px) - 2 * var(--gap-to-edge,7px));
+      grid-area: i;
+      margin: calc(var(--gap-to-edge,7px) - 2px);
+    }
+    
+    .large .bubble-select-card > .bubble-dropdown-container{
+        grid-area: a;
+        display: contents !important;
+    }
+
+    .large .bubble-select-card .bubble-dropdown-arrow{
+        grid-area: a;
+    }
+    
+    .large .bubble-select-card .bubble-name-container {
+        justify-content: flex-start;
+        grid-area: n;
+        overflow: hidden;
+        margin: 0px;
+        max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+    }
+
+    .large .bubble-select-card .bubble-sub-button-container {
+        grid-area: c;
+        max-width: 100%;
+        height: 36px;
+        flex-wrap: wrap-reverse;
+        row-gap: 4px;
+        align-self: center;
+        align-content: center;
+    }
+
+
+    .large .bubble-select-card .bubble-sub-button-container.expanded {
+        max-height: 100%;
+        height: auto;
+        max-width: calc(100% - 2 * var(--gap-to-edge,7px));
+        grid-area: b;
+        flex-wrap: wrap;
+        justify-self: center;
+        align-self: center;
+        justify-content: center;
+        align-content: start;
+        justify-items: center;
+        padding-bottom: 7px;
     }
 
-    .rows-2 .bubble-sub-button-container {
+    .rows-2 .bubble-select-card .bubble-sub-button-container {
       flex-direction: column;
       gap: 4px !important;
       display: grid !important;
       grid-template-columns: repeat(2, min-content);
       grid-template-rows: repeat(2, 1fr);
       grid-auto-flow: column;
+      align-self: center;
       width: auto;
     }
 
-    .rows-2 .bubble-sub-button {
+    .rows-2 .bubble-select-card .bubble-sub-button {
       height: 20px !important;
     }
 `;
\ No newline at end of file
diff --git a/src/cards/separator/styles.ts b/src/cards/separator/styles.ts
index dbd88a31..1fc98d0c 100644
--- a/src/cards/separator/styles.ts
+++ b/src/cards/separator/styles.ts
@@ -36,7 +36,7 @@ export default `
     }
 
     .large .bubble-separator {
-        height: 56px;
+      height: calc( var(--row-height,56px) * var(--row-size,1) + var(--row-gap,8px) * ( var(--row-size,1) - 1 ));
     }
 
     .rows-2 .bubble-sub-button-container {
diff --git a/src/editor/bubble-card-editor.ts b/src/editor/bubble-card-editor.ts
index eeda35c4..3fec54d0 100644
--- a/src/editor/bubble-card-editor.ts
+++ b/src/editor/bubble-card-editor.ts
@@ -1374,6 +1374,20 @@ export function createBubbleCardEditor() {
                     .items="${[{label: 'Normal', value: 'normal'}, {label: 'Large (Optimized for sections)', value: 'large'}, {label: 'Large with 2 sub-buttons rows (Optimized for sections)', value: 'large-2-rows'}]}"
                     @value-changed="${this._valueChanged}"
                 ></ha-combo-box>
+                
+                <ha-formfield .label="Only for Large layout - Alternative Layout">
+                <ha-switch
+                    aria-label="Only for Large layout - Alternative Layout"
+                    .checked=${this._config?.AlternativeLayout ?? false}
+                    .configValue="${"AlternativeLayout"}"
+                    .disabled="${(this._config.card_layout ?? 'normal') === 'normal'}"
+                    @change="${this._valueChanged}"
+                ></ha-switch>
+                <div class="mdc-form-field">    
+                    <label class="mdc-label">Only for Large layout - Alternative Layout</label> 
+                </div>
+                </ha-formfield>
+
                 <ha-expansion-panel outlined>
                     <h4 slot="header">
                         <ha-icon icon="mdi:table"></ha-icon>
diff --git a/src/tools/global-changes.ts b/src/tools/global-changes.ts
index 8e5b68d6..4fbf5af7 100644
--- a/src/tools/global-changes.ts
+++ b/src/tools/global-changes.ts
@@ -125,8 +125,17 @@ const stateStyles = `
 
 export function changeSubButtonState(context, container = context.content, appendTo = container.firstChild.firstChild, before = false) {
     const subButtons = context.config.sub_button;
-    if (!subButtons) return;
+    const numberOfRows = !context.config.grid_options ? 1 :context.config.grid_options.rows;
+    const largeFormat = numberOfRows> 1 &&(context.config.card_layout === 'large' || context.config.card_layout === 'large-2-rows')
+    if ((!subButtons || subButtons.length < 1) && (!(context.config.AlternativeLayout ?? false) || (context.config.card_type != 'climate' && context.config.card_type != 'media-player'))) {
+        container.classList.add("bubble-empty-sub-buttons");
+    }
+    if(largeFormat) container.classList.add("bubble-multi-row");
 
+    if (!subButtons) return;
+    let number_of_subButtons = subButtons.length;
+    
+    // Initialize previousValues and elements if not already done
     context.previousValues = context.previousValues || {};
     const previousSubButtons = [...(context.previousValues.subButtons || [])];
     context.elements = context.elements || {};
@@ -146,9 +155,29 @@ export function changeSubButtonState(context, container = context.content, appen
         context.elements.subButtonContainer = subButtonContainer;
     }
 
+    const subButtonContainer2 = context.elements.subButtonContainer2 ?? createElement('div', 'bubble-sub-button-container expansion');
+
+    if (largeFormat){
+        if (!context.elements.subButtonContainer2 && context.config.sub_button) {
+            const style = createElement('style');
+            style.innerText = subButtonsStyles;
+            subButtonContainer2.appendChild(style);
+    
+            // Append or prepend subButtonContainer
+            if (before) {
+                appendTo.prepend(subButtonContainer2);
+            } else {
+                appendTo.appendChild(subButtonContainer2);
+            }
+            context.elements.subButtonContainer2 = subButtonContainer2;
+        }
+        subButtonContainer.classList.add("expanded");
+    }
+
+    // Process each subButton
     if (Array.isArray(subButtons)) {
-        subButtons.forEach((subButton, i) => {
-            if (!subButton) return;
+      subButtons.forEach((subButton, i) => {
+          if (!subButton) return;
 
             const index = i + 1;
             const entity = subButton.entity ?? context.config.entity;
@@ -364,21 +393,59 @@ export function changeSubButtonState(context, container = context.content, appen
                 }
             }
         });
-
-        context.previousValues.subButtons = subButtons.slice();
-
-        for (let i = previousSubButtons.length; i > 0; i--) {
-            if (i > subButtons.length) {
-                const element = context.elements[i];
-                if (element) {
-                    subButtonContainer.removeChild(element);
-                    delete context.elements[i];
-                }
+    }
+    context.previousValues.subButtons = subButtons.slice();
+
+    for (let i = previousSubButtons.length; i > 0; i--) {
+        if (i > subButtons.length) {
+            const element = context.elements[i];
+            if (element) {
+                subButtonContainer.removeChild(element);
+                delete context.elements[i];
             }
         }
     }
+ 
+
+    // Update context.previousValues with current subButtons
+    context.previousValues.subButtons = subButtons.slice();
+
+    if(context.config.card_layout === 'large-2-rows') number_of_subButtons = Math.ceil(number_of_subButtons/2,);
+
+    // Move subbuttons when large format to expansion-container WIP
+    if (largeFormat){
+    //     const total_number_of_subButtons = number_of_subButtons;
+    //     const rowheight = Number(getComputedStyle(context).getPropertyValue('--row-height').replace(/\D/g,''));
+    //     //let overflow = context.clientWidth - total_number_of_subButtons * 40  0
+    //     let overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth;
+        number_of_subButtons = 0;
+    //     while(overflow){
+    //         let firstChild = subButtonContainer.lastChild;
+    //         firstChild.remove();
+    //         subButtonContainer2.appendChild(firstChild);
+    //         overflow = subButtonContainer.scrollHeight > subButtonContainer.clientHeight || subButtonContainer.scrollWidth > subButtonContainer.clientWidth;
+    //         number_of_subButtons++; 
+    //     }
+    }
+
+
+    context.style.setProperty('--number-subButtons', number_of_subButtons)
+
+    // Clean up extra elements not needed
+    for (let i = previousSubButtons.length; i > 0; i--) {
+         if (i > subButtons.length) {
+            const element = context.elements[i];
+            if (element) {
+                subButtonContainer.removeChild(element);
+                delete context.elements[i];
+             }
+         }
+
+    }
 }
 
+
+
 const subButtonsStyles = `
     .bubble-sub-button-container {
         position: relative;
diff --git a/src/tools/utils.ts b/src/tools/utils.ts
index d0b1caa6..43abed9b 100644
--- a/src/tools/utils.ts
+++ b/src/tools/utils.ts
@@ -619,6 +619,7 @@ export function setLayout(context) {
     const layoutClass = context.config.card_layout;
     const needsLarge = layoutClass === 'large' || layoutClass === 'large-2-rows';
     const needsRows2 = layoutClass === 'large-2-rows';
+    const needAlternativeLayout = (context.config.AlternativeLayout ?? false) && needsLarge;
 
     if (needsLarge !== context.content.classList.contains('large')) {
         context.content.classList.toggle('large', needsLarge);
@@ -626,6 +627,9 @@ export function setLayout(context) {
     if (needsRows2 !== context.content.classList.contains('rows-2')) {
         context.content.classList.toggle('rows-2', needsRows2);
     }
+    if (needAlternativeLayout !== context.content.classList.contains('AlternativeLayout')) {
+        context.content.classList.toggle('AlternativeLayout', needAlternativeLayout);
+    }
 }
 
 export function throttle(mainFunction, delay = 300) {