diff --git a/package.json b/package.json
index c337e178..d31f3fab 100644
--- a/package.json
+++ b/package.json
@@ -120,7 +120,6 @@
   },
   "devDependencies": {
     "@babel/core": "^7.20.7",
-    "@babel/plugin-proposal-private-property-in-object": "^7.20.5",
     "@commitlint/cli": "^17.3.0",
     "@commitlint/config-conventional": "^17.3.0",
     "@types/emoji-mart": "^3.0.9",
diff --git a/public/locales/en/setting.json b/public/locales/en/setting.json
index 6ea0288d..5e4511be 100644
--- a/public/locales/en/setting.json
+++ b/public/locales/en/setting.json
@@ -126,6 +126,9 @@
     "1_week": "1 week"
   },
   "firebase": {
+    "disable": "Disable",
+    "use_official": "Use Official Configuration",
+    "custom": "Custom",
     "enable": "Enable",
     "token_url": "Token Url",
     "project_id": "Project ID",
diff --git a/public/locales/zh/setting.json b/public/locales/zh/setting.json
index 4649e46c..e320332a 100644
--- a/public/locales/zh/setting.json
+++ b/public/locales/zh/setting.json
@@ -124,6 +124,9 @@
     "1_week": "1 周"
   },
   "firebase": {
+    "disable": "禁用",
+    "use_official": "使用官方配置",
+    "custom": "自定义",
     "enable": "开启",
     "token_url": "Token 地址",
     "project_id": "项目 ID",
diff --git a/src/common/component/QRCode.tsx b/src/common/component/QRCode.tsx
index 7c93eecc..96d0e69e 100644
--- a/src/common/component/QRCode.tsx
+++ b/src/common/component/QRCode.tsx
@@ -20,9 +20,8 @@ const QRCode = ({ link }: Props) => {
                 src: logo,
                 x: undefined,
                 y: undefined,
-                height: 28,
-                width: 28,
-
+                height: 80,
+                width: 80,
                 excavate: true,
             }} />
     );
diff --git a/src/common/component/styled/Label.tsx b/src/common/component/styled/Label.tsx
index 4ea491db..44404fc9 100644
--- a/src/common/component/styled/Label.tsx
+++ b/src/common/component/styled/Label.tsx
@@ -1,10 +1,9 @@
-import styled from "styled-components";
-
-const StyledLabel = styled.label`
-  font-weight: 500;
-  font-size: 14px;
-  line-height: 20px;
-  color: #6b7280;
-`;
+import { LabelHTMLAttributes, ReactNode } from "react";
 
+type Props = LabelHTMLAttributes<HTMLLabelElement> & { children?: ReactNode }
+const StyledLabel = ({ children, className = '', ...rest }: Props) => {
+  return <label className={`text-gray-500 text-sm ${className}`} {...rest}>
+    {children}
+  </label>;
+};
 export default StyledLabel;
diff --git a/src/common/component/styled/Textarea.tsx b/src/common/component/styled/Textarea.tsx
index c30d06f9..071b0f37 100644
--- a/src/common/component/styled/Textarea.tsx
+++ b/src/common/component/styled/Textarea.tsx
@@ -1,25 +1,7 @@
-import styled from "styled-components";
-
-const StyledTextarea = styled.textarea`
-  font-family: inherit;
-  width: 100%;
-  background: #ffffff;
-  border: 1px solid #e5e7eb;
-  box-shadow: 0 1px 2px rgba(31, 41, 55, 0.08);
-  border-radius: 4px;
-  font-weight: normal;
-  font-size: 14px;
-  line-height: 20px;
-  padding: 8px;
-  color: #333;
-  resize: unset;
-  &:disabled {
-    color: #78787c;
-    background-color: #f9fafb;
-  }
-  &::placeholder {
-    color: #d1d5db;
-  }
-`;
+import { TextareaHTMLAttributes } from "react";
 
+type Props = TextareaHTMLAttributes<HTMLTextAreaElement>
+const StyledTextarea = ({ className, ...rest }: Props) => {
+  return <textarea className={`rounded text-sm p-2 bg-white text-gray-700 resize-none w-full shadow border border-solid disabled:bg-[#f9fafb] disabled:text-gray-400 disabled:pointer-events-none placeholder:text-gray-400 ${className}`} {...rest}></textarea>;
+};
 export default StyledTextarea;
diff --git a/src/routes/setting/config/Firebase.tsx b/src/routes/setting/config/Firebase.tsx
index 9f0cd909..9bffc74c 100644
--- a/src/routes/setting/config/Firebase.tsx
+++ b/src/routes/setting/config/Firebase.tsx
@@ -15,14 +15,14 @@ interface IOptions {
   official: string,
   custom: string
 }
-const Options: IOptions = {
-  disable: "Disable",
-  official: "Use Official Configuration",
-  custom: "Custom"
-};
 export default function ConfigFirebase() {
   const { values, setValues, updateConfig, changed, reset } = useConfig("firebase");
   const { t } = useTranslation("setting");
+  const Options: IOptions = {
+    disable: t("firebase.disable"),
+    official: t("firebase.use_official"),
+    custom: t("firebase.custom")
+  };
   let select: keyof IOptions | "" = "";
   if (values) {
     const {
diff --git a/yarn.lock b/yarn.lock
index 376a402a..0608def6 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -497,7 +497,7 @@
     "@babel/helper-create-class-features-plugin" "^7.18.6"
     "@babel/helper-plugin-utils" "^7.18.6"
 
-"@babel/plugin-proposal-private-property-in-object@^7.18.6", "@babel/plugin-proposal-private-property-in-object@^7.20.5":
+"@babel/plugin-proposal-private-property-in-object@^7.18.6":
   version "7.20.5"
   resolved "https://mirrors.cloud.tencent.com/npm/@babel%2fplugin-proposal-private-property-in-object/-/plugin-proposal-private-property-in-object-7.20.5.tgz#309c7668f2263f1c711aa399b5a9a6291eef6135"
   integrity sha512-Vq7b9dUA12ByzB4EjQTPo25sFhY+08pQDBSZRtUAkj7lb7jahaHR5igera16QZ+3my1nYR4dKsNdYj5IjPHilQ==