diff --git a/UI/src/assets/logomark-trans.svg b/UI/src/assets/logomark-trans.svg
new file mode 100644
index 0000000..17e37ce
--- /dev/null
+++ b/UI/src/assets/logomark-trans.svg
@@ -0,0 +1,10 @@
+<svg width="350" height="350" viewBox="0 0 350 350" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="350" height="350" fill="white"/>
+<path d="M115.888 59.744V123.968H174.928C198.352 123.968 210.064 113.024 210.064 91.136C210.064 70.208 198.16 59.744 174.352 59.744H115.888ZM79.888 236V30.368H178.096C200.368 30.368 217.264 35.264 228.784 45.056C240.304 54.656 246.064 68.288 246.064 85.952C246.064 112.64 234.736 129.92 212.08 137.792V138.368C232.432 141.248 242.608 155.744 242.608 181.856C242.608 209.888 246.352 227.936 253.84 236H215.248C211.6 230.048 209.776 219.968 209.776 205.76C209.776 185.984 207.088 172.16 201.712 164.288C195.76 155.648 184.816 151.328 168.88 151.328H115.888V236H79.888Z" fill="#6FDCFF"/>
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.1935 282.498C127.334 342.639 224.842 342.639 284.982 282.498C345.123 222.357 339.43 119.156 284.982 64.7091L67.1935 282.498ZM94.0635 255.628C139.364 300.929 213.128 300.612 258.819 254.921C304.511 209.229 300.539 131.177 259.527 90.165C223.567 126.125 129.271 220.421 94.0635 255.628Z" fill="#FFAEC6"/>
+<mask id="mask0" mask-type="alpha" maskUnits="userSpaceOnUse" x="67" y="64" width="327" height="328">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M67.1935 282.498C127.334 342.639 224.842 342.639 284.982 282.498C345.123 222.357 339.43 119.156 284.982 64.7091L67.1935 282.498ZM94.0635 255.628C139.364 300.929 213.128 300.612 258.819 254.921C304.511 209.229 300.539 131.177 259.527 90.165C223.567 126.125 129.271 220.421 94.0635 255.628Z" fill="white"/>
+</mask>
+<g mask="url(#mask0)">
+</g>
+</svg>
diff --git a/UI/src/components/logotype/index.js b/UI/src/components/logotype/index.js
index c906b16..ae619c8 100644
--- a/UI/src/components/logotype/index.js
+++ b/UI/src/components/logotype/index.js
@@ -41,4 +41,46 @@ const Logotype = ({
   </svg>
 )
 
+export const TransFlag = (props) => (
+  <svg viewBox="0 0 3372 900" version="1.1" {...props}>
+    <defs>
+      <rect id="path-3" x="1772" y="0" width="1600" height="900" rx="100"></rect>
+    </defs>
+    <g id="Page-1" stroke="none" strokeWidth="1" fill="none" fillRule="evenodd">
+      <g id="Rectangle-5"></g>
+      <g id="Trans">
+        <rect
+          id="Rectangle"
+          fill="#55CDFC"
+          x="0"
+          y="0"
+          width="1600"
+          height="900"
+          rx="100"
+        ></rect>
+        <rect
+          id="Rectangle-2"
+          fill="#F7A8B8"
+          x="0"
+          y="170"
+          width="1600"
+          height="560"
+        ></rect>
+        <rect
+          id="Rectangle-3"
+          fill="#FFFFFF"
+          x="0"
+          y="350"
+          width="1600"
+          height="200"
+        ></rect>
+      </g>
+      <mask id="mask-4" fill="white">
+        <use href="#path-3"></use>
+      </mask>
+      <g id="Rectangle-5"></g>
+    </g>
+  </svg>
+)
+
 export default Logotype
diff --git a/UI/src/components/wrapper/index.js b/UI/src/components/wrapper/index.js
index 72ae470..a87910e 100644
--- a/UI/src/components/wrapper/index.js
+++ b/UI/src/components/wrapper/index.js
@@ -1,12 +1,27 @@
 import React, { Component } from 'react'
 import { Link } from 'react-router-dom'
 import Scrollbars from 'react-custom-scrollbars'
-import Logotype from '../logotype'
+import Logotype, { TransFlag } from '../logotype'
 import './wrapper.sass'
 import discordLogo from '../../pages/images/discord-logo.svg'
 
+let specialFills = {}
+let showTransFlag = false
+
+
 class Wrapper extends Component {
   render() {
+    const date = new Date()
+    if (
+      (date.getMonth() === 2 && date.getDate() === 31) || // TDOV (2 is March)
+      (date.getMonth() === 10 && date.getDate() === 20) // TDOR (10 is Nov)
+    ) {
+      specialFills = {
+        circleFill: '#FFAEC6',
+        typeFill: '#6FDCFF'
+      }
+      showTransFlag = true
+    }
     return (
       <div className="wrapper">
         <Scrollbars autoHeight autoHeightMax="calc(100vh + 2px)">
@@ -15,7 +30,9 @@ class Wrapper extends Component {
             <nav uk-navbar="" className="uk-navbar-transparent wrapper__nav">
               <div className="uk-navbar-left">
                 <Link to="/">
-                  <Logotype style={{ height: '2rem' }} className="wrapper__logotype" />
+                  <div style={{ display: 'flex' }}>
+                    <Logotype style={{ height: '2rem', marginRight: '12px' }} className="wrapper__logotype" {...specialFills} /> {showTransFlag && <TransFlag height="100%" width="75px" uk-tooltip="pos: bottom; title: Roleypoly says trans rights!" />}
+                  </div>
                 </Link>
               </div>
               <div className="uk-navbar-right">