diff --git a/packages/components/src/components/telekom/app-navigation-main-mobile/__snapshots__/app-navigation-main-mobile.spec.ts.snap b/packages/components/src/components/telekom/app-navigation-main-mobile/__snapshots__/app-navigation-main-mobile.spec.ts.snap
index d6ad07122f..bccbe0d4e4 100644
--- a/packages/components/src/components/telekom/app-navigation-main-mobile/__snapshots__/app-navigation-main-mobile.spec.ts.snap
+++ b/packages/components/src/components/telekom/app-navigation-main-mobile/__snapshots__/app-navigation-main-mobile.spec.ts.snap
@@ -15,8 +15,8 @@ exports[`AppNavigationMainMobile should handle menuitem 1`] = `
         </div>
       </a>
       <ul class="main-navigation-mobile__child-menu-items">
-        <a aria-current="true" aria-haspopup="false" class="main-navigation-mobile__child-menu-item-link selected" href="#" tabindex="0">
-          <li class="main-navigation-mobile__child-menu-item">
+        <li class="main-navigation-mobile__child-menu-item">
+          <a aria-current="true" aria-haspopup="false" class="main-navigation-mobile__child-menu-item-link selected" href="#" tabindex="0">
             <div class="main-navigation-mobile__child-menu-item-wrapper">
               <span>
                 menuItem1-1
@@ -25,13 +25,13 @@ exports[`AppNavigationMainMobile should handle menuitem 1`] = `
                 active
               </span>
             </div>
-          </li>
-        </a>
+          </a>
+        </li>
       </ul>
     </div>
     <ul class="main-navigation-mobile__main-menu">
-      <a aria-current="true" aria-haspopup="true" class="main-navigation-mobile__item-link main-navigation-mobile__item-link--selected" href="#" tabindex="-1">
-        <li class="main-navigation-mobile__item">
+      <li class="main-navigation-mobile__item main-navigation-mobile__item--selected">
+        <a aria-current="true" aria-haspopup="true" class="main-navigation-mobile__item-link main-navigation-mobile__item-link--selected" href="#" tabindex="-1">
           <div class="main-navigation-mobile__item-wrapper">
             <span>
               nav1
@@ -41,8 +41,8 @@ exports[`AppNavigationMainMobile should handle menuitem 1`] = `
             </span>
             <scale-icon-navigation-right></scale-icon-navigation-right>
           </div>
-        </li>
-      </a>
+        </a>
+      </li>
     </ul>
   </div>
 </app-navigation-main-mobile>
@@ -53,15 +53,15 @@ exports[`AppNavigationMainMobile should handle without childs 1`] = `
   <div class="main-navigation-mobile">
     <div></div>
     <ul class="main-navigation-mobile__main-menu">
-      <a aria-current="false" aria-haspopup="false" class="main-navigation-mobile__item-link" href="#" tabindex="0">
-        <li class="main-navigation-mobile__item">
+      <li class="main-navigation-mobile__item">
+        <a aria-current="false" aria-haspopup="false" class="main-navigation-mobile__item-link" href="#" tabindex="0">
           <div class="main-navigation-mobile__item-wrapper">
             <span>
               nav1
             </span>
           </div>
-        </li>
-      </a>
+        </a>
+      </li>
     </ul>
   </div>
 </app-navigation-main-mobile>
diff --git a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css
index b9506e189c..85885ddffa 100644
--- a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css
+++ b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.css
@@ -46,15 +46,8 @@ app-navigation-main-mobile {
   line-height: var(--line-height);
 }
 
-.main-navigation-mobile__item-wrapper {
-  box-sizing: border-box;
-  width: calc(100% - 34px);
-  display: flex;
-  justify-content: space-between;
-  margin-left: 34px;
-  border-bottom: var(--border-bottom);
-  padding-right: 34px;
-  align-items: center;
+.main-navigation-mobile__item--selected {
+  border-right: 2px solid var(--color-selected);
 }
 
 .main-navigation-mobile__item-link {
@@ -68,14 +61,21 @@ app-navigation-main-mobile {
   transition: var(--transition);
 }
 
-.main-navigation-mobile__item-link--selected .main-navigation-mobile__item {
-  border-right: 2px solid var(--color-selected);
-}
-
 .main-navigation-mobile__item-link--selected svg {
   margin-right: -2px;
 }
 
+.main-navigation-mobile__item-wrapper {
+  box-sizing: border-box;
+  width: calc(100% - 34px);
+  display: flex;
+  justify-content: space-between;
+  margin-left: 34px;
+  border-bottom: var(--border-bottom);
+  padding-right: 34px;
+  align-items: center;
+}
+
 .main-navigation-mobile__child-menu {
   position: absolute;
   top: 0;
diff --git a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.tsx b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.tsx
index 8b585046e1..bf7b5c0482 100644
--- a/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.tsx
+++ b/packages/components/src/components/telekom/app-navigation-main-mobile/app-navigation-main-mobile.tsx
@@ -135,36 +135,36 @@ export class MainNavigationMobile {
           }}
         >
           {section.children.map((child) => (
-            <a
-              aria-current={isActive(child) ? 'true' : 'false'}
-              aria-haspopup={child.children ? 'true' : 'false'}
-              class={`main-navigation-mobile__child-menu-item-link ${
-                isActive(child) ? 'selected' : ''
-              }`}
-              href={child.href || 'javascript:void(0);'}
-              tabIndex={0}
-              onClick={(event) => {
-                this.handleSelect(event, child);
-              }}
-              onKeyDown={(event) => {
-                if (['Enter', ' '].includes(event.key)) {
+            <li class="main-navigation-mobile__child-menu-item">
+              <a
+                aria-current={isActive(child) ? 'true' : 'false'}
+                aria-haspopup={child.children ? 'true' : 'false'}
+                class={`main-navigation-mobile__child-menu-item-link ${
+                  isActive(child) ? 'selected' : ''
+                }`}
+                href={child.href || 'javascript:void(0);'}
+                tabIndex={0}
+                onClick={(event) => {
                   this.handleSelect(event, child);
-                  setTimeout(() => {
-                    // focus first child menu item link to ease tab navigation
-                    const firstChildren = this.childrenWrapper.querySelector(
-                      'a'
-                    );
-                    if (firstChildren) {
-                      this.childrenWrapper.querySelector('a').focus();
-                    }
-                  });
-                }
-                if (['Escape', 'Esc'].includes(event.key)) {
-                  this.hide();
-                }
-              }}
-            >
-              <li class="main-navigation-mobile__child-menu-item">
+                }}
+                onKeyDown={(event) => {
+                  if (['Enter', ' '].includes(event.key)) {
+                    this.handleSelect(event, child);
+                    setTimeout(() => {
+                      // focus first child menu item link to ease tab navigation
+                      const firstChildren = this.childrenWrapper.querySelector(
+                        'a'
+                      );
+                      if (firstChildren) {
+                        this.childrenWrapper.querySelector('a').focus();
+                      }
+                    });
+                  }
+                  if (['Escape', 'Esc'].includes(event.key)) {
+                    this.hide();
+                  }
+                }}
+              >
                 <div class="main-navigation-mobile__child-menu-item-wrapper">
                   <span>{child.name}</span>
                   {isActive(child) && <span class="sr-only">active</span>}
@@ -172,8 +172,8 @@ export class MainNavigationMobile {
                     <scale-icon-navigation-right></scale-icon-navigation-right>
                   )}
                 </div>
-              </li>
-            </a>
+              </a>
+            </li>
           ))}
         </ul>
       </div>
@@ -194,39 +194,45 @@ export class MainNavigationMobile {
           }}
         >
           {(this.navigation || []).map((item) => (
-            <a
-              aria-current={isActive(item.id) ? 'true' : 'false'}
-              aria-haspopup={item.children ? 'true' : 'false'}
-              class={`main-navigation-mobile__item-link${
+            <li
+              class={`main-navigation-mobile__item${
                 isActive(item.id)
-                  ? ' main-navigation-mobile__item-link--selected'
+                  ? ' main-navigation-mobile__item--selected'
                   : ''
               }`}
-              href={item.href || 'javascript:void(0);'}
-              onClick={(event) => {
-                this.handleSelect(event, item);
-              }}
-              onKeyDown={(event) => {
-                if (['Enter', ' '].includes(event.key)) {
-                  this.handleSelect(event, item);
-                  setTimeout(() => {
-                    // focus first child menu item link to ease tab navigation
-                    const firstChildren = this.childrenWrapper.querySelector(
-                      'a'
-                    );
-                    if (firstChildren) {
-                      this.childrenWrapper.querySelector('a').focus();
-                    }
-                  });
-                }
-                if (['Escape', 'Esc'].includes(event.key)) {
-                  this.hide();
-                }
-              }}
-              // hide from tab navigation when on childMenuPage
-              tabIndex={this.selected ? -1 : 0}
             >
-              <li class="main-navigation-mobile__item">
+              <a
+                aria-current={isActive(item.id) ? 'true' : 'false'}
+                aria-haspopup={item.children ? 'true' : 'false'}
+                class={`main-navigation-mobile__item-link${
+                  isActive(item.id)
+                    ? ' main-navigation-mobile__item-link--selected'
+                    : ''
+                }`}
+                href={item.href || 'javascript:void(0);'}
+                onClick={(event) => {
+                  this.handleSelect(event, item);
+                }}
+                onKeyDown={(event) => {
+                  if (['Enter', ' '].includes(event.key)) {
+                    this.handleSelect(event, item);
+                    setTimeout(() => {
+                      // focus first child menu item link to ease tab navigation
+                      const firstChildren = this.childrenWrapper.querySelector(
+                        'a'
+                      );
+                      if (firstChildren) {
+                        this.childrenWrapper.querySelector('a').focus();
+                      }
+                    });
+                  }
+                  if (['Escape', 'Esc'].includes(event.key)) {
+                    this.hide();
+                  }
+                }}
+                // hide from tab navigation when on childMenuPage
+                tabIndex={this.selected ? -1 : 0}
+              >
                 <div class="main-navigation-mobile__item-wrapper">
                   <span>{item.name}</span>
                   {isActive(item.id) && <span class="sr-only">active</span>}
@@ -234,8 +240,8 @@ export class MainNavigationMobile {
                     <scale-icon-navigation-right></scale-icon-navigation-right>
                   )}
                 </div>
-              </li>
-            </a>
+              </a>
+            </li>
           ))}
         </ul>
       </div>