diff --git a/src/components/gui/gui.jsx b/src/components/gui/gui.jsx
index f48e5a6ec33..94eca3035b0 100644
--- a/src/components/gui/gui.jsx
+++ b/src/components/gui/gui.jsx
@@ -31,6 +31,8 @@ import DragLayer from '../../containers/drag-layer.jsx';
 import ConnectionModal from '../../containers/connection-modal.jsx';
 import TelemetryModal from '../telemetry-modal/telemetry-modal.jsx';
 
+import Header from '../header/header.jsx';
+
 import layout, {STAGE_SIZE_MODES} from '../../lib/layout-constants';
 import {resolveStageSize} from '../../lib/screen-utils';
 import {themeMap} from '../../lib/themes';
@@ -165,6 +167,11 @@ const GUIComponent = props => {
                 dir={isRtl ? 'rtl' : 'ltr'}
                 {...componentProps}
             >
+
+                <Header 
+                    title="scratch少儿编程大师" 
+                    logo='../../../static/logo.png'
+                />
                 {telemetryModalVisible ? (
                     <TelemetryModal
                         isRtl={isRtl}
diff --git a/src/components/header/header.css b/src/components/header/header.css
new file mode 100644
index 00000000000..afe67a65cca
--- /dev/null
+++ b/src/components/header/header.css
@@ -0,0 +1,89 @@
+@import "../../css/colors.css";
+@import "../../css/units.css";
+@import "../../css/z-index.css";
+
+.menu-bar {
+    display: flex;
+    flex-direction: row;
+    justify-content: space-between;
+    align-items: center;
+    flex-wrap: nowrap;
+
+    /*
+        For most things, we shouldn't explicitly set height, and let the
+        content push the element to whatever fits. Using a fixed height
+        instead, will help us subtract the value we assign from the body,
+        adding up to a perfect 100%. This means we don't need to set
+        overflow: hidden, which makes it hard to debug. border-box
+        simplifies by all of this by removing padding from the equation.
+    */
+    box-sizing: border-box;
+    height:  3rem;
+
+    /*
+        @todo: This adds ~20px in Chrome, when scrolling to the right,
+        but fixes [FFx + Safari] [resize window down + scroll to the right] bug.
+        width: 100%;
+    */
+    font-family:Cambria, Cochin, Georgia, Times, 'Times New Roman', serif;
+    font-size: 1.2rem;
+    font-weight: bold;
+    background-color: #f5f5f5;
+    color: #000;
+}
+.main-menu {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-start;
+    flex-wrap: nowrap;
+    align-items: center;
+    padding: 0 1rem;
+}
+.menu-bar-item{
+    margin-right: 0.5rem;
+}
+.scratch-logo {
+    height:  2rem;
+    vertical-align: middle;
+}
+.menuBarItemTime{
+    margin: 0.5rem 0;
+    display: flex;
+    flex-direction: row;
+    padding: 0.3rem 1.5rem;
+    align-items: center;
+    color: #fff;
+    background: linear-gradient(to right,#f79c48,#f3674e);
+    border-radius: 1.5rem;
+}
+.menuBarItemButton{
+    margin: 0.5rem 0;
+    display: flex;
+    padding: 0.5rem 1.5rem;
+    align-items: center;
+    color: #726e67;
+    background: linear-gradient(to right,#e6cab0,rgb(235,198,154));
+    border: 0 solid #c4a384;
+    border-radius: 1.5rem;
+}
+.memberIcon{
+    margin-right: 0.5rem;
+    width: 1.2rem;
+    height: 1.2rem;
+}
+.memberTimeinfo{
+    color: #f79c48;
+    margin-left: 0.5rem;
+    background: rgb(255, 230, 215);
+    border-radius: 0.5rem;
+    padding: 0.1rem 0.5rem;
+    font-size: 1.2rem;
+}
+.memberTimeButton{
+    color: #f7ab64;
+    background: rgb(255, 230, 215);
+    margin-left: 0.5rem;
+    border-radius: 0.5rem;
+    padding: 0.1rem 0.5rem;
+    font-size: 1.2rem;
+}
\ No newline at end of file
diff --git a/src/components/header/header.jsx b/src/components/header/header.jsx
new file mode 100644
index 00000000000..05d72db9f6c
--- /dev/null
+++ b/src/components/header/header.jsx
@@ -0,0 +1,82 @@
+import React from 'react';
+import classNames from 'classnames';
+import PropTypes from 'prop-types';
+import styles from './header.css';
+import Box from '../box/box.jsx';
+
+import memBer from './image/member1.svg';
+
+class Header extends React.Component {
+    constructor(props) {
+        super(props);
+        this.state = {
+            timeLeft: 600 // 初始时间为1小时（3600秒）
+        };
+        this.timer = null;
+    }
+
+    componentDidMount() {
+        this.timer = setInterval(() => {
+            this.setState(prevState => ({
+                timeLeft: prevState.timeLeft > 0 ? prevState.timeLeft - 1 : 0
+            }));
+        }, 1000);
+    }
+
+    componentWillUnmount() {
+        clearInterval(this.timer);
+    }
+
+    formatTime(seconds) {
+        const h = String(Math.floor(seconds / 3600)).padStart(2, '0');
+        const m = String(Math.floor((seconds % 3600) / 60)).padStart(2, '0');
+        const s = String(seconds % 60).padStart(2, '0');
+        return `${h}:${m}:${s}`;
+    }
+
+    render() {
+        const { timeLeft } = this.state;
+        const { logo, title } = this.props;
+
+        return (
+            <Box className={classNames(styles.menuBar)}>
+                <div className={styles.mainMenu}>
+                    <div className={styles.menuBarItem}>
+                        <img
+                            id="logo_img"
+                            alt="Scratch"
+                            className={classNames(styles.scratchLogo)}
+                            src={logo}
+                        />
+                    </div>
+                    <div>{title}</div>
+                </div>
+                <div className={styles.menuBarItemTime}>
+                    {timeLeft > 0 ? (
+                        <>
+                            <div>您已获得会员体验权限，您的体验时间剩余：</div>
+                            <div className={styles.memberTimeinfo}>{this.formatTime(timeLeft)}</div>
+                        </>
+                    ) : (
+                        <>
+                            <div>您的会员体验时间已用尽，成为会员 </div>
+                            <div className={styles.memberTimeButton}>立即解锁所有功能</div>
+                        </>
+                    )}
+                </div>
+                <div className={styles.menuBarItem}>
+                    <button className={styles.menuBarItemButton}>
+                        <img src={memBer} alt="member" className={styles.memberIcon} />开通会员
+                    </button>
+                </div>
+            </Box>
+        );
+    }
+}
+
+Header.propTypes = {
+    title: PropTypes.string.isRequired,
+    logo: PropTypes.string.isRequired,
+};
+
+export default Header;
\ No newline at end of file
diff --git a/src/components/header/image/member.svg b/src/components/header/image/member.svg
new file mode 100644
index 00000000000..93183d53e87
--- /dev/null
+++ b/src/components/header/image/member.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742177695998" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2954" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M60.235294 361.411765l744.809412 425.622588A30.117647 30.117647 0 0 1 790.136471 843.294118H173.658353a60.235294 60.235294 0 0 1-59.783529-52.766118L60.235294 361.411765z" fill="#F5C164" p-id="2955"></path><path d="M963.764706 361.411765l-53.63953 429.116235A60.235294 60.235294 0 0 1 850.341647 843.294118H233.893647a30.117647 30.117647 0 0 1-14.968471-56.259765L963.764706 361.411765z" fill="#F5C164" p-id="2956"></path><path d="M512 240.941176l331.053176 509.289412A60.235294 60.235294 0 0 1 792.545882 843.294118H231.454118a60.235294 60.235294 0 0 1-50.507294-93.06353L512 240.941176z" fill="#FFE09E" p-id="2957"></path><path d="M512 240.941176l331.053176 509.289412A60.235294 60.235294 0 0 1 792.545882 843.294118H512V240.941176z" fill="#F9CF7E" p-id="2958"></path><path d="M512 210.823529m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#FFE19F" p-id="2959"></path><path d="M963.764706 331.294118m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#FFE19F" p-id="2960"></path><path d="M60.235294 331.294118m-60.235294 0a60.235294 60.235294 0 1 0 120.470588 0 60.235294 60.235294 0 1 0-120.470588 0Z" fill="#FFE19F" p-id="2961"></path></svg>
\ No newline at end of file
diff --git a/src/components/header/image/member1.svg b/src/components/header/image/member1.svg
new file mode 100644
index 00000000000..de749a32289
--- /dev/null
+++ b/src/components/header/image/member1.svg
@@ -0,0 +1 @@
+<?xml version="1.0" standalone="no"?><!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd"><svg t="1742184066828" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="10018" xmlns:xlink="http://www.w3.org/1999/xlink" width="200" height="200"><path d="M688.3 199.5c7.5 0 16.5 4.5 21.3 10.6l0.2 0.3 0.2 0.3 174.7 217.6c8.5 11.1 7.2 27.8-3.1 39.2L535 841.2l-0.1 0.1-0.1 0.1c-4.2 4.6-10.7 7.4-19.3 8.2h-0.6c-6.3 0-13.5-2.7-18.7-7l-2.6-2.6L140 465.8c-9.4-10.6-10.5-26.5-2.4-36.3l0.3-0.4 0.3-0.4 175-218v-0.2c5.9-7.3 13.2-11.1 21.7-11.1h353.4m0-67.9H335c-28.6 0-55.7 12.7-74.8 36.6l-175 218C55 422.7 58.1 476.8 90 511.9l354.9 375.6 4.8 4.8c17.5 15.9 41.4 25.5 65.2 25.5h3.2c25.5-1.6 49.3-11.1 66.8-30.2l346.9-374c33.4-36.6 35-90.7 6.4-127.3l-175-218c-17.6-22.5-46.3-36.8-74.9-36.8z" fill="#b0a48e" p-id="10019"></path><path d="M320.6 437.8c-7.7 0-15.4 2.8-22.1 8.8-12.7 11.1-12.7 31.8-1.6 44.6l171.9 181.4 3.2 3.2c12.1 11.4 27.5 16.9 43 16.9 17.1 0 34.4-6.8 47.7-20.1l165.5-179.8c11.1-12.7 11.1-33.4-1.6-44.6-6.4-5-13.9-7.4-21.2-7.4-9 0-17.9 3.6-24.9 10.6L523.6 618.7c-2.4 2.5-5.6 3.8-8.8 3.8-3.2 0-6.3-1.2-8.7-3.7L344.6 448.2c-6.8-6.8-15.3-10.4-24-10.4z" fill="#b0a48e" p-id="10020"></path></svg>
\ No newline at end of file
diff --git a/src/components/menu-bar/menu-bar.jsx b/src/components/menu-bar/menu-bar.jsx
index ab3081775ad..b6525584b2f 100644
--- a/src/components/menu-bar/menu-bar.jsx
+++ b/src/components/menu-bar/menu-bar.jsx
@@ -424,18 +424,6 @@ class MenuBar extends React.Component {
             >
                 <div className={styles.mainMenu}>
                     <div className={styles.fileGroup}>
-                        <div className={classNames(styles.menuBarItem)}>
-                            <img
-                                id="logo_img"
-                                alt="Scratch"
-                                className={classNames(styles.scratchLogo, {
-                                    [styles.clickable]: typeof this.props.onClickLogo !== 'undefined'
-                                })}
-                                draggable={false}
-                                src={this.props.logo}
-                                onClick={this.props.onClickLogo}
-                            />
-                        </div>
                         {(this.props.canChangeTheme || this.props.canChangeLanguage) && (<SettingsMenu
                             canChangeLanguage={this.props.canChangeLanguage}
                             canChangeTheme={this.props.canChangeTheme}
@@ -614,78 +602,6 @@ class MenuBar extends React.Component {
                             </div>
                         )}
                     </div>
-                    {this.props.canEditTitle ? (
-                        <div className={classNames(styles.menuBarItem, styles.growable)}>
-                            <MenuBarItemTooltip
-                                enable
-                                id="title-field"
-                            >
-                                <ProjectTitleInput
-                                    className={classNames(styles.titleFieldGrowable)}
-                                />
-                            </MenuBarItemTooltip>
-                        </div>
-                    ) : ((this.props.authorUsername && this.props.authorUsername !== this.props.username) ? (
-                        <AuthorInfo
-                            className={styles.authorInfo}
-                            imageUrl={this.props.authorThumbnailUrl}
-                            projectTitle={this.props.projectTitle}
-                            userId={this.props.authorId}
-                            username={this.props.authorUsername}
-                        />
-                    ) : null)}
-                    <div className={classNames(styles.menuBarItem)}>
-                        {this.props.canShare ? (
-                            (this.props.isShowingProject || this.props.isUpdating) && (
-                                <ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
-                                    {
-                                        waitForUpdate => (
-                                            <ShareButton
-                                                className={styles.menuBarButton}
-                                                isShared={this.props.isShared}
-                                                /* eslint-disable react/jsx-no-bind */
-                                                onClick={() => {
-                                                    this.handleClickShare(waitForUpdate);
-                                                }}
-                                                /* eslint-enable react/jsx-no-bind */
-                                            />
-                                        )
-                                    }
-                                </ProjectWatcher>
-                            )
-                        ) : (
-                            this.props.showComingSoon ? (
-                                <MenuBarItemTooltip id="share-button">
-                                    <ShareButton className={styles.menuBarButton} />
-                                </MenuBarItemTooltip>
-                            ) : []
-                        )}
-                        {this.props.canRemix ? remixButton : []}
-                    </div>
-                    <div className={classNames(styles.menuBarItem, styles.communityButtonWrapper)}>
-                        {this.props.enableCommunity ? (
-                            (this.props.isShowingProject || this.props.isUpdating) && (
-                                <ProjectWatcher onDoneUpdating={this.props.onSeeCommunity}>
-                                    {
-                                        waitForUpdate => (
-                                            <CommunityButton
-                                                className={styles.menuBarButton}
-                                                /* eslint-disable react/jsx-no-bind */
-                                                onClick={() => {
-                                                    this.handleClickSeeCommunity(waitForUpdate);
-                                                }}
-                                                /* eslint-enable react/jsx-no-bind */
-                                            />
-                                        )
-                                    }
-                                </ProjectWatcher>
-                            )
-                        ) : (this.props.showComingSoon ? (
-                            <MenuBarItemTooltip id="community-button">
-                                <CommunityButton className={styles.menuBarButton} />
-                            </MenuBarItemTooltip>
-                        ) : [])}
-                    </div>
                     <Divider className={classNames(styles.divider)} />
                     <div className={styles.fileGroup}>
                         <div
@@ -788,48 +704,6 @@ class MenuBar extends React.Component {
                     ) : (
                         // ******** no login session is available, so don't show login stuff
                         <React.Fragment>
-                            {this.props.showComingSoon ? (
-                                <React.Fragment>
-                                    <MenuBarItemTooltip id="mystuff">
-                                        <div
-                                            className={classNames(
-                                                styles.menuBarItem,
-                                                styles.hoverable,
-                                                styles.mystuffButton
-                                            )}
-                                        >
-                                            <img
-                                                className={styles.mystuffIcon}
-                                                src={mystuffIcon}
-                                            />
-                                        </div>
-                                    </MenuBarItemTooltip>
-                                    <MenuBarItemTooltip
-                                        id="account-nav"
-                                        place={this.props.isRtl ? 'right' : 'left'}
-                                    >
-                                        <div
-                                            className={classNames(
-                                                styles.menuBarItem,
-                                                styles.hoverable,
-                                                styles.accountNavMenu
-                                            )}
-                                        >
-                                            <img
-                                                className={styles.profileIcon}
-                                                src={profileIcon}
-                                            />
-                                            <span>
-                                                {'scratch-cat'}
-                                            </span>
-                                            <img
-                                                className={styles.dropdownCaretIcon}
-                                                src={dropdownCaret}
-                                            />
-                                        </div>
-                                    </MenuBarItemTooltip>
-                                </React.Fragment>
-                            ) : []}
                         </React.Fragment>
                     )}
                 </div>
diff --git a/static/logo.png b/static/logo.png
new file mode 100644
index 00000000000..3625d35860f
Binary files /dev/null and b/static/logo.png differ