diff --git a/src/components/Flag.tsx b/src/components/Flag.tsx
index 3e2cbce..81bcb9e 100644
--- a/src/components/Flag.tsx
+++ b/src/components/Flag.tsx
@@ -2,6 +2,7 @@
 // This file is part of KristWeb 2 under GPL-3.0.
 // Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
 import React, { HTMLProps } from "react";
+import classNames from "classnames";
 
 import "./Flag.css";
 
@@ -10,9 +11,15 @@
   code?: string;
 }
 
-export function Flag({ name, code, ...rest }: Props): JSX.Element {
+export function Flag({ name, code, className, ...rest }: Props): JSX.Element {
+  const classes = classNames(
+    "flag",
+    code ? "flag-" + code.toLowerCase() : "",
+    className
+  );
+
   return <span
-    className={"flag " + (code ? "flag-" + code.toLowerCase() : "")}
+    className={classes}
     title={name}
     {...rest}
   ></span>;
diff --git a/src/pages/settings/LanguageItem.tsx b/src/pages/settings/LanguageItem.tsx
new file mode 100644
index 0000000..0b2dcdd
--- /dev/null
+++ b/src/pages/settings/LanguageItem.tsx
@@ -0,0 +1,61 @@
+// Copyright (c) 2020-2021 Drew Lemmy
+// This file is part of KristWeb 2 under GPL-3.0.
+// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
+import React, { FC } from "react";
+import classNames from "classnames";
+import { Menu } from "antd";
+
+import { useTranslation } from "react-i18next";
+import { getLanguages, Language } from "../../utils/i18n";
+
+import { Flag } from "../../components/Flag";
+
+interface LanguageItemProps {
+  code: string;
+  lang: Language;
+}
+const LanguageItem: FC<LanguageItemProps> = ({ code, lang, ...props }): JSX.Element => {
+  const { i18n } = useTranslation();
+
+  const isCurrent = i18n.language === code;
+  const classes = classNames("settings-language-item", {
+    "settings-language-item-current": isCurrent
+  });
+
+  function changeLanguage() {
+    i18n.changeLanguage(code);
+  }
+
+  return <Menu.Item {...props} className={classes} onClick={changeLanguage}>
+    {/* Flag of language country */}
+    <Flag
+      code={lang.country}
+      name={lang.name}
+      className="settings-language-flag"
+    />
+
+    {/* Language name */}
+    <span className="settings-language-name">{lang.name}</span>
+
+    {/* Native name, if applicable */}
+    {lang.nativeName && (
+      <span className="settings-language-native-name">
+        ({lang.nativeName})
+      </span>
+    )}
+  </Menu.Item>;
+};
+
+export function getLanguageItems(): JSX.Element[] {
+  const languages = getLanguages();
+  if (!languages) return [];
+
+  return Object.entries(languages)
+    .map(([code, lang]) => (
+      <LanguageItem
+        key={"language/" + code}
+        code={code}
+        lang={lang}
+      />
+    ));
+}
diff --git a/src/pages/settings/SettingsPage.less b/src/pages/settings/SettingsPage.less
new file mode 100644
index 0000000..336dcac
--- /dev/null
+++ b/src/pages/settings/SettingsPage.less
@@ -0,0 +1,32 @@
+// Copyright (c) 2020-2021 Drew Lemmy
+// This file is part of KristWeb 2 under GPL-3.0.
+// Full details: https://github.com/tmpim/KristWeb2/blob/master/LICENSE.txt
+@import (reference) "../../App.less";
+
+.settings-page {
+  .settings-language-item {
+    // ant-design adds `width: calc(100% + 1px)` to menu items for some reason
+    width: 100%;
+
+    &.settings-language-item-current {
+      background: lighten(@kw-darker, 5%);
+      color: @primary-color;
+    }
+
+    .settings-language-flag {
+      display: inline-block;
+
+      width: 30px;
+      height: 20px;
+
+      vertical-align: -0.25em;
+
+      margin-right: @margin-sm;
+    }
+
+    .settings-language-native-name {
+      color: @text-color-secondary;
+      margin-left: @padding-xs;
+    }
+  }
+}
diff --git a/src/pages/settings/SettingsPage.tsx b/src/pages/settings/SettingsPage.tsx
index ede3c42..54a14b9 100644
--- a/src/pages/settings/SettingsPage.tsx
+++ b/src/pages/settings/SettingsPage.tsx
@@ -10,12 +10,16 @@
 
 import { PageLayout, PageLayoutProps } from "../../layout/PageLayout";
 import { SettingBoolean } from "./SettingBoolean";
+import { getLanguageItems } from "./LanguageItem";
+
+import "./SettingsPage.less";
 
 interface SettingsPageLayoutProps extends PageLayoutProps {
   pageName?: string;
 }
 export const SettingsPageLayout: FC<SettingsPageLayoutProps> = ({ pageName, children, ...rest }) => {
   return <PageLayout
+    className="settings-page"
     siteTitleKey="settings.siteTitle"
     titleKey="settings.title"
     subTitleKey={pageName ? "settings.subTitle" + pageName : undefined}
@@ -31,10 +35,12 @@
   return <SettingsPageLayout>
     <Menu mode="inline" className="big-menu" selectable={false}>
       {/* Language selector */}
-      <Menu.Item key="language" icon={<GlobalOutlined />}>{t("settings.menuLanguage")}</Menu.Item>
+      <Menu.SubMenu key="sub-language" icon={<GlobalOutlined />} title={t("settings.menuLanguage")}>
+        {getLanguageItems()}
+      </Menu.SubMenu>
 
       {/* Auto-refresh settings */}
-      <Menu.SubMenu key="sub1" icon={<ReloadOutlined />} title={t("settings.subMenuAutoRefresh")}>
+      <Menu.SubMenu key="sub-autoRefresh" icon={<ReloadOutlined />} title={t("settings.subMenuAutoRefresh")}>
         {/* Auto-refresh tables */}
         <Menu.Item key="autoRefresh/autoRefreshTables">
           <SettingBoolean
@@ -46,7 +52,7 @@
       </Menu.SubMenu>
 
       {/* Debug settings */}
-      <Menu.SubMenu key="sub2" icon={<BugOutlined />} title={t("settings.subMenuDebug")}>
+      <Menu.SubMenu key="sub-debug" icon={<BugOutlined />} title={t("settings.subMenuDebug")}>
         {/* Advanced wallet formats */}
         <Menu.Item key="debug/advancedWalletFormats">
           <SettingBoolean setting="walletFormats" titleKey="settings.advancedWalletFormats" />