diff --git a/frontend/src/mockingbird/components/Language/Language.tsx b/frontend/src/mockingbird/components/Language/Language.tsx
deleted file mode 100644
index 98b2d6eb..00000000
--- a/frontend/src/mockingbird/components/Language/Language.tsx
+++ /dev/null
@@ -1,22 +0,0 @@
-import React from 'react';
-import { useTranslation } from 'react-i18next';
-import IconLanguage from '@tabler/icons-react/dist/esm/icons/IconLanguage';
-import { ActionIcon } from '@mantine/core';
-
-type Props = {
-  className?: string;
-};
-
-export function LanguageSwitcher({ className }: Props) {
-  const { i18n } = useTranslation();
-  const handleChange = () => {
-    const nextLanguage = i18n.language === 'en' ? 'ru' : 'en';
-    if (nextLanguage === i18n.language) return;
-    i18n.changeLanguage(nextLanguage);
-  };
-  return (
-    <ActionIcon className={className} onClick={handleChange}>
-      <IconLanguage color="grey" size="1.2rem" />
-    </ActionIcon>
-  );
-}
diff --git a/frontend/src/mockingbird/components/Language/LanguagePicker.css b/frontend/src/mockingbird/components/Language/LanguagePicker.css
new file mode 100644
index 00000000..4bd1aab6
--- /dev/null
+++ b/frontend/src/mockingbird/components/Language/LanguagePicker.css
@@ -0,0 +1,18 @@
+.control {
+  display: flex;
+  width: 150px;
+  justify-content: flex-end;
+  padding: 8px 16px;
+  border-radius: 16px;
+  transition: background-color 150ms ease;
+}
+
+.itemContent {
+  align-content: center;
+  justify-content: space-between;
+}
+
+.icon {
+  width: 1.2rem;
+  height: 1.2rem;
+}
diff --git a/frontend/src/mockingbird/components/Language/LanguagePicker.tsx b/frontend/src/mockingbird/components/Language/LanguagePicker.tsx
new file mode 100644
index 00000000..801b3aef
--- /dev/null
+++ b/frontend/src/mockingbird/components/Language/LanguagePicker.tsx
@@ -0,0 +1,54 @@
+import React, { useState } from 'react';
+import { useTranslation } from 'react-i18next';
+import { UnstyledButton, Menu, Group } from '@mantine/core';
+import IconCheck from '@tabler/icons-react/dist/esm/icons/IconCheck';
+import IconLanguage from '@tabler/icons-react/dist/esm/icons/IconLanguage';
+import styles from './LanguagePicker.css';
+
+type LanguageItem = { label: string; value: string };
+
+const data: LanguageItem[] = [
+  { label: 'English', value: 'en' },
+  { label: 'Русский', value: 'ru' },
+];
+
+export function LanguagePicker() {
+  const { i18n } = useTranslation();
+  const [opened, setOpened] = useState(false);
+  const [selected, setSelected] = useState(() => {
+    return data.find((item) => item.value === i18n.language) || data[0];
+  });
+  const handleSelectLanguage = (item: LanguageItem) => {
+    setOpened(false);
+    setSelected(item);
+    i18n.changeLanguage(item.value);
+  };
+  const items = data.map((item) => (
+    <Menu.Item onClick={() => handleSelectLanguage(item)} key={item.label}>
+      <Group className={styles.itemContent}>
+        <span>{item.label}</span>
+        {item.value === selected.value && <IconCheck className={styles.icon} />}
+      </Group>
+    </Menu.Item>
+  ));
+
+  return (
+    <Menu
+      onOpen={() => setOpened(true)}
+      onClose={() => setOpened(false)}
+      radius="md"
+      width="target"
+      withinPortal
+    >
+      <Menu.Target>
+        <UnstyledButton
+          className={styles.control}
+          data-expanded={opened || undefined}
+        >
+          <IconLanguage color="grey" size="1.2rem" />
+        </UnstyledButton>
+      </Menu.Target>
+      <Menu.Dropdown>{items}</Menu.Dropdown>
+    </Menu>
+  );
+}
diff --git a/frontend/src/mockingbird/components/Language/index.ts b/frontend/src/mockingbird/components/Language/index.ts
index fb4ae3ee..bad7b8ac 100644
--- a/frontend/src/mockingbird/components/Language/index.ts
+++ b/frontend/src/mockingbird/components/Language/index.ts
@@ -1 +1 @@
-export { LanguageSwitcher } from './Language';
+export { LanguagePicker } from './LanguagePicker';
diff --git a/frontend/src/mockingbird/layers/layout/Header.tsx b/frontend/src/mockingbird/layers/layout/Header.tsx
index b454ca3e..6175ba2e 100755
--- a/frontend/src/mockingbird/layers/layout/Header.tsx
+++ b/frontend/src/mockingbird/layers/layout/Header.tsx
@@ -2,7 +2,7 @@ import React, { useState, useEffect } from 'react';
 import { connect } from '@tramvai/state';
 import { Container, Title, Flex } from '@mantine/core';
 import { getJson } from 'src/infrastructure/request';
-import { LanguageSwitcher } from 'src/mockingbird/components/Language';
+import { LanguagePicker } from 'src/mockingbird/components/Language';
 import { Shadow } from './Shadow';
 
 type Props = {
@@ -26,7 +26,7 @@ function Header({ assetsPrefix }: Props) {
           <Title order={2} mr="auto">
             {title}
           </Title>
-          <LanguageSwitcher />
+          <LanguagePicker />
         </Flex>
       </Container>
     </Shadow>