diff --git a/web/src/ApplicationEditPage.js b/web/src/ApplicationEditPage.js
index 984f1be3..e9d3b274 100644
--- a/web/src/ApplicationEditPage.js
+++ b/web/src/ApplicationEditPage.js
@@ -764,7 +764,7 @@ class ApplicationEditPage extends React.Component {
   }
 
   renderSignupSigninPreview() {
-    const themeData = this.state.application.themeData;
+    const themeData = this.state.application.themeData ?? Setting.ThemeDefault;
     let signUpUrl = `/signup/${this.state.application.name}`;
     const signInUrl = `/login/oauth/authorize?client_id=${this.state.application.clientId}&response_type=code&redirect_uri=${this.state.application.redirectUris[0]}&scope=read&state=casdoor`;
     const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "97%", width: "100%", background: "rgba(0,0,0,0.4)"};
@@ -835,7 +835,7 @@ class ApplicationEditPage extends React.Component {
   }
 
   renderPromptPreview() {
-    const themeData = this.state.application.themeData;
+    const themeData = this.state.application.themeData ?? Setting.ThemeDefault;
     const promptUrl = `/prompt/${this.state.application.name}`;
     const maskStyle = {position: "absolute", top: "0px", left: "0px", zIndex: 10, height: "100%", width: "100%", background: "rgba(0,0,0,0.4)"};
     return (
diff --git a/web/src/SelectLanguageBox.js b/web/src/SelectLanguageBox.js
index 69001a05..c63590e9 100644
--- a/web/src/SelectLanguageBox.js
+++ b/web/src/SelectLanguageBox.js
@@ -55,8 +55,8 @@ class SelectLanguageBox extends React.Component {
 
     return (
       <Dropdown menu={{items: languageItems, onClick}} >
-        <div className="select-box" style={{display: languageItems.length === 0 ? "none" : null}} >
-          <GlobalOutlined style={{fontSize: "24px"}} />
+        <div className="select-box" style={{display: languageItems.length === 0 ? "none" : null, ...this.props.style}} >
+          <GlobalOutlined style={{fontSize: "24px", color: "#4d4d4d"}} />
         </div>
       </Dropdown>
     );
diff --git a/web/src/SelectThemeBox.js b/web/src/SelectThemeBox.js
index c0cdd1ea..ea500786 100644
--- a/web/src/SelectThemeBox.js
+++ b/web/src/SelectThemeBox.js
@@ -21,9 +21,9 @@ import {CheckOutlined} from "@ant-design/icons";
 import {CompactTheme, DarkTheme, Light} from "antd-token-previewer/es/icons";
 
 export const Themes = [
-  {label: "Default", key: "default", icon: <Light style={{fontSize: "24px"}} />},        // i18next.t("theme:Default")
-  {label: "Dark", key: "dark", icon: <DarkTheme style={{fontSize: "24px"}} />},          // i18next.t("theme:Dark")
-  {label: "Compact", key: "compact", icon: <CompactTheme style={{fontSize: "24px"}} />}, // i18next.t("theme:Compact")
+  {label: "Default", key: "default", icon: <Light style={{fontSize: "24px", color: "#4d4d4d"}} />},        // i18next.t("theme:Default")
+  {label: "Dark", key: "dark", icon: <DarkTheme style={{fontSize: "24px", color: "#4d4d4d"}} />},          // i18next.t("theme:Dark")
+  {label: "Compact", key: "compact", icon: <CompactTheme style={{fontSize: "24px", color: "#4d4d4d"}} />}, // i18next.t("theme:Compact")
 ];
 
 function getIcon(themeKey) {
@@ -82,8 +82,7 @@ class SelectThemeBox extends React.Component {
         selectable: true,
         multiple: true,
         selectedKeys: [...this.props.themeAlgorithm],
-      }}
-      trigger={["click"]}>
+      }}>
         <div className="select-box">
           {this.icon}
         </div>