diff --git a/packages/apps/package.json b/packages/apps/package.json
index bafab460fa..02f1b10aed 100644
--- a/packages/apps/package.json
+++ b/packages/apps/package.json
@@ -19,9 +19,11 @@
     "@polkadot/dev": "^0.55.28",
     "@polkadot/react-components": "0.52.0-beta.9",
     "@polkadot/react-signer": "0.52.0-beta.9",
+    "punycode": "^2.1.1",
     "query-string": "^6.13.1"
   },
   "devDependencies": {
+    "@types/punycode": "^2.1.0",
     "babel-loader": "^8.1.0",
     "copy-webpack-plugin": "^6.0.3",
     "css-loader": "^3.6.0",
diff --git a/packages/apps/src/SideBar/Endpoints.tsx b/packages/apps/src/SideBar/Endpoints.tsx
index d0cabfdb31..0576ce49b2 100644
--- a/packages/apps/src/SideBar/Endpoints.tsx
+++ b/packages/apps/src/SideBar/Endpoints.tsx
@@ -5,10 +5,14 @@
 import { Option } from '@polkadot/apps-config/settings/types';
 
 import React, { useCallback, useState } from 'react';
+// ok, this seems to be an eslint bug, this _is_ a package import
+/* eslint-disable-next-line node/no-deprecated-api */
+import punycode from 'punycode';
 import styled from 'styled-components';
 import { createEndpoints } from '@polkadot/apps-config/settings';
 import { ChainImg, Icon, Input, Sidebar, Toggle } from '@polkadot/react-components';
 import uiSettings from '@polkadot/ui-settings';
+import { isAscii } from '@polkadot/util';
 
 import { useTranslation } from '../translate';
 
@@ -93,7 +97,13 @@ function Endpoints ({ className = '', offset, onClose }: Props): React.ReactElem
   );
 
   const _onChangeCustom = useCallback(
-    (apiUrl: string) => setApiUrl({ apiUrl, hasUrlChanged: uiSettings.get().apiUrl !== apiUrl, isUrlValid: isValidUrl(apiUrl) }),
+    (apiUrl: string): void => {
+      if (!isAscii(apiUrl)) {
+        apiUrl = punycode.toASCII(apiUrl);
+      }
+
+      setApiUrl({ apiUrl, hasUrlChanged: uiSettings.get().apiUrl !== apiUrl, isUrlValid: isValidUrl(apiUrl) });
+    },
     []
   );
 
diff --git a/yarn.lock b/yarn.lock
index 94ea07f5a5..1b45c5de51 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3289,6 +3289,7 @@ __metadata:
     "@polkadot/dev": ^0.55.28
     "@polkadot/react-components": 0.52.0-beta.9
     "@polkadot/react-signer": 0.52.0-beta.9
+    "@types/punycode": ^2.1.0
     babel-loader: ^8.1.0
     copy-webpack-plugin: ^6.0.3
     css-loader: ^3.6.0
@@ -3299,6 +3300,7 @@ __metadata:
     markdown-loader: ^5.1.0
     mini-css-extract-plugin: ^0.9.0
     null-loader: ^4.0.0
+    punycode: ^2.1.1
     query-string: ^6.13.1
     style-loader: ^1.2.1
     thread-loader: ^2.1.3
@@ -4185,6 +4187,13 @@ __metadata:
   languageName: node
   linkType: hard
 
+"@types/punycode@npm:^2.1.0":
+  version: 2.1.0
+  resolution: "@types/punycode@npm:2.1.0"
+  checksum: 3/a09fbf8d6efd9f3953c102c0f76c711ad37d38536589cf5f241320115e652fc8ff8c4f2d903e6c4fbff47b103b7eb4ab204e18e07e736595979b00f8d0a9ef0d
+  languageName: node
+  linkType: hard
+
 "@types/q@npm:^1.5.1":
   version: 1.5.4
   resolution: "@types/q@npm:1.5.4"