diff --git a/components/centraldashboard/Dockerfile b/components/centraldashboard/Dockerfile
index 71300e00a64..d0b56901df4 100644
--- a/components/centraldashboard/Dockerfile
+++ b/components/centraldashboard/Dockerfile
@@ -13,7 +13,7 @@ RUN apk update && apk upgrade && \
echo @stable http://nl.alpinelinux.org/alpine/v3.15/community >> /etc/apk/repositories && \
echo @stable http://nl.alpinelinux.org/alpine/v3.15/main >> /etc/apk/repositories
-RUN apk add --no-cache bash chromium@stable nss@stable \
+RUN apk add --no-cache bash@stable chromium@stable nss@stable \
freetype@stable \
harfbuzz@stable \
ttf-freefont@stable \
diff --git a/components/centraldashboard/public/components/logout-button.js b/components/centraldashboard/public/components/logout-button.js
new file mode 100644
index 00000000000..87bcbb855bb
--- /dev/null
+++ b/components/centraldashboard/public/components/logout-button.js
@@ -0,0 +1,77 @@
+import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
+
+import '@polymer/iron-ajax/iron-ajax.js';
+import '@polymer/paper-button/paper-button.js';
+
+/**
+ * Logout button component.
+ * Handles the logout requests and post-logout redirects.
+ *
+ */
+
+export class LogoutButton extends PolymerElement {
+ static get template() {
+ return html`
+
+
+
+
+
+ `;
+ }
+
+ static get properties() {
+ return {
+ headers: {
+ type: Object,
+ computed: '_setHeaders()',
+ },
+ };
+ }
+
+ /**
+ * After successful logout, redirects user to `afterLogoutURL`,
+ * received from the backend.
+ *
+ * @param {{Event}} event
+ * @private
+ */
+ _postLogout(event) {
+ window.location.replace(event.detail.response['afterLogoutURL']);
+ }
+
+ /**
+ * Call logout endpoint.
+ */
+ logout() {
+ // call iron-ajax
+ this.$.logout.generateRequest();
+ }
+
+ /**
+ * Set 'Authorization' header based on the existing cookie.
+ * Currently, the logout method only accepts authorization header, see:
+ * https://github.com/arrikto/oidc-authservice/blob/master/server.go#L386
+ *
+ * @return {{Object}} headers
+ * @private
+ */
+ _setHeaders() {
+ const cookie = ('; ' + document.cookie)
+ .split(`; authservice_session=`)
+ .pop()
+ .split(';')[0];
+ return {
+ 'Authorization': `Bearer ${cookie}`,
+ };
+ }
+}
+
+customElements.define('logout-button', LogoutButton);
diff --git a/components/centraldashboard/public/components/main-page.js b/components/centraldashboard/public/components/main-page.js
index ef032fbbd30..f5a40dee330 100644
--- a/components/centraldashboard/public/components/main-page.js
+++ b/components/centraldashboard/public/components/main-page.js
@@ -39,6 +39,7 @@ import './namespace-needed-view.js';
import './manage-users-view.js';
import './resources/kubeflow-icons.js';
import './iframe-container.js';
+import './logout-button.js';
import utilitiesMixin from './utilities-mixin.js';
import {IFRAME_LINK_PREFIX} from './iframe-link.js';
diff --git a/components/centraldashboard/public/components/main-page.pug b/components/centraldashboard/public/components/main-page.pug
index 26aee9f5956..f0e03a38e6d 100644
--- a/components/centraldashboard/public/components/main-page.pug
+++ b/components/centraldashboard/public/components/main-page.pug
@@ -72,8 +72,7 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
selected='{{namespace}}', hides, hidden$='[[hideNamespaces]]'
all-namespaces='[[allNamespaces]]')
footer#User-Badge
- a(target="_top", href="/logout")
- iron-icon.icon(icon='kubeflow:logout' title="Logout")
+ logout-button
main#Content
section#ViewTabs(hidden$='[[hideTabs]]')
paper-tabs(selected='[[page]]', attr-for-selected='page')