diff --git a/core/fundamentalStyleClasses.js b/core/fundamentalStyleClasses.js
index 17af6ac6a7..36befc0c71 100644
--- a/core/fundamentalStyleClasses.js
+++ b/core/fundamentalStyleClasses.js
@@ -1,25 +1,24 @@
 module.exports = [
   './node_modules/fundamental-styles/dist/root.css',
-  './node_modules/fundamental-styles/dist/fonts.css',
+  './node_modules/fundamental-styles/dist/variables.css',
   './node_modules/fundamental-styles/dist/icon.css',
   './node_modules/fundamental-styles/dist/layout.css',
-  './node_modules/fundamental-styles/dist/alert.css',
   './node_modules/fundamental-styles/dist/action-bar.css',
+  // './node_modules/fundamental-styles/dist/alert.css',
   //'./node_modules/fundamental-styles/dist/asset-upload.css',
   //'./node_modules/fundamental-styles/dist/badge.css',
-  './node_modules/fundamental-styles/dist/popover.css',
-  //'./node_modules/fundamental-styles/dist/busy-indicator.css',
+  './node_modules/fundamental-styles/dist/bar.css',
+  //'./node_modules/fundamental-styles/dist/breadcrumb.css',
+  './node_modules/fundamental-styles/dist/busy-indicator.css',
   './node_modules/fundamental-styles/dist/button.css',
-  //'./node_modules/fundamental-styles/dist/button-group.css',
   //'./node_modules/fundamental-styles/dist/button-split.css',
-  //'./node_modules/fundamental-styles/dist/breadcrumb.css',
   //'./node_modules/fundamental-styles/dist/calendar.css',
   // './node_modules/fundamental-styles/dist/checkbox.css',
-  // './node_modules/fundamental-styles/dist/radio.css',
   './node_modules/fundamental-styles/dist/counter.css',
-  //'./node_modules/fundamental-styles/dist/dropdown.css',
+  './node_modules/fundamental-styles/dist/dialog.css',
   //'./node_modules/fundamental-styles/dist/fieldset.css',
   //'./node_modules/fundamental-styles/dist/form-group.css',
+  //'./node_modules/fundamental-styles/dist/form-input-message-group.css',
   //'./node_modules/fundamental-styles/dist/form-item.css',
   //'./node_modules/fundamental-styles/dist/form-label.css',
   //'./node_modules/fundamental-styles/dist/form-message.css',
@@ -28,7 +27,7 @@ module.exports = [
   //'./node_modules/fundamental-styles/dist/image.css',
   //'./node_modules/fundamental-styles/dist/inline-help.css',
   //'./node_modules/fundamental-styles/dist/input.css',
-  // './node_modules/fundamental-styles/dist/textarea.css',
+  //'./node_modules/fundamental-styles/dist/input-group.css',
   //'./node_modules/fundamental-styles/dist/label.css',
   //'./node_modules/fundamental-styles/dist/layout-grid.css',
   './node_modules/fundamental-styles/dist/link.css',
@@ -36,28 +35,34 @@ module.exports = [
   //'./node_modules/fundamental-styles/dist/list-group.css',
   //'./node_modules/fundamental-styles/dist/localization-editor.css',
   './node_modules/fundamental-styles/dist/menu.css',
-  './node_modules/fundamental-styles/dist/modal.css',
-  //'./node_modules/fundamental-styles/dist/multi-input.css',
+  //'./node_modules/fundamental-styles/dist/message-box.css',
+  './node_modules/fundamental-styles/dist/message-strip.css',
   //'./node_modules/fundamental-styles/dist/nav.css',
   //'./node_modules/fundamental-styles/dist/notification.css',
+  //'./node_modules/fundamental-styles/dist/object-status.css',
   './node_modules/fundamental-styles/dist/page.css',
   //'./node_modules/fundamental-styles/dist/pagination.css',
   //'./node_modules/fundamental-styles/dist/panel.css',
-  //'./node_modules/fundamental-styles/dist/tile.css',
-  //'./node_modules/fundamental-styles/dist/product-tile.css',
+  './node_modules/fundamental-styles/dist/popover.css',
   './node_modules/fundamental-styles/dist/product-switch.css',
+  //'./node_modules/fundamental-styles/dist/product-tile.css',
+  // './node_modules/fundamental-styles/dist/radio.css',
   //'./node_modules/fundamental-styles/dist/section.css',
+  //'./node_modules/fundamental-styles/dist/segmented-button.css',
   // './node_modules/fundamental-styles/dist/select.css',
+  './node_modules/fundamental-styles/dist/shellbar.css',
   './node_modules/fundamental-styles/dist/side-nav.css',
-  './node_modules/fundamental-styles/dist/spinner.css',
+  // './node_modules/fundamental-styles/dist/spinner.css',
   // './node_modules/fundamental-styles/dist/status-label.css',
+  // './node_modules/fundamental-styles/dist/switch.css',
   //'./node_modules/fundamental-styles/dist/table.css',
-  //'./node_modules/fundamental-styles/dist/tree.css',
   './node_modules/fundamental-styles/dist/tabs.css',
+  // './node_modules/fundamental-styles/dist/textarea.css',
+  //'./node_modules/fundamental-styles/dist/tile.css',
   //'./node_modules/fundamental-styles/dist/time.css',
-  // './node_modules/fundamental-styles/dist/toggle.css',
   //'./node_modules/fundamental-styles/dist/token.css',
-  //'./node_modules/fundamental-styles/dist/input-group.css',
-  './node_modules/fundamental-styles/dist/shellbar.css',
+  //'./node_modules/fundamental-styles/dist/tokenizer.css',
+  //'./node_modules/fundamental-styles/dist/tree.css',
   './node_modules/fundamental-styles/dist/helpers.css'
+  //'./node_modules/fundamental-styles/dist/info-label.css'
 ];
diff --git a/core/package-lock.json b/core/package-lock.json
index f874edd99f..8a3ab82ac8 100644
--- a/core/package-lock.json
+++ b/core/package-lock.json
@@ -977,9 +977,9 @@
       "dev": true
     },
     "@sap-theming/theming-base-content": {
-      "version": "11.1.17",
-      "resolved": "https://registry.npmjs.org/@sap-theming/theming-base-content/-/theming-base-content-11.1.17.tgz",
-      "integrity": "sha512-GZi24sPE05OBktiR9hnWUHnvkipQ0Waen4Me3cuJZl3Ha6ZknH9ibyYgtAPwbLIIxSF3nvLNQdyu0dE0YtZ6Rw==",
+      "version": "11.1.18",
+      "resolved": "https://registry.npmjs.org/@sap-theming/theming-base-content/-/theming-base-content-11.1.18.tgz",
+      "integrity": "sha512-NDqUq35hc/eZQomLhsDQEO8PeCnNCZmJIittafuho5VlGNdJWR1ZsXj97MZSJnLLfttVWcpb5KNrj+b84F6aAw==",
       "dev": true
     },
     "@sinonjs/commons": {
@@ -4375,13 +4375,10 @@
       "dev": true
     },
     "fundamental-styles": {
-      "version": "0.6.0",
-      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.6.0.tgz",
-      "integrity": "sha512-jn3earSGApXH87Pu38EBI/5JHyfUsS9pBbinDJQmgTFifGBaHyfkfSwfU9Gx+vWeq+hPZSJ4FIoPqIVDybjnBQ==",
-      "dev": true,
-      "requires": {
-        "@sap-theming/theming-base-content": "~11.1.16"
-      }
+      "version": "0.8.1",
+      "resolved": "https://registry.npmjs.org/fundamental-styles/-/fundamental-styles-0.8.1.tgz",
+      "integrity": "sha512-lP29Hi4esdf9lOa3l1uMncTjnROR9sLjxM27InrztADa228H8Ry5LRqI7nJJTEfqo/e53QKVRjbZo3B1+hqqFg==",
+      "dev": true
     },
     "gauge": {
       "version": "2.7.4",
diff --git a/core/package.json b/core/package.json
index ea62d7510e..1a8f42de40 100644
--- a/core/package.json
+++ b/core/package.json
@@ -10,6 +10,7 @@
     "@babel/polyfill": "^7.6.0",
     "@babel/preset-env": "^7.6.2",
     "@babel/register": "^7.6.2",
+    "@sap-theming/theming-base-content": "^11.1.18",
     "@webcomponents/webcomponentsjs": "^2.3.0",
     "acorn": "^6.4.1",
     "axios": ">=0.18.1",
@@ -21,7 +22,7 @@
     "core-js": "^3.2.1",
     "css-loader": "^3.0.0",
     "file-loader": "^2.0.0",
-    "fundamental-styles": "^0.6.0",
+    "fundamental-styles": "^0.8.1",
     "jsdom": "15.0.0",
     "jsdom-global": "3.0.2",
     "lodash": ">=4.17.13",
diff --git a/core/src/Alerts.html b/core/src/Alerts.html
index 99852183fe..e4a88abcf9 100644
--- a/core/src/Alerts.html
+++ b/core/src/Alerts.html
@@ -1,19 +1,24 @@
-<div class="fd-shell__overlay fd-overlay fd-overlay--alert" aria-hidden="false">
+<div
+  class="fd-shell__overlay fd-overlay fd-overlay--message-strip"
+  aria-hidden="false"
+>
   {#each alertQueue as al}
   <div
-    class="fd-alert fd-alert--{alertTypeMap[al.settings.type]} fd-alert--dismissible"
+    class="fd-message-strip fd-message-strip--{alertTypeMap[al.settings.type]} fd-message-strip--dismissible"
     role="alert"
     id="j2ALl423"
     data-testid="luigi-alert"
   >
+    <p
+      class="fd-message-strip__text"
+    >{@html al.dataSanitized ? al.settings.text: ''}</p>
     <button
-      class="fd-button fd-button--light fd-button--compact fd-alert__close"
+      class="fd-button fd-button--transparent fd-button--compact fd-message-strip__close"
       on:click="{() => dispatch('alertDismiss',{id: al.settings.id})}"
       aria-label="Close"
       aria-controls="j2ALl423"
       data-testid="luigi-alert-dismiss"
     ></button>
-    <p class="fd-alert__text">{@html al.dataSanitized ? al.settings.text: ''}</p>
   </div>
   {/each}
 </div>
@@ -103,15 +108,15 @@
 </script>
 
 <style type="text/scss">
-  .fd-overlay--alert {
+  .fd-overlay--message-strip {
     position: absolute;
     z-index: 1100;
     flex-direction: column;
-    .fd-alert:not(:first-child) {
+    .fd-message-strip:not(:first-child) {
       margin-top: 8px;
     }
   }
-  .fd-alert__text {
+  .fd-message-strip__text {
     :global(a) {
       display: inline-block;
       line-height: 1.42857;
diff --git a/core/src/App.html b/core/src/App.html
index 3e1ae322ca..41b8c6791d 100644
--- a/core/src/App.html
+++ b/core/src/App.html
@@ -43,8 +43,15 @@
     aria-hidden="false"
     aria-label="Loading"
   >
-    <div class="fd-spinner">
-      <div class="fd-spinner__body"></div>
+    <div
+      class="fd-busy-indicator--m"
+      aria-hidden="false"
+      aria-label="Loading"
+      data-testid="luigi-loading-spinner"
+    >
+      <div class="fd-busy-indicator--circle-0"></div>
+      <div class="fd-busy-indicator--circle-1"></div>
+      <div class="fd-busy-indicator--circle-2"></div>
     </div>
   </div>
   {/if}
@@ -1118,14 +1125,9 @@
 </script>
 
 <style type="text/scss">
-  /*Mixins*/
+  @import 'styles/fonts';
   @import 'styles/mixins';
-
-  $topNavHeight: 44px;
-  $topNavHeightTab: 44px;
-  $leftNavWidth: 15rem;
-  $leftNavWidthCollapsed: 2.75rem;
-  $desktopMinWidth: 600px;
+  @import 'styles/variables';
 
   :global(html) {
     box-sizing: border-box;
@@ -1156,12 +1158,14 @@
   :global([luigi-app-loading-indicator]) {
     z-index: 10;
     background-color: var(--fd-background-color);
-    padding-top: 30vh;
     position: absolute;
     top: 0;
     right: 0;
     bottom: 0;
     left: 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
   :global([luigi-app-loading-indicator].hidden) {
     visibility: hidden;
@@ -1351,6 +1355,15 @@
         left: $leftNavWidthCollapsed;
       }
     }
+
+    :global(.fd-dialog) {
+      &__content {
+        &:not(.fd-dialog__content--mobile) {
+          max-width: 90%;
+          min-width: 90%;
+        }
+      }
+    }
   }
 
   :global(html.luigi-app-in-custom-container) {
@@ -1394,46 +1407,82 @@
   }
 
   //Fixing issues for fundamental styles
+
+  //Add padding for shellbar buttons
   :global(.fd-shellbar__button) {
-    padding-left: 12px;
-    padding-right: 12px;
+    padding-left: 0.5625rem !important;
+    padding-right: 0.5625rem !important;
   }
 
-  //Overwrites with SAP variables
+  :global(.fd-menu__link) {
+    text-decoration: none; //Remove underline from links in fd-menu
+    border-radius: 0; //Remove border radius from links inside fd-menu
+  }
 
-  :global(.fd-shellbar) {
-    border-bottom: #354a5f;
-    border-bottom: 1px solid var(--sapShell_BorderColor, #354a5f);
+  //Make border radius for links inside fd-menu only for the first and last elements
+  @mixin luigi-menu__link--border($position) {
+    :global(.fd-menu__link) {
+      border-#{$position}-left-radius: 0.25rem;
+      border-#{$position}-left-radius: var(
+        --sapElement_BorderCornerRadius,
+        0.25rem
+      );
+      border-#{$position}-right-radius: 0.25rem;
+      border-#{$position}-right-radius: var(
+        --sapElement_BorderCornerRadius,
+        0.25rem
+      );
+    }
   }
+  :global(.fd-menu) {
+    :global(.fd-menu__list) {
+      &:first-child {
+        :global(.fd-menu__item) {
+          &:first-child {
+            @include luigi-menu__link--border('top');
+          }
+        }
+      }
 
-  :global(.fd-menu__item) {
-    background-color: var(--sapBackgroundColor, #fff);
-    color: var(--sapLinkColor, #51555a);
-
-    &.is-hover,
-    &:hover,
-    &.is-selected:hover {
-      color: #0854a0;
-      color: var(--sapLink_Hover_Color, #0854a0);
-      background-color: #ebf5fe;
-      background-color: var(--sapButton_Hover_Background, #ebf5fe);
+      &:last-child {
+        :global(.fd-menu__item) {
+          &:last-child {
+            @include luigi-menu__link--border('bottom');
+          }
+        }
+      }
     }
+  }
+
+  //Add z-index for dialogs
+  :global(.fd-dialog) {
+    z-index: 1000;
+  }
 
-    &.is-selected {
-      color: #32363a;
-      color: var(--sapList_TextColor, #32363a);
-      background: #e5f0fa;
-      background: var(--sapList_SelectionBackgroundColor, #e5f0fa);
+  :global(.fd-dialog__content--mobile) {
+    //Remove border-radius from mobile fullscreen dialog
+    border-radius: 0;
+
+    :global(.fd-dialog__header.fd-bar),
+    :global(.fd-dialog__footer.fd-bar) {
+      border-radius: 0;
     }
+
+    //Recalculate height for mobile devices
+    height: calc(var(--vh, 1vh) * 100});
+    max-height: calc(var(--vh, 1vh) * 100});
+    -webkit-overflow-scrolling: touch;
   }
 
-  :global(.fd-modal__content) {
-    background-color: #fff;
-    background-color: var(--sapGroup_ContentBackground, #fff);
-    box-shadow: var(
-      --sapContent_Shadow3,
-      0 0 0 0.0625rem rgba(0, 0, 0, 0.42),
-      0 1.25rem 5rem 0 rgba(0, 0, 0, 0.3)
-    );
+  //Recalculate height for mobile devices
+  :global(.fd-product-switch__body) {
+    max-height: calc(var(--vh, 1vh) * 100 - 76px);
+  }
+
+  //Overwrites with SAP variables
+
+  :global(.fd-shellbar) {
+    border-bottom: #354a5f;
+    border-bottom: 1px solid var(--sapShell_BorderColor, #354a5f);
   }
 </style>
diff --git a/core/src/Authorization.html b/core/src/Authorization.html
index 2f745b8ce6..afb8f055de 100644
--- a/core/src/Authorization.html
+++ b/core/src/Authorization.html
@@ -3,22 +3,23 @@
 <nav class="fd-menu">
   <ul class="fd-menu__list">
     {#if showUserInfo}
-    <li>
+    <li class="fd-menu__item">
       <span
         aria-label="Username"
         id="username"
-        class="fd-has-type-2"
+        class="lui-username fd-has-type-1"
         data-testid="luigi-topnav-profile-username"
       >{userInfo.name ? userInfo.name : userInfo.email}</span>
     </li>
     {/if}
     {#each profileNav.items as profileItem}
     <li
+      class="fd-menu__item"
       on:click="{() => onActionClick(profileItem)}"
       data-testid="{getTestId(profileItem)}"
     >
       <a
-        class="fd-menu__item"
+        class="fd-menu__link"
         data-testid="luigi-topnav-profile-item"
         href="{getRouteLink(profileItem)}"
         on:click|preventDefault="{() => {}}"
@@ -36,14 +37,20 @@
         >
         {/if}
         {/if}
-        <span>{$getTranslation(profileItem.label)}</span>
+        <span
+          class="fd-menu__title"
+        >{$getTranslation(profileItem.label)}</span>
       </a>
     </li>
     {/each}
     {#if isAuthorizationEnabled}
     {#if isLoggedIn && isProfileLogoutItem}
-    <li on:click="{onLogoutClick}" data-testid="{getTestId(profileNav.logout)}">
-      <a aria-label="Logout" class="fd-menu__item">
+    <li
+      class="fd-menu__item"
+      on:click="{onLogoutClick}"
+      data-testid="{getTestId(profileNav.logout)}"
+    >
+      <a aria-label="Logout" class="fd-menu__link">
         {#if profileNav.logout.icon}
         {#if hasOpenUIicon(profileNav.logout)}
         <span
@@ -57,13 +64,17 @@
         >
         {/if}
         {/if}
-        <span>{$getTranslation(profileNav.logout.label)}</span>
+        <span
+          class="fd-menu__title"
+        >{$getTranslation(profileNav.logout.label)}</span>
       </a>
     </li>
     {/if}
     {#if !isLoggedIn && !isProfileLogoutItem}
-    <li on:click="{startAuthorization}">
-      <a aria-label="Login" class="fd-menu__item">Login</a>
+    <li class="fd-menu__item" on:click="{startAuthorization}">
+      <a aria-label="Login" class="fd-link">
+        <span class="fd-menu__title">Login</span>
+      </a>
     </li>
     {/if}
     {/if}
@@ -235,9 +246,8 @@
   .nav-icon {
     height: 2em;
   }
-  #username {
+  .lui-username {
     display: block;
-    padding: 10px 24px;
-    cursor: default;
+    padding: 0.75rem 1rem 0.75rem 0.75rem;
   }
 </style>
diff --git a/core/src/Backdrop.html b/core/src/Backdrop.html
index f177eadcbd..f3071d3808 100644
--- a/core/src/Backdrop.html
+++ b/core/src/Backdrop.html
@@ -84,7 +84,7 @@
 
 <style type="text/scss">
   .lui-backdrop {
-    background-color: rgba(74, 80, 92, 0.3);
+    background-color: rgba(0, 0, 0, 0.6);
     position: absolute;
     left: 0;
     top: 0;
diff --git a/core/src/ConfirmationModal.html b/core/src/ConfirmationModal.html
index 805d606225..3cdd6e4c1c 100644
--- a/core/src/ConfirmationModal.html
+++ b/core/src/ConfirmationModal.html
@@ -1,31 +1,32 @@
 <svelte:window on:keydown="{handleKeydown}"/>
-<div class="fd-ui__overlay fd-overlay fd-overlay--modal" aria-hidden="false">
-  <div class="fd-modal" data-testid="luigi-confirmation-modal">
-    <div class="fd-modal__content" role="document">
-      <div class="fd-modal__header">
-        <h1 class="fd-modal__title">{settings.header}</h1>
-        <button
-          class="fd-button--light fd-modal__close sap-icon--decline sap-icon--l"
-          on:click="{() => dispatch('modalDismiss')}"
-          aria-label="close"
-        ></button>
+<div class="fd-dialog fd-dialog--active" data-testid="luigi-confirmation-modal">
+  <div class="fd-dialog__content fd-dialog__content--s">
+    <header class="fd-dialog__header fd-bar fd-bar--header">
+      <div class="fd-bar__left">
+        <div class="fd-bar__element">
+          <h3 class="fd-dialog__title">{settings.header}</h3>
+        </div>
       </div>
-      <div class="fd-modal__body">{settings.body}</div>
-      <footer class="fd-modal__footer">
-        <div class="fd-modal__actions">
-          <button
-            on:click="{() => dispatch('modalDismiss')}"
-            data-testid="luigi-modal-dismiss"
-            class="fd-button--light"
-          >{settings.buttonDismiss}</button>
+    </header>
+    <div class="fd-dialog__body">{settings.body}</div>
+    <footer class="fd-dialog__footer fd-bar fd-bar--footer">
+      <div class="fd-bar__right">
+        <div class="fd-bar__element">
           <button
             on:click="{() => dispatch('modalConfirm')}"
             data-testid="luigi-modal-confirm"
-            class="fd-button confirm-button"
+            class="fd-dialog__decisive-button fd-button fd-button--emphasized fd-button--compact confirm-button"
           >{settings.buttonConfirm}</button>
         </div>
-      </footer>
-    </div>
+        <div class="fd-bar__element">
+          <button
+            on:click="{() => dispatch('modalDismiss')}"
+            data-testid="luigi-modal-dismiss"
+            class="fd-dialog__decisive-button fd-button fd-button--transparent fd-button--compact"
+          >{settings.buttonDismiss}</button>
+        </div>
+      </div>
+    </footer>
   </div>
 </div>
 
@@ -64,22 +65,17 @@ <h1 class="fd-modal__title">{settings.header}</h1>
 </script>
 
 <style type="text/scss">
-  $width: 32rem;
+  @import 'styles/variables';
 
-  .fd-overlay--modal {
-    left: 0;
-  }
-  .fd-modal {
-    &__body,
-    &__header {
+  .fd-dialog {
+    &__body {
       overflow-wrap: break-word;
     }
   }
 
-  :global(.no-side-nav),
-  :global(.no-nav) {
-    .fd-modal {
-      left: calc(50% - #{$width}/ 2);
+  @media (min-width: $desktopMinWidth) {
+    .fd-dialog__content {
+      max-width: 460px;
     }
   }
 </style>
diff --git a/core/src/Modal.html b/core/src/Modal.html
index eb1f19867d..b4eddfe452 100644
--- a/core/src/Modal.html
+++ b/core/src/Modal.html
@@ -1,17 +1,25 @@
 <svelte:window on:keydown="{handleKeydown}"/>
-<div class="fd-ui__overlay fd-overlay fd-overlay--modal" style="z-index:999">
-  <div class="fd-modal lui-modal-mf" data-testid="modal-mf">
-    <div class="fd-modal__content" style="height:100%">
-      <div class="fd-modal__header">
-        {#if modalSettings.title}
-        <h1 class="fd-modal__title">{modalSettings.title}</h1>
-        {/if}
-        <button
-          class="fd-button--light fd-modal__close sap-icon--decline sap-icon--l"
-          on:click="{() => dispatch('close')}"
-          aria-label="close"
-        ></button>
+<div class="fd-dialog fd-dialog--active" style="z-index:999">
+  <div class="fd-dialog__content lui-modal-mf" data-testid="modal-mf">
+    <div class="fd-dialog__header fd-bar fd-bar--header">
+      <div class="fd-bar__left">
+        <div class="fd-bar__element">
+          {#if modalSettings.title}
+          <h3 class="fd-dialog__title">{modalSettings.title}</h3>
+          {/if}
+        </div>
       </div>
+      <div class="fd-bar__right">
+        <div class="fd-bar__element">
+          <button
+            class="fd-button fd-button--transparent fd-button--compact fd-dialog__close sap-icon--decline sap-icon--l"
+            on:click="{() => dispatch('close')}"
+            aria-label="close"
+          ></button>
+        </div>
+      </div>
+    </div>
+    <div class="fd-dialog__body">
       <div class="iframeModalCtn"></div>
     </div>
   </div>
@@ -114,17 +122,12 @@ <h1 class="fd-modal__title">{modalSettings.title}</h1>
 </script>
 
 <style type="text/scss">
-  $width: 32rem;
-
   .iframeModalCtn {
     position: relative;
     height: 100%;
     width: 100%;
     overflow: auto;
     -webkit-overflow-scrolling: touch;
-    background-color: #fff;
-    background-color: var(--sapGroup_ContentBackground, #fff);
-    border-radius: 0 0 4px 4px;
   }
   .iframeModalCtn :global(iframe) {
     width: 100%;
@@ -133,32 +136,13 @@ <h1 class="fd-modal__title">{modalSettings.title}</h1>
     position: absolute;
   }
 
-  .fd-modal__header {
-    min-height: 53px;
-  }
-
-  .fd-overlay--modal {
-    left: 0;
-  }
-
-  .fd-modal {
-    max-width: 100%;
-    width: 80%;
-    &__body,
-    &__header {
-      overflow-wrap: break-word;
-    }
-
+  .fd-dialog {
     &__content {
-      display: flex;
-      flex-direction: column;
+      width: 80%;
     }
-  }
 
-  :global(.no-side-nav),
-  :global(.no-nav) {
-    .fd-modal {
-      left: calc(50% - #{$width}/ 2);
+    &__body {
+      overflow-wrap: break-word;
     }
   }
 </style>
diff --git a/core/src/SplitView.html b/core/src/SplitView.html
index 74b462aa89..0fcf754e22 100644
--- a/core/src/SplitView.html
+++ b/core/src/SplitView.html
@@ -306,10 +306,9 @@ <h1 class="fd-splitView__title">{splitViewSettings.title}</h1>
 </script>
 
 <style type="text/scss">
-  $topNavHeight: 44px;
-  $leftNavWidth: 15rem;
+  @import 'styles/variables';
+
   $collapsedSplitviewHeight: 38px;
-  $desktopMinWidth: 600px;
   $colorNeutral4: #89919a;
 
   /* splitview start */
diff --git a/core/src/TopNavDropDown.html b/core/src/TopNavDropDown.html
index 127753ed2c..709de2eae5 100644
--- a/core/src/TopNavDropDown.html
+++ b/core/src/TopNavDropDown.html
@@ -4,11 +4,15 @@
   <ul class="fd-menu__list fd-menu__list--top">
     {#if children}
     {#each children as node}
-    <li on:click="{() => onActionClick(node)}" data-testid="{getTestId(node)}">
+    <li
+      class="fd-menu__item"
+      on:click="{() => onActionClick(node)}"
+      data-testid="{getTestId(node)}"
+    >
       <a
         href="{getRouteLink(node)}"
         on:click|preventDefault="{() => {}}"
-        class="fd-menu__item"
+        class="fd-menu__link"
       >
         <span
           class="fd-top-nav__icon {node.icon && hasOpenUIicon(node) ? 'sap-icon--' + node.icon + ' sap-icon--m' : '' }"
@@ -21,7 +25,7 @@
           {/if}
           <BadgeCounter {node}/>
         </span>
-        <span>{getNodeLabel(node)}</span>
+        <span class="fd-menu__title">{getNodeLabel(node)}</span>
       </a>
     </li>
     {/each}
diff --git a/core/src/core-api/config.js b/core/src/core-api/config.js
index 56488b694c..1ba3dcce0a 100644
--- a/core/src/core-api/config.js
+++ b/core/src/core-api/config.js
@@ -118,7 +118,7 @@ class LuigiConfig {
     fd_ui.setAttribute('style', 'text-align: center;');
 
     var errorDiv = document.createElement('div');
-    errorDiv.setAttribute('class', 'fd-alert fd-alert--error');
+    errorDiv.setAttribute('class', 'fd-message-strip fd-message-strip--error');
     errorDiv.setAttribute(
       'style',
       'max-width: 800px; display: inline-block; margin-top: 40px;'
diff --git a/core/src/navigation/ContextSwitcher.html b/core/src/navigation/ContextSwitcher.html
index 4ad323d826..45d94a6cfa 100644
--- a/core/src/navigation/ContextSwitcher.html
+++ b/core/src/navigation/ContextSwitcher.html
@@ -6,7 +6,7 @@
   <div class="fd-popover fd-popover--right">
     <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
       <button
-        class="fd-button--light fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
+        class="fd-button fd-button--transparent fd-button--menu fd-shellbar__button--menu lui-ctx-switch-menu"
         aria-expanded="{dropDownStates.contextSwitcherPopover || false}"
         aria-haspopup="true"
         title="{selectedLabel ? selectedLabel : config.defaultLabel}"
@@ -38,6 +38,7 @@
         {getRouteLink}
         {getTestId}
         {getTranslation}
+        {isMobile}
         on:onActionClick="{onActionClick}"
         on:goToOption="{goToOption}"
       />
@@ -45,32 +46,24 @@
   </div>
 </div>
 {/if}
-<!-- MOBILE VERSION (fullscreen modal): -->
+<!-- MOBILE VERSION (fullscreen dialog): -->
 {#if isMobile && dropDownStates.contextSwitcherPopover}
-<div
-  class="fd-modal y-fd-modal--full-screen"
-  on:click|stopPropagation="{()=>{}}"
->
-  <div class="fd-modal__content" role="document">
-    <div class="fd-action-bar">
-      <div class="fd-action-bar__back">
-        <button
-          class="fd-button--light fd-button--compact sap-icon--nav-back"
-          on:click="{toggleDropdownState}"
-          data-testid="mobile-topnav-close"
-        ></button>
-      </div>
-      <div class="fd-action-bar__header">
-        <h5 class="fd-action-bar__title fd-has-type-1">
-          {#if !selectedLabel}
-          {$getTranslation(config.defaultLabel)}
-          {/if} {#if selectedLabel}
-          {selectedLabel}
-          {/if}
-        </h5>
+<div class="fd-dialog fd-dialog--active" on:click|stopPropagation="{()=>{}}">
+  <div class="fd-dialog__content fd-dialog__content--mobile">
+    <div class="fd-dialog__header fd-bar fd-bar--header">
+      <div class="fd-bar__left">
+        <div class="fd-bar__element">
+          <h3 class="fd-dialog__title">
+            {#if !selectedLabel}
+            {$getTranslation(config.defaultLabel)}
+            {/if} {#if selectedLabel}
+            {selectedLabel}
+            {/if}
+          </h3>
+        </div>
       </div>
     </div>
-    <div class="fd-modal__body">
+    <div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
       <ContextSwitcherNav
         {actions}
         {config}
@@ -82,10 +75,22 @@ <h5 class="fd-action-bar__title fd-has-type-1">
         {getRouteLink}
         {getTestId}
         {getTranslation}
+        {isMobile}
         on:onActionClick="{onActionClick}"
         on:goToOption="{goToOption}"
       />
     </div>
+    <footer class="fd-dialog__footer fd-bar fd-bar--cosy fd-bar--footer">
+      <div class="fd-bar__right">
+        <div class="fd-bar__element">
+          <button
+            class="fd-button fd-button--light fd-dialog__decisive-button"
+            on:click="{toggleDropdownState}"
+            data-testid="mobile-topnav-close"
+          >Cancel</button>
+        </div>
+      </div>
+    </footer>
   </div>
 </div>
 {/if}
@@ -346,7 +351,7 @@ <h5 class="fd-action-bar__title fd-has-type-1">
 
     &:after {
       position: absolute;
-      top: calc(50% - 5px);
+      top: calc(50% - 8px);
       right: 12px;
     }
 
@@ -369,16 +374,6 @@ <h5 class="fd-action-bar__title fd-has-type-1">
     }
   }
 
-  .fd-spinner {
-    margin: 20px auto;
-  }
-  .fd-menu__list--top {
-    border-bottom: 1px solid #eeeeef;
-  }
-  .fd-menu__list--bottom {
-    border-top: 1px solid #eeeeef;
-  }
-
   .fd-popover {
     #context_menu_middle {
       max-height: 50vh;
@@ -387,7 +382,7 @@ <h5 class="fd-action-bar__title fd-has-type-1">
     }
 
     .fd-button--secondary,
-    .fd-menu__item {
+    .fd-menu__link {
       max-width: 300px;
       overflow: hidden;
       text-overflow: ellipsis;
diff --git a/core/src/navigation/ContextSwitcherNav.html b/core/src/navigation/ContextSwitcherNav.html
index bf2f84eb90..8097124298 100644
--- a/core/src/navigation/ContextSwitcherNav.html
+++ b/core/src/navigation/ContextSwitcherNav.html
@@ -1,29 +1,38 @@
-<nav class="fd-menu lui-ctx-switch-nav">
+<nav class="fd-menu lui-ctx-switch-nav { isMobile ? 'fd-menu--mobile' : '' }">
   {#if actions && actions.length}
   <ul class="fd-menu__list fd-menu__list--top">
     {#each actions as node} {#if node.position === 'top' || !['top',
     'bottom'].includes(node.position)}
-    <li on:click="{() => onActionClick(node)}" data-testid="{getTestId(node)}">
+    <li
+      class="fd-menu__item"
+      on:click="{() => onActionClick(node)}"
+      data-testid="{getTestId(node)}"
+    >
       <a
         href="{getRouteLink(node)}"
         on:click|preventDefault="{() => {}}"
-        class="fd-menu__item"
-      >{$getTranslation(node.label)}</a>
+        class="fd-menu__link"
+      >
+        <span class="fd-menu__title">{$getTranslation(node.label)}</span>
+      </a>
     </li>
     {/if} {/each}
   </ul>
   {/if}
   <ul class="fd-menu__list" id="context_menu_middle">
     {#if options && options.length === 0}
-    <li>
-      <div class="fd-spinner">
-        <div class="fd-spinner__body"></div>
+    <li class="lui-contextswitcher-indicator">
+      <div class="fd-busy-indicator" aria-hidden="false" aria-label="Loading">
+        <div class="fd-busy-indicator--circle-0"></div>
+        <div class="fd-busy-indicator--circle-1"></div>
+        <div class="fd-busy-indicator--circle-2"></div>
       </div>
     </li>
     {/if} {#if options && options.length} {#each options as node}
     {#await getNodeName(node.label, config.fallbackLabelResolver,
     node.id)} {:then label}
     <li
+      class="fd-menu__item"
       on:click="{() => goToOption(node, selectedOption)}"
       data-testid="{getTestId(node)}"
     >
@@ -33,9 +42,11 @@
       <a
         href="{getRouteLink(node)}"
         on:click|preventDefault="{() => {}}"
-        class="fd-menu__item {node.label === selectedLabel ? 'is-selected' : ''}"
+        class="fd-menu__link {node.label === selectedLabel ? 'is-selected' : ''}"
         title="{label}"
-      >{label}</a>
+      >
+        <span class="fd-menu__title">{label}</span>
+      </a>
       {/if}
     </li>
     {/await} {/each} {/if}
@@ -43,12 +54,18 @@
   {#if actions && actions.length}
   <ul class="fd-menu__list fd-menu__list--bottom">
     {#each actions as node} {#if node.position === 'bottom'}
-    <li on:click="{() => onActionClick(node)}" data-testid="{getTestId(node)}">
+    <li
+      class="fd-menu__item"
+      on:click="{() => onActionClick(node)}"
+      data-testid="{getTestId(node)}"
+    >
       <a
         href="{getRouteLink(node)}"
         on:click|preventDefault="{() => {}}"
-        class="fd-menu__item"
-      >{$getTranslation(node.label)}</a>
+        class="fd-menu__link"
+      >
+        <span class="fd-menu__title">{$getTranslation(node.label)}</span>
+      </a>
     </li>
     {/if} {/each}
   </ul>
@@ -64,6 +81,7 @@
   export let options = [];
   export let selectedLabel;
   export let selectedOption;
+  export let isMobile;
 
   export let getNodeName;
   export let getRouteLink;
@@ -80,8 +98,26 @@
 </script>
 
 <style type="text/scss">
-  .lui-ctx-switch-nav {
-    max-height: calc(100vh - 76px);
-    overflow-y: auto;
+  :global(.fd-popover__body) {
+    .lui-ctx-switch-nav {
+      max-height: calc(100vh - 76px);
+      overflow-y: auto;
+    }
+  }
+
+  .fd-menu__list--top {
+    border-bottom: 1px solid #eeeeef;
+    border-bottom-left-radius: 0;
+    border-bottom-right-radius: 0;
+  }
+  .fd-menu__list--bottom {
+    border-top: 1px solid #eeeeef;
+    border-top-left-radius: 0;
+    border-top-right-radius: 0;
+  }
+
+  :global(.lui-contextswitcher-indicator) {
+    padding: 20px 0;
+    text-align: center;
   }
 </style>
diff --git a/core/src/navigation/LeftNav.html b/core/src/navigation/LeftNav.html
index 7ee925d46e..ef15485459 100644
--- a/core/src/navigation/LeftNav.html
+++ b/core/src/navigation/LeftNav.html
@@ -502,22 +502,16 @@
 
 <style type="text/scss">
   @import 'styles/mixins';
+  @import 'styles/variables';
 
   :root {
     /* needed for IE11 support */
-    --fd-color-neutral-1: #fafafa;
     --fd-color-neutral-2: #eeeeef;
     --fd-color-neutral-3: #d9d9d9;
-    --fd-color-text-2: #51555a;
-    --fd-color-text-4: #74777a;
   }
 
-  $topNavHeight: 44px;
-  $leftNavWidthCollapsed: 2.75rem;
   $footerPaddingVertical: 13px;
   $footerHeight: calc(16px + (2 * #{$footerPaddingVertical}));
-  $leftNavWidth: 15rem;
-  /* text height + vertical padding */
 
   a {
     cursor: pointer;
diff --git a/core/src/navigation/LogoTitle.html b/core/src/navigation/LogoTitle.html
index 6a1e921b3f..522343d52d 100644
--- a/core/src/navigation/LogoTitle.html
+++ b/core/src/navigation/LogoTitle.html
@@ -22,7 +22,7 @@
 <div class="fd-popover fd-popover--left">
   <div class="fd-popover__control" on:click|stopPropagation="{() => {}}">
     <button
-      class="fd-shellbar__button--menu fd-button--light fd-button--menu"
+      class="fd-button fd-shellbar__button--menu fd-button--transparent fd-button--menu"
       aria-haspopup="true"
       aria-expanded="{dropDownStates.appSwitcherPopover || false}"
       on:click|stopPropagation="{() => toggleDropdownState('appSwitcherPopover')}"
@@ -42,27 +42,31 @@
     <nav class="fd-menu">
       <ul class="fd-menu__list">
         {#if showMainAppEntry && selectedItem}
-        <li>
+        <li class="fd-menu__item">
           <a
             role="button"
-            class="fd-menu__item"
+            class="fd-menu__link"
             on:click|preventDefault="{goToRoot}"
             href="/"
             data-testid="{getTestId(defaultTitle)}"
-          >{$getTranslation(defaultTitle)}</a>
+          >
+            <span class="fd-menu__title">{$getTranslation(defaultTitle)}</span>
+          </a>
         </li>
         {/if}
         {#if appSwitcherItems && appSwitcherItems.length > 0}
         {#each appSwitcherItems as item}
         {#if item !== selectedItem && hasValidLink(item, pathParams)}
-        <li>
+        <li class="fd-menu__item">
           <a
             role="button"
-            class="fd-menu__item"
+            class="fd-menu__link"
             on:click|preventDefault="{() => goTo(item.link)}"
             href="{getRouteLink(item, pathParams)}"
             data-testid="{getTestId(item)}"
-          >{$getTranslation(item.title)}</a>
+          >
+            <span class="fd-menu__title">{$getTranslation(item.title)}</span>
+          </a>
         </li>
         {/if}
         {/each}
@@ -223,7 +227,7 @@
 </script>
 
 <style type="text/scss">
-  $desktopMinWidth: 600px;
+  @import 'styles/variables';
 
   // Force height because of base64 img src
   .lui-customlogo img {
diff --git a/core/src/navigation/MobileTopNavDropDown.html b/core/src/navigation/MobileTopNavDropDown.html
index 839c88cdf4..2b97537678 100644
--- a/core/src/navigation/MobileTopNavDropDown.html
+++ b/core/src/navigation/MobileTopNavDropDown.html
@@ -1,21 +1,13 @@
-<div
-  class="fd-modal y-fd-modal--full-screen"
-  on:click|stopPropagation="{()=>{}}"
->
-  <div class="fd-modal__content" role="document">
-    <div class="fd-action-bar">
-      <div class="fd-action-bar__back">
-        <button
-          class="fd-button--light fd-button--compact sap-icon--nav-back"
-          on:click
-          data-testid="mobile-topnav-close"
-        ></button>
-      </div>
-      <div class="fd-action-bar__header">
-        <h5 class="fd-action-bar__title fd-has-type-1">{label}</h5>
+<div class="fd-dialog fd-dialog--active" on:click|stopPropagation="{()=>{}}">
+  <div class="fd-dialog__content fd-dialog__content--mobile">
+    <div class="fd-dialog__header fd-bar fd-bar--header">
+      <div class="fd-bar__left">
+        <div class="fd-bar__element">
+          <h3 class="fd-dialog__title">{label}</h3>
+        </div>
       </div>
     </div>
-    <div class="fd-modal__body">
+    <div class="fd-dialog__body fd-dialog__body--no-vertical-padding">
       <div class="fd-product-switch__body fd-product-switch__body--mobile">
         <ul class="fd-product-switch__list">
           {#if nodes}
@@ -49,6 +41,17 @@ <h5 class="fd-action-bar__title fd-has-type-1">{label}</h5>
         </ul>
       </div>
     </div>
+    <footer class="fd-dialog__footer fd-bar fd-bar--cosy fd-bar--footer">
+      <div class="fd-bar__right">
+        <div class="fd-bar__element">
+          <button
+            class="fd-button fd-button--light fd-dialog__decisive-button"
+            on:click
+            data-testid="mobile-topnav-close"
+          >Cancel</button>
+        </div>
+      </div>
+    </footer>
   </div>
 </div>
 
diff --git a/core/src/navigation/ProductSwitcher.html b/core/src/navigation/ProductSwitcher.html
index c470592ab8..b696b523e3 100644
--- a/core/src/navigation/ProductSwitcher.html
+++ b/core/src/navigation/ProductSwitcher.html
@@ -10,7 +10,7 @@
         <!-- default: sap-icon--grid -->
         {#if hasOpenUIicon(config)}
         <button
-          class="fd-button--light fd-product-switch__control sap-icon--{config.icon}"
+          class="fd-button fd-button--transparent fd-product-switch__control sap-icon--{config.icon}"
           aria-expanded="{dropDownStates.productSwitcherPopover || false}"
           aria-haspopup="true"
           on:click|stopPropagation="{toggleDropdownState}"
@@ -19,7 +19,7 @@
         ></button>
         {:else}
         <button
-          class="fd-button--light fd-product-switch__control"
+          class="fd-button fd-button--transparent fd-product-switch__control"
           aria-expanded="{dropDownStates.productSwitcherPopover || false}"
           aria-haspopup="true"
           on:click|stopPropagation="{toggleDropdownState}"
@@ -36,7 +36,6 @@
         id="productSwitcherPopover"
       >
         <div class="{columnsClass}">
-          <!-- <nav class="fd-menu"> -->
           <ul class="fd-product-switch__list">
             {#each productSwitcherItems as productSwitcherItem}
             {#if productSwitcherItem.label}
@@ -45,7 +44,6 @@
               on:click="{() => onActionClick(productSwitcherItem)}"
               data-testid="{getTestId(productSwitcherItem)}"
             >
-              <!-- <a class="fd-menu__item"> -->
               <div
                 class="fd-product-switch__icon {productSwitcherItem.icon && hasOpenUIicon(productSwitcherItem) ? 'sap-icon--' + productSwitcherItem.icon : '' }"
               >
@@ -66,12 +64,10 @@
                 >{getNodeSubtitle(productSwitcherItem)}</div>
                 {/if}
               </div>
-              <!-- </a> -->
             </li>
             {/if}
             {/each}
           </ul>
-          <!-- </nav> -->
         </div>
       </div>
     </div>
diff --git a/core/src/navigation/TabNav.html b/core/src/navigation/TabNav.html
index 54145037d4..483966d4c9 100644
--- a/core/src/navigation/TabNav.html
+++ b/core/src/navigation/TabNav.html
@@ -60,13 +60,15 @@
                 {#each nodes as node}
                 {#if !node.hideFromNav}
                 {#if node.label}
-                <li>
+                <li class="fd-menu__item">
                   <a
                     href="{getRouteLink(node)}"
-                    class="fd-menu__item"
+                    class="fd-menu__link"
                     on:click|preventDefault="{() => handleClick(node)}"
                     aria-selected="{node === selectedNodeForTabNav}"
-                  >{node.label}</a>
+                  >
+                    <span class="fd-menu__title">{node.label}</span>
+                  </a>
                 </li>
                 {/if}
                 {/if}
@@ -352,10 +354,8 @@
 </script>
 
 <style type="text/scss">
-  /*Mixins*/
   @import 'styles/mixins';
-
-  $leftNavWidth: 15rem;
+  @import 'styles/variables';
 
   .tabsContainer {
     width: 100%;
@@ -376,7 +376,9 @@
         padding-bottom: 4px;
 
         .fd-nested-list__item:last-child {
-          border-bottom: none;
+          .fd-nested-list__link {
+            border-bottom: none;
+          }
         }
       }
     }
diff --git a/core/src/navigation/TopNav.html b/core/src/navigation/TopNav.html
index b5c4cf66df..c833260f12 100644
--- a/core/src/navigation/TopNav.html
+++ b/core/src/navigation/TopNav.html
@@ -155,25 +155,27 @@
             <nav class="fd-menu">
               <ul class="fd-menu__list">
                 {#if contextSwitcherConfig && (!authorizationEnabled || isLoggedIn)}
-                <li class="lui-mobile-switch-menu">
+                <li class="fd-menu__item lui-mobile-switch-menu">
                   <a
-                    class="fd-menu__item"
+                    class="fd-menu__link"
                     on:click|stopPropagation="{openMobileContextSwitcher}"
                   >
                     <span
                       class="fd-top-nav__icon sap-icon--m {contextSwitcherConfig.icon && hasOpenUIicon(contextSwitcherConfig) ? 'sap-icon--' + contextSwitcherConfig.icon : 'sap-icon--switch-views'}"
                     ></span>
-                    <span>{selectedLabel ? selectedLabel : defaultLabelContextSwitcher}</span>
+                    <span
+                      class="fd-menu__title"
+                    >{selectedLabel ? selectedLabel : defaultLabelContextSwitcher}</span>
                   </a>
                 </li>
                 {/if}
                 {#each children as node,i}
                 {#if !node.hideFromNav}
                 {#if !node.isCat}
-                <li>
+                <li class="fd-menu__item">
                   <a
                     href="{getRouteLink(node)}"
-                    class="fd-menu__item {node === selectedNode ? 'is-selected' : ''}"
+                    class="fd-menu__link {node === selectedNode ? 'is-selected' : ''}"
                     on:click|preventDefault="{() => handleClick(node)}"
                     data-testid="{getTestId(node)}"
                   >
@@ -188,15 +190,15 @@
                       {/if}
                       <BadgeCounter {node}/>
                     </span>
-                    <span>{getNodeLabel(node)}</span>
+                    <span class="fd-menu__title">{getNodeLabel(node)}</span>
                   </a>
                 </li>
                 {:else}
-                <li>
+                <li class="fd-menu__item">
                   <a
                     href="{getRouteLink(node)}"
                     title="{getNodeLabel(node)}"
-                    class="fd-menu__item"
+                    class="fd-menu__link"
                     on:click|preventDefault="{() => openMobileTopNavDropDown(node)}"
                     data-e2e="mobile-topnav-dropdown-category"
                   >
@@ -211,15 +213,15 @@
                       {/if}
                       <BadgeCounter {node}/>
                     </span>
-                    <span>{getNodeLabel(node)}</span>
+                    <span class="fd-list__title">{getNodeLabel(node)}</span>
                   </a>
                 </li>
                 <!-- {:else}
-                <li>
+                <li class="fd-menu__item">
                   <a
                     href="{getRouteLink(node)}"
                     title="{getNodeLabel(node)}"
-                    class="fd-menu__item"
+                    class="fd-menu__link"
                     on:click|preventDefault="openMobileTopNavDropDown(node)"
                     data-testid="mobile-topnav-dropdown-category"
                   >
@@ -233,7 +235,7 @@
                       src="{node.icon}"
                     >
                     {/if} {/if}
-                    <span>{getNodeLabel(node)}</span>
+                    <span class="fd-list__title">{getNodeLabel(node)}</span>
                   </a>
                 </li>-->
                 <!-- {/if} -->
@@ -241,9 +243,9 @@
                 {/if}
                 {/each}
                 {#if isProductSwitcherAvailable}
-                <li>
+                <li class="fd-menu__item">
                   <a
-                    class="fd-menu__item"
+                    class="fd-menu__link"
                     on:click|stopPropagation="{openMobileProductSwitcher}"
                     data-testid="mobile-product-switcher"
                   >
@@ -259,7 +261,9 @@
                       >
                     </span>
                     {/if}
-                    <span>{productSwitcherConfig.label}</span>
+                    <span
+                      class="fd-menu__title"
+                    >{productSwitcherConfig.label}</span>
                   </a>
                 </li>
                 {/if}
@@ -646,53 +650,4 @@
   .lui-mobile-switch-menu {
     border-bottom: 1px solid var(--sapList_BorderColor, #e4e4e4);
   }
-
-  $topNavHeight: 44px;
-  $mobileTopNavHeight: 64px;
-
-  :global(.y-fd-modal--full-screen) {
-    z-index: 1000;
-    position: fixed;
-    box-sizing: border-box;
-    top: $topNavHeight;
-    left: 0;
-    margin: auto auto;
-
-    :global(.fd-product-switch__body),
-    :global(.lui-ctx-switch-nav) {
-      max-height: calc(100vh - #{$topNavHeight} - #{$mobileTopNavHeight});
-      max-height: calc(
-        var(--vh, 1vh) * 100 - #{$topNavHeight} - #{$mobileTopNavHeight}
-      );
-      padding: 0;
-      -webkit-overflow-scrolling: touch;
-    }
-
-    :global(.fd-modal__content) {
-      $margin: 0px; //distance from viewport borders. Please remove the line below (border-radius) if not set to 0.
-      border-radius: 0;
-
-      width: calc(100vw - 2 * #{$margin});
-      height: 100vh; /* Fallback for browsers that do not support Custom Properties */
-      height: calc(var(--vh, 1vh) * 100);
-      margin: $margin;
-      display: grid;
-      grid-template-rows: auto 1fr auto; //add another row to the top of the modal if __title is present
-    }
-
-    :global(.fd-modal__title) {
-      text-align: left;
-    }
-
-    :global(.fd-modal__body) {
-      max-height: none;
-      padding: 0;
-    }
-
-    @media (min-width: 320px) {
-      :global(.fd-action-bar__back) {
-        display: block !important;
-      }
-    }
-  }
 </style>
diff --git a/core/src/styles/_fonts.scss b/core/src/styles/_fonts.scss
new file mode 100644
index 0000000000..1b7ee35cef
--- /dev/null
+++ b/core/src/styles/_fonts.scss
@@ -0,0 +1,59 @@
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff')
+    format('woff');
+  font-weight: 300;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Light-full.woff2')
+    format('woff2');
+  font-weight: 300;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff')
+    format('woff');
+  font-weight: 700;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Bold-full.woff2')
+    format('woff2');
+  font-weight: 700;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff')
+    format('woff');
+  font-weight: 400;
+  font-style: normal;
+}
+@font-face {
+  font-family: '72';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_base_fiori/fonts/72-Regular-full.woff2')
+    format('woff2');
+  font-weight: 400;
+  font-style: normal;
+}
+
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff')
+    format('woff');
+  font-weight: normal;
+  font-style: normal;
+}
+@font-face {
+  font-family: 'SAP-icons';
+  src: url('../node_modules/@sap-theming/theming-base-content/content/Base/baseLib/sap_fiori_3/fonts/SAP-icons.woff2')
+    format('woff2');
+  font-weight: normal;
+  font-style: normal;
+}
diff --git a/core/src/styles/_variables.scss b/core/src/styles/_variables.scss
new file mode 100644
index 0000000000..3866a2de21
--- /dev/null
+++ b/core/src/styles/_variables.scss
@@ -0,0 +1,5 @@
+$desktopMinWidth: 600px;
+$topNavHeight: 44px;
+$topNavHeightTab: 44px;
+$leftNavWidth: 15rem;
+$leftNavWidthCollapsed: 2.75rem;
diff --git a/docs/luigi-ux-features.md b/docs/luigi-ux-features.md
index 34054f978a..607e236b2a 100644
--- a/docs/luigi-ux-features.md
+++ b/docs/luigi-ux-features.md
@@ -44,8 +44,10 @@ To show a loading indicator before Luigi Core or your first micro frontend is re
 
 ```html
 <div luigi-app-loading-indicator>
-  <div class="fd-spinner">
-    <div></div>
+  <div class="fd-busy-indicator--m" aria-hidden="false" aria-label="Loading">
+    <div class="fd-busy-indicator--circle-0"></div>
+    <div class="fd-busy-indicator--circle-1"></div>
+    <div class="fd-busy-indicator--circle-2"></div>
   </div>
 </div>
 ```
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 9dca7f159e..f91578f9de 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
@@ -109,13 +109,13 @@ describe('Navigation with Fiddle', () => {
     it('custom selected option renderer', () => {
       cy.contains('Select Environment').click();
       cy.contains('Environment 1').click();
-      cy.get('.fd-button--light')
+      cy.get('[data-testid=luigi-contextswitcher-button]')
         .find('label')
         .should('have.css', 'color', 'rgb(136, 255, 0)')
         .and('have.css', 'font-weight', '700');
       cy.contains('Environment 1').click();
       cy.contains('Environment 2').click();
-      cy.get('.fd-button--light')
+      cy.get('[data-testid=luigi-contextswitcher-button]')
         .find('label')
         .should('have.css', 'color', 'rgb(0, 136, 255)')
         .and('have.css', 'font-weight', '700');
diff --git a/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js b/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
index e2e55ef5d5..af2754be73 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/i18n-context-product-app-switcher.spec.js
@@ -45,7 +45,7 @@ describe('Context switcher', () => {
 
     cy.get('[data-testid=luigi-alert]').should(
       'have.class',
-      'fd-alert--information'
+      'fd-message-strip--information'
     );
 
     cy.get('[data-testid=luigi-alert]').should('contain', 'Project 4 created.');
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
index 6d3e1afe50..036007c006 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-link-manager-features.spec.js
@@ -84,7 +84,7 @@ describe('Luigi client linkManager', () => {
 
       //wait for the alert coming from an inactive iFrame to be shown and second iFrame to be loaded
       cy.wait(500);
-      cy.get('.fd-alert').should(
+      cy.get('.fd-message-strip').should(
         'contain',
         'Information alert sent from an inactive iFrame'
       );
@@ -164,7 +164,7 @@ describe('Luigi client linkManager', () => {
         .click();
       cy.expectPathToBe('/projects/pr2/miscellaneous2');
 
-      cy.get('.fd-alert').contains(
+      cy.get('.fd-message-strip').contains(
         'Could not map the exact target node for the requested route projects/pr2/miscellaneous2/maskopatol'
       );
 
@@ -174,7 +174,7 @@ describe('Luigi client linkManager', () => {
         .click();
 
       //alert disappears
-      cy.get('.fd-alert').should('not.exist');
+      cy.get('.fd-message-strip').should('not.exist');
     });
 
     it('navigate to a totally wrong link', () => {
@@ -183,7 +183,7 @@ describe('Luigi client linkManager', () => {
         .click();
       cy.expectPathToBe('/overview');
 
-      cy.get('.fd-alert').contains(
+      cy.get('.fd-message-strip').contains(
         'Could not find the requested route maskopatol/has/a/child'
       );
 
@@ -193,7 +193,7 @@ describe('Luigi client linkManager', () => {
         .click();
 
       //alert disappears
-      cy.get('.fd-alert').should('not.exist');
+      cy.get('.fd-message-strip').should('not.exist');
     });
   });
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
index 00eeaa4019..7cfb64015e 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-alerts-i18n.spec.js
@@ -26,7 +26,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-alert--success'
+        'fd-message-strip--success'
       );
 
       cy.get('[data-testid=luigi-alert-dismiss]').click();
@@ -44,7 +44,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-alert--information'
+        'fd-message-strip--information'
       );
     });
     it('hides Alert after specified time', () => {
@@ -112,7 +112,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
 
       cy.get('[data-testid=luigi-alert]').should(
         'have.class',
-        'fd-alert--warning'
+        'fd-message-strip--warning'
       );
 
       cy.get('*[id$=_link_relativePath]').click();
@@ -150,7 +150,7 @@ describe('Luigi Client UX Alerts + Localization', () => {
         .click();
 
       cy.get('[data-testid=luigi-alert]')
-        .should('have.class', 'fd-alert--error')
+        .should('have.class', 'fd-message-strip--error')
         .should('contain', "<b onmouseover=alert('Wufff!')>click me!</b>");
 
       cy.get('[data-testid=luigi-alert]')
diff --git a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
index 85f8bf210d..af81ca1504 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/luigi-client-ux-manager-features.spec.js
@@ -90,11 +90,11 @@ describe('Luigi Client ux manager features', () => {
         .contains('External Page')
         .click();
 
-      cy.get('.spinnerContainer .fd-spinner').should('exist');
+      cy.get('[data-testid=luigi-loading-spinner]').should('exist');
 
       cy.wait(250); // give it some time to hide
 
-      cy.get('.spinnerContainer .fd-spinner').should('not.be.visible');
+      cy.get('[data-testid=luigi-loading-spinner]').should('not.be.visible');
 
       // show loading indicator
       cy.getIframeBody().then($iframeBody => {
@@ -102,10 +102,10 @@ describe('Luigi Client ux manager features', () => {
           .contains('Show loading indicator')
           .click();
 
-        cy.get('.spinnerContainer .fd-spinner').should('exist');
+        cy.get('[data-testid=luigi-loading-spinner]').should('exist');
         cy.wait(250); // give it some time to hide
         // wait for programmatic hide of loading indicator
-        cy.get('.spinnerContainer .fd-spinner').should('not.be.visible');
+        cy.get('[data-testid=luigi-loading-spinner]').should('not.be.visible');
       });
     });
 
diff --git a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
index 05b67c6070..f3d09a0dae 100644
--- a/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
+++ b/test/e2e-test-application/e2e/tests/1-angular/navigation.spec.js
@@ -17,7 +17,7 @@ describe('Navigation', () => {
           title: 'Preserved View',
           size: 'm'
         });
-        cy.get('.fd-modal__close').click();
+        cy.get('.fd-dialog__close').click();
         cy.expectPathToBe('/overview');
       });
     });