diff --git a/.gitmodules b/.gitmodules
new file mode 100644
index 00000000..481dd10f
--- /dev/null
+++ b/.gitmodules
@@ -0,0 +1,3 @@
+[submodule "external/lang"]
+	path = external/lang
+	url = https://gitlab.insrt.uk/revolt/translations
diff --git a/external/lang b/external/lang
new file mode 160000
index 00000000..03347832
--- /dev/null
+++ b/external/lang
@@ -0,0 +1 @@
+Subproject commit 0334783257c0b1cd47ee9affdc1a0dddc127edf2
diff --git a/package.json b/package.json
index 96d4b973..d64671a4 100644
--- a/package.json
+++ b/package.json
@@ -13,8 +13,9 @@
     "@preact/preset-vite": "^2.0.0",
     "@styled-icons/bootstrap": "^10.34.0",
     "@styled-icons/feather": "^10.34.0",
+    "@types/preact-i18n": "^2.3.0",
     "@types/styled-components": "^5.1.10",
-    "preact-i18n": "^1.5.0",
+    "preact-i18n": "^2.4.0-preactx",
     "react-overlapping-panels": "1.1.2-patch.0",
     "rimraf": "^3.0.2",
     "sass": "^1.35.1",
diff --git a/src/app.tsx b/src/app.tsx
index 5b9d0496..c16cf4ca 100644
--- a/src/app.tsx
+++ b/src/app.tsx
@@ -1,15 +1,17 @@
 import styled, { createGlobalStyle } from 'styled-components';
 import { useState } from 'preact/hooks';
 
-import { Button } from './components/ui/Button';
-import { Banner } from './components/ui/Banner';
-import { Checkbox } from './components/ui/Checkbox';
-import { ComboBox } from './components/ui/ComboBox';
-import { InputBox } from './components/ui/InputBox';
-import { ColourSwatches } from './components/ui/ColourSwatches';
-import { Tip } from './components/ui/Tip';
-import { Radio } from './components/ui/Radio';
-import { Overline } from './components/ui/Overline';
+import Button from './components/ui/Button';
+import Banner from './components/ui/Banner';
+import Checkbox from './components/ui/Checkbox';
+import ComboBox from './components/ui/ComboBox';
+import InputBox from './components/ui/InputBox';
+import ColourSwatches from './components/ui/ColourSwatches';
+import Tip from './components/ui/Tip';
+import Radio from './components/ui/Radio';
+import Overline from './components/ui/Overline';
+
+import Locale from './context/Locale';
 
 // ! TEMP START
 let a = {"light":false,"accent":"#FD6671","background":"#191919","foreground":"#F6F6F6","block":"#2D2D2D","message-box":"#363636","mention":"rgba(251, 255, 0, 0.06)","success":"#65E572","warning":"#FAA352","error":"#F06464","hover":"rgba(0, 0, 0, 0.1)","sidebar-active":"#FD6671","scrollbar-thumb":"#CA525A","scrollbar-track":"transparent","primary-background":"#242424","primary-header":"#363636","secondary-background":"#1E1E1E","secondary-foreground":"#C8C8C8","secondary-header":"#2D2D2D","tertiary-background":"#4D4D4D","tertiary-foreground":"#848484","status-online":"#3ABF7E","status-away":"#F39F00","status-busy":"#F84848","status-streaming":"#977EFF","status-invisible":"#A5A5A5"};
@@ -42,34 +44,36 @@ export function App() {
 	return (
 		<>
 			<GlobalTheme />
-			<UIDemo>
-				<Button>Button (normal)</Button>
-				<Button contrast>Button (contrast)</Button>
-				<Button error>Button (error)</Button>
-				<Button contrast error>Button (contrast + error)</Button>
-				<Banner>I am a banner!</Banner>
-				<Checkbox checked={checked} onChange={setChecked} description="ok gamer">Do you want thing??</Checkbox>
-				<ComboBox>
-					<option>Select an option.</option>
-					<option>1</option>
-					<option>2</option>
-					<option>3</option>
-				</ComboBox>
-				<InputBox placeholder="Normal input box..." />
-				<InputBox placeholder="Contrast input box..." contrast />
-				<InputBox value="Input box with value" />
-				<InputBox value="Contrast with value" contrast />
-				<ColourSwatches value={colour} onChange={v => setColour(v)} />
-				<Tip>I am a tip! I provide valuable information.</Tip>
-				<Radio checked={selected === 'a'} onSelect={() => setSelected('a')}>First option</Radio>
-				<Radio checked={selected === 'b'} onSelect={() => setSelected('b')}>Second option</Radio>
-				<Radio checked={selected === 'c'} onSelect={() => setSelected('c')}>Last option</Radio>
-				<Overline>Normal overline</Overline>
-				<Overline type="subtle">Subtle overline</Overline>
-				<Overline type="error">Error overline</Overline>
-				<Overline error="with error">Normal overline</Overline>
-				<Overline type="subtle" error="with error">Subtle overline</Overline>
-			</UIDemo>
+			<Locale>
+				<UIDemo>
+					<Button>Button (normal)</Button>
+					<Button contrast>Button (contrast)</Button>
+					<Button error>Button (error)</Button>
+					<Button contrast error>Button (contrast + error)</Button>
+					<Banner>I am a banner!</Banner>
+					<Checkbox checked={checked} onChange={setChecked} description="ok gamer">Do you want thing??</Checkbox>
+					<ComboBox>
+						<option>Select an option.</option>
+						<option>1</option>
+						<option>2</option>
+						<option>3</option>
+					</ComboBox>
+					<InputBox placeholder="Normal input box..." />
+					<InputBox placeholder="Contrast input box..." contrast />
+					<InputBox value="Input box with value" />
+					<InputBox value="Contrast with value" contrast />
+					<ColourSwatches value={colour} onChange={v => setColour(v)} />
+					<Tip>I am a tip! I provide valuable information.</Tip>
+					<Radio checked={selected === 'a'} onSelect={() => setSelected('a')}>First option</Radio>
+					<Radio checked={selected === 'b'} onSelect={() => setSelected('b')}>Second option</Radio>
+					<Radio checked={selected === 'c'} onSelect={() => setSelected('c')}>Last option</Radio>
+					<Overline>Normal overline</Overline>
+					<Overline type="subtle">Subtle overline</Overline>
+					<Overline type="error">Error overline</Overline>
+					<Overline error="with error">Normal overline</Overline>
+					<Overline type="subtle" error="with error">Subtle overline</Overline>
+				</UIDemo>
+			</Locale>
 		</>
 	)
 }
diff --git a/src/components/ui/Banner.tsx b/src/components/ui/Banner.tsx
index 15c0d5ca..04bc326f 100644
--- a/src/components/ui/Banner.tsx
+++ b/src/components/ui/Banner.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const Banner = styled.div`
+export default styled.div`
 	padding: 8px;
     font-size: 14px;
     text-align: center;
diff --git a/src/components/ui/Button.tsx b/src/components/ui/Button.tsx
index 3952e354..e4d949e0 100644
--- a/src/components/ui/Button.tsx
+++ b/src/components/ui/Button.tsx
@@ -5,7 +5,7 @@ interface Props {
     readonly error?: boolean;
 };
 
-export const Button = styled.button<Props>`
+export default styled.button<Props>`
 	z-index: 1;
 	padding: 8px;
 	font-size: 16px;
diff --git a/src/components/ui/Checkbox.tsx b/src/components/ui/Checkbox.tsx
index bccbefb1..ae837d1b 100644
--- a/src/components/ui/Checkbox.tsx
+++ b/src/components/ui/Checkbox.tsx
@@ -67,7 +67,7 @@ interface Props {
     onChange: (state: boolean) => void;
 }
 
-export function Checkbox(props: Props) {
+export default function Checkbox(props: Props) {
     return (
         <CheckboxBase disabled={props.disabled}>
             <CheckboxContent>
diff --git a/src/components/ui/ColourSwatches.tsx b/src/components/ui/ColourSwatches.tsx
index 4c33340b..71f71264 100644
--- a/src/components/ui/ColourSwatches.tsx
+++ b/src/components/ui/ColourSwatches.tsx
@@ -86,7 +86,7 @@ const Rows = styled.div`
     }
 `;
 
-export function ColourSwatches({ value, onChange }: Props) {
+export default function ColourSwatches({ value, onChange }: Props) {
     const ref = useRef<HTMLInputElement>();
 
     return (
diff --git a/src/components/ui/ComboBox.tsx b/src/components/ui/ComboBox.tsx
index 75944142..db328c8f 100644
--- a/src/components/ui/ComboBox.tsx
+++ b/src/components/ui/ComboBox.tsx
@@ -1,6 +1,6 @@
 import styled from "styled-components";
 
-export const ComboBox = styled.select`
+export default styled.select`
 	padding: 8px;
     border-radius: 2px;
     color: var(--secondary-foreground);
diff --git a/src/components/ui/InputBox.tsx b/src/components/ui/InputBox.tsx
index cf8ab637..d5c0d9c7 100644
--- a/src/components/ui/InputBox.tsx
+++ b/src/components/ui/InputBox.tsx
@@ -4,7 +4,7 @@ interface Props {
     readonly contrast?: boolean;
 };
 
-export const InputBox = styled.input<Props>`
+export default styled.input<Props>`
     z-index: 1;
     padding: 8px 16px;
     border-radius: 6px;
diff --git a/src/components/ui/LineDivider.tsx b/src/components/ui/LineDivider.tsx
index 93fbcdfc..49ba6461 100644
--- a/src/components/ui/LineDivider.tsx
+++ b/src/components/ui/LineDivider.tsx
@@ -1,6 +1,6 @@
 import styled from 'styled-components';
 
-export const LineDivider = styled.div`
+export default styled.div`
     height: 0px;
     opacity: 0.6;
     flex-shrink: 0;
diff --git a/src/components/ui/Overline.tsx b/src/components/ui/Overline.tsx
index 4aaef59f..f2db34f5 100644
--- a/src/components/ui/Overline.tsx
+++ b/src/components/ui/Overline.tsx
@@ -32,7 +32,7 @@ const OverlineBase = styled.div<Omit<Props, 'children' | 'error'>>`
     ${ props => props.block && css`display: block;` }
 `;
 
-export function Overline(props: Props) {
+export default function Overline(props: Props) {
     return (
         <OverlineBase {...props}>
             { props.children }
diff --git a/src/components/ui/Preloader.tsx b/src/components/ui/Preloader.tsx
index 79cd39c5..217d5b4c 100644
--- a/src/components/ui/Preloader.tsx
+++ b/src/components/ui/Preloader.tsx
@@ -1,3 +1,3 @@
-export function Preloader() {
+export default function Preloader() {
     return <span>LOADING</span>
 }
diff --git a/src/components/ui/Radio.tsx b/src/components/ui/Radio.tsx
index 0ca1828d..b6cc9926 100644
--- a/src/components/ui/Radio.tsx
+++ b/src/components/ui/Radio.tsx
@@ -81,7 +81,7 @@ const RadioDescription = styled.span<BaseProps>`
     ` }
 `;
 
-export function Radio(props: Props) {
+export default function Radio(props: Props) {
     return (
         <RadioBase
             selected={props.checked}
diff --git a/src/components/ui/Tip.tsx b/src/components/ui/Tip.tsx
index cc4a1da0..ed2bb953 100644
--- a/src/components/ui/Tip.tsx
+++ b/src/components/ui/Tip.tsx
@@ -26,7 +26,7 @@ export const TipBase = styled.div`
     }
 `;
 
-export function Tip(props: { children: Children }) {
+export default function Tip(props: { children: Children }) {
     return (
         <TipBase>
             <Info size={20} strokeWidth={2} />
diff --git a/src/context/Locale.tsx b/src/context/Locale.tsx
new file mode 100644
index 00000000..6ff7155e
--- /dev/null
+++ b/src/context/Locale.tsx
@@ -0,0 +1,14 @@
+import { IntlProvider } from "preact-i18n";
+import definition from "../../external/lang/en.json";
+
+interface Props {
+    children: JSX.Element | JSX.Element[]
+}
+
+export default function Locale({ children }: Props) {
+    return (
+        <IntlProvider definition={definition}>
+            { children }
+        </IntlProvider>
+    )
+}
diff --git a/yarn.lock b/yarn.lock
index 85009143..f68abfd6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -318,6 +318,13 @@
     "@types/react" "*"
     hoist-non-react-statics "^3.3.0"
 
+"@types/preact-i18n@^2.3.0":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@types/preact-i18n/-/preact-i18n-2.3.0.tgz#d99d4a9ad03b0b65e57ed4d874447de74384e32f"
+  integrity sha512-qDgb5QbPnWJ141y+fca5R3MBQis5h7ITnSB9WQiHj5WH41Q5g9Wc4rCnqYERfqSBSC0ac4cE1JAlFisiAUIiLw==
+  dependencies:
+    preact "^10.0.0"
+
 "@types/prop-types@*":
   version "15.7.3"
   resolved "https://registry.yarnpkg.com/@types/prop-types/-/prop-types-15.7.3.tgz#2ab0d5da2e5815f94b0b9d4b95d1e5f243ab2ca7"
@@ -745,14 +752,20 @@ postcss@^8.3.0:
     nanoid "^3.1.23"
     source-map-js "^0.6.2"
 
-preact-i18n@^1.5.0:
-  version "1.5.0"
-  resolved "https://registry.yarnpkg.com/preact-i18n/-/preact-i18n-1.5.0.tgz#f9e2ad29cb3abc8b810554963cc90f1a52242605"
-  integrity sha512-gOSyXag3uP1ISSvpcvfP8rdONeLxtQWCEfEZyt+REnGcBUzEWwf7/tjBVZp/ymZeTv4mGh9sALd1NqPYyICkRA==
+preact-i18n@^2.4.0-preactx:
+  version "2.4.0-preactx"
+  resolved "https://registry.yarnpkg.com/preact-i18n/-/preact-i18n-2.4.0-preactx.tgz#fbcb2e3ae22744c7fef5a102db2ef7506057d082"
+  integrity sha512-XJ15wZKdJrpuz2KBs8BkDB9gl85MjIkER5tx8r6RM1+j53hw3/XzUq2DMnkMoLVQiS0VSPI6bXk41CioKwTJIA==
   dependencies:
     dlv "^1.1.3"
+    preact-markup "^2.0.0"
 
-preact@^10.5.13:
+preact-markup@^2.0.0:
+  version "2.1.1"
+  resolved "https://registry.yarnpkg.com/preact-markup/-/preact-markup-2.1.1.tgz#0451e7eed1dac732d7194c34a7f16ff45a2cfdd7"
+  integrity sha512-8JL2p36mzK8XkspOyhBxUSPjYwMxDM0L5BWBZWxsZMVW8WsGQrYQDgVuDKkRspt2hwrle+Cxr/053hpc9BJwfw==
+
+preact@^10.0.0, preact@^10.5.13:
   version "10.5.13"
   resolved "https://registry.yarnpkg.com/preact/-/preact-10.5.13.tgz#85f6c9197ecd736ce8e3bec044d08fd1330fa019"
   integrity sha512-q/vlKIGNwzTLu+jCcvywgGrt+H/1P/oIRSD6mV4ln3hmlC+Aa34C7yfPI4+5bzW8pONyVXYS7SvXosy2dKKtWQ==