diff --git a/components/playgroundEditor/LiveCodes.tsx b/components/playgroundEditor/LiveCodes.tsx
index 493922a8..5ab6d757 100644
--- a/components/playgroundEditor/LiveCodes.tsx
+++ b/components/playgroundEditor/LiveCodes.tsx
@@ -3,6 +3,7 @@ import type { Config, Playground } from "livecodes";
 import LiveCodesPlayground from "livecodes/react";
 import { luaTestRunner, type Language } from "lib/playground/livecodes";
 import { useDarkTheme } from "hooks/darkTheme";
+import { useRouter } from "next/router";
 
 export default function LiveCodes({
   language,
@@ -15,6 +16,14 @@ export default function LiveCodes({
 }) {
   const [playground, setPlayground] = useState<Playground | undefined>();
   const [darkTheme] = useDarkTheme();
+  const { locale } = useRouter();
+
+  const getLanguageFromLocale = (locale_: string | undefined) =>
+    !locale_
+      ? "en"
+      : locale_ === "zh_Hans"
+      ? "zh-CN"
+      : (locale_.split("_")[0] as Config["appLanguage"]);
 
   const onReady = (sdk: Playground) => {
     setPlayground(sdk);
@@ -31,6 +40,7 @@ export default function LiveCodes({
   }, [playground, darkTheme]);
 
   const baseConfig: Partial<Config> = {
+    appLanguage: getLanguageFromLocale(locale),
     autoupdate: true,
     languages: [language === "jupyter" ? "python-wasm" : language],
     script: {
@@ -42,6 +52,7 @@ export default function LiveCodes({
       active: "console",
       status: "full",
     },
+    themeColor: "hsl(205, 17%, 50%)", // the original theme color is "#3a4852" which is "hsl(205, 17%, 27%)"
   };
 
   const getJSTSConfig = (
@@ -223,7 +234,7 @@ ${test.replace(pattern, "\n")}`.trimStart();
 
   return (
     <LiveCodesPlayground
-      appUrl="https://v34.livecodes.io/"
+      appUrl="https://v39.livecodes.io/"
       loading="eager"
       config={config}
       style={{ borderRadius: "0", resize: "none" }}
diff --git a/package.json b/package.json
index 0f993957..00b18eb6 100644
--- a/package.json
+++ b/package.json
@@ -35,7 +35,7 @@
     "highlight.js": "^11.5.1",
     "iframe-resizer-react": "^1.1.0",
     "katex": "^0.13.24",
-    "livecodes": "0.6.0",
+    "livecodes": "0.7.2",
     "marked": "^4.0.17",
     "next": "^12.1.0",
     "next-i18next": "^8.10.0",
diff --git a/yarn.lock b/yarn.lock
index 913a7f0c..53bb9310 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2996,10 +2996,10 @@ levn@~0.3.0:
     prelude-ls "~1.1.2"
     type-check "~0.3.2"
 
-livecodes@0.6.0:
-  version "0.6.0"
-  resolved "https://registry.yarnpkg.com/livecodes/-/livecodes-0.6.0.tgz#3ad0d4361f6615cea62b8d40acfa33a892d1542f"
-  integrity sha512-nUqS6yy3NAKhVw+wt6yLKiqKSNbpbaJddI+KgtpMeQuIclBZbvhXK/enF8w/vQfxODPf5tmXkq765DIDxwTLTA==
+livecodes@0.7.2:
+  version "0.7.2"
+  resolved "https://registry.yarnpkg.com/livecodes/-/livecodes-0.7.2.tgz#117bea6a171e677a49958dc52d21e96ca6aa8bea"
+  integrity sha512-9u8s+/mOztX6Ll1ru1Tpv2V8Ctb5TRprxXxyhl4U71nUPQIgaGt5ZiwTdRg4HofPiEKsdC1drTnAi9gNL3XRhA==
 
 locate-path@^2.0.0:
   version "2.0.0"