diff --git a/README.rst b/README.rst
index d1cfd83b0c..596bfa87ad 100644
--- a/README.rst
+++ b/README.rst
@@ -86,13 +86,6 @@ This library has the following exports:
 * ``messages``: Internationalization messages suitable for use with `@edx/frontend-platform/i18n <https://edx.github.io/frontend-platform/module-Internationalization.html>`_
 * ``dist/footer.scss``: A SASS file which contains style information for the component.  It should be imported into the micro-frontend's own SCSS file.
 
-<Footer /> component props
-==========================
-
-* onLanguageSelected: Provides the footer with an event handler for when the user selects a
-  language from its dropdown.
-* supportedLanguages: An array of objects representing available languages.  See example below for object shape.
-
 Plugin
 ======
 The footer can be replaced or modified using `Frontend Plugin Framework <https://github.com/openedx/frontend-plugin-framework>`_.
@@ -108,13 +101,7 @@ Component Usage Example::
 
   ...
 
-  <Footer
-    onLanguageSelected={(languageCode) => {/* set language */}}
-    supportedLanguages={[
-      { label: 'English', value: 'en'},
-      { label: 'Español', value: 'es' },
-    ]}
-  />
+  <Footer />
 
 * `An example of minimal component and messages usage. <https://github.com/openedx/frontend-template-application/blob/3355bb3a96232390e9056f35b06ffa8f105ed7ca/src/index.jsx#L23>`_
 * `An example of SCSS file usage. <https://github.com/openedx/frontend-template-application/blob/3cd5485bf387b8c479baf6b02bf59e3061dc3465/src/index.scss#L9>`_
diff --git a/example/index.jsx b/example/index.jsx
index 580fccc1b7..dd0258a786 100644
--- a/example/index.jsx
+++ b/example/index.jsx
@@ -15,13 +15,7 @@ subscribe(APP_READY, () => {
         authenticatedUser: null,
         config: getConfig(),
       }}>
-        <Footer
-          onLanguageSelected={() => {}}
-          supportedLanguages={[
-            { label: 'English', value: 'en' },
-            { label: 'Español', value: 'es' },
-          ]}
-        />
+        <Footer />
       </AppContext.Provider>
     </AppProvider>,
     document.getElementById('root'),
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 418da244fa..db5baa94e0 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -6,7 +6,8 @@ import { ensureConfig } from '@edx/frontend-platform';
 import { AppContext } from '@edx/frontend-platform/react';
 
 import messages from './Footer.messages';
-import LanguageSelector from './LanguageSelector';
+
+import LanguageSelectorSlot from '../plugin-slots/LanguageSelectorSlot';
 
 ensureConfig([
   'LMS_BASE_URL',
@@ -35,14 +36,10 @@ class SiteFooter extends React.Component {
 
   render() {
     const {
-      supportedLanguages,
-      onLanguageSelected,
       logo,
       intl,
     } = this.props;
-    const showLanguageSelector = supportedLanguages.length > 0 && onLanguageSelected;
     const { config } = this.context;
-
     return (
       <footer
         role="contentinfo"
@@ -61,12 +58,9 @@ class SiteFooter extends React.Component {
             />
           </a>
           <div className="flex-grow-1" />
-          {showLanguageSelector && (
-            <LanguageSelector
-              options={supportedLanguages}
-              onSubmit={onLanguageSelected}
-            />
-          )}
+          <div className="mb-2">
+            <LanguageSelectorSlot />
+          </div>
         </div>
       </footer>
     );
@@ -78,17 +72,10 @@ SiteFooter.contextType = AppContext;
 SiteFooter.propTypes = {
   intl: intlShape.isRequired,
   logo: PropTypes.string,
-  onLanguageSelected: PropTypes.func,
-  supportedLanguages: PropTypes.arrayOf(PropTypes.shape({
-    label: PropTypes.string.isRequired,
-    value: PropTypes.string.isRequired,
-  })),
 };
 
 SiteFooter.defaultProps = {
   logo: undefined,
-  onLanguageSelected: undefined,
-  supportedLanguages: [],
 };
 
 export default injectIntl(SiteFooter);
diff --git a/src/components/Footer.test.jsx b/src/components/Footer.test.jsx
index 0039b1481a..39b559851b 100644
--- a/src/components/Footer.test.jsx
+++ b/src/components/Footer.test.jsx
@@ -3,14 +3,19 @@ import React, { useMemo } from 'react';
 import renderer from 'react-test-renderer';
 import { render, screen } from '@testing-library/react';
 import userEvent from '@testing-library/user-event';
-import { IntlProvider } from '@edx/frontend-platform/i18n';
+import { IntlProvider, changeUserSessionLanguage } from '@edx/frontend-platform/i18n';
 import { AppContext } from '@edx/frontend-platform/react';
+import { initializeMockApp } from '@edx/frontend-platform/testing';
 
-import Footer from './Footer';
 import FooterSlot from '../plugin-slots/FooterSlot';
 import StudioFooterHelpSectionSlot from '../plugin-slots/StudioFooterHelpSectionSlot';
 
-const FooterWithContext = ({ locale = 'es' }) => {
+jest.mock('@edx/frontend-platform/i18n', () => ({
+  ...jest.requireActual('@edx/frontend-platform/i18n'),
+  changeUserSessionLanguage: jest.fn(),
+}));
+
+const FooterWithContext = ({ locale = 'en' }) => {
   const contextValue = useMemo(() => ({
     authenticatedUser: null,
     config: {
@@ -30,65 +35,24 @@ const FooterWithContext = ({ locale = 'es' }) => {
   );
 };
 
-const FooterWithLanguageSelector = ({ languageSelected = () => {} }) => {
-  const contextValue = useMemo(() => ({
-    authenticatedUser: null,
-    config: {
-      LOGO_TRADEMARK_URL: process.env.LOGO_TRADEMARK_URL,
-      LMS_BASE_URL: process.env.LMS_BASE_URL,
-    },
-  }), []);
-
-  return (
-    <IntlProvider locale="en">
-      <AppContext.Provider
-        value={contextValue}
-      >
-        <Footer
-          onLanguageSelected={languageSelected}
-          supportedLanguages={[
-            { label: 'English', value: 'en' },
-            { label: 'Español', value: 'es' },
-          ]}
-        />
-      </AppContext.Provider>
-    </IntlProvider>
-  );
-};
-
 describe('<Footer />', () => {
-  describe('renders correctly', () => {
-    it('renders without a language selector', () => {
-      const tree = renderer
-        .create(<FooterWithContext locale="en" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders without a language selector in es', () => {
-      const tree = renderer
-        .create(<FooterWithContext locale="es" />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
-    it('renders with a language selector', () => {
-      const tree = renderer
-        .create(<FooterWithLanguageSelector />)
-        .toJSON();
-      expect(tree).toMatchSnapshot();
-    });
+  beforeEach(() => { initializeMockApp(); });
+
+  it('renders correctly', () => {
+    const tree = renderer
+      .create(<FooterWithContext />)
+      .toJSON();
+    expect(tree).toMatchSnapshot();
   });
 
-  describe('handles language switching', () => {
-    it('calls onLanguageSelected prop when a language is changed', async () => {
-      const user = userEvent.setup();
-      const mockHandleLanguageSelected = jest.fn();
-      render(<FooterWithLanguageSelector languageSelected={mockHandleLanguageSelected} />);
+  it('handles language switching', async () => {
+    const user = userEvent.setup();
+    render(<FooterWithContext />);
 
-      await user.selectOptions(screen.getByRole('combobox'), 'es');
-      await user.click(screen.getByTestId('site-footer-submit-btn'));
+    await user.click(screen.getByRole('button'), 'English');
+    await user.click(screen.getByRole('button', { name: 'Español (Latinoamérica)' }));
 
-      expect(mockHandleLanguageSelected).toHaveBeenCalledWith('es');
-    });
+    expect(changeUserSessionLanguage).toHaveBeenCalledWith('es-419');
   });
 });
 
diff --git a/src/components/LanguageSelector.jsx b/src/components/LanguageSelector.jsx
index 1e8e1ad195..9faf4f899b 100644
--- a/src/components/LanguageSelector.jsx
+++ b/src/components/LanguageSelector.jsx
@@ -1,58 +1,65 @@
-import React from 'react';
+import React, { useMemo, useState } from 'react';
 import PropTypes from 'prop-types';
-import { injectIntl, intlShape, FormattedMessage } from '@edx/frontend-platform/i18n';
+import {
+  changeUserSessionLanguage, getPrimaryLanguageSubtag, getSupportedLocaleList, getLocale,
+} from '@edx/frontend-platform/i18n';
+import { Dropdown, Scrollable, useWindowSize } from '@openedx/paragon';
+import { Language } from '@openedx/paragon/icons';
+
+const getLocaleName = (locale) => {
+  const langName = new Intl.DisplayNames([locale], { type: 'language', languageDisplay: 'standard' }).of(locale);
+  return langName.replace(/^\w/, (c) => c.toUpperCase());
+};
 
 const LanguageSelector = ({
-  intl, options, onSubmit, ...props
+  supportedLanguages = [],
 }) => {
-  const handleSubmit = (e) => {
-    e.preventDefault();
-    const languageCode = e.target.elements['site-footer-language-select'].value;
-    onSubmit(languageCode);
+  const [currentLocale, setLocale] = useState(getLocale());
+  const { width } = useWindowSize();
+  const options = supportedLanguages.length > 0 ? supportedLanguages : getSupportedLocaleList();
+
+  const handleSelect = async (selectedLocale) => {
+    if (currentLocale !== selectedLocale) {
+      await changeUserSessionLanguage(selectedLocale);
+    }
+    setLocale(selectedLocale);
   };
 
+  const currentLocaleLabel = useMemo(() => {
+    if (width < 576) {
+      return '';
+    }
+    if (width < 768) {
+      return getPrimaryLanguageSubtag(currentLocale).toUpperCase();
+    }
+    return getLocaleName(currentLocale);
+  }, [currentLocale, width]);
+
   return (
-    <form
-      className="form-inline"
-      onSubmit={handleSubmit}
-      {...props}
-    >
-      <div className="form-group">
-        {/* eslint-disable-next-line jsx-a11y/label-has-associated-control */}
-        <label htmlFor="site-footer-language-select" className="d-inline-block m-0">
-          <FormattedMessage
-            id="footer.languageForm.select.label"
-            defaultMessage="Choose Language"
-            description="The label for the laguage select part of the language selection form."
-          />
-        </label>
-        <select
-          id="site-footer-language-select"
-          className="form-control-sm mx-2"
-          name="site-footer-language-select"
-          defaultValue={intl.locale}
-        >
-          {options.map(({ value, label }) => <option key={value} value={value}>{label}</option>)}
-        </select>
-        <button data-testid="site-footer-submit-btn" className="btn btn-outline-primary btn-sm" type="submit">
-          <FormattedMessage
-            id="footer.languageForm.submit.label"
-            defaultMessage="Apply"
-            description="The label for button to submit the language selection form."
-          />
-        </button>
-      </div>
-    </form>
+    <Dropdown onSelect={handleSelect}>
+      <Dropdown.Toggle
+        id="lang-selector-dropdown"
+        iconBefore={Language}
+        variant="outline-primary"
+        size="sm"
+      >
+        {currentLocaleLabel}
+      </Dropdown.Toggle>
+      <Dropdown.Menu>
+        <Scrollable style={{ maxHeight: '40vh' }}>
+          {options.map((locale) => (
+            <Dropdown.Item key={`lang-selector-${locale}`} eventKey={locale}>
+              {getLocaleName(locale)}
+            </Dropdown.Item>
+          ))}
+        </Scrollable>
+      </Dropdown.Menu>
+    </Dropdown>
   );
 };
 
 LanguageSelector.propTypes = {
-  intl: intlShape.isRequired,
-  onSubmit: PropTypes.func.isRequired,
-  options: PropTypes.arrayOf(PropTypes.shape({
-    value: PropTypes.string,
-    label: PropTypes.string,
-  })).isRequired,
+  supportedLanguages: PropTypes.arrayOf(PropTypes.string),
 };
 
-export default injectIntl(LanguageSelector);
+export default LanguageSelector;
diff --git a/src/components/__snapshots__/Footer.test.jsx.snap b/src/components/__snapshots__/Footer.test.jsx.snap
index 7e93dcad72..bcb1636f2d 100644
--- a/src/components/__snapshots__/Footer.test.jsx.snap
+++ b/src/components/__snapshots__/Footer.test.jsx.snap
@@ -1,6 +1,6 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`<Footer /> renders correctly renders with a language selector 1`] = `
+exports[`<Footer /> renders correctly 1`] = `
 <footer
   className="footer d-flex border-top py-3 px-4"
   role="contentinfo"
@@ -26,105 +26,45 @@ exports[`<Footer /> renders correctly renders with a language selector 1`] = `
     <div
       className="flex-grow-1"
     />
-    <form
-      className="form-inline"
-      onSubmit={[Function]}
+    <div
+      className="mb-2"
     >
       <div
-        className="form-group"
+        className="pgn__dropdown pgn__dropdown-light dropdown"
+        data-testid="dropdown"
       >
-        <label
-          className="d-inline-block m-0"
-          htmlFor="site-footer-language-select"
-        >
-          Choose Language
-        </label>
-        <select
-          className="form-control-sm mx-2"
-          defaultValue="en"
-          id="site-footer-language-select"
-          name="site-footer-language-select"
-        >
-          <option
-            value="en"
-          >
-            English
-          </option>
-          <option
-            value="es"
-          >
-            Español
-          </option>
-        </select>
         <button
-          className="btn btn-outline-primary btn-sm"
-          data-testid="site-footer-submit-btn"
-          type="submit"
+          aria-expanded={false}
+          aria-haspopup={true}
+          className="dropdown-toggle btn btn-outline-primary btn-sm"
+          disabled={false}
+          id="lang-selector-dropdown"
+          onClick={[Function]}
+          type="button"
         >
-          Apply
+          <span
+            className="pgn__icon pgn__icon__sm btn-icon-before"
+          >
+            <svg
+              aria-hidden={true}
+              fill="none"
+              focusable={false}
+              height={24}
+              role="img"
+              viewBox="0 0 24 24"
+              width={24}
+              xmlns="http://www.w3.org/2000/svg"
+            >
+              <path
+                d="M11.99 2C6.47 2 2 6.48 2 12s4.47 10 9.99 10C17.52 22 22 17.52 22 12S17.52 2 11.99 2Zm6.93 6h-2.95a15.65 15.65 0 0 0-1.38-3.56A8.03 8.03 0 0 1 18.92 8ZM12 4.04c.83 1.2 1.48 2.53 1.91 3.96h-3.82c.43-1.43 1.08-2.76 1.91-3.96ZM4.26 14C4.1 13.36 4 12.69 4 12s.1-1.36.26-2h3.38c-.08.66-.14 1.32-.14 2 0 .68.06 1.34.14 2H4.26Zm.82 2h2.95c.32 1.25.78 2.45 1.38 3.56A7.987 7.987 0 0 1 5.08 16Zm2.95-8H5.08a7.987 7.987 0 0 1 4.33-3.56A15.65 15.65 0 0 0 8.03 8ZM12 19.96c-.83-1.2-1.48-2.53-1.91-3.96h3.82c-.43 1.43-1.08 2.76-1.91 3.96ZM14.34 14H9.66c-.09-.66-.16-1.32-.16-2 0-.68.07-1.35.16-2h4.68c.09.65.16 1.32.16 2 0 .68-.07 1.34-.16 2Zm.25 5.56c.6-1.11 1.06-2.31 1.38-3.56h2.95a8.03 8.03 0 0 1-4.33 3.56ZM16.36 14c.08-.66.14-1.32.14-2 0-.68-.06-1.34-.14-2h3.38c.16.64.26 1.31.26 2s-.1 1.36-.26 2h-3.38Z"
+                fill="currentColor"
+              />
+            </svg>
+          </span>
+          English
         </button>
       </div>
-    </form>
-  </div>
-</footer>
-`;
-
-exports[`<Footer /> renders correctly renders without a language selector 1`] = `
-<footer
-  className="footer d-flex border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="container-fluid d-flex"
-  >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          {
-            "maxHeight": 45,
-          }
-        }
-      />
-    </a>
-    <div
-      className="flex-grow-1"
-    />
-  </div>
-</footer>
-`;
-
-exports[`<Footer /> renders correctly renders without a language selector in es 1`] = `
-<footer
-  className="footer d-flex border-top py-3 px-4"
-  role="contentinfo"
->
-  <div
-    className="container-fluid d-flex"
-  >
-    <a
-      aria-label="edX Home"
-      className="d-block"
-      href="http://localhost:18000"
-    >
-      <img
-        alt="Powered by Open edX"
-        src="https://edx-cdn.org/v3/default/logo-trademark.svg"
-        style={
-          {
-            "maxHeight": 45,
-          }
-        }
-      />
-    </a>
-    <div
-      className="flex-grow-1"
-    />
+    </div>
   </div>
 </footer>
 `;
diff --git a/src/plugin-slots/LanguageSelectorSlot/README.md b/src/plugin-slots/LanguageSelectorSlot/README.md
new file mode 100644
index 0000000000..56f27f3c7f
--- /dev/null
+++ b/src/plugin-slots/LanguageSelectorSlot/README.md
@@ -0,0 +1,66 @@
+# FooterLanguageSelectorSlot
+
+### Slot ID: `org.openedx.frontend.layout.footer_lang_selector.v1`
+
+### Slot ID Aliases
+* `footer_lang_selector`
+
+## Description
+
+This slot is used to repace/modify/hide the language selector in the footer.
+
+## Example
+
+Use the following snipped to hide the selector
+
+```jsx
+import { DIRECT_PLUGIN, PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.footer_lang_selector.v1': {
+      plugins: [
+        {
+          // Hide the default footer
+          op: PLUGIN_OPERATIONS.Hide,
+          widgetId: 'default_contents',
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
+
+
+Use the following snipped to modify the displayed language list
+
+**Default**
+
+![Default list of MFE supported languages](images/default_lang_list.png)
+
+**After**
+
+![Custom list of MFE supported languages](images/custom_lang_list.png)
+
+```jsx
+import { PLUGIN_OPERATIONS } from '@openedx/frontend-plugin-framework';
+
+const config = {
+  pluginSlots: {
+    'org.openedx.frontend.layout.footer_lang_selector.v1': {
+      keepDefault: true,
+      plugins: [
+        {
+          op: PLUGIN_OPERATIONS.Modify,
+          widgetId: 'default_contents',
+          fn: (widget) => ({ ...widget, content: { supportedLanguages: ['ar', 'es']}})
+        },
+      ]
+    }
+  },
+}
+
+export default config;
+```
\ No newline at end of file
diff --git a/src/plugin-slots/LanguageSelectorSlot/images/custom_lang_list.png b/src/plugin-slots/LanguageSelectorSlot/images/custom_lang_list.png
new file mode 100644
index 0000000000..534a9a9067
Binary files /dev/null and b/src/plugin-slots/LanguageSelectorSlot/images/custom_lang_list.png differ
diff --git a/src/plugin-slots/LanguageSelectorSlot/images/default_lang_list.png b/src/plugin-slots/LanguageSelectorSlot/images/default_lang_list.png
new file mode 100644
index 0000000000..2033ff1f56
Binary files /dev/null and b/src/plugin-slots/LanguageSelectorSlot/images/default_lang_list.png differ
diff --git a/src/plugin-slots/LanguageSelectorSlot/index.jsx b/src/plugin-slots/LanguageSelectorSlot/index.jsx
new file mode 100644
index 0000000000..d9e56857db
--- /dev/null
+++ b/src/plugin-slots/LanguageSelectorSlot/index.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import { PluginSlot } from '@openedx/frontend-plugin-framework';
+import PropTypes from 'prop-types';
+import LanguageSelector from '../../components/LanguageSelector';
+
+const LanguageSelectorSlot = ({ supportedLanguages = [] }) => (
+  <PluginSlot
+    id="org.openedx.frontend.layout.footer_lang_selector.v1"
+    idAliases={['footer_lang_selector']}
+    slotOptions={{ mergeProps: true }}
+  >
+    <LanguageSelector supportedLanguages={supportedLanguages} />
+  </PluginSlot>
+);
+
+LanguageSelectorSlot.propTypes = {
+  supportedLanguages: PropTypes.arrayOf(PropTypes.string),
+};
+
+export default LanguageSelectorSlot;