diff --git a/packages/components/src/components/hds/side-nav/base.hbs b/packages/components/src/components/hds/side-nav/base.hbs
index c304832972..41f5d3d7ff 100644
--- a/packages/components/src/components/hds/side-nav/base.hbs
+++ b/packages/components/src/components/hds/side-nav/base.hbs
@@ -4,13 +4,16 @@
 }}
 {{! IMPORTANT: we need to add "squishies" here (~) because otherwise the whitespace added by Ember causes the empty element to still have visible padding - See https://handlebarsjs.com/guide/expressions.html#whitespace-control }}
 <div class="hds-side-nav" ...attributes>
+  <h2 class="sr-only" id="hds-app-side-nav-header">Application local navigation</h2>
   <div class="hds-side-nav__wrapper">
     {{yield to="root"}}
     <div class="hds-side-nav__wrapper-header">
       {{~yield to="header"~}}
     </div>
     <div class="hds-side-nav__wrapper-body">
-      {{~yield to="body"~}}
+      <nav aria-labelledby="hds-app-side-nav-header">
+        {{~yield to="body"~}}
+      </nav>
     </div>
     <div class="hds-side-nav__wrapper-footer">
       {{~yield to="footer"~}}
diff --git a/packages/components/src/components/hds/side-nav/list/back-link.hbs b/packages/components/src/components/hds/side-nav/list/back-link.hbs
index 75c79683a6..697c2a3151 100644
--- a/packages/components/src/components/hds/side-nav/list/back-link.hbs
+++ b/packages/components/src/components/hds/side-nav/list/back-link.hbs
@@ -2,8 +2,31 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
-
-<Hds::SideNav::List::Item>
+{{!
+  Copyright (c) HashiCorp, Inc.
+  SPDX-License-Identifier: MPL-2.0
+}}
+{{#if @shouldWrapInListItem}}
+  <Hds::SideNav::List::Item>
+    <Hds::Interactive
+      class="hds-side-nav__list-item-link hds-side-nav__list-item-link--back-link"
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      @isRouteExternal={{@isRouteExternal}}
+      @href={{@href}}
+      @isHrefExternal={{@isHrefExternal}}
+      ...attributes
+    >
+      <Hds::Icon class="hds-side-nav__list-item-icon-leading" @name="chevron-left" />
+      <span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
+        {{@text}}
+      </span>
+    </Hds::Interactive>
+  </Hds::SideNav::List::Item>
+{{else}}
   <Hds::Interactive
     class="hds-side-nav__list-item-link hds-side-nav__list-item-link--back-link"
     @current-when={{@current-when}}
@@ -21,4 +44,4 @@
       {{@text}}
     </span>
   </Hds::Interactive>
-</Hds::SideNav::List::Item>
\ No newline at end of file
+{{/if}}
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/list/back-link.ts b/packages/components/src/components/hds/side-nav/list/back-link.ts
index 3b460d93bb..4c22bd1a17 100644
--- a/packages/components/src/components/hds/side-nav/list/back-link.ts
+++ b/packages/components/src/components/hds/side-nav/list/back-link.ts
@@ -10,6 +10,7 @@ import type { HdsInteractiveSignature } from '../../interactive/';
 export interface HdsSideNavListBackLinkSignature {
   Args: HdsInteractiveSignature['Args'] & {
     text: string;
+    shouldWrapInListItem?: boolean;
   };
   Element: HdsInteractiveSignature['Element'];
 }
diff --git a/packages/components/src/components/hds/side-nav/list/index.hbs b/packages/components/src/components/hds/side-nav/list/index.hbs
index 255723ea2f..c929983412 100644
--- a/packages/components/src/components/hds/side-nav/list/index.hbs
+++ b/packages/components/src/components/hds/side-nav/list/index.hbs
@@ -3,17 +3,23 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<nav class="hds-side-nav__list-wrapper" ...attributes>
+{{! <nav class="hds-side-nav__list-wrapper" ...attributes> }}
+<div>
   {{yield (hash ExtraBefore=(component "hds/yield"))}}
-  <ul class="hds-side-nav__list" role="list">
+</div>
+{{#let (unique-id) as |titleId|}}
+  <p style="margin: 0px; padding: 0px;">{{yield (hash Title=(component "hds/side-nav/list/title" id=titleId))}}</p>
+  <ul class="hds-side-nav__list" role="list" aria-labelledby={{titleId}}>
+    {{yield (hash Item=(component "hds/side-nav/list/item"))}}
     {{yield
       (hash
-        Item=(component "hds/side-nav/list/item")
-        BackLink=(component "hds/side-nav/list/back-link")
-        Title=(component "hds/side-nav/list/title")
-        Link=(component "hds/side-nav/list/link")
+        BackLink=(component "hds/side-nav/list/back-link" shouldWrapInListItem=true)
+        Link=(component "hds/side-nav/list/link" shouldWrapInListItem=true)
       )
     }}
   </ul>
+{{/let}}
+<div>
   {{yield (hash ExtraAfter=(component "hds/yield"))}}
-</nav>
\ No newline at end of file
+</div>
+{{! </nav> }}
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/list/link.hbs b/packages/components/src/components/hds/side-nav/list/link.hbs
index f2667278f7..5613d2c99d 100644
--- a/packages/components/src/components/hds/side-nav/list/link.hbs
+++ b/packages/components/src/components/hds/side-nav/list/link.hbs
@@ -2,8 +2,53 @@
   Copyright (c) HashiCorp, Inc.
   SPDX-License-Identifier: MPL-2.0
 }}
+{{#if @shouldWrapInListItem}}
+  <Hds::SideNav::List::Item>
+    <Hds::Interactive
+      class="hds-side-nav__list-item-link {{if @isActive 'active'}}"
+      @current-when={{@current-when}}
+      @models={{hds-link-to-models @model @models}}
+      @query={{hds-link-to-query @query}}
+      @replace={{@replace}}
+      @route={{@route}}
+      @isRouteExternal={{@isRouteExternal}}
+      @href={{@href}}
+      @isHrefExternal={{@isHrefExternal}}
+      ...attributes
+    >
+      {{#if @icon}}
+        <Hds::Icon class="hds-side-nav__list-item-icon-leading" @name={{@icon}} />
+      {{/if}}
 
-<Hds::SideNav::List::Item>
+      {{#if @text}}
+        <span class="hds-side-nav__list-item-text hds-typography-body-200 hds-font-weight-medium">
+          {{@text}}
+        </span>
+      {{/if}}
+
+      {{#if @count}}
+        <Hds::BadgeCount @text={{@count}} @type="inverted" @size="small" />
+      {{/if}}
+
+      {{#if @badge}}
+        <Hds::Badge @text={{@badge}} @type="inverted" @size="small" />
+      {{/if}}
+
+      {{yield}}
+
+      {{#if @hasSubItems}}
+        <span class="hds-side-nav__list-item-icon-trailing">
+          <Hds::Icon @name="chevron-right" />
+        </span>
+      {{/if}}
+      {{#if @isHrefExternal}}
+        <span class="hds-side-nav__list-item-icon-trailing">
+          <Hds::Icon @name="external-link" />
+        </span>
+      {{/if}}
+    </Hds::Interactive>
+  </Hds::SideNav::List::Item>
+{{else}}
   <Hds::Interactive
     class="hds-side-nav__list-item-link {{if @isActive 'active'}}"
     @current-when={{@current-when}}
@@ -47,4 +92,4 @@
       </span>
     {{/if}}
   </Hds::Interactive>
-</Hds::SideNav::List::Item>
\ No newline at end of file
+{{/if}}
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/list/link.ts b/packages/components/src/components/hds/side-nav/list/link.ts
index 4c6d04f1e6..1dc34d7b25 100644
--- a/packages/components/src/components/hds/side-nav/list/link.ts
+++ b/packages/components/src/components/hds/side-nav/list/link.ts
@@ -16,6 +16,7 @@ export interface HdsSideNavListLinkSignature {
     count?: string;
     hasSubItems?: boolean;
     isActive?: boolean;
+    shouldWrapInListItem?: boolean;
   };
   Blocks: {
     default: [];
diff --git a/packages/components/src/components/hds/side-nav/list/title.hbs b/packages/components/src/components/hds/side-nav/list/title.hbs
index accf806b3b..acd29f4836 100644
--- a/packages/components/src/components/hds/side-nav/list/title.hbs
+++ b/packages/components/src/components/hds/side-nav/list/title.hbs
@@ -3,6 +3,8 @@
   SPDX-License-Identifier: MPL-2.0
 }}
 
-<Hds::SideNav::List::Item>
-  <div class="hds-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold" ...attributes>{{~yield~}}</div>
-</Hds::SideNav::List::Item>
\ No newline at end of file
+<div
+  class="hds-side-nav__list-title hds-typography-body-100 hds-font-weight-semibold"
+  id={{@id}}
+  ...attributes
+>{{~yield~}}</div>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/list/title.ts b/packages/components/src/components/hds/side-nav/list/title.ts
index 8318979104..7353481afa 100644
--- a/packages/components/src/components/hds/side-nav/list/title.ts
+++ b/packages/components/src/components/hds/side-nav/list/title.ts
@@ -6,6 +6,9 @@
 import TemplateOnlyComponent from '@ember/component/template-only';
 
 export interface HdsSideNavListTitleSignature {
+  Args: {
+    id?: string;
+  };
   Blocks: {
     default: [];
   };
diff --git a/packages/components/src/components/hds/side-nav/portal/index.hbs b/packages/components/src/components/hds/side-nav/portal/index.hbs
index 299eac3ceb..42af702a42 100644
--- a/packages/components/src/components/hds/side-nav/portal/index.hbs
+++ b/packages/components/src/components/hds/side-nav/portal/index.hbs
@@ -5,8 +5,8 @@
 
 <Portal @target={{if @targetName @targetName "hds-side-nav-portal-target"}}>
   <div class="hds-side-nav__content-panel" ...attributes>
-    <Hds::SideNav::List aria-label={{@ariaLabel}} as |ListElements|>
-      {{yield ListElements}}
-    </Hds::SideNav::List>
+    {{!-- <Hds::SideNav::List aria-label={{@ariaLabel}} as |ListElements|> --}}
+    {{yield}}
+    {{! </Hds::SideNav::List> }}
   </div>
 </Portal>
\ No newline at end of file
diff --git a/packages/components/src/components/hds/side-nav/portal/index.ts b/packages/components/src/components/hds/side-nav/portal/index.ts
index 959f78b8c7..708dde4f22 100644
--- a/packages/components/src/components/hds/side-nav/portal/index.ts
+++ b/packages/components/src/components/hds/side-nav/portal/index.ts
@@ -5,7 +5,7 @@
 
 import TemplateOnlyComponent from '@ember/component/template-only';
 
-import type { HdsSideNavListSignature } from '../list/index';
+// import type { HdsSideNavListSignature } from '../list/index';
 
 // TODO! understand how this should be done "correctly"
 // import type { PortalSignature } from 'ember-stargate/components/portal';
@@ -16,16 +16,17 @@ interface PortalSignature {
     fallback?: 'inplace';
   };
   Blocks: {
-    default: [];
+    default?: [];
   };
 }
 
 export interface HdsSideNavPortalSignature {
   Args: PortalSignature['Args'] & {
-    ariaLabel?: string;
     targetName?: string;
   };
-  Blocks: HdsSideNavListSignature['Blocks'];
+  Blocks: {
+    default?: [];
+  };
   Element: HTMLDivElement;
 }
 
diff --git a/showcase/app/templates/components/side-nav.hbs b/showcase/app/templates/components/side-nav.hbs
index 53458e5791..c5866a9d6b 100644
--- a/showcase/app/templates/components/side-nav.hbs
+++ b/showcase/app/templates/components/side-nav.hbs
@@ -7,6 +7,7 @@
 
 <Shw::Text::H1>SideNav</Shw::Text::H1>
 
+import type { HdsTableDensityValues } from '@hashicorp/design-system-components/components/hds/table/types';
 <section data-test-percy>
   <Shw::Text::H2>Content</Shw::Text::H2>
 
@@ -97,10 +98,17 @@
     </SF.Item>
   </Shw::Flex>
 
-  <Hds::SideNav::Portal @targetName="sidenav-portal-demo-1" @ariaLabel="Primary on portal demo 1" as |Nav|>
-    <Nav.extraBefore><Shw::Placeholder @height="72px" @text="extraBefore" @background="#f3d9c5" /></Nav.extraBefore>
+  <Hds::SideNav::Portal @targetName="sidenav-portal-demo-1" @ariaLabel="Primary on portal demo 1" {{! as |Nav| }}>
+    <Shw::Placeholder @height="72px" @text="extraBefore" @background="#f3d9c5" />
+    <Hds::SideNav::List as |SNL|>
+      <SNL.Item>
+        <Shw::Placeholder @height="200px" @text="portaled content" />
+      </SNL.Item>
+    </Hds::SideNav::List>
+    <Shw::Placeholder @height="72px" @text="extraAfter" @background="#f3d9c5" />
+    {{! <Nav.extraBefore><Shw::Placeholder @height="72px" @text="extraBefore" @background="#f3d9c5" /></Nav.extraBefore>
     <Nav.Item><Shw::Placeholder @height="200px" @text="portaled content" /></Nav.Item>
-    <Nav.extraAfter><Shw::Placeholder @height="72px" @text="extraAfter" @background="#f3d9c5" /></Nav.extraAfter>
+    <Nav.extraAfter><Shw::Placeholder @height="72px" @text="extraAfter" @background="#f3d9c5" /></Nav.extraAfter> }}
   </Hds::SideNav::Portal>
 
 </section>
@@ -154,23 +162,27 @@
           </div>
         </SF.Item>
       </Shw::Flex>
-      <Hds::SideNav::Portal @targetName="sidenav-portal-demo-2" @ariaLabel="Primary on portal demo 2" as |Nav|>
-        <Nav.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
-        <Nav.Title>Services</Nav.Title>
-        <Nav.Link @text="Boundary" @icon="boundary" @href="#" />
-        <Nav.Link @text="Consul" @icon="consul" @href="#" />
-        <Nav.Link @text="Packer" @icon="packer" @href="#" />
-        <Nav.Link @text="Vault" @icon="vault" @href="#" />
-        <Nav.Link @text="Vault Secrets" @icon="vault-secrets-square" @href="#" />
-        <Nav.Link @text="Terraform" @icon="terraform" @href="#" />
-        <Nav.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
-        <Nav.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
-        <Nav.Title>Default Org</Nav.Title>
-        <Nav.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
-        <Nav.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
-        <Nav.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
-        <Nav.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
-        <Nav.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
+      <Hds::SideNav::Portal @targetName="sidenav-portal-demo-2" {{! as |Nav|  }}>
+        <Hds::SideNav::List::Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
+        <Hds::SideNav::List as |Nav|>
+          <Nav.Title>Services</Nav.Title>
+          <Nav.Link @text="Boundary" @icon="boundary" @href="#" />
+          <Nav.Link @text="Consul" @icon="consul" @href="#" />
+          <Nav.Link @text="Packer" @icon="packer" @href="#" />
+          <Nav.Link @text="Vault" @icon="vault" @href="#" />
+          <Nav.Link @text="Vault Secrets" @icon="vault-secrets-square" @href="#" />
+          <Nav.Link @text="Terraform" @icon="terraform" @href="#" />
+          <Nav.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
+          <Nav.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
+        </Hds::SideNav::List>
+        <Hds::SideNav::List as |Nav|>
+          <Nav.Title>Default Org</Nav.Title>
+          <Nav.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
+          <Nav.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
+          <Nav.Link @text="Billing" @icon="credit-card" @href="#" @hasSubItems={{true}} />
+          <Nav.Link @text="Settings" @icon="settings" @href="#" @hasSubItems={{true}} />
+          <Nav.Link @href="#" @isHrefExternal="true" @icon="guide" @text="Documentation" />
+        </Hds::SideNav::List>
       </Hds::SideNav::Portal>
 
     </SG.Item>
@@ -210,9 +222,7 @@
               </:header>
 
               <:body>
-                <Hds::SideNav::List aria-label="Dashboard" as |SNL|>
-                  <SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
-                </Hds::SideNav::List>
+                <Hds::SideNav::List::Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
 
                 <Hds::SideNav::List aria-label="Services" as |SNL|>
                   <SNL.Title>Services</SNL.Title>
@@ -253,11 +263,8 @@
   <div class="shw-component-sim-side-nav-root-container">
     <Hds::SideNav @isResponsive={{false}} @hasA11yRefocus={{false}}>
       <:body>
-        <Hds::SideNav::List aria-label="Dashboard 2" as |SNL|>
-          <SNL.Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
-        </Hds::SideNav::List>
-
-        <Hds::SideNav::List aria-label="Services 2" as |SNL|>
+        <Hds::SideNav::List::Link @icon="dashboard" @text="Dashboard" @isActive={{true}} />
+        <Hds::SideNav::List as |SNL|>
           <SNL.Title>Services</SNL.Title>
           <SNL.Link @text="Boundary" @icon="boundary" @href="#" />
           <SNL.Link @text="Consul" @icon="consul" @href="#" />
@@ -268,7 +275,7 @@
           <SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
           <SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} />
         </Hds::SideNav::List>
-        <Hds::SideNav::List aria-label="Organization 2" as |SNL|>
+        <Hds::SideNav::List as |SNL|>
           <SNL.Title>Default Org</SNL.Title>
           <SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
           <SNL.Link @text="Access control (IAM)" @icon="users" @href="#" @hasSubItems={{true}} />
@@ -475,9 +482,8 @@
   <Shw::Flex as |SF|>
     <SF.Item @label="Title with multiple items">
       <div class="shw-component-sim-side-nav-body">
-        <Hds::SideNav::List aria-label="Multiple items" as |SNL|>
+        <Hds::SideNav::List as |SNL|>
           <SNL.Title>Services</SNL.Title>
-
           <SNL.Link @text="Boundary" @icon="boundary" @href="#" />
           <SNL.Link @text="Consul" @icon="consul" @href="#" />
           <SNL.Link @text="Packer" @icon="packer" @href="#" />
@@ -486,9 +492,9 @@
           <SNL.Link @text="Terraform" @icon="terraform" @href="#" />
           <SNL.Link @text="Vagrant" @icon="vagrant" @badge="Alpha" @href="#" />
           <SNL.Link @text="Waypoint" @icon="waypoint" @badge="Alpha" @hasSubItems={{true}} @href="#" />
-
+        </Hds::SideNav::List>
+        <Hds::SideNav::List as |SNL|>
           <SNL.Title>Default Org</SNL.Title>
-
           <SNL.Link @text="HashiCorp Virtual Networks" @icon="network" @href="#" />
           <SNL.Link @text="Access control (IAM)" @icon="users" @href="#" />
           <SNL.Link @text="Billing" @icon="credit-card" @href="#" />
@@ -499,9 +505,7 @@
 
     <SF.Item @label="Multiple groups">
       <div class="shw-component-sim-side-nav-body">
-        <Hds::SideNav::List aria-label="Dashboard (multiple groups)" as |SNL|>
-          <SNL.Link @text="Dashboard" @icon="dashboard" @href="#" />
-        </Hds::SideNav::List>
+        <Hds::SideNav::List::Link @text="Dashboard" @icon="dashboard" @href="#" />
         <Hds::SideNav::List aria-label="Services (multiple groups)" as |SNL|>
           <SNL.Title>Services</SNL.Title>
 
@@ -532,28 +536,36 @@
 
   <Shw::Flex as |SF|>
     <SF.Item @label="Base">
-      <ul class="shw-component-sim-side-nav-body">
-        <Hds::SideNav::List::Title>Group title</Hds::SideNav::List::Title>
-        <Hds::SideNav::List::Item>
-          <Shw::Placeholder @height="108px" @text="following content" />
-        </Hds::SideNav::List::Item>
-      </ul>
+      <div>
+        <Hds::SideNav::List::Title id="example-title-1">Group title</Hds::SideNav::List::Title>
+        <ul class="shw-component-sim-side-nav-body" aria-labelledby="example-title-1">
+          <Hds::SideNav::List::Item>
+            <Shw::Placeholder @height="108px" @text="following content" />
+          </Hds::SideNav::List::Item>
+        </ul>
+      </div>
     </SF.Item>
     <SF.Item @label="With very long text">
-      <ul class="shw-component-sim-side-nav-body">
-        <Hds::SideNav::List::Title>This is a long text that should go on two lines</Hds::SideNav::List::Title>
-        <Hds::SideNav::List::Item>
-          <Shw::Placeholder @height="108px" @text="following content" />
-        </Hds::SideNav::List::Item>
-      </ul>
+      <div>
+        <Hds::SideNav::List::Title id="example-title-2">This is a long text that should go on two lines</Hds::SideNav::List::Title>
+        <ul class="shw-component-sim-side-nav-body" aria-labelledby="example-title-2">
+          <Hds::SideNav::List::Item>
+            <Shw::Placeholder @height="108px" @text="following content" />
+          </Hds::SideNav::List::Item>
+        </ul>
+      </div>
     </SF.Item>
     <SF.Item @label="With very long text and no spaces">
-      <ul class="shw-component-sim-side-nav-body">
-        <Hds::SideNav::List::Title>ThisIsLongTextThatShouldWrapToTwoLinesAndNotOverflow</Hds::SideNav::List::Title>
-        <Hds::SideNav::List::Item>
-          <Shw::Placeholder @height="108px" @text="following content" />
-        </Hds::SideNav::List::Item>
-      </ul>
+      <div>
+        <Hds::SideNav::List::Title
+          id="example-title-3"
+        >ThisIsLongTextThatShouldWrapToTwoLinesAndNotOverflow</Hds::SideNav::List::Title>
+        <ul class="shw-component-sim-side-nav-body" aria-labelledby="example-title-3">
+          <Hds::SideNav::List::Item>
+            <Shw::Placeholder @height="108px" @text="following content" />
+          </Hds::SideNav::List::Item>
+        </ul>
+      </div>
     </SF.Item>
   </Shw::Flex>
 
@@ -561,7 +573,7 @@
 
   <Shw::Text::H3>SideNav::List::Item</Shw::Text::H3>
 
-  <ul class="shw-component-sim-side-nav-body">
+  <ul class="shw-component-sim-side-nav-body" aria-labelledby="sidenav-list-item">
     <Hds::SideNav::List::Item>
       <Shw::Placeholder @height="36px" @text="item" />
     </Hds::SideNav::List::Item>
@@ -756,19 +768,19 @@
 
   <Shw::Flex as |SF|>
     <SF.Item @label="Base">
-      <ul class="shw-component-sim-side-nav-body">
+      <div class="shw-component-sim-side-nav-body">
         <Hds::SideNav::List::BackLink @text="Back to parent page" @href="#" />
-      </ul>
+      </div>
     </SF.Item>
     <SF.Item @label="With very long text">
-      <ul class="shw-component-sim-side-nav-body">
+      <div class="shw-component-sim-side-nav-body">
         <Hds::SideNav::List::BackLink @text="This is a long text that should go on two lines" @href="#" />
-      </ul>
+      </div>
     </SF.Item>
     <SF.Item @label="With very long text and no spaces">
-      <ul class="shw-component-sim-side-nav-body">
+      <div class="shw-component-sim-side-nav-body">
         <Hds::SideNav::List::BackLink @text="ThisIsLongTextThatShouldWrapToTwoLinesAndNotOverflow" @href="#" />
-      </ul>
+      </div>
     </SF.Item>
   </Shw::Flex>
 
@@ -780,18 +792,18 @@
         <SG.Item @label={{state}}>
           <Shw::Flex @direction="column" as |SF|>
             <SF.Item>
-              <ul class="shw-component-sim-side-nav-body">
+              <div class="shw-component-sim-side-nav-body">
                 <Hds::SideNav::List::BackLink @text="Back to parent page" @href="#" mock-state-value={{state}} />
-              </ul>
+              </div>
             </SF.Item>
             <SF.Item>
-              <ul class="shw-component-sim-side-nav-body">
+              <div class="shw-component-sim-side-nav-body">
                 <Hds::SideNav::List::BackLink
                   @text="This is a long text that should go on two lines"
                   @href="#"
                   mock-state-value={{state}}
                 />
-              </ul>
+              </div>
             </SF.Item>
           </Shw::Flex>
         </SG.Item>