diff --git a/core/src/UserSettingsDialog.html b/core/src/UserSettingsDialog.html
index 4428e6ec97..8910332747 100644
--- a/core/src/UserSettingsDialog.html
+++ b/core/src/UserSettingsDialog.html
@@ -19,7 +19,7 @@
   import { CSS_BREAKPOINTS } from './utilities/constants';
   import { LuigiConfig } from './core-api';
   import { TOP_NAV_DEFAULTS } from './utilities/luigi-config-defaults';
-  import { KEYCODE_ESC } from './utilities/keycode.js';
+  import { KEYCODE_ESC, KEYCODE_ENTER, KEYCODE_SPACE } from './utilities/keycode.js';
   export let schemaObj;
   export let userSettingGroups;
 
@@ -153,17 +153,17 @@
     let selectedUserSettingGroupData = selectedUserSettingGroup[1];
     errorHandling(selectedUserSettingGroupData);
     if (event) {
-      document.querySelectorAll('.lui-us-list .fd-nested-list__link').forEach(elem => {
+      document.querySelectorAll('.lui-us-list .lui-us-navlist__item').forEach(elem => {
         elem.classList.remove('is-selected');
       });
-      const link = closest(event.target, '.fd-nested-list__link', 20);
+      const link = closest(event.target, '.lui-us-navlist__item', 20);
       link.classList.add('is-selected');
       if (window.innerWidth < CSS_BREAKPOINTS.desktopMinWidth) {
         closeNavOnCategoryClickMobile();
       }
     } else {
       document
-        .querySelectorAll('.lui-us-list .fd-nested-list__link')[0]
+        .querySelectorAll('.lui-us-list .lui-us-navlist__item')[0]
         .classList.add('is-selected');
       if (
         window.innerWidth !== 0 &&
@@ -303,6 +303,12 @@
       dispatch('close');
     }
   }
+
+  export function handleKeyUp(event, index) {
+    if (event.keyCode === KEYCODE_ENTER || event.keyCode === KEYCODE_SPACE) {
+      document.querySelectorAll('.lui-us-list .lui-us-navlist__item')[index].click();
+    }
+  }
 </script>
 
 <style>
@@ -370,86 +376,6 @@
     background-color: var(--sapBackgroundColor, #f7f7f7);
   }
 
-  .lui-usersettings-burger {
-    margin-right: 16px;
-    cursor: pointer;
-    display: none;
-  }
-
-  .fd-nested-list__item {
-    display: flex;
-    -webkit-box-align: center;
-    align-items: center;
-    position: relative;
-    -webkit-box-flex: 1;
-    flex: 1 1 auto;
-    max-width: 100%;
-    border-bottom-color: var(--sapList_GroupHeaderBorderColor, #d9d9d9);
-  }
-
-  .lui-usersettings-list-item__info-container {
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    display: flex;
-    align-items: center;
-  }
-
-  .fd-nested-list__link {
-    height: 5rem;
-    padding: 1rem;
-  }
-
-  .lui-usersettings-list-item__info-container .sap-icon {
-    font-size: 2rem;
-    color: var(--sapContent_NonInteractiveIconColor);
-    margin-right: 0.75rem;
-  }
-
-  .fd-nested-list__icon img {
-    max-width: 2rem;
-    max-height: 2rem;
-    border-radius: 0.25rem;
-    margin-right: 0.75rem;
-  }
-
-  .lui-usersettings-list-item__title-container {
-    display: flex;
-    flex-direction: column;
-    flex: auto;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-  }
-
-  .lui-usersettings-list-item__title {
-    color: var(--sapList_TextColor);
-    font-size: var(--sapFontSize, 14px);
-    font-weight: normal;
-    padding-top: 0.125rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1 1 auto;
-  }
-
-  .fd-nested-list__link:active .lui-usersettings-list-item__title,
-  .fd-nested-list__link:active .lui-usersettings-list-item__subtitle,
-  .fd-nested-list__link:active .fd-nested-list__icon {
-    color: var(--sapList_Active_TextColor, #fff);
-  }
-
-  .lui-usersettings-list-item__subtitle {
-    font-size: var(--sapFontSize, 14px);
-    font-weight: normal;
-    color: var(--sapContent_LabelColor);
-    padding-top: 0.5rem;
-    white-space: nowrap;
-    overflow: hidden;
-    text-overflow: ellipsis;
-    flex: 1 1 auto;
-  }
-
   .iframeUserSettingsCtn {
     position: relative;
     width: 100%;
@@ -537,6 +463,16 @@
       z-index: 1;
     }
   }
+
+  /* TODO: need to be removed after updating FD Styles to 0.16.0, selected state for left side nav */
+  .fd-list__item.is-selected,
+  .fd-list__item[aria-selected='true'] {
+    background: #e5f0fa;
+    background: var(--sapList_SelectionBackgroundColor, #e5f0fa);
+    border-bottom: 0.0625rem solid #0854a0;
+    border-bottom: var(--sapList_BorderWidth, 0.0625rem) solid
+      var(--sapList_SelectionBorderColor, #0854a0);
+  }
 </style>
 <svelte:window on:keydown="{handleKeydown}" on:resize="{onResize}" />
 <div class="fd-dialog fd-dialog--active lui-usersettings-dialog">
@@ -550,40 +486,41 @@ <h2 class="fd-title fd-title--h5">
             </h2>
           </div>
           <div class="fd-side-nav__main-navigation lui-fd-side-nav__main-navigation">
-            <ul class="fd-nested-list lui-us-list">
+            <ul class="fd-list fd-list--byline lui-us-list" role="list">
               {#each Object.entries(userSettingGroups) as [key, userSettingGroup], index}
               {#each Object.entries(userSettingGroup) as userSettingsGroupProperty}
-              <li class="fd-nested-list__item">
-                <a
-                  class="fd-nested-list__link"
-                  on:click|preventDefault="{() => openEditor(userSettingsGroupProperty, event)}"
-                >
-                  <div class="lui-usersettings-list-item__info-container">
-                    {#if userSettingsGroupProperty[1].icon} {#if
-                    hasOpenUIicon(userSettingsGroupProperty[1])}
-                    <i
-                      class="fd-nested-list__icon sap-icon sap-icon--{userSettingsGroupProperty[1].icon}"
-                    ></i>
-                    {:else}
-                    <span class="fd-nested-list__icon sap-icon">
-                      <img
-                        src="{userSettingsGroupProperty[1].icon}"
-                        alt="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}"
-                      />
-                    </span>
-                    {/if} {:else}
-                    <i class="fd-nested-list__icon sap-icon"></i>
-                    {/if}
-                    <div class="lui-usersettings-list-item__title-container">
-                      <span class="lui-usersettings-list-item__title"
-                        >{$getTranslation(userSettingsGroupProperty[1].label?userSettingsGroupProperty[1].label:'')}</span
-                      >
-                      <span class="lui-usersettings-list-item__subtitle"
-                        >{$getTranslation(userSettingsGroupProperty[1].sublabel?userSettingsGroupProperty[1].sublabel:'')}</span
-                      >
-                    </div>
+              <li
+                tabindex="0"
+                role="listitem"
+                class="fd-list__item lui-us-navlist__item"
+                data-testid="us-navigation-item"
+                on:click|preventDefault="{() => openEditor(userSettingsGroupProperty, event)}"
+                on:keyup="{(event) => handleKeyUp(event,[index])}"
+              >
+                <span class="fd-list__thumbnail">
+                  {#if userSettingsGroupProperty[1].icon} {#if
+                  hasOpenUIicon(userSettingsGroupProperty[1])}
+                  <i
+                    role="presentation"
+                    class="sap-icon--{userSettingsGroupProperty[1].icon}"
+                  ></i>
+                  {:else}
+                  <img
+                    src="{userSettingsGroupProperty[1].icon}"
+                    alt="{userSettingsGroupProperty[1].altText ? userSettingsGroupProperty[1].altText : ''}"
+                  />
+                  {/if} {:else}
+                  <i role="presentation" class="sap-icon"></i>
+                  {/if}
+                </span>
+                <div class="fd-list__content">
+                  <div class="fd-list__title">
+                    {$getTranslation(userSettingsGroupProperty[1].label?userSettingsGroupProperty[1].label:'')}
+                  </div>
+                  <div class="fd-list__byline">
+                    {$getTranslation(userSettingsGroupProperty[1].sublabel?userSettingsGroupProperty[1].sublabel:'')}
                   </div>
-                </a>
+                </div>
               </li>
               {/each} {/each}
             </ul>
diff --git a/core/src/UserSettingsEditor.html b/core/src/UserSettingsEditor.html
index a9f499a01a..04edfb15d5 100644
--- a/core/src/UserSettingsEditor.html
+++ b/core/src/UserSettingsEditor.html
@@ -146,18 +146,13 @@
   }
 </style>
 <div class="lui-usersettings-content">
-  {#if userSettingGroup && userSettingGroup[0] && userSettingGroup[1]}
-  <div class="lui-us-content-header-container">
-    <h1 class="lui-title lui-title--h2">
-      {userSettingGroup[1].title?$getTranslation(userSettingGroup[1].title):''}
-    </h1>
-  </div>
-  {#if userSettingGroup[1].settings}
+  {#if userSettingGroup && userSettingGroup[0] && userSettingGroup[1]} {#if
+  userSettingGroup[1].settings}
   <div class="fd-page__content">
     <div class="fd-container lui-form-grid">
       {#each Object.entries(userSettingGroup[1].settings) as [key, schemaItem], i}
       <div class="lui-form-label">
-        <label class="fd-form-label">{$getTranslation(schemaItem.label)}:</label>
+        <label class="fd-form-label">{$getTranslation(schemaItem.label)}: </label>
       </div>
       <div class="lui-value-container">
         {#if schemaItem.type==='string'} {#if schemaItem.isEditable ||
@@ -173,88 +168,84 @@ <h1 class="lui-title lui-title--h2">
         />
         {:else}
         <label class="lui-form-text" data-testid="lui-us-input{i}"
-          >{storedUserSettingData[userSettingGroup[0]][key]}</label
-        >
+          >{storedUserSettingData[userSettingGroup[0]][key]}
+        </label>
         {/if} {/if} {#if schemaItem.type==='enum' && (schemaItem.style === undefined ||
         schemaItem.style === 'list')}
-        <div>
-          <div class="fd-form-item">
-            <div class="fd-popover">
-              <div
-                class="fd-popover__control"
-                aria-expanded="false"
-                aria-haspopup="true"
-                on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}"
-              >
-                <div class="fd-input-group fd-input-group--control">
-                  <input
-                    type="text"
-                    class="fd-input fd-input-group__input"
-                    placeholder="{$getTranslation(storedUserSettingData[userSettingGroup[0]][key])}"
-                    data-testid="lui-us-input{i}"
+        <div class="fd-form-item">
+          <div class="fd-popover">
+            <div
+              class="fd-popover__control"
+              aria-expanded="false"
+              aria-haspopup="true"
+              on:click|stopPropagation="{()=>toggleOptions(event,schemaItem.isEditable)}"
+            >
+              <div class="fd-input-group fd-input-group--control">
+                <input
+                  type="text"
+                  class="fd-input fd-input-group__input"
+                  placeholder="{$getTranslation(storedUserSettingData[userSettingGroup[0]][key])}"
+                  data-testid="lui-us-input{i}"
+                  disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
+                />
+                <span class="fd-input-group__addon fd-input-group__addon--button">
+                  <button
+                    aria-label="show/hide fruit options"
+                    aria-expanded="false"
+                    aria-haspopup="true"
+                    class="fd-input-group__button fd-button fd-button--transparent"
                     disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
-                  />
-                  <span class="fd-input-group__addon fd-input-group__addon--button">
-                    <button
-                      aria-label="show/hide fruit options"
-                      aria-expanded="false"
-                      aria-haspopup="true"
-                      class="fd-input-group__button fd-button fd-button--transparent"
-                      disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
-                    >
-                      <i class="sap-icon--navigation-down-arrow"></i>
-                    </button>
-                  </span>
-                </div>
+                  >
+                    <i class="sap-icon--navigation-down-arrow"></i>
+                  </button>
+                </span>
               </div>
-              <div
-                class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
-                aria-hidden="true"
-              >
-                {#if Array.isArray(schemaItem.options)}
-                <div class="fd-popover__wrapper docs-max-height">
-                  <ul class="fd-list fd-list--dropdown" role="listbox">
-                    {#each schemaItem.options as option, optionIndex}
-                    <li
-                      role="option"
-                      tabindex="0"
-                      class="fd-list__item"
-                      data-testid="lui-us-option{i}_{optionIndex}"
-                      on:click="{() => updateComboBox(key,option)}"
-                    >
-                      <span class="fd-list__title">
-                        <span class="fd-list__bold">{$getTranslation(option)}</span>
-                      </span>
-                    </li>
-                    {/each}
-                  </ul>
-                </div>
-                {/if}
+            </div>
+            <div
+              class="fd-popover__body fd-popover__body--no-arrow fd-popover__body--dropdown fd-popover__body--dropdown-fill"
+              aria-hidden="true"
+            >
+              {#if Array.isArray(schemaItem.options)}
+              <div class="fd-popover__wrapper docs-max-height">
+                <ul class="fd-list fd-list--dropdown" role="listbox">
+                  {#each schemaItem.options as option, optionIndex}
+                  <li
+                    role="option"
+                    tabindex="0"
+                    class="fd-list__item"
+                    data-testid="lui-us-option{i}_{optionIndex}"
+                    on:click="{() => updateComboBox(key,option)}"
+                  >
+                    <span class="fd-list__title">
+                      <span class="fd-list__bold">{$getTranslation(option)}</span>
+                    </span>
+                  </li>
+                  {/each}
+                </ul>
               </div>
+              {/if}
             </div>
           </div>
         </div>
         {/if} {#if schemaItem.type==='enum' && schemaItem.style === 'button' &&
         Array.isArray(schemaItem.options)}
-        <div>
-          <div class="fd-form-item">
-            <div
-              class="fd-segmented-button enum-buttons-container-{key}"
-              role="group"
-              aria-label="Group label"
+        <div class="fd-form-item">
+          <div
+            class="fd-segmented-button enum-buttons-container-{key}"
+            role="group"
+            aria-label="Group label"
+          >
+            {#each schemaItem.options as option, optionIndex}
+            <button
+              class="lui-fd-enum-button fd-button fd-button--compact {storedUserSettingData[userSettingGroup[0]][key] === option ? 'is-selected':'' }"
+              on:click="{() => updateEnumButton(key,option)}"
+              id="lui-us-enum_button_{key}_{option}"
+              data-testid="lui-us-enum_button_{key}_{option}"
+              disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
             >
-              {#each schemaItem.options as option, optionIndex}
-              <button
-                class="lui-fd-enum-button fd-button fd-button--compact {storedUserSettingData[userSettingGroup[0]][key] === option ? 'is-selected':'' }"
-                on:click="{() => updateEnumButton(key,option)}"
-                id="lui-us-enum_button_{key}_{option}"
-                data-testid="lui-us-enum_button_{key}_{option}"
-                disabled="{schemaItem.isEditable===undefined || schemaItem.isEditable?false:true}"
-              >
-                {$getTranslation(option)}
-              </button>
-              {/each}
-            </div>
+              {$getTranslation(option)}
+            </button>
+            {/each}
           </div>
         </div>
         {/if} {#if schemaItem.type==='boolean' && (!schemaItem.style || schemaItem.style
diff --git a/core/src/utilities/keycode.js b/core/src/utilities/keycode.js
index 6c451b4919..e9a65093d5 100644
--- a/core/src/utilities/keycode.js
+++ b/core/src/utilities/keycode.js
@@ -2,3 +2,5 @@ export const KEYCODE_ARROW_UP = 38;
 export const KEYCODE_ARROW_DOWN = 40;
 export const KEYCODE_ENTER = 13;
 export const KEYCODE_ESC = 27;
+export const KEYCODE_SPACE = 32;
+export const KEYCODE_TAB = 9;
diff --git a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
index 7bc4522c5b..808fa9a4c5 100644
--- a/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/0-fiddle/fiddle-navigation.spec.js
@@ -610,8 +610,11 @@ describe('Fiddle', () => {
       });
       cy.get('.lui-usersettings-dialog').should('be.visible');
 
-      cy.get('.lui-usersettings-left-nav')
-        .contains('Language & Region')
+      cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
+        .eq(1)
+        .should('contain', 'Language & Region');
+      cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
+        .eq(1)
         .click();
 
       cy.get('[data-testid="lui-us-input0"]').click();
@@ -630,8 +633,11 @@ describe('Fiddle', () => {
         win.Luigi.ux().openUserSettings();
       });
 
-      cy.get('.lui-usersettings-left-nav')
-        .contains('Theme')
+      cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
+        .eq(2)
+        .should('contain', 'Theme');
+      cy.get('.lui-usersettings-left-nav .lui-us-navlist__item')
+        .eq(2)
         .click();
 
       cy.get('.iframeUserSettingsCtn iframe').then(ifr => {
diff --git a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
index 07878d4a62..d72f9a688f 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/user_settings_dialog.spec.js
@@ -16,8 +16,8 @@ describe('Navigation', () => {
     cy.get('.lui-usersettings-dialog').should('exist');
 
     //Check we have 5 left bar items
-    cy.get('.lui-usersettings-body .fd-nested-list__link')
-      .children()
+    cy.get('.lui-us-list')
+      .find('[data-testid="us-navigation-item"]')
       .should('have.length', 5);
   };
 
@@ -54,12 +54,12 @@ describe('Navigation', () => {
 
     it('Fill Account and save; reopen and check saved value', () => {
       //Click on User Account
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(0)
         .click();
 
       //Check User Account is selected
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(0)
         .should('have.class', 'is-selected');
 
@@ -98,12 +98,12 @@ describe('Navigation', () => {
 
     it('Fill Language and Reason and save; reopen and check saved values', () => {
       //Click on Language & Region
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(1)
         .click();
 
       //Check Language & Region is selected
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(1)
         .should('have.class', 'is-selected');
 
@@ -145,7 +145,7 @@ describe('Navigation', () => {
       openSettingsDialogBox();
 
       //Click on Language & Region (left menu)
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(1)
         .click();
 
@@ -163,7 +163,7 @@ describe('Navigation', () => {
 
     it('Fill Privacy and save; reopen and check saved value', () => {
       //Click on Privacy
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(2)
         .click();
 
@@ -200,7 +200,7 @@ describe('Navigation', () => {
       openSettingsDialogBox();
 
       //Click on Privacy
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(2)
         .click();
 
@@ -219,7 +219,7 @@ describe('Navigation', () => {
     it('Fill Theming (which is custom mf) and save; reopen and check saved value', () => {
       let $iframeBody;
       //Click on theming
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(3)
         .click();
       //Check if iframe is loaded and have a red button
@@ -238,7 +238,7 @@ describe('Navigation', () => {
       saveSettings();
       openSettingsDialogBox();
       //Click on theming
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(3)
         .click();
       //Check if iframe has a red button with a active class
@@ -253,7 +253,7 @@ describe('Navigation', () => {
     it('Check custom mf without meta data defined in schema', () => {
       let $iframeBody;
       //click on custom
-      cy.get('.lui-usersettings-body .fd-nested-list__link')
+      cy.get('[data-testid="us-navigation-item"]')
         .eq(4)
         .click();
       //check if iframe is rendered also there are no meta data set in config.