diff --git a/components/centraldashboard/app/api.ts b/components/centraldashboard/app/api.ts
index 129083146aa..cdc0f69ef3a 100644
--- a/components/centraldashboard/app/api.ts
+++ b/components/centraldashboard/app/api.ts
@@ -72,17 +72,11 @@ export class Api {
         .get(
           '/dashboard-links',
           async (req: Request, res: Response) => {
-            const acceptlanguage = req.header('accept-language');
             const cm = await this.k8sService.getConfigMap();
             let langLinks = {};
             try {
               const links = JSON.parse(cm.data["links"]);
-              const lang = this.resolveLanguage (
-                this.getBrowserLanguages(acceptlanguage), 
-                Object.getOwnPropertyNames(links), 
-                cm.data["defaultLanguage"]
-              );
-              langLinks = links[lang];
+              langLinks = links[req.query.lang];
             }catch(e){
               return apiError({
                 res, code: 500,
diff --git a/components/centraldashboard/cypress/e2e/main-page.cy.ts b/components/centraldashboard/cypress/e2e/main-page.cy.ts
index 1b0bf15a0b1..50e2d494988 100644
--- a/components/centraldashboard/cypress/e2e/main-page.cy.ts
+++ b/components/centraldashboard/cypress/e2e/main-page.cy.ts
@@ -74,11 +74,11 @@ describe('Main Page', () => {
     cy.get('main-page').shadow().find('a[href="https://grafana.aaw-dev.cloud.statcan.ca/d/ZLp774O4z/namespace-metrics?orgId=1&var-namespace=test-namespace&kiosk=tv"]').should('exist');
     cy.get('main-page').shadow().find('a[href="https://grafana.aaw-dev.cloud.statcan.ca/d/ZLp774O4z/namespace-metrics?orgId=1&var-namespace=test-namespace&kiosk=tv"]').find('paper-item').should('have.text', 'Metrics');
 
-    cy.get('main-page').shadow().find('a[href="https://github.com/kubeflow/kubeflow"]').should('exist');
-    cy.get('main-page').shadow().find('a[href="https://github.com/kubeflow/kubeflow"]').find('paper-item').should('have.text', 'GitHub');
+    cy.get('main-page').shadow().find('a[href="https://github.com/StatCan/kubeflow"]').should('exist');
+    cy.get('main-page').shadow().find('a[href="https://github.com/StatCan/kubeflow"]').find('paper-item').should('have.text', 'GitHub');
 
-    cy.get('main-page').shadow().find('a[href="https://www.kubeflow.org/docs/about/kubeflow/"]').should('exist');
-    cy.get('main-page').shadow().find('a[href="https://www.kubeflow.org/docs/about/kubeflow/"]').find('paper-item').should('have.text', 'Documentation');
+    cy.get('main-page').shadow().find('a[href="https://statcan.github.io/aaw/"]').should('exist');
+    cy.get('main-page').shadow().find('a[href="https://statcan.github.io/aaw/"]').find('paper-item').should('have.text', 'Documentation');
   
     //mock env info to hide manage contributors link
     cy.intercept('GET', `/api/workgroup/env-info`, {
@@ -174,10 +174,10 @@ describe('Main Page', () => {
     cy.get('main-page').shadow().find('a[href="https://grafana.aaw-dev.cloud.statcan.ca/d/ZLp774O4z/namespace-metrics?orgId=1&var-namespace=test-namespace-2&kiosk=tv"]').should('exist');
     cy.get('main-page').shadow().find('a[href="https://grafana.aaw-dev.cloud.statcan.ca/d/ZLp774O4z/namespace-metrics?orgId=1&var-namespace=test-namespace-2&kiosk=tv"]').find('paper-item').should('have.text', 'Metrics');
 
-    cy.get('main-page').shadow().find('a[href="https://github.com/kubeflow/kubeflow"]').should('exist');
-    cy.get('main-page').shadow().find('a[href="https://github.com/kubeflow/kubeflow"]').find('paper-item').should('have.text', 'GitHub');
+    cy.get('main-page').shadow().find('a[href="https://github.com/StatCan/kubeflow"]').should('exist');
+    cy.get('main-page').shadow().find('a[href="https://github.com/StatCan/kubeflow"]').find('paper-item').should('have.text', 'GitHub');
 
-    cy.get('main-page').shadow().find('a[href="https://www.kubeflow.org/docs/about/kubeflow/"]').should('exist');
-    cy.get('main-page').shadow().find('a[href="https://www.kubeflow.org/docs/about/kubeflow/"]').find('paper-item').should('have.text', 'Documentation');
+    cy.get('main-page').shadow().find('a[href="https://statcan.github.io/aaw/"]').should('exist');
+    cy.get('main-page').shadow().find('a[href="https://statcan.github.io/aaw/"]').find('paper-item').should('have.text', 'Documentation');
   });
 })
\ No newline at end of file
diff --git a/components/centraldashboard/cypress/support/commands.ts b/components/centraldashboard/cypress/support/commands.ts
index 8161aec4b8a..85b54c8e519 100644
--- a/components/centraldashboard/cypress/support/commands.ts
+++ b/components/centraldashboard/cypress/support/commands.ts
@@ -43,7 +43,7 @@ Cypress.Commands.add('mockWorkgroupRequest', () => {
 });
 
 Cypress.Commands.add('mockDashboardLinksRequest', () => {
-  cy.intercept('GET', `/api/dashboard-links`, {
+  cy.intercept('GET', `/api/dashboard-links?lang=*`, {
     fixture: 'dashboard-links',
   }).as('mockDashboardLinksRequest');
 });
diff --git a/components/centraldashboard/public/assets/i18n/languages.json b/components/centraldashboard/public/assets/i18n/languages.json
index 3517f727ba5..e3389832b4e 100644
--- a/components/centraldashboard/public/assets/i18n/languages.json
+++ b/components/centraldashboard/public/assets/i18n/languages.json
@@ -47,6 +47,7 @@
             "mainPage.tabActivity": "Activity",
             "mainPage.footerBuildVersion": "Build: {buildVersion} | Dashboard: v {dashVersion} | Isolation-Mode: {isolationMode}",
             "mainPage.errGeneric": "An error occured.",
+            "mainPage.languageButton": "Français",
             "notFound.invalidPagePart1": "Sorry, ",
             "notFound.invalidPagePart2": " is not a valid page",
             "pipelinesCard.txtCreated": "Created ",
@@ -152,6 +153,7 @@
             "mainPage.tabActivity": "Activité",
             "mainPage.footerBuildVersion": "Version: {buildVersion} | Dashboard: v {dashVersion} | Mode d'isolation: {isolationMode}",
             "mainPage.errGeneric": "Une erreur est survenue.",
+            "mainPage.languageButton": "English",
             "notFound.invalidPagePart1": "Désolé, ",
             "notFound.invalidPagePart2": " n'est pas une page valide",
             "pipelinesCard.txtCreated": "Créé",
diff --git a/components/centraldashboard/public/components/activity-view.js b/components/centraldashboard/public/components/activity-view.js
index 614142cb279..472462b118f 100644
--- a/components/centraldashboard/public/components/activity-view.js
+++ b/components/centraldashboard/public/components/activity-view.js
@@ -3,12 +3,14 @@ import '@polymer/iron-ajax/iron-ajax.js';
 import '@polymer/iron-icon/iron-icon.js';
 import '@polymer/iron-icons/iron-icons.js';
 import '@polymer/paper-progress/paper-progress.js';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 import {html, PolymerElement} from '@polymer/polymer';
 import './activities-list.js';
 
 // eslint-disable-next-line max-len
-export class ActivityView extends localizationMixin(PolymerElement) {
+export class ActivityView extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
     static get template() {
         return html`
             <style is="custom-style" include="iron-flex iron-flex-alignment">
diff --git a/components/centraldashboard/public/components/activity-view_test.js b/components/centraldashboard/public/components/activity-view_test.js
index f3d06f1f840..4f3ec5303b6 100644
--- a/components/centraldashboard/public/components/activity-view_test.js
+++ b/components/centraldashboard/public/components/activity-view_test.js
@@ -4,6 +4,7 @@ import {flush} from '@polymer/polymer/lib/utils/flush.js';
 
 import './activity-view';
 import {mockRequest} from '../ajax_test_helper';
+import {languages} from '../assets/i18n/languages.json';
 
 const FIXTURE_ID = 'activity-view-fixture';
 const ACTIVITY_VIEW_SELECTOR_ID = 'test-activity-view';
@@ -28,6 +29,8 @@ describe('Activity View', () => {
         jasmine.Ajax.install();
         document.getElementById(FIXTURE_ID).create();
         activityView = document.getElementById(ACTIVITY_VIEW_SELECTOR_ID);
+        activityView.language = 'en';
+        activityView.resources = languages;
 
         // Prevents the activitiesList component from trying to render
         spyOn(activityView.shadowRoot.querySelector('activities-list'),
diff --git a/components/centraldashboard/public/components/dashboard-view.js b/components/centraldashboard/public/components/dashboard-view.js
index cdf6516903a..caad4133787 100644
--- a/components/centraldashboard/public/components/dashboard-view.js
+++ b/components/centraldashboard/public/components/dashboard-view.js
@@ -4,7 +4,9 @@ import '@polymer/paper-card/paper-card.js';
 import '@polymer/paper-ripple/paper-ripple.js';
 import '@polymer/paper-item/paper-icon-item.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 
 import {html, PolymerElement} from '@polymer/polymer';
 
@@ -20,7 +22,7 @@ import {getGCPData} from './resources/cloud-platform-data.js';
 import utilitiesMixin from './utilities-mixin.js';
 
 // eslint-disable-next-line max-len
-export class DashboardView extends utilitiesMixin(localizationMixin(PolymerElement)) {
+export class DashboardView extends mixinBehaviors([AppLocalizeBehavior], utilitiesMixin(PolymerElement)) {
     static get template() {
         return html([`
             <style include="card-styles">
diff --git a/components/centraldashboard/public/components/dashboard-view.pug b/components/centraldashboard/public/components/dashboard-view.pug
index a6ef9095671..6c337765499 100644
--- a/components/centraldashboard/public/components/dashboard-view.pug
+++ b/components/centraldashboard/public/components/dashboard-view.pug
@@ -22,7 +22,7 @@ div#grid
                 external-link='[[platformDetails.resourceChartsLink]]'
                 external-link-text='[[platformDetails.resourceChartsLinkText]]')
     .column
-        notebooks-card(namespace='[[namespace]]')
+        notebooks-card(namespace='[[namespace]]', language='[[language]]', resources='[[resources]]')
     .column
         template(is='dom-if', if='[[platformDetails.links]]')
             paper-card#Platform-Links(class$='[[platformDetails.name]]',
diff --git a/components/centraldashboard/public/components/landing-page.js b/components/centraldashboard/public/components/landing-page.js
index c375a480038..ee23d056566 100644
--- a/components/centraldashboard/public/components/landing-page.js
+++ b/components/centraldashboard/public/components/landing-page.js
@@ -8,7 +8,9 @@ import '@polymer/neon-animation/neon-animatable.js';
 import '@polymer/neon-animation/neon-animated-pages.js';
 import '@polymer/neon-animation/animations/fade-in-animation.js';
 import '@polymer/neon-animation/animations/fade-out-animation.js';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 
 import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
 
@@ -26,7 +28,7 @@ import utilitiesMixin from './utilities-mixin.js';
  * Replaces registration-page
  */
 // eslint-disable-next-line max-len
-export class LandingPage extends utilitiesMixin(localizationMixin(PolymerElement)) {
+export class LandingPage extends mixinBehaviors([AppLocalizeBehavior], utilitiesMixin(PolymerElement)) {
     static get template() {
         const vars = {logo};
 
diff --git a/components/centraldashboard/public/components/main-page.css b/components/centraldashboard/public/components/main-page.css
index 2de5106796e..19b6c0a0bf5 100644
--- a/components/centraldashboard/public/components/main-page.css
+++ b/components/centraldashboard/public/components/main-page.css
@@ -336,3 +336,9 @@ a[href]:hover, iframe-link:hover {
     color: var(--paper-blue-700);
     text-decoration: underline;
 }
+
+.language-button {
+    font-size: 14px;
+    color: #3c4043;
+    text-transform: none;
+}
\ No newline at end of file
diff --git a/components/centraldashboard/public/components/main-page.js b/components/centraldashboard/public/components/main-page.js
index 93911213e9e..02ba9155f12 100644
--- a/components/centraldashboard/public/components/main-page.js
+++ b/components/centraldashboard/public/components/main-page.js
@@ -23,8 +23,9 @@ import '@polymer/neon-animation/neon-animatable.js';
 import '@polymer/neon-animation/neon-animated-pages.js';
 import '@polymer/neon-animation/animations/fade-in-animation.js';
 import '@polymer/neon-animation/animations/fade-out-animation.js';
-import localizationMixin from './localization-mixin.js';
-
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
 
 import css from './main-page.css';
@@ -44,12 +45,13 @@ import './iframe-container.js';
 import './logout-button.js';
 import utilitiesMixin from './utilities-mixin.js';
 import {IFRAME_LINK_PREFIX} from './iframe-link.js';
+import {languages} from '../assets/i18n/languages.json';
 
 /**
  * Entry point for application UI.
  */
 // eslint-disable-next-line max-len
-export class MainPage extends utilitiesMixin(localizationMixin(PolymerElement)) {
+export class MainPage extends mixinBehaviors([AppLocalizeBehavior], utilitiesMixin(PolymerElement)) {
     static get template() {
         const vars = {logo};
         return html([
@@ -118,6 +120,14 @@ export class MainPage extends utilitiesMixin(localizationMixin(PolymerElement))
             },
             matchingIndex: Number,
             namespacedItemTemplete: String,
+            // for translations
+            language: {type: String, notify: 'true', value: function() {
+                const currentLanguage = this.getBrowserLang();
+                // eslint-disable-next-line max-len
+                const lang = (currentLanguage != undefined && currentLanguage.match(/en|fr/)) ? currentLanguage : 'en';
+                return lang;
+            }},
+            resources: {value: languages},
         };
     }
 
@@ -133,6 +143,39 @@ export class MainPage extends utilitiesMixin(localizationMixin(PolymerElement))
         ];
     }
 
+    // Get the language based on the browser
+    getBrowserLang() {
+        // localStorage stores the last language used by user
+        if (localStorage.getItem('lang')) {
+            return localStorage.getItem('lang');
+        }
+
+        if (typeof window === 'undefined' ||
+            typeof window.navigator === 'undefined') {
+            return undefined;
+        }
+
+        let browserLang = window.navigator.languages ?
+            window.navigator.languages[0] : null;
+        browserLang = browserLang || window.navigator.language ||
+            window.navigator.browserLanguage || window.navigator.userLanguage;
+
+        if (typeof browserLang === 'undefined') {
+            return undefined;
+        }
+
+        if (browserLang.indexOf('-') !== -1) {
+            browserLang = browserLang.split('-')[0];
+        }
+
+        if (browserLang.indexOf('_') !== -1) {
+            browserLang = browserLang.split('_')[0];
+        }
+
+        localStorage.setItem('lang', browserLang);
+        return browserLang;
+    }
+
     /**
      * Return a username without the @example.com
      * @param {string} user User email
@@ -283,7 +326,6 @@ export class MainPage extends utilitiesMixin(localizationMixin(PolymerElement))
             if (path && path.includes('{ns}')) {
                 this.page = 'namespace_needed';
             } else if (newPage === 's3') { // AAW Customization
-                // eslint-disable-next-line no-console
                 this.page = 's3proxy';
             } else {
                 this.page = 'not_found';
@@ -529,6 +571,29 @@ export class MainPage extends utilitiesMixin(localizationMixin(PolymerElement))
         return isolationMode==='multi-user'
             && ownedNamespace!==undefined;
     }
+
+    _changeLanguage() {
+        if (this.language === 'en') {
+            this.language = 'fr';
+        } else {
+            this.language = 'en';
+        }
+        localStorage.setItem('lang', this.language);
+        this.$['ajax-dashboard-links'].params = this._getLanguageParams();
+        // update language in url
+        // eslint-disable-next-line max-len
+        if (location.href.match(/\/(en|fr)\//) || location.pathname.startsWith(`/${IFRAME_LINK_PREFIX}/`)) {
+            // eslint-disable-next-line max-len
+            const newUrl = location.href.replace(/\/(en|fr)\//, `/${this.language}/`);
+            window.location = newUrl;
+        }
+    }
+
+    _getLanguageParams() {
+        return {
+            'lang': this.language,
+        };
+    }
 }
 
 window.customElements.define('main-page', MainPage);
diff --git a/components/centraldashboard/public/components/main-page.pug b/components/centraldashboard/public/components/main-page.pug
index 86c65c0486c..694dbe21bf8 100644
--- a/components/centraldashboard/public/components/main-page.pug
+++ b/components/centraldashboard/public/components/main-page.pug
@@ -1,6 +1,6 @@
 iron-ajax(auto, url='/api/workgroup/exists', handle-as='json',
     on-response='_onHasWorkgroupResponse', on-error='_onHasWorkgroupError', loading='{{pageLoading}}')
-iron-ajax(auto, url='/api/dashboard-links', handle-as='json',
+iron-ajax(auto, id='ajax-dashboard-links', url='/api/dashboard-links', handle-as='json', params='[[_getLanguageParams()]]',
     on-response='_onHasDashboardLinksResponse', on-error='_onHasDashboardLinksError', loading='{{pageLoading}}')
 iron-ajax#envInfo(auto='[[_shouldFetchEnv]]', url='/api/workgroup/env-info', handle-as='json',
     on-response='_onEnvInfoResponse')
@@ -83,8 +83,9 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                     namespaces='[[namespaces]]', selected='{{namespace}}',
                     hides, hidden$='[[hideNamespaces]]'
                     all-namespaces='[[allNamespaces]]', 
-                    user='[[user]]')
+                    user='[[user]]', language='[[language]]', resources='[[resources]]')
                 footer#User-Badge
+                    paper-button.language-button(on-click='_changeLanguage') {{localize('mainPage.languageButton')}}
                     a(target="_top", href="/logout")
                         iron-icon.icon(icon='kubeflow:logout' title="Logout")
         main#Content
@@ -99,25 +100,27 @@ app-drawer-layout.flex(narrow='{{narrowMode}}',
                                 exit-animation='fade-out-animation')
                 neon-animatable(page='dashboard')
                     dashboard-view(namespace='[[queryParams.ns]]',
-                        platform-info='[[platformInfo]]', quick-links='[[quickLinks]]', documentation-items='[[documentationItems]]', security-messages='[[securityMessages]]')
+                        platform-info='[[platformInfo]]', quick-links='[[quickLinks]]', documentation-items='[[documentationItems]]', 
+                        security-messages='[[securityMessages]]', language='[[language]]', resources='[[resources]]')
                 neon-animatable(page='activity')
-                    activity-view(namespace='[[queryParams.ns]]')
+                    activity-view(namespace='[[queryParams.ns]]', language='[[language]]', resources='[[resources]]')
                 neon-animatable(page='manage-users')
-                    manage-users-view(user='[[user]]', namespaces='[[namespaces]]', multi-owned-namespaces='[[multiOwnedNamespaces]]', is-cluster-admin='[[isClusterAdmin]]')
+                    manage-users-view(user='[[user]]', namespaces='[[namespaces]]', multi-owned-namespaces='[[multiOwnedNamespaces]]', 
+                        is-cluster-admin='[[isClusterAdmin]]', language='[[language]]', resources='[[resources]]')
                 neon-animatable(page='s3proxy')
-                    s3proxy-view()
+                    s3proxy-view(language='[[language]]', resources='[[resources]]')
                 neon-animatable(page='iframe')
                     iframe-container(namespace='[[namespace]]',
                         src='[[iframeSrc]]', page="{{iframePage}}"
                         namespaces='[[namespaces]]')
                 neon-animatable(page='not_found')
-                    not-found-view(path="[[route.path]]")
+                    not-found-view(path="[[route.path]]", language='[[language]]', resources='[[resources]]')
                 neon-animatable(page='namespace_needed')
-                    namespace-needed-view()
+                    namespace-needed-view(language='[[language]]', resources='[[resources]]')
     iron-media-query(query='(max-width: 900px)', query-matches='{{sidebarBleed}}')
     iron-media-query(query='(max-width: 1270px)', query-matches='{{thinView}}')
 paper-toast#welcomeUser(duration=5000) Welcome, [[_extractLdap(user)]]!
 paper-toast#ErrorToast(duration=0, opened='[[!empty(errorText)]]', on-click='closeError') {{localize(errorText)}}
     paper-icon-button(icon='close')
 template(is='dom-if', if='[[registrationFlow]]')
-    landing-page(user-details='[[_extractLdap(user)]]' on-flowcomplete='resyncApp')
+    landing-page(user-details='[[_extractLdap(user)]]' on-flowcomplete='resyncApp', language='[[language]]', resources='[[resources]]')
diff --git a/components/centraldashboard/public/components/manage-users-view-contributor.js b/components/centraldashboard/public/components/manage-users-view-contributor.js
index 818d248d0b6..9934238e199 100644
--- a/components/centraldashboard/public/components/manage-users-view-contributor.js
+++ b/components/centraldashboard/public/components/manage-users-view-contributor.js
@@ -13,11 +13,12 @@ import './resources/paper-chip.js';
 import './resources/md2-input/md2-input.js';
 import css from './manage-users-view-contributor.css';
 import template from './manage-users-view-contributor.pug';
-import utilitiesMixin from './utilities-mixin.js';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 
 // eslint-disable-next-line max-len
-export class ManageUsersViewContributor extends utilitiesMixin(localizationMixin(PolymerElement)) {
+export class ManageUsersViewContributor extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
     static get template() {
         return html([`
             <style>${css.toString()}</style>
diff --git a/components/centraldashboard/public/components/manage-users-view-contributor_test.js b/components/centraldashboard/public/components/manage-users-view-contributor_test.js
index b8a97060083..0a95adfbd79 100644
--- a/components/centraldashboard/public/components/manage-users-view-contributor_test.js
+++ b/components/centraldashboard/public/components/manage-users-view-contributor_test.js
@@ -5,6 +5,7 @@ import {mockIronAjax, yieldForRequests} from '../ajax_test_helper';
 import {flush} from '@polymer/polymer/lib/utils/flush.js';
 
 import './dashboard-view';
+import {languages} from '../assets/i18n/languages.json';
 
 const FIXTURE_ID = 'manage-users-view-contributor-fixture';
 const MU_VIEW_SELECTOR_ID = 'test-manage-users-contributor-view';
@@ -32,6 +33,8 @@ describe('Manage Users View Contributor', () => {
     beforeEach(() => {
         document.getElementById(FIXTURE_ID).create();
         manageUsersView = document.getElementById(MU_VIEW_SELECTOR_ID);
+        manageUsersView.language = 'en';
+        manageUsersView.resources = languages;
     });
 
     afterEach(() => {
diff --git a/components/centraldashboard/public/components/manage-users-view.js b/components/centraldashboard/public/components/manage-users-view.js
index d88649c74ed..03d77ea2106 100644
--- a/components/centraldashboard/public/components/manage-users-view.js
+++ b/components/centraldashboard/public/components/manage-users-view.js
@@ -9,17 +9,18 @@ import '@polymer/paper-icon-button/paper-icon-button.js';
 import '@vaadin/vaadin-grid/vaadin-grid.js';
 import '@vaadin/vaadin-grid/vaadin-grid-selection-column.js';
 import '@vaadin/vaadin-grid/vaadin-grid-sort-column.js';
-
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 import {html, PolymerElement} from '@polymer/polymer';
 
 import './manage-users-view-contributor.js';
 import css from './manage-users-view.css';
 import template from './manage-users-view.pug';
 import utilitiesMixin from './utilities-mixin.js';
-import localizationMixin from './localization-mixin.js';
 
 // eslint-disable-next-line max-len
-export class ManageUsersView extends utilitiesMixin(localizationMixin(PolymerElement)) {
+export class ManageUsersView extends mixinBehaviors([AppLocalizeBehavior], utilitiesMixin(PolymerElement)) {
     static get template() {
         return html([`
             <style>${css.toString()}</style>
@@ -47,9 +48,10 @@ export class ManageUsersView extends utilitiesMixin(localizationMixin(PolymerEle
     /**
      * Returns namespaces and roles
      * @param {[object]} ns Namespaces array.
+     * @param {[object]} lang Language string.
      * @return {[string, [string]]} rows for namespace table.
      */
-    nsBreakdown(ns) {
+    nsBreakdown(ns, lang) {
         const {namespaces} = this;
         if (!namespaces) return;
         const roleStrings = {
diff --git a/components/centraldashboard/public/components/manage-users-view.pug b/components/centraldashboard/public/components/manage-users-view.pug
index 554b2697e21..3e0743bf07d 100644
--- a/components/centraldashboard/public/components/manage-users-view.pug
+++ b/components/centraldashboard/public/components/manage-users-view.pug
@@ -15,12 +15,12 @@ section#Main-Content
             iron-icon.icon(icon='kubeflow:namespace')
             span.text {{localize('manageUsersView.lblNamespaceMemberships')}}
         .content.small
-            vaadin-grid(items='[[nsBreakdown(namespaces)]]', theme="no-border", height-by-rows, multi-sort)
+            vaadin-grid(items='[[nsBreakdown(namespaces, language)]]', theme="no-border", height-by-rows, multi-sort)
                 vaadin-grid-column(width='15em', path='0', flex-grow='2', header="{{localize('manageUsersView.headerNamespaces')}}")
                 vaadin-grid-column(width='9em', path='1', header="{{localize('manageUsersView.headerYouRole')}}")
     article.Contributors(hidden$='[[empty(multiOwnedNamespaces)]]')     
         template(is='dom-repeat', items='[[multiOwnedNamespaces]]' as='multiOwnedNamespace')
-            manage-users-view-contributor(owned-namespace='[[multiOwnedNamespace]]')
+            manage-users-view-contributor(owned-namespace='[[multiOwnedNamespace]]', language='[[language]]', resources='[[resources]]')
     article.Cluster-Namespaces(hidden$='[[empty(isClusterAdmin)]]')
         h2
             iron-icon.icon(icon='kubeflow:namespace')
diff --git a/components/centraldashboard/public/components/manage-users-view_test.js b/components/centraldashboard/public/components/manage-users-view_test.js
index 60ce5587c5b..4c06cd89731 100644
--- a/components/centraldashboard/public/components/manage-users-view_test.js
+++ b/components/centraldashboard/public/components/manage-users-view_test.js
@@ -5,6 +5,7 @@ import {mockIronAjax, yieldForRequests} from '../ajax_test_helper';
 import {flush} from '@polymer/polymer/lib/utils/flush.js';
 
 import './dashboard-view';
+import {languages} from '../assets/i18n/languages.json';
 
 const FIXTURE_ID = 'manage-users-view-fixture';
 const MU_VIEW_SELECTOR_ID = 'test-manage-users-view';
@@ -33,6 +34,8 @@ describe('Manage Users View', () => {
     beforeEach(() => {
         document.getElementById(FIXTURE_ID).create();
         manageUsersView = document.getElementById(MU_VIEW_SELECTOR_ID);
+        manageUsersView.language = 'en';
+        manageUsersView.resources = languages;
     });
 
     afterEach(() => {
diff --git a/components/centraldashboard/public/components/namespace-needed-view.js b/components/centraldashboard/public/components/namespace-needed-view.js
index 17ef54e3b01..6f62f494d28 100644
--- a/components/centraldashboard/public/components/namespace-needed-view.js
+++ b/components/centraldashboard/public/components/namespace-needed-view.js
@@ -1,7 +1,10 @@
 import {html, PolymerElement} from '@polymer/polymer';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 
-export class NamespaceNeededView extends localizationMixin(PolymerElement) {
+// eslint-disable-next-line max-len
+export class NamespaceNeededView extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
     static get template() {
         return html`
             <style>
@@ -20,8 +23,9 @@ export class NamespaceNeededView extends localizationMixin(PolymerElement) {
                 }
             </style>
             <p>{{localize('namespaceNeeded.text1')}}
-            <strong>{{localize('namespaceNeeded.text2')}}</strong>
-            {{localize('namespaceNeeded.text3')}}</p>
+                <strong>{{localize('namespaceNeeded.text2')}}</strong>
+                {{localize('namespaceNeeded.text3')}}
+            </p>
         `;
     }
 }
diff --git a/components/centraldashboard/public/components/namespace-selector.js b/components/centraldashboard/public/components/namespace-selector.js
index 46e2aec6b7b..a8be59fba53 100644
--- a/components/centraldashboard/public/components/namespace-selector.js
+++ b/components/centraldashboard/public/components/namespace-selector.js
@@ -4,7 +4,9 @@ import '@polymer/paper-button/paper-button.js';
 import '@polymer/paper-menu-button/paper-menu-button.js';
 import '@polymer/paper-listbox/paper-listbox.js';
 import '@polymer/paper-item/paper-item.js';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 
 import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
 
@@ -12,7 +14,8 @@ import {html, PolymerElement} from '@polymer/polymer/polymer-element.js';
  * Component to retrieve and allow namespace selection. Bubbles the selected
  * items up to the query string in the 'ns' parameter.
  */
-export class NamespaceSelector extends localizationMixin(PolymerElement) {
+// eslint-disable-next-line max-len
+export class NamespaceSelector extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
     static get template() {
         return html`
             <style>
diff --git a/components/centraldashboard/public/components/not-found-view.js b/components/centraldashboard/public/components/not-found-view.js
index d65cc19efea..667e083331b 100644
--- a/components/centraldashboard/public/components/not-found-view.js
+++ b/components/centraldashboard/public/components/not-found-view.js
@@ -1,7 +1,10 @@
 import {html, PolymerElement} from '@polymer/polymer';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 
-export class NotFoundView extends localizationMixin(PolymerElement) {
+// eslint-disable-next-line max-len
+export class NotFoundView extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
     static get template() {
         return html`
             <style>
diff --git a/components/centraldashboard/public/components/notebooks-card.js b/components/centraldashboard/public/components/notebooks-card.js
index 66030d2b378..ce73252c3b4 100644
--- a/components/centraldashboard/public/components/notebooks-card.js
+++ b/components/centraldashboard/public/components/notebooks-card.js
@@ -7,7 +7,9 @@ import '@polymer/paper-ripple/paper-ripple.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
 import '@polymer/paper-progress/paper-progress.js';
 import './iframe-link.js';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 
 import {html, PolymerElement} from '@polymer/polymer';
 
@@ -23,7 +25,7 @@ const getListNotebooksUrl = (namespace, server) =>
  * Component to retrieve and display recently modified Jupyter Notebooks.
  */
 // eslint-disable-next-line max-len
-export class NotebooksCard extends localizationMixin(PolymerElement) {
+export class NotebooksCard extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
     static get template() {
         return html`
         <style include="card-styles">
diff --git a/components/centraldashboard/public/components/notebooks-card_test.js b/components/centraldashboard/public/components/notebooks-card_test.js
index 63d2f710649..a157cd0138f 100644
--- a/components/centraldashboard/public/components/notebooks-card_test.js
+++ b/components/centraldashboard/public/components/notebooks-card_test.js
@@ -4,6 +4,7 @@ import {flush} from '@polymer/polymer/lib/utils/flush.js';
 
 import './notebooks-card';
 import {mockRequest} from '../ajax_test_helper';
+import {languages} from '../assets/i18n/languages.json';
 
 const FIXTURE_ID = 'notebooks-card-fixture';
 const NOTEBOOKS_CARD_ID = 'test-notebooks-card';
@@ -55,6 +56,8 @@ describe('Notebooks Card', () => {
         window.fetch = mockFetch;
         document.getElementById(FIXTURE_ID).create();
         notebooksCard = document.getElementById(NOTEBOOKS_CARD_ID);
+        notebooksCard.language = 'en';
+        notebooksCard.resources = languages;
     });
 
     afterEach(() => {
diff --git a/components/centraldashboard/public/components/pipelines-card.js b/components/centraldashboard/public/components/pipelines-card.js
index 0ff6f065581..070cc090fac 100644
--- a/components/centraldashboard/public/components/pipelines-card.js
+++ b/components/centraldashboard/public/components/pipelines-card.js
@@ -9,7 +9,9 @@ import '@polymer/paper-progress/paper-progress.js';
 import './iframe-link.js';
 
 import {html, PolymerElement} from '@polymer/polymer';
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 import utilitiesMixin from './utilities-mixin.js';
 
 import './card-styles.js';
@@ -23,7 +25,7 @@ const VALID_ARTIFACT_TYPES = new Set([PIPELINES, RUNS]);
  * Component to retrieve and display Pipelines or Pipeline Runs
  */
 // eslint-disable-next-line max-len
-export class PipelinesCard extends utilitiesMixin(localizationMixin(PolymerElement)) {
+export class PipelinesCard extends mixinBehaviors([AppLocalizeBehavior], utilitiesMixin(PolymerElement)) {
     static get template() {
         return html`
         <style include="card-styles">
diff --git a/components/centraldashboard/public/components/pipelines-card_test.js b/components/centraldashboard/public/components/pipelines-card_test.js
index 6110c4c82f0..a363cd143e3 100644
--- a/components/centraldashboard/public/components/pipelines-card_test.js
+++ b/components/centraldashboard/public/components/pipelines-card_test.js
@@ -4,6 +4,7 @@ import {flush} from '@polymer/polymer/lib/utils/flush.js';
 
 import './pipelines-card';
 import {mockRequest} from '../ajax_test_helper';
+import {languages} from '../assets/i18n/languages.json';
 
 const FIXTURE_ID = 'pipelines-card-fixture';
 const PIPELINES_CARD_ID = 'test-pipelines-card';
@@ -30,6 +31,8 @@ describe('Pipelines Card', () => {
         jasmine.Ajax.install();
         document.getElementById(FIXTURE_ID).create();
         pipelinesCard = document.getElementById(PIPELINES_CARD_ID);
+        pipelinesCard.language = 'en';
+        pipelinesCard.resources = languages;
     });
 
     afterEach(() => {
diff --git a/components/centraldashboard/public/components/s3proxy-view.js b/components/centraldashboard/public/components/s3proxy-view.js
index 835c8b79da7..013fada1c2f 100644
--- a/components/centraldashboard/public/components/s3proxy-view.js
+++ b/components/centraldashboard/public/components/s3proxy-view.js
@@ -1,8 +1,10 @@
-import localizationMixin from './localization-mixin.js';
+// eslint-disable-next-line max-len
+import {AppLocalizeBehavior} from '@polymer/app-localize-behavior/app-localize-behavior.js';
+import {mixinBehaviors} from '@polymer/polymer/lib/legacy/class.js';
 import {html, PolymerElement} from '@polymer/polymer';
 
 // eslint-disable-next-line max-len
-export class S3ProxyView extends localizationMixin(PolymerElement) {
+export class S3ProxyView extends mixinBehaviors([AppLocalizeBehavior], PolymerElement) {
     static get template() {
         return html`
             <style>
@@ -21,7 +23,7 @@ export class S3ProxyView extends localizationMixin(PolymerElement) {
                 }
             </style>
             <p>
-            {{localize('s3Proxy.defaultMessage')}}
+                {{localize('s3Proxy.defaultMessage')}}
             </p>
         `;
     }
diff --git a/components/centraldashboard/public/components/security-messages-card.js b/components/centraldashboard/public/components/security-messages-card.js
index e4f7e9e768b..1c4031b916f 100644
--- a/components/centraldashboard/public/components/security-messages-card.js
+++ b/components/centraldashboard/public/components/security-messages-card.js
@@ -7,7 +7,6 @@ import '@polymer/paper-ripple/paper-ripple.js';
 import '@polymer/paper-icon-button/paper-icon-button.js';
 import '@polymer/paper-progress/paper-progress.js';
 import './iframe-link.js';
-import localizationMixin from './localization-mixin.js';
 
 import {html, PolymerElement} from '@polymer/polymer';
 
@@ -17,8 +16,7 @@ import '@polymer/paper-styles/element-styles/paper-material-styles.js';
 /**
  * Component to retrieve and display recently modified Jupyter Notebooks.
  */
-// eslint-disable-next-line max-len
-export class SecurityMessagesCard extends localizationMixin(PolymerElement) {
+export class SecurityMessagesCard extends PolymerElement {
     static get template() {
         return html`
         <style include="paper-material-styles">