diff --git a/docs/components/layout-navigation/cards.md b/docs/components/layout-navigation/cards.md
index 1e1315d369..e9468af75a 100644
--- a/docs/components/layout-navigation/cards.md
+++ b/docs/components/layout-navigation/cards.md
@@ -202,7 +202,7 @@ Create organized lists within cards using flush list groups that integrate seaml
 
 ```html
 <div class="card">
-  <ul class="list-group list-group-flush">
+  <ul class="list-group list-group-legacy list-group-flush">
     <li class="list-group-item">An item</li>
     <li class="list-group-item">A second item</li>
     <li class="list-group-item">A third item</li>
@@ -215,7 +215,7 @@ Combine list groups with card headers for better content organization.
 ```html
 <div class="card">
   <div class="card-header">Header text</div>
-  <ul class="list-group list-group-flush">
+  <ul class="list-group list-group-legacy list-group-flush">
     <li class="list-group-item">An item</li>
     <li class="list-group-item">A second item</li>
     <li class="list-group-item">A third item</li>
@@ -227,7 +227,7 @@ Add footers to provide additional context or actions for list content.
 
 ```html
 <div class="card">
-  <ul class="list-group list-group-flush">
+  <ul class="list-group list-group-legacy list-group-flush">
     <li class="list-group-item">An item</li>
     <li class="list-group-item">A second item</li>
     <li class="list-group-item">A third item</li>
diff --git a/docs/components/lists-tables-trees/list-group.md b/docs/components/lists-tables-trees/list-group.md
index 8f85515d6b..557e2f6ae8 100644
--- a/docs/components/lists-tables-trees/list-group.md
+++ b/docs/components/lists-tables-trees/list-group.md
@@ -39,6 +39,15 @@ contained `list-group-item` elements with the supported heights of the [Datatabl
 - CSS class `.list-group-md` set a minimum height of `48px`.
 - CSS class `.list-group-lg` set a minimum height of `64px`.
 
+### Appearances
+
+List groups are Filled by default. Use an appearance class for the alternatives:
+
+- `.list-group-ghost` removes item fills and dividers.
+- `.list-group-dividers` displays a divider below each item.
+- `.list-group-outline` displays individual outlined items.
+- `.list-group-legacy` restores the previous connected-item styling for migration purposes.
+
 ### Example
 
 <si-docs-component example="list-group/list-group" height="400"></si-docs-component>
diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-dark-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-dark-linux.png
index 69772ff5da..f9a0e5dd0d 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-dark-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-dark-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:57f15fd236b9811ea88ad29de660102205ff9adbf2b4c3d80c0082dd6236dbe1
-size 205786
+oid sha256:de4d13c465d4ea16f5cc7f38a692ec995d4028cb5c13acf80048a515808013b9
+size 224982
diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png
index 200ea4d9f3..9513e07b7c 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png
+++ b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group-element-examples-chromium-light-linux.png
@@ -1,3 +1,3 @@
 version https://git-lfs.github.com/spec/v1
-oid sha256:cb2892e256bd55a9ed0c328c830b808e6eb1b7702f8d8c4b1c5e49f5c913a4d3
-size 195053
+oid sha256:693eb289efc19a36ba77d66003074ba9897b3feb5f3a7b27cd0de9e5b406b0c4
+size 214128
diff --git a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group.yaml b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group.yaml
index 7e212467b2..7e59fcc5aa 100644
--- a/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group.yaml
+++ b/playwright/snapshots/static.spec.ts-snapshots/list-group--list-group.yaml
@@ -1,10 +1,25 @@
-- heading "Basic" [level=2]
+- heading "Filled" [level=2]
 - list:
   - listitem: Cras justo odio
   - listitem: Dapibus ac facilisis in
   - listitem: Morbi leo risus
   - listitem: Porta ac consectetur ac
   - listitem: Vestibulum at eros
+- heading "Ghost" [level=2]
+- list:
+  - listitem: Cras justo odio
+  - listitem: Dapibus ac facilisis in
+  - listitem: Morbi leo risus
+- heading "Dividers" [level=2]
+- list:
+  - listitem: Cras justo odio
+  - listitem: Dapibus ac facilisis in
+  - listitem: Morbi leo risus
+- heading "Outline" [level=2]
+- list:
+  - listitem: Cras justo odio
+  - listitem: Dapibus ac facilisis in
+  - listitem: Morbi leo risus
 - heading "Large list group items with large status indication" [level=2]
 - list:
   - listitem:
diff --git a/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html b/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html
index 9414dcdc76..2b91cc69b3 100644
--- a/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html
+++ b/projects/dashboards-demo/src/app/components/widget-catalog/custom-widget-catalog.component.html
@@ -9,7 +9,7 @@
   </button>
 </div>
 <div class="modal-body text-pre-wrap text-break overflow-y-auto widget-list">
-  <div class="list-group">
+  <div class="list-group list-group-legacy">
     <button
       type="button"
       class="list-group-item list-group-item-action d-flex align-items-center"
diff --git a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html
index 74851ceab6..67c6c299de 100644
--- a/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html
+++ b/projects/dashboards-ng/src/components/widget-catalog/si-widget-catalog.component.html
@@ -17,7 +17,7 @@
             {{ labelWidgetCatalogList | translate }}
           </span>
           <ul
-            class="si-layout-fixed-height list-group overflow-auto mb-0"
+            class="si-layout-fixed-height list-group list-group-legacy overflow-auto mb-0"
             aria-labelledby="widget-catalog-list-description"
             cdkListbox
             [cdkListboxValue]="selectedWidgets()"
diff --git a/projects/element-ng/about/si-about.component.html b/projects/element-ng/about/si-about.component.html
index 211c42d8d4..349a57c02e 100644
--- a/projects/element-ng/about/si-about.component.html
+++ b/projects/element-ng/about/si-about.component.html
@@ -5,7 +5,7 @@
         {{ aboutTitle() }}
       </div>
 
-      <div>
+      <div class="list-group list-group-legacy">
         <div class="list-group-item text-center">
           @let appIcon = iconName();
           @if (icon()) {
@@ -73,7 +73,7 @@ <h3>{{ appName() }}</h3>
 
       <div class="h-100">
         @if (licenseInfo().text) {
-          <pre class="list-group-item">{{ licenseInfo().text }}</pre>
+          <pre class="border-0 border-bottom my-0 px-6 py-4">{{ licenseInfo().text }}</pre>
         }
 
         @if (sanitizedUrl()) {
diff --git a/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.html b/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.html
index 029583ac15..6e9d3fe667 100644
--- a/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.html
+++ b/projects/element-ng/dashboard/widgets/si-list-widget/si-list-widget-body.component.html
@@ -11,7 +11,7 @@
 @let filteredListWidgetItemsList = filteredListWidgetItems();
 @if (!showLoadingIndicator() && filteredListWidgetItemsList) {
   @if (filteredListWidgetItemsList.length > 0) {
-    <div class="list-group list-group-lg" role="list">
+    <div class="list-group list-group-legacy list-group-lg" role="list">
       @for (item of filteredListWidgetItemsList; track $index) {
         <si-list-widget-item [value]="item" />
       }
@@ -20,7 +20,7 @@
     <ng-content select="[empty-state]" />
   }
 } @else {
-  <div class="list-group list-group-lg" role="list">
+  <div class="list-group list-group-legacy list-group-lg" role="list">
     @for (some of ghosts(); track $index) {
       <si-list-widget-item [value]="undefined" />
     }
diff --git a/projects/element-theme/src/styles/bootstrap/_list-group.scss b/projects/element-theme/src/styles/bootstrap/_list-group.scss
index b5bac01fbe..1d1c8e5368 100644
--- a/projects/element-theme/src/styles/bootstrap/_list-group.scss
+++ b/projects/element-theme/src/styles/bootstrap/_list-group.scss
@@ -2,6 +2,7 @@
 
 @use '../variables/focus';
 @use '../variables/semantic-tokens';
+@use '../variables/spacers';
 @use '../variables/typography';
 @use 'mixins/breakpoints';
 @use 'variables';
@@ -9,8 +10,8 @@
 .list-group {
   display: flex;
   flex-direction: column;
+  gap: map.get(spacers.$spacers, 2);
   padding-inline-start: 0;
-  border-radius: variables.$list-group-border-radius;
 }
 
 .list-group-numbered {
@@ -55,27 +56,14 @@
   color: variables.$list-group-color;
   text-decoration: none;
   background-color: variables.$list-group-bg;
-  border: variables.$list-group-border-width solid variables.$list-group-border-color;
-  border-radius: 0;
-  border-inline-width: 0;
+  border: 0;
+  border-radius: variables.$list-group-border-radius;
   margin: 0;
 
   .list-group-item-heading {
     color: variables.$headings-color;
   }
 
-  &:first-child {
-    border-block-start: none;
-    border-start-start-radius: inherit;
-    border-start-end-radius: inherit;
-  }
-
-  &:last-child {
-    border-block-end-color: transparent;
-    border-end-start-radius: inherit;
-    border-end-end-radius: inherit;
-  }
-
   &:is(.disabled, :disabled) {
     color: variables.$list-group-disabled-color;
     pointer-events: none;
@@ -90,12 +78,55 @@
     border-color: variables.$list-group-active-border-color;
   }
 
-  & + & {
-    border-block-start-width: 0;
+}
+
+.list-group-ghost,
+.list-group-dividers {
+  gap: 0;
+
+  > .list-group-item {
+    background-color: transparent;
+    border-radius: 0;
+  }
+}
+
+.list-group-dividers > .list-group-item {
+  border-block-end: variables.$list-group-border-width solid variables.$list-group-border-color;
+}
+
+.list-group-outline > .list-group-item {
+  background-color: transparent;
+  border: variables.$list-group-border-width solid variables.$list-group-border-color;
+}
 
-    &.active {
-      margin-block-start: -(variables.$list-group-border-width);
-      border-block-start-width: variables.$list-group-border-width;
+.list-group-legacy {
+  gap: 0;
+  border-radius: variables.$list-group-border-radius;
+
+  > .list-group-item {
+    border: variables.$list-group-border-width solid variables.$list-group-border-color;
+    border-radius: 0;
+    border-inline-width: 0;
+
+    &:first-child {
+      border-block-start: none;
+      border-start-start-radius: inherit;
+      border-start-end-radius: inherit;
+    }
+
+    &:last-child {
+      border-block-end-color: transparent;
+      border-end-start-radius: inherit;
+      border-end-end-radius: inherit;
+    }
+
+    + .list-group-item {
+      border-block-start-width: 0;
+
+      &.active {
+        margin-block-start: -(variables.$list-group-border-width);
+        border-block-start-width: variables.$list-group-border-width;
+      }
     }
   }
 }
@@ -124,7 +155,7 @@
     .list-group-horizontal#{$infix} {
       flex-direction: row;
 
-      > .list-group-item {
+      &.list-group-legacy > .list-group-item {
         border-block-width: 0;
 
         &:first-child {
@@ -155,9 +186,12 @@
 }
 
 .list-group-flush {
+  gap: 0;
   border-radius: 0;
 
   > .list-group-item {
+    background-color: transparent;
+    border-radius: 0;
     border-inline-width: 0;
     border-block-width: 0 variables.$list-group-border-width;
 
@@ -167,6 +201,10 @@
   }
 }
 
+.list-group-legacy.list-group-flush > .list-group-item {
+  background-color: variables.$list-group-bg;
+}
+
 .list-group-item-secondary {
   background-color: semantic-tokens.$element-ui-4;
   color: semantic-tokens.$element-text-primary;
diff --git a/projects/element-theme/src/styles/bootstrap/_variables.scss b/projects/element-theme/src/styles/bootstrap/_variables.scss
index d6822aaeae..80ed4bc1ac 100644
--- a/projects/element-theme/src/styles/bootstrap/_variables.scss
+++ b/projects/element-theme/src/styles/bootstrap/_variables.scss
@@ -620,7 +620,7 @@ $list-group-action-color: semantic-tokens.$element-text-primary !default;
 $list-group-action-hover-color: $list-group-action-color !important !default;
 
 $list-group-action-active-color: $body-color !default;
-$list-group-action-active-bg: semantic-tokens.$element-base-0 !default;
+$list-group-action-active-bg: semantic-tokens.$element-base-1-selected !default;
 
 // Image thumbnails
 
diff --git a/src/app/examples/drag-drop/drag-drop.html b/src/app/examples/drag-drop/drag-drop.html
index 88c668a330..d1670efc32 100644
--- a/src/app/examples/drag-drop/drag-drop.html
+++ b/src/app/examples/drag-drop/drag-drop.html
@@ -4,7 +4,7 @@ <h2>Reorder within list or Move between list</h2>
     <ul
       #cdkListOne="cdkDropList"
       aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown Cmd+X Cmd+V"
-      class="list-group list-group-flush"
+      class="list-group list-group-legacy list-group-flush"
       cdkListbox
       cdkDropList
       [cdkDropListConnectedTo]="cdkListTwo"
@@ -34,7 +34,7 @@ <h2>Reorder within list or Move between list</h2>
     <ul
       #cdkListTwo="cdkDropList"
       aria-keyshortcuts="Alt+ArrowUp Alt+ArrowDown Cmd+X Cmd+V"
-      class="list-group list-group-flush"
+      class="list-group list-group-legacy list-group-flush"
       cdkListbox
       cdkDropList
       [cdkDropListData]="listTwo"
diff --git a/src/app/examples/list-group/list-group.html b/src/app/examples/list-group/list-group.html
index 0dbdaa02e9..c72eed2541 100644
--- a/src/app/examples/list-group/list-group.html
+++ b/src/app/examples/list-group/list-group.html
@@ -1,4 +1,4 @@
-<h2>Basic</h2>
+<h2>Filled</h2>
 <ul class="list-group">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
@@ -7,8 +7,29 @@ <h2>Basic</h2>
   <li class="list-group-item">Vestibulum at eros</li>
 </ul>
 
+<h2 class="mt-9">Ghost</h2>
+<ul class="list-group list-group-ghost">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Dapibus ac facilisis in</li>
+  <li class="list-group-item">Morbi leo risus</li>
+</ul>
+
+<h2 class="mt-9">Dividers</h2>
+<ul class="list-group list-group-dividers">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Dapibus ac facilisis in</li>
+  <li class="list-group-item">Morbi leo risus</li>
+</ul>
+
+<h2 class="mt-9">Outline</h2>
+<ul class="list-group list-group-outline">
+  <li class="list-group-item">Cras justo odio</li>
+  <li class="list-group-item">Dapibus ac facilisis in</li>
+  <li class="list-group-item">Morbi leo risus</li>
+</ul>
+
 <h2 class="mt-9">Large list group items with large status indication</h2>
-<ul class="list-group list-group-lg">
+<ul class="list-group list-group-legacy list-group-lg">
   <li class="list-group-item d-flex align-items-center"
     ><si-circle-status status="info" icon="element-door" class="my-n4 me-5" [eventOut]="true" />Cras
     justo odio</li
@@ -38,7 +59,7 @@ <h2 class="mt-9">Large list group items with large status indication</h2>
 </ul>
 
 <h2 class="mt-9">Medium list group items with small status indication</h2>
-<ul class="list-group list-group-md">
+<ul class="list-group list-group-legacy list-group-md">
   <li class="list-group-item d-flex align-items-center"
     ><si-circle-status
       size="small"
@@ -79,7 +100,7 @@ <h2 class="mt-9">Medium list group items with small status indication</h2>
 </ul>
 
 <h2 class="mt-9">Active & disabled items</h2>
-<ul class="list-group">
+<ul class="list-group list-group-legacy">
   <li class="list-group-item active">Cras justo odio (active)</li>
   <li class="list-group-item disabled" aria-disabled="true">Dapibus ac facilisis in (disabled)</li>
   <li class="list-group-item">Morbi leo risus</li>
@@ -88,7 +109,7 @@ <h2 class="mt-9">Active & disabled items</h2>
 </ul>
 
 <h2 class="mt-9">Links</h2>
-<div class="list-group">
+<div class="list-group list-group-legacy">
   <a href="#" class="list-group-item list-group-item-action active"> Cras justo odio </a>
   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
   <a href="#" class="list-group-item list-group-item-action">Morbi leo risus</a>
@@ -103,7 +124,7 @@ <h2 class="mt-9">Links</h2>
 </div>
 
 <h2 class="mt-9">Buttons</h2>
-<div class="list-group">
+<div class="list-group list-group-legacy">
   <button type="button" class="list-group-item list-group-item-action active">
     Cras justo odio
   </button>
@@ -120,7 +141,7 @@ <h2 class="mt-9">Buttons</h2>
 </div>
 
 <h2 class="mt-9">Flush</h2>
-<ul class="list-group list-group-flush">
+<ul class="list-group list-group-legacy list-group-flush">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
   <li class="list-group-item">Morbi leo risus</li>
@@ -129,38 +150,38 @@ <h2 class="mt-9">Flush</h2>
 </ul>
 
 <h2 class="mt-9">Horizontal</h2>
-<ul class="list-group list-group-horizontal">
+<ul class="list-group list-group-legacy list-group-horizontal">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
   <li class="list-group-item">Morbi leo risus</li>
 </ul>
 
-<ul class="list-group list-group-horizontal-sm">
+<ul class="list-group list-group-legacy list-group-horizontal-sm">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
   <li class="list-group-item">Morbi leo risus</li>
 </ul>
 
-<ul class="list-group list-group-horizontal-md">
+<ul class="list-group list-group-legacy list-group-horizontal-md">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
   <li class="list-group-item">Morbi leo risus</li>
 </ul>
 
-<ul class="list-group list-group-horizontal-lg">
+<ul class="list-group list-group-legacy list-group-horizontal-lg">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
   <li class="list-group-item">Morbi leo risus</li>
 </ul>
 
-<ul class="list-group list-group-horizontal-xl">
+<ul class="list-group list-group-legacy list-group-horizontal-xl">
   <li class="list-group-item">Cras justo odio</li>
   <li class="list-group-item">Dapibus ac facilisis in</li>
   <li class="list-group-item">Morbi leo risus</li>
 </ul>
 
 <h2 class="mt-9">Contextual classes</h2>
-<ul class="list-group">
+<ul class="list-group list-group-legacy">
   <li class="list-group-item">Dapibus ac facilisis in</li>
   <li class="list-group-item list-group-item-secondary">A simple secondary list group item</li>
   <li class="list-group-item list-group-item-success">A simple success list group item</li>
@@ -170,7 +191,7 @@ <h2 class="mt-9">Contextual classes</h2>
   <li class="list-group-item list-group-item-info">A simple info list group item</li>
 </ul>
 
-<div class="list-group">
+<div class="list-group list-group-legacy">
   <a href="#" class="list-group-item list-group-item-action">Dapibus ac facilisis in</a>
   <a href="#" class="list-group-item list-group-item-action list-group-item-secondary"
     >A simple secondary list group item</a
@@ -190,7 +211,7 @@ <h2 class="mt-9">Contextual classes</h2>
 </div>
 
 <h2 class="mt-9">Badges</h2>
-<ul class="list-group">
+<ul class="list-group list-group-legacy">
   <li class="list-group-item d-flex justify-content-between align-items-center">
     Cras justo odio
     <span class="badge bg-default badge-pill">14</span>
@@ -206,7 +227,7 @@ <h2 class="mt-9">Badges</h2>
 </ul>
 
 <h2 class="mt-9">Custom content</h2>
-<div class="list-group">
+<div class="list-group list-group-legacy">
   <a href="#" class="list-group-item list-group-item-action active">
     <div class="d-flex w-100 justify-content-between">
       <h3 class="mb-1">List group item heading</h3>
diff --git a/src/app/examples/si-card/card-content-types.html b/src/app/examples/si-card/card-content-types.html
index 22ffe3f38f..6e8c216a98 100644
--- a/src/app/examples/si-card/card-content-types.html
+++ b/src/app/examples/si-card/card-content-types.html
@@ -78,7 +78,7 @@ <h5 class="card-title">Card title</h5>
             content.</p
           >
         </div>
-        <ul class="list-group list-group-flush">
+        <ul class="list-group list-group-legacy list-group-flush">
           <li class="list-group-item">An item</li>
           <li class="list-group-item">A second item</li>
           <li class="list-group-item">A third item</li>
@@ -91,7 +91,7 @@ <h5 class="text-secondary">Create lists of content in a card with a flush list g
   <div class="row g-5">
     <div class="col">
       <div class="card">
-        <ul class="list-group list-group-flush">
+        <ul class="list-group list-group-legacy list-group-flush">
           <li class="list-group-item">An item</li>
           <li class="list-group-item">A second item</li>
           <li class="list-group-item">A third item</li>
@@ -101,7 +101,7 @@ <h5 class="text-secondary">Create lists of content in a card with a flush list g
     <div class="col">
       <div class="card">
         <div class="card-header">Header text</div>
-        <ul class="list-group list-group-flush">
+        <ul class="list-group list-group-legacy list-group-flush">
           <li class="list-group-item">An item</li>
           <li class="list-group-item">A second item</li>
           <li class="list-group-item">A third item</li>
@@ -110,7 +110,7 @@ <h5 class="text-secondary">Create lists of content in a card with a flush list g
     </div>
     <div class="col">
       <div class="card">
-        <ul class="list-group list-group-flush">
+        <ul class="list-group list-group-legacy list-group-flush">
           <li class="list-group-item">An item</li>
           <li class="list-group-item">A second item</li>
           <li class="list-group-item">A third item</li>
diff --git a/src/app/examples/si-card/si-card.html b/src/app/examples/si-card/si-card.html
index 0f8c303387..321d873ae1 100644
--- a/src/app/examples/si-card/si-card.html
+++ b/src/app/examples/si-card/si-card.html
@@ -88,7 +88,7 @@
           [primaryActions]="primaryActions"
           [secondaryActions]="secondaryActions"
         >
-          <ul class="list-group overflow-auto" tabindex="0" body>
+          <ul class="list-group list-group-legacy overflow-auto" tabindex="0" body>
             <li class="list-group-item">Cras justo odio</li>
             <li class="list-group-item">Dapibus ac facilisis in</li>
             <li class="list-group-item">Morbi leo risus</li>
diff --git a/src/app/examples/si-dashboard/si-list-widget-css.html b/src/app/examples/si-dashboard/si-list-widget-css.html
index e37cde9fc0..291637f282 100644
--- a/src/app/examples/si-dashboard/si-list-widget-css.html
+++ b/src/app/examples/si-dashboard/si-list-widget-css.html
@@ -10,7 +10,7 @@
         <div class="px-6 py-4">
           <si-search-bar showIcon colorVariant="base-0" />
         </div>
-        <ul class="list-group list-group-lg">
+        <ul class="list-group list-group-legacy list-group-lg">
           <li class="list-group-item d-flex align-items-center">
             <span class="badge bg-default mx-0">2</span>
             <span class="ps-4 me-auto si-h5">Building B</span>
diff --git a/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.html b/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.html
index 6f74142e17..80b5494e2a 100644
--- a/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.html
+++ b/src/app/examples/si-electron-titlebar/si-fixed-height-layout-side-panel.html
@@ -70,7 +70,7 @@ <h2 class="si-layout-title">Here is a title</h2>
           class="si-layout-fixed-height"
           [primaryActions]="primaryActions"
         >
-          <ul class="list-group overflow-auto ms-6 mb-6 rounded-0 border-0" tabindex="0" body>
+          <ul class="list-group list-group-legacy overflow-auto ms-6 mb-6 rounded-0 border-0" tabindex="0" body>
             <li class="list-group-item d-flex align-items-center">
               <si-circle-status status="info" icon="element-door" class="my-n4 me-5" />
               Use the content action bar to toggle side panel