diff --git a/packages/auth/rollup.config.js b/packages/auth/rollup.config.js
index 9b4c152c6f5f2e3f74ebb4d802d132dff2c42ee3..ee4f5595729d84f166b16e3bec484c22be6ce796 100644
--- a/packages/auth/rollup.config.js
+++ b/packages/auth/rollup.config.js
@@ -42,7 +42,7 @@ export default {
             include: 'node_modules/**'
         }),
         json(),
-        url({
+        url({ // TODO: remove when dependecy for BULMA.CSS is deleted
             limit: 0,
             include: [
                 "node_modules/bulma/**/*.css",
diff --git a/packages/auth/src/vpu-auth-demo.js b/packages/auth/src/vpu-auth-demo.js
index 7bb3997fb8b4938de195880b8ed862b34e4e8734..ef0d3aee9fada2b0950753eb9819c8a7f51c2c05 100644
--- a/packages/auth/src/vpu-auth-demo.js
+++ b/packages/auth/src/vpu-auth-demo.js
@@ -28,10 +28,22 @@ class AuthDemo extends LitElement {
 
     render() {
         commonUtils.initAssetBaseURL('vpu-auth-src');
-        const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
         return html`
-            <link rel="stylesheet" href="${bulmaCSS}">
-
+            <style>
+               /* from BULMA.CSS */
+                .section {
+                   padding: 3rem 1.5rem;
+                }
+                .content h1 {
+                    font-size: 2em;
+                    margin-bottom: .5em;
+                }
+                .content h1, .content h2, .content h3, .content h4, .content h5, .content h6 {
+                    color: #363636;
+                    font-weight: 600;
+                    line-height: 1.125;
+                }
+            </style>
             <section class="section">
                 <div class="container">
                     <h1 class="title">Auth-Demo</h1>
diff --git a/packages/auth/src/vpu-auth.js b/packages/auth/src/vpu-auth.js
index 7dc7892b00e725eb128457b7c4b3ec88431b8de8..90abc6229dc0040ff90e29f9e2453b35206dfae5 100644
--- a/packages/auth/src/vpu-auth.js
+++ b/packages/auth/src/vpu-auth.js
@@ -242,7 +242,38 @@ class VPUAuth extends LitElement {
     static get styles() {
         // language=css
         return css`
-            .dropdown, img.login {
+            ${commonUtils.getThemeCSS()}
+
+            .dropdown.is-active .dropdown-menu, .dropdown.is-hoverable:hover .dropdown-menu {
+                display: block;
+            }
+
+            .dropdown-menu {
+                display: none;
+                min-width: 12rem;
+                padding-top: 4px;
+                position: absolute;
+                z-index: 20;
+            }
+
+            .dropdown-content {
+                background-color: white;
+                border-radius: var(--vpu-border-radius);
+                box-shadow: 0 2px 3px rgba(10, 10, 10, 0.1), 0 0 0 1px rgba(10, 10, 10, 0.1);
+                padding-bottom: 0.5rem;
+                padding-top: 0.5rem;
+            }
+
+            .dropdown-item {
+                color: #4a4a4a;
+                display: block;
+                font-size: 0.875rem;
+                line-height: 1.5;
+                padding: 0.375rem 1rem;
+                position: relative;
+            }
+
+              .dropdown, img.login {
                 cursor: pointer;
             }
 
@@ -315,10 +346,7 @@ class VPUAuth extends LitElement {
 
     render() {
         commonUtils.initAssetBaseURL('vpu-auth-src');
-        const bulmaCSS = commonUtils.getAssetURL(bulmaCSSPath);
         return html`
-            <link rel="stylesheet" href="${bulmaCSS}">
-
             <div>
             ${this.loggedIn ? this.renderLoggedIn() : this.renderLoggedOut()}
             </div>