diff --git a/frontend/.eslintrc.json b/frontend/.eslintrc.json
new file mode 100644
index 00000000..fc718a97
--- /dev/null
+++ b/frontend/.eslintrc.json
@@ -0,0 +1,34 @@
+{
+  "env": {
+    "browser": true,
+    "es2021": true,
+    "node": true
+  },
+  "extends": [
+    "eslint:recommended",
+    "plugin:react/recommended",
+    "plugin:@typescript-eslint/recommended",
+    "prettier"
+  ],
+  "parser": "@typescript-eslint/parser",
+  "parserOptions": {
+    "ecmaFeatures": {
+      "jsx": true
+    },
+    "ecmaVersion": "latest",
+    "sourceType": "module"
+  },
+  "plugins": ["react", "@typescript-eslint", "prettier"],
+  "rules": {
+    "react/react-in-jsx-scope": "off",
+    "prettier/prettier": "error",
+    "@typescript-eslint/no-explicit-any": "warn",
+    "no-unused-vars": "off",
+    "@typescript-eslint/no-unused-vars": ["warn"]
+  },
+  "settings": {
+    "react": {
+      "version": "detect"
+    }
+  }
+}
diff --git a/frontend/.prettierrc.json b/frontend/.prettierrc.json
new file mode 100644
index 00000000..0260651f
--- /dev/null
+++ b/frontend/.prettierrc.json
@@ -0,0 +1,10 @@
+{
+  "semi": true,
+  "singleQuote": true,
+  "trailingComma": "es5",
+  "tabWidth": 2,
+  "printWidth": 100,
+  "bracketSpacing": true,
+  "arrowParens": "avoid",
+  "jsxSingleQuote": false
+}
diff --git a/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx b/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx
index b03f0a81..49cf8308 100644
--- a/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx
+++ b/frontend/packages/common/src/components/aoplatform/LanguageSetting.tsx
@@ -4,69 +4,88 @@ import { memo, useEffect, useMemo } from 'react';
 import { useGlobalContext } from '@common/contexts/GlobalStateContext';
 import { Icon } from '@iconify/react/dist/iconify.js';
 
-const LanguageSetting = ({mode = 'light'}:{mode?:'dark'|'light'}) => {
-    const { dispatch,state} = useGlobalContext()
-    const items = [
-      {
-        key: 'en-US',
-        label:<Button key="en" type="text" className="border-none p-0 flex items-center bg-transparent ">
-         English
-      </Button>,
-      title:'English'
-      },
-      {
-        key: 'ja-JP',
-        label: <Button key="jp" type="text" className="border-none p-0 flex items-center bg-transparent ">
+const LanguageSetting = ({ mode = 'light' }: { mode?: 'dark' | 'light' }) => {
+  const { dispatch, state } = useGlobalContext();
+  const items = [
+    {
+      key: 'en-US',
+      label: (
+        <Button key="en" type="text" className="flex items-center p-0 bg-transparent border-none">
+          English
+        </Button>
+      ),
+      title: 'English',
+    },
+    {
+      key: 'ja-JP',
+      label: (
+        <Button key="jp" type="text" className="flex items-center p-0 bg-transparent border-none">
           日本語
-        </Button>,
-        title: '日本語',
-      },
-      {
-        key: 'zh-TW',
-        label: <Button key="tw" type="text" className="border-none p-0 flex items-center bg-transparent ">
-           繁體中文
-        </Button>,
-        title: '繁體中文',
-      },
-      {
-        key: 'zh-CN',
-        label: <Button key="cn" type="text" className="border-none p-0 flex items-center bg-transparent ">
-            简体中文
-        </Button>,
-        title: '简体中文',
-      },
+        </Button>
+      ),
+      title: '日本語',
+    },
+    {
+      key: 'zh-TW',
+      label: (
+        <Button key="tw" type="text" className="flex items-center p-0 bg-transparent border-none">
+          繁體中文
+        </Button>
+      ),
+      title: '繁體中文',
+    },
+    {
+      key: 'zh-CN',
+      label: (
+        <Button key="cn" type="text" className="flex items-center p-0 bg-transparent border-none">
+          简体中文
+        </Button>
+      ),
+      title: '简体中文',
+    },
   ];
 
-  const langLabel = useMemo(()=>items.find((item) => item?.key === state.language)?.title,[state.language])
+  const langLabel = useMemo(
+    () => items.find(item => item?.key === state.language)?.title,
+    [state.language]
+  );
 
-  useEffect(()=>{
-    const savedLang = sessionStorage.getItem('i18nextLng') 
-    const browserLang = navigator.language || navigator.userLanguage
-    if(savedLang){
-       dispatch({ type: 'UPDATE_LANGUAGE',  language: savedLang });
-    }else{
-      dispatch({ type: 'UPDATE_LANGUAGE',  language: browserLang });
-    }
-  },[
-  ])
+  useEffect(() => {
+    const savedLang = sessionStorage.getItem('i18nextLng');
+    const browserLang = navigator.language || navigator.userLanguage;
+    if (savedLang) return;
+
+    dispatch({ type: 'UPDATE_LANGUAGE', language: browserLang });
+  }, []);
   return (
     <Dropdown
       trigger={['hover']}
       menu={{
         items,
-        style:{minWidth:'80px'},
-        onClick: (e) => {
+        style: { minWidth: '80px' },
+        onClick: e => {
           const { key } = e;
-          dispatch({ type: 'UPDATE_LANGUAGE',  language: key  });
+          dispatch({ type: 'UPDATE_LANGUAGE', language: key });
           i18n.changeLanguage(key);
-        }
+        },
       }}
     >
-       <Button  className={`border-none ${mode==='dark' ? "text-[#333] hover:text-[#333333b3]" : "text-[#ffffffb3] hover:text-[#fff] "}`}  type="default" ghost >
-          <span className='flex items-center gap-[8px]'> <Icon icon="ic:baseline-language" width="14" height="14"/>{langLabel}</span>
-        </Button> 
+      <Button
+        className={`border-none ${
+          mode === 'dark'
+            ? 'text-[#333] hover:text-[#333333b3]'
+            : 'text-[#ffffffb3] hover:text-[#fff] '
+        }`}
+        type="default"
+        ghost
+      >
+        <span className="flex items-center gap-[8px]">
+          {' '}
+          <Icon icon="ic:baseline-language" width="14" height="14" />
+          {langLabel}
+        </span>
+      </Button>
     </Dropdown>
   );
 };
 export default memo(LanguageSetting);
-