diff --git a/src/components/icon-font/index.tsx b/src/components/icon-font/index.tsx
index 2c4fbc7b..6e45f38e 100644
--- a/src/components/icon-font/index.tsx
+++ b/src/components/icon-font/index.tsx
@@ -1,8 +1,8 @@
 import { createFromIconfontCN } from '@ant-design/icons';
-import './iconfont/iconfont.js';
+// import './iconfont/iconfont.js';
 
 const IconFont = createFromIconfontCN({
-  scriptUrl: ''
+  scriptUrl: '//at.alicdn.com/t/c/font_4613488_ivhneql6a1f.js'
 });
 
 export default IconFont;
diff --git a/src/components/theme-toggle/theme-drop-actions.tsx b/src/components/theme-toggle/theme-drop-actions.tsx
new file mode 100644
index 00000000..243600a2
--- /dev/null
+++ b/src/components/theme-toggle/theme-drop-actions.tsx
@@ -0,0 +1,71 @@
+import useUserSettings from '@/hooks/use-user-settings';
+import { MoonOutlined, SunOutlined } from '@ant-design/icons';
+import { useIntl } from '@umijs/max';
+import { Dropdown } from 'antd';
+import { createStyles } from 'antd-style';
+import IconFont from '../icon-font';
+
+const useStyles = createStyles(({ token, css }) => ({
+  inner: css`
+    display: flex;
+    align-items: center;
+    cursor: pointer;
+    color: ${token.colorText};
+    font-size: var(--font-size-base);
+    padding: 0 8px;
+    &:hover {
+      color: ${token.colorTextTertiary};
+    }
+    .anticon {
+      font-size: 16px;
+    }
+    .icon-auto {
+      font-size: 20px;
+    }
+  `
+}));
+
+const ThemeDropActions = () => {
+  const { setTheme, userSettings } = useUserSettings();
+  const { styles } = useStyles();
+  const intl = useIntl();
+
+  const ThemeOptions = [
+    {
+      key: 'light',
+      label: intl.formatMessage({ id: 'common.appearance.light' }),
+      icon: <SunOutlined />
+    },
+    {
+      key: 'realDark',
+      label: intl.formatMessage({ id: 'common.appearance.dark' }),
+      icon: <MoonOutlined />
+    },
+    {
+      key: 'auto',
+      label: intl.formatMessage({ id: 'common.appearance.system' }),
+      icon: <IconFont type="icon-dark_theme" className="icon-auto"></IconFont>
+    }
+  ];
+
+  const handleOnChange = (item: any) => {
+    const value = item.key as 'light' | 'realDark' | 'auto';
+    setTheme(value);
+  };
+
+  return (
+    <Dropdown menu={{ items: ThemeOptions, onClick: handleOnChange }}>
+      <div className={styles.inner}>
+        {userSettings.mode === 'auto' ? (
+          <IconFont type="icon-dark_theme" className="icon-auto"></IconFont>
+        ) : userSettings.mode === 'realDark' ? (
+          <MoonOutlined />
+        ) : (
+          <SunOutlined />
+        )}
+      </div>
+    </Dropdown>
+  );
+};
+
+export default ThemeDropActions;
diff --git a/src/pages/login/components/login-form.tsx b/src/pages/login/components/login-form.tsx
index bb70085c..e2843b42 100644
--- a/src/pages/login/components/login-form.tsx
+++ b/src/pages/login/components/login-form.tsx
@@ -2,7 +2,7 @@ import LogoIcon from '@/assets/images/gpustack-logo.png';
 import { initialPasswordAtom, userAtom } from '@/atoms/user';
 import LangSelect from '@/components/lang-select';
 import SealInput from '@/components/seal-form/seal-input';
-import ThemeToggle from '@/components/theme-toggle';
+import ThemeDropActions from '@/components/theme-toggle/theme-drop-actions';
 import externalLinks from '@/constants/external-links';
 import {
   CRYPT_TEXT,
@@ -30,6 +30,7 @@ const useStyles = createStyles(({ token, css }) => ({
     position: fixed;
     right: 0;
     top: 0;
+    height: 60px;
     padding: 20px;
     .anticon-global {
       color: ${token.colorText};
@@ -153,7 +154,7 @@ const LoginForm = () => {
   return (
     <div>
       <div className={styles.header}>
-        <ThemeToggle></ThemeToggle>
+        <ThemeDropActions></ThemeDropActions>
         <LangSelect />
       </div>
       <div>
diff --git a/src/pages/profile/components/appearance.tsx b/src/pages/profile/components/appearance.tsx
index 21b65a51..3150ea1f 100644
--- a/src/pages/profile/components/appearance.tsx
+++ b/src/pages/profile/components/appearance.tsx
@@ -2,7 +2,7 @@ import useUserSettings from '@/hooks/use-user-settings';
 import { MoonOutlined, SunOutlined } from '@ant-design/icons';
 import { useIntl } from '@umijs/max';
 import { Select } from 'antd';
-import React, { useMemo } from 'react';
+import React from 'react';
 import styled from 'styled-components';
 
 const Wrapper = styled.div`
@@ -56,10 +56,6 @@ const Appearance: React.FC = () => {
     setTheme(value);
   };
 
-  const theme = useMemo(() => {
-    return userSettings?.theme || 'auto';
-  }, [userSettings?.theme]);
-
   return (
     <Wrapper>
       <div className="theme">