diff --git a/site/theme/static/index.less b/site/theme/static/index.less
index 179d41cf31..bac04d6634 100644
--- a/site/theme/static/index.less
+++ b/site/theme/static/index.less
@@ -19,3 +19,4 @@
 @import './motion';
 @import './responsive';
 @import './theme';
+@import './santa';
diff --git a/site/theme/static/santa.less b/site/theme/static/santa.less
new file mode 100644
index 0000000000..fea01abe18
--- /dev/null
+++ b/site/theme/static/santa.less
@@ -0,0 +1,159 @@
+.santa {
+  display: inline-block;
+  vertical-align: middle;
+  margin-left: 8px;
+}
+
+.santa-body {
+  font-size: 24px;
+  color: #f91047;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 1em;
+  height: 1em;
+  background-color: currentColor;
+  box-shadow: inset 0 -0.25em rgba(0, 0, 0, 0.1);
+  border-radius: 50%;
+  transform-origin: center bottom;
+  animation: balance alternate infinite 2s ease-in-out;
+}
+
+.santa-head {
+  font-size: 0.4em;
+  width: 1em;
+  height: 1.9em;
+  background-color: white;
+  border-radius: 0.5em;
+  transform: translateY(-1em);
+  position: relative;
+}
+
+.santa-head::before {
+  content: '';
+  width: 1em;
+  height: 0.375em;
+  display: block;
+  background-color: #ff9876;
+  position: absolute;
+  left: 0;
+  top: 0.65em;
+}
+
+.santa-ear {
+  background-color: #fc8363;
+  width: 0.1em;
+  height: 0.3em;
+  position: absolute;
+  top: 0.75em;
+}
+
+.santa-ear:nth-of-type(1) {
+  border-radius: 0.05em 0 0 0.05em;
+  left: -0.1em;
+}
+
+.santa-ear:nth-of-type(2) {
+  border-radius: 0 0.05em 0.05em 0;
+  right: -0.1em;
+}
+
+.santa-hat {
+  content: '';
+  width: 1em;
+  height: 0.15em;
+  position: absolute;
+  transform: scale(1.1);
+  top: 0.5em;
+  left: 0;
+  background-color: white;
+}
+
+.santa-hat::before {
+  content: '';
+  display: block;
+  width: 1em;
+  height: 0.5em;
+  background: #f91047;
+  border-radius: 0.5em 0.5em 0 0;
+  z-index: 2;
+  position: absolute;
+  top: -0.5em;
+}
+
+.santa-hat::after {
+  /* pompom */
+  content: '';
+  width: 0.25em;
+  height: 0.25em;
+  display: block;
+  background-color: white;
+  border-radius: 50%;
+  position: absolute;
+  z-index: 0;
+  top: -0.72em;
+  right: 0;
+  box-shadow: -0.2em 0.2em 0 0.12em rgba(0, 0, 0, 0.2), -0.2em 0.2em 0 0.12em #f91047;
+}
+
+.santa-eye {
+  width: 0.12em;
+  height: 0.12em;
+  background-color: black;
+  border-radius: 50%;
+  position: absolute;
+  top: 0.76em;
+  left: 0.2em;
+}
+
+.santa-eye + .santa-eye {
+  left: auto;
+  right: 0.2em;
+}
+
+.santa-nose {
+  width: 0.12em;
+  height: 0.22em;
+  background-color: #f24c4c;
+  border-radius: 0 0 0.12em 0.12em;
+  position: absolute;
+  top: 0.84em;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.santa-mouth {
+  width: 0.18em;
+  height: 0.1em;
+  border-bottom-right-radius: 5vw;
+  border-bottom-left-radius: 5vw;
+  margin-top: 0.3em;
+  background-color: black;
+  position: absolute;
+  left: 50%;
+  top: 50%;
+  transform: translate(-50%, -50%);
+  animation: hohoho 4s linear forwards infinite;
+}
+
+@keyframes hohoho {
+  0%, 10%, 20%, 40%, 100% {
+    /* smiling */
+    width: 0.18em;
+    height: 0.1em;
+    border-bottom-right-radius: 1vw;
+    border-bottom-left-radius: 1vw;
+  }
+
+  5%, 15%, 25%, 35% {
+    /* hohoho */
+    width: 0.15em;
+    height: 0.2em;
+    border-radius: 50%;
+  }
+}
+
+@keyframes balance {
+  from { transform: rotate(-2deg); }
+  to { transform: rotate(2deg); }
+}
diff --git a/site/theme/template/Layout/Header.jsx b/site/theme/template/Layout/Header.jsx
index a3c6483917..23c38f62a3 100644
--- a/site/theme/template/Layout/Header.jsx
+++ b/site/theme/template/Layout/Header.jsx
@@ -3,7 +3,7 @@ import PropTypes from 'prop-types';
 import { Link } from 'bisheng/router';
 import { FormattedMessage } from 'react-intl';
 import classNames from 'classnames';
-import { Select, Menu, Row, Col, Icon, Popover, AutoComplete, Input, Badge, Button } from 'antd';
+import { Select, Menu, Row, Col, Icon, Popover, AutoComplete, Input, Badge, Button, Tooltip } from 'antd';
 import * as utils from '../utils';
 import { version as antdVersion } from '../../../../package.json';
 
@@ -235,6 +235,21 @@ export default class Header extends React.Component {
             <Link to={utils.getLocalizedPathname('/', isZhCN)} id="logo">
               <img alt="logo" src="https://gw.alipayobjects.com/zos/rmsportal/KDpgvguMpGfqaHPjicRK.svg" />
               <img alt="Ant Design" src="https://gw.alipayobjects.com/zos/rmsportal/DmMsyewtkhAzjNkeGnYe.svg" />
+              <Tooltip title="🎅🏻 Merry Chrismas!">
+                <div className="santa">
+                  <div className="santa-body">
+                    <div className="santa-head">
+                      <div className="santa-ear" />
+                      <div className="santa-ear" />
+                      <div className="santa-hat" />
+                      <div className="santa-eye" />
+                      <div className="santa-eye" />
+                      <div className="santa-nose" />
+                      <div className="santa-mouth" />
+                    </div>
+                  </div>
+                </div>
+              </Tooltip>
             </Link>
           </Col>
           <Col xxl={20} xl={19} lg={19} md={16} sm={0} xs={0}>