diff --git a/web/package.json b/web/package.json
index 30bdd121..14fa9055 100644
--- a/web/package.json
+++ b/web/package.json
@@ -10,6 +10,7 @@
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-dropzone": "^14.2.3",
+    "react-fireworks": "^1.0.4",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
     "react-toastify": "^9.0.8",
diff --git a/web/src/components/HeaderBar.js b/web/src/components/HeaderBar.js
index 4e7e3b82..b8965880 100644
--- a/web/src/components/HeaderBar.js
+++ b/web/src/components/HeaderBar.js
@@ -1,4 +1,4 @@
-import React, {useContext, useEffect, useState} from 'react';
+import React, {useContext, useEffect, useRef, useState} from 'react';
 import {Link, useNavigate} from 'react-router-dom';
 import {UserContext} from '../context/User';
 
@@ -6,18 +6,12 @@ import {Button, Container, Icon, Menu, Segment} from 'semantic-ui-react';
 import {API, getLogo, getSystemName, isAdmin, isMobile, showSuccess} from '../helpers';
 import '../index.css';
 
+import fireworks from 'react-fireworks';
+
 import {
-    IconAt,
-    IconHistogram,
-    IconGift,
     IconKey,
     IconUser,
-    IconLayers,
-    IconHelpCircle,
-    IconCreditCard,
-    IconSemiLogo,
-    IconHome,
-    IconImage
+    IconHelpCircle
 } from '@douyinfe/semi-icons';
 import {Nav, Avatar, Dropdown, Layout, Switch} from '@douyinfe/semi-ui';
 import {stringToColor} from "../helpers/render";
@@ -49,6 +43,8 @@ const HeaderBar = () => {
     const systemName = getSystemName();
     const logo = getLogo();
     var themeMode = localStorage.getItem('theme-mode');
+    const currentDate = new Date();
+    const isNewYear = currentDate.getMonth() === 0 && currentDate.getDate() === 1;
 
     async function logout() {
         setShowSidebar(false);
@@ -59,10 +55,24 @@ const HeaderBar = () => {
         navigate('/login');
     }
 
+    const handleNewYearClick = () => {
+        fireworks.init("root",{});
+        fireworks.start();
+        setTimeout(() => {
+            fireworks.stop();
+            setTimeout(() => {
+                window.location.reload();
+            }, 10000);
+        }, 3000);
+    };
+
     useEffect(() => {
         if (themeMode === 'dark') {
             switchMode(true);
         }
+        if (isNewYear) {
+            console.log('Happy New Year!');
+        }
     }, []);
 
     const switchMode = (model) => {
@@ -105,6 +115,19 @@ const HeaderBar = () => {
                         }}
                         footer={
                             <>
+                                {isNewYear &&
+                                    // happy new year
+                                    <Dropdown
+                                        position="bottomRight"
+                                        render={
+                                            <Dropdown.Menu>
+                                                <Dropdown.Item onClick={handleNewYearClick}>Happy New Year!!!</Dropdown.Item>
+                                            </Dropdown.Menu>
+                                        }
+                                    >
+                                        <Nav.Item itemKey={'new-year'} text={'🏮'}/>
+                                    </Dropdown>
+                                }
                                 <Nav.Item itemKey={'about'} icon={<IconHelpCircle />} />
                                 <Switch checkedText="🌞" size={'large'} checked={dark} uncheckedText="🌙" onChange={switchMode} />
                                 {userState.user ?