diff --git a/index.html b/index.html
index 08ff8706..e84d4edd 100644
--- a/index.html
+++ b/index.html
@@ -17,6 +17,8 @@ <h1>New Lexeme</h1>
 				import DevLexemeCreator from './src/data-access/DevLexemeCreator';
 				import DevLangCodeRetriever from './src/data-access/DevLangCodeRetriever';
 				import LanguageItemSearcher from './src/data-access/LanguageItemSearcher';
+				import '@wikimedia/codex/dist/codex.style.css';
+				import '@wikimedia/codex-design-tokens/theme-wikimedia-ui.css';
 
 				const config = {
 					rootSelector: '#app',
diff --git a/package-lock.json b/package-lock.json
index bdbb6a0b..f54b1780 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,8 @@
 			"version": "0.0.1",
 			"license": "GPL-2.0-or-later",
 			"dependencies": {
+				"@wikimedia/codex": "^1.12.0",
+				"@wikimedia/codex-design-tokens": "^1.12.0",
 				"@wmde/wikibase-datamodel-types": "^0.2.0",
 				"@wmde/wikit-tokens": "^3.0.0-alpha.12",
 				"@wmde/wikit-vue-components": "^3.0.0-alpha.12",
@@ -1232,6 +1234,63 @@
 				"node": "^12.22.0 || ^14.17.0 || >=16.0.0"
 			}
 		},
+		"node_modules/@floating-ui/core": {
+			"version": "1.6.7",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+			"integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+			"dependencies": {
+				"@floating-ui/utils": "^0.2.7"
+			}
+		},
+		"node_modules/@floating-ui/dom": {
+			"version": "1.6.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+			"integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+			"dependencies": {
+				"@floating-ui/core": "^1.6.0",
+				"@floating-ui/utils": "^0.2.7"
+			}
+		},
+		"node_modules/@floating-ui/utils": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+			"integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
+		},
+		"node_modules/@floating-ui/vue": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz",
+			"integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==",
+			"dependencies": {
+				"@floating-ui/dom": "^1.6.1",
+				"@floating-ui/utils": "^0.2.1",
+				"vue-demi": ">=0.13.0"
+			}
+		},
+		"node_modules/@floating-ui/vue/node_modules/vue-demi": {
+			"version": "0.14.10",
+			"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+			"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+			"hasInstallScript": true,
+			"bin": {
+				"vue-demi-fix": "bin/vue-demi-fix.js",
+				"vue-demi-switch": "bin/vue-demi-switch.js"
+			},
+			"engines": {
+				"node": ">=12"
+			},
+			"funding": {
+				"url": "https://github.com/sponsors/antfu"
+			},
+			"peerDependencies": {
+				"@vue/composition-api": "^1.0.0-rc.1",
+				"vue": "^3.0.0-0 || ^2.6.0"
+			},
+			"peerDependenciesMeta": {
+				"@vue/composition-api": {
+					"optional": true
+				}
+			}
+		},
 		"node_modules/@hapi/hoek": {
 			"version": "9.3.0",
 			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -3138,6 +3197,40 @@
 				}
 			}
 		},
+		"node_modules/@wikimedia/codex": {
+			"version": "1.12.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.12.0.tgz",
+			"integrity": "sha512-tqevWQFnVEunvElPQ+adHHU2WPfNVkDw0JAfQk90uVb1haoF1XwaXwpF4/mU5WqcX97FT+j7mHjXwgm19uwWLQ==",
+			"dependencies": {
+				"@floating-ui/vue": "1.0.6",
+				"@wikimedia/codex-icons": "1.12.0"
+			},
+			"engines": {
+				"node": ">=18",
+				"npm": ">=7.21.0"
+			},
+			"peerDependencies": {
+				"vue": "3.4.27"
+			}
+		},
+		"node_modules/@wikimedia/codex-design-tokens": {
+			"version": "1.12.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.12.0.tgz",
+			"integrity": "sha512-b4hB4Dz16zs7bccU2Ezu3CVD82BH6xNIn7bV0EZsDBcY9s31wi1vNDB/4yqFLhY/SR5td18PgmceLPnqF33M5Q==",
+			"engines": {
+				"node": ">=18",
+				"npm": ">=7.21.0"
+			}
+		},
+		"node_modules/@wikimedia/codex-icons": {
+			"version": "1.12.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.12.0.tgz",
+			"integrity": "sha512-HkTIA/cpCF9dNLaK6QaVuqFFEqeJHPafuGclzjei9oeNCUPox+vWOxuORUTjNlLJgh5MN1n9SuuEbifskvsXKA==",
+			"engines": {
+				"node": ">=18",
+				"npm": ">=7.21.0"
+			}
+		},
 		"node_modules/@wmde/eslint-config-wikimedia-typescript": {
 			"version": "0.2.12",
 			"resolved": "https://registry.npmjs.org/@wmde/eslint-config-wikimedia-typescript/-/eslint-config-wikimedia-typescript-0.2.12.tgz",
@@ -15467,6 +15560,46 @@
 			"integrity": "sha512-Ys+3g2TaW7gADOJzPt83SJtCDhMjndcDMFVQ/Tj9iA1BfJzFKD9mAUXT3OenpuPHbI6P/myECxRJrofUsDx/5g==",
 			"dev": true
 		},
+		"@floating-ui/core": {
+			"version": "1.6.7",
+			"resolved": "https://registry.npmjs.org/@floating-ui/core/-/core-1.6.7.tgz",
+			"integrity": "sha512-yDzVT/Lm101nQ5TCVeK65LtdN7Tj4Qpr9RTXJ2vPFLqtLxwOrpoxAHAJI8J3yYWUc40J0BDBheaitK5SJmno2g==",
+			"requires": {
+				"@floating-ui/utils": "^0.2.7"
+			}
+		},
+		"@floating-ui/dom": {
+			"version": "1.6.10",
+			"resolved": "https://registry.npmjs.org/@floating-ui/dom/-/dom-1.6.10.tgz",
+			"integrity": "sha512-fskgCFv8J8OamCmyun8MfjB1Olfn+uZKjOKZ0vhYF3gRmEUXcGOjxWL8bBr7i4kIuPZ2KD2S3EUIOxnjC8kl2A==",
+			"requires": {
+				"@floating-ui/core": "^1.6.0",
+				"@floating-ui/utils": "^0.2.7"
+			}
+		},
+		"@floating-ui/utils": {
+			"version": "0.2.7",
+			"resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+			"integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
+		},
+		"@floating-ui/vue": {
+			"version": "1.0.6",
+			"resolved": "https://registry.npmjs.org/@floating-ui/vue/-/vue-1.0.6.tgz",
+			"integrity": "sha512-EdrOljjkpkkqZnrpqUcPoz9NvHxuTjUtSInh6GMv3+Mcy+giY2cE2pHh9rpacRcZ2eMSCxel9jWkWXTjLmY55w==",
+			"requires": {
+				"@floating-ui/dom": "^1.6.1",
+				"@floating-ui/utils": "^0.2.1",
+				"vue-demi": ">=0.13.0"
+			},
+			"dependencies": {
+				"vue-demi": {
+					"version": "0.14.10",
+					"resolved": "https://registry.npmjs.org/vue-demi/-/vue-demi-0.14.10.tgz",
+					"integrity": "sha512-nMZBOwuzabUO0nLgIcc6rycZEebF6eeUfaiQx9+WSk8e29IbLvPU9feI6tqW4kTo3hvoYAJkMh8n8D0fuISphg==",
+					"requires": {}
+				}
+			}
+		},
 		"@hapi/hoek": {
 			"version": "9.3.0",
 			"resolved": "https://registry.npmjs.org/@hapi/hoek/-/hoek-9.3.0.tgz",
@@ -16884,6 +17017,25 @@
 				"tsconfig": "^7.0.0"
 			}
 		},
+		"@wikimedia/codex": {
+			"version": "1.12.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex/-/codex-1.12.0.tgz",
+			"integrity": "sha512-tqevWQFnVEunvElPQ+adHHU2WPfNVkDw0JAfQk90uVb1haoF1XwaXwpF4/mU5WqcX97FT+j7mHjXwgm19uwWLQ==",
+			"requires": {
+				"@floating-ui/vue": "1.0.6",
+				"@wikimedia/codex-icons": "1.12.0"
+			}
+		},
+		"@wikimedia/codex-design-tokens": {
+			"version": "1.12.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-design-tokens/-/codex-design-tokens-1.12.0.tgz",
+			"integrity": "sha512-b4hB4Dz16zs7bccU2Ezu3CVD82BH6xNIn7bV0EZsDBcY9s31wi1vNDB/4yqFLhY/SR5td18PgmceLPnqF33M5Q=="
+		},
+		"@wikimedia/codex-icons": {
+			"version": "1.12.0",
+			"resolved": "https://registry.npmjs.org/@wikimedia/codex-icons/-/codex-icons-1.12.0.tgz",
+			"integrity": "sha512-HkTIA/cpCF9dNLaK6QaVuqFFEqeJHPafuGclzjei9oeNCUPox+vWOxuORUTjNlLJgh5MN1n9SuuEbifskvsXKA=="
+		},
 		"@wmde/eslint-config-wikimedia-typescript": {
 			"version": "0.2.12",
 			"resolved": "https://registry.npmjs.org/@wmde/eslint-config-wikimedia-typescript/-/eslint-config-wikimedia-typescript-0.2.12.tgz",
diff --git a/package.json b/package.json
index 27adfa88..61efcde8 100644
--- a/package.json
+++ b/package.json
@@ -43,6 +43,8 @@
 		"node": ">=16"
 	},
 	"dependencies": {
+		"@wikimedia/codex": "^1.12.0",
+		"@wikimedia/codex-design-tokens": "^1.12.0",
 		"@wmde/wikibase-datamodel-types": "^0.2.0",
 		"@wmde/wikit-tokens": "^3.0.0-alpha.12",
 		"@wmde/wikit-vue-components": "^3.0.0-alpha.12",
diff --git a/vite.config.ts b/vite.config.ts
index 003e3b5e..11cf4453 100644
--- a/vite.config.ts
+++ b/vite.config.ts
@@ -21,7 +21,7 @@ function getBuildConfig( isAppBuild: boolean ): BuildOptions {
 			formats: [ 'cjs' ],
 		},
 		rollupOptions: {
-			external: [ 'vue', 'vuex' ],
+			external: [ 'vue', 'vuex', '@wikimedia/codex' ],
 		},
 	};
 }