diff --git a/web/ui/react-app/src/App.tsx b/web/ui/react-app/src/App.tsx
index 30b07f261..31cf72ab0 100755
--- a/web/ui/react-app/src/App.tsx
+++ b/web/ui/react-app/src/App.tsx
@@ -6,6 +6,7 @@ import { BrowserRouter as Router, Redirect, Route, Switch } from 'react-router-d
 import { PathPrefixContext } from './contexts/PathPrefixContext';
 import { ThemeContext, themeName, themeSetting } from './contexts/ThemeContext';
 import { ReadyContext } from './contexts/ReadyContext';
+import { AnimateLogoContext } from './contexts/AnimateLogoContext';
 import { useLocalStorage } from './hooks/useLocalStorage';
 import useMedia from './hooks/useMedia';
 import {
@@ -60,6 +61,7 @@ const App: FC<AppProps> = ({ consolesLink, agentMode, ready }) => {
   const [userTheme, setUserTheme] = useLocalStorage<themeSetting>(themeLocalStorageKey, 'auto');
   const browserHasThemes = useMedia('(prefers-color-scheme)');
   const browserWantsDarkTheme = useMedia('(prefers-color-scheme: dark)');
+  const [animateLogo, setAnimateLogo] = useLocalStorage<boolean>('animateLogo', false);
 
   let theme: themeName;
   if (userTheme !== 'auto') {
@@ -76,46 +78,48 @@ const App: FC<AppProps> = ({ consolesLink, agentMode, ready }) => {
       <PathPrefixContext.Provider value={basePath}>
         <ReadyContext.Provider value={ready}>
           <Router basename={basePath}>
-            <Navigation consolesLink={consolesLink} agentMode={agentMode} />
-            <Container fluid style={{ paddingTop: 70 }}>
-              <Switch>
-                <Redirect exact from="/" to={agentMode ? '/agent' : '/graph'} />
-                {/*
+            <AnimateLogoContext.Provider value={animateLogo}>
+              <Navigation consolesLink={consolesLink} agentMode={agentMode} animateLogo={animateLogo} />
+              <Container fluid style={{ paddingTop: 70 }}>
+                <Switch>
+                  <Redirect exact from="/" to={agentMode ? '/agent' : '/graph'} />
+                  {/*
               NOTE: Any route added here needs to also be added to the list of
               React-handled router paths ("reactRouterPaths") in /web/web.go.
             */}
-                <Route path="/agent">
-                  <AgentPage />
-                </Route>
-                <Route path="/graph">
-                  <PanelListPage />
-                </Route>
-                <Route path="/alerts">
-                  <AlertsPage />
-                </Route>
-                <Route path="/config">
-                  <ConfigPage />
-                </Route>
-                <Route path="/flags">
-                  <FlagsPage />
-                </Route>
-                <Route path="/rules">
-                  <RulesPage />
-                </Route>
-                <Route path="/service-discovery">
-                  <ServiceDiscoveryPage />
-                </Route>
-                <Route path="/status">
-                  <StatusPage agentMode={agentMode} />
-                </Route>
-                <Route path="/tsdb-status">
-                  <TSDBStatusPage />
-                </Route>
-                <Route path="/targets">
-                  <TargetsPage />
-                </Route>
-              </Switch>
-            </Container>
+                  <Route path="/agent">
+                    <AgentPage />
+                  </Route>
+                  <Route path="/graph">
+                    <PanelListPage />
+                  </Route>
+                  <Route path="/alerts">
+                    <AlertsPage />
+                  </Route>
+                  <Route path="/config">
+                    <ConfigPage />
+                  </Route>
+                  <Route path="/flags">
+                    <FlagsPage />
+                  </Route>
+                  <Route path="/rules">
+                    <RulesPage />
+                  </Route>
+                  <Route path="/service-discovery">
+                    <ServiceDiscoveryPage />
+                  </Route>
+                  <Route path="/status">
+                    <StatusPage agentMode={agentMode} setAnimateLogo={setAnimateLogo} />
+                  </Route>
+                  <Route path="/tsdb-status">
+                    <TSDBStatusPage />
+                  </Route>
+                  <Route path="/targets">
+                    <TargetsPage />
+                  </Route>
+                </Switch>
+              </Container>
+            </AnimateLogoContext.Provider>
           </Router>
         </ReadyContext.Provider>
       </PathPrefixContext.Provider>
diff --git a/web/ui/react-app/src/Navbar.tsx b/web/ui/react-app/src/Navbar.tsx
index 10ffe5f0d..a58f6914f 100644
--- a/web/ui/react-app/src/Navbar.tsx
+++ b/web/ui/react-app/src/Navbar.tsx
@@ -13,21 +13,22 @@ import {
   DropdownItem,
 } from 'reactstrap';
 import { ThemeToggle } from './Theme';
-import logo from './images/prometheus_logo_grey.svg';
+import { ReactComponent as PromLogo } from './images/prometheus_logo_grey.svg';
 
 interface NavbarProps {
   consolesLink: string | null;
   agentMode: boolean;
+  animateLogo?: boolean | false;
 }
 
-const Navigation: FC<NavbarProps> = ({ consolesLink, agentMode }) => {
+const Navigation: FC<NavbarProps> = ({ consolesLink, agentMode, animateLogo }) => {
   const [isOpen, setIsOpen] = useState(false);
   const toggle = () => setIsOpen(!isOpen);
   return (
     <Navbar className="mb-3" dark color="dark" expand="md" fixed="top">
       <NavbarToggler onClick={toggle} className="mr-2" />
       <Link className="pt-0 navbar-brand" to={agentMode ? '/agent' : '/graph'}>
-        <img src={logo} className="d-inline-block align-top" alt="Prometheus logo" title="Prometheus" />
+        <PromLogo className={`d-inline-block align-top${animateLogo ? ' animate' : ''}`} title="Prometheus" />
         Prometheus{agentMode && ' Agent'}
       </Link>
       <Collapse isOpen={isOpen} navbar style={{ justifyContent: 'space-between' }}>
diff --git a/web/ui/react-app/src/contexts/AnimateLogoContext.tsx b/web/ui/react-app/src/contexts/AnimateLogoContext.tsx
new file mode 100644
index 000000000..4834a60a8
--- /dev/null
+++ b/web/ui/react-app/src/contexts/AnimateLogoContext.tsx
@@ -0,0 +1,3 @@
+import { createContext } from 'react';
+
+export const AnimateLogoContext = createContext<boolean>(false);
diff --git a/web/ui/react-app/src/pages/status/Status.tsx b/web/ui/react-app/src/pages/status/Status.tsx
index 0d37db961..374c672dd 100644
--- a/web/ui/react-app/src/pages/status/Status.tsx
+++ b/web/ui/react-app/src/pages/status/Status.tsx
@@ -1,4 +1,4 @@
-import React, { Fragment, FC } from 'react';
+import React, { Fragment, FC, useState, useEffect } from 'react';
 import { Table } from 'reactstrap';
 import { withStatusIndicator } from '../../components/withStatusIndicator';
 import { useFetch } from '../../hooks/useFetch';
@@ -97,7 +97,46 @@ const StatusResult: FC<{ fetchPath: string; title: string }> = ({ fetchPath, tit
   );
 };
 
-const Status: FC<{ agentMode: boolean }> = ({ agentMode }) => {
+interface StatusProps {
+  agentMode?: boolean | false;
+  setAnimateLogo?: (animateLogo: boolean) => void;
+}
+
+const Status: FC<StatusProps> = ({ agentMode, setAnimateLogo }) => {
+  /*    _
+   *   /' \
+   *  |    |
+   *   \__/ */
+
+  const [inputText, setInputText] = useState('');
+
+  useEffect(() => {
+    const handleKeyPress = (event: KeyboardEvent) => {
+      const keyPressed = event.key.toUpperCase();
+      setInputText((prevInputText) => {
+        const newInputText = prevInputText.slice(-3) + String.fromCharCode(((keyPressed.charCodeAt(0) - 64) % 26) + 65);
+        return newInputText;
+      });
+    };
+
+    document.addEventListener('keypress', handleKeyPress);
+
+    return () => {
+      document.removeEventListener('keypress', handleKeyPress);
+    };
+  }, []);
+
+  useEffect(() => {
+    if (setAnimateLogo && inputText != '') {
+      setAnimateLogo(inputText.toUpperCase() === 'QSPN');
+    }
+  }, [inputText]);
+
+  /*    _
+   *   /' \
+   *  |    |
+   *   \__/ */
+
   const pathPrefix = usePathPrefix();
   const path = `${pathPrefix}/${API_PATH}`;
 
diff --git a/web/ui/react-app/src/themes/_shared.scss b/web/ui/react-app/src/themes/_shared.scss
index 20658a8af..8745a6d77 100644
--- a/web/ui/react-app/src/themes/_shared.scss
+++ b/web/ui/react-app/src/themes/_shared.scss
@@ -104,9 +104,14 @@ button.execute-btn {
   margin-bottom: 20px;
 }
 
-.navbar-brand img {
+.navbar-brand svg {
   padding-right: 1rem;
   height: 1.9rem;
+  width: 2.9rem;
+}
+
+.navbar-brand svg.animate path {
+    animation: flamecolor 4s ease-in 1 forwards,flame 1s ease-in infinite;
 }
 
 .navbar-brand {
@@ -357,3 +362,16 @@ input[type='checkbox']:checked + label {
   display: block;
   font-family: monospace;
 }
+
+@keyframes flamecolor {
+    100% {
+        fill: #e95224;
+    }
+}
+@keyframes flame {
+    0% { d: path("M 56.667,0.667 C 25.372,0.667 0,26.036 0,57.332 c 0,31.295 25.372,56.666 56.667,56.666 31.295,0 56.666,-25.371 56.666,-56.666 0,-31.296 -25.372,-56.665 -56.666,-56.665 z m 0,106.055 c -8.904,0 -16.123,-5.948 -16.123,-13.283 H 72.79 c 0,7.334 -7.219,13.283 -16.123,13.283 z M 83.297,89.04 H 30.034 V 79.382 H 83.298 V 89.04 Z M 83.106,74.411 H 30.186 C 30.01,74.208 29.83,74.008 29.66,73.802 24.208,67.182 22.924,63.726 21.677,60.204 c -0.021,-0.116 6.611,1.355 11.314,2.413 0,0 2.42,0.56 5.958,1.205 -3.397,-3.982 -5.414,-9.044 -5.414,-14.218 0,-11.359 8.712,-21.285 5.569,-29.308 3.059,0.249 6.331,6.456 6.552,16.161 3.252,-4.494 4.613,-12.701 4.613,-17.733 0,-5.21 3.433,-11.262 6.867,-11.469 -3.061,5.045 0.793,9.37 4.219,20.099 1.285,4.03 1.121,10.812 2.113,15.113 C 63.797,33.534 65.333,20.5 71,16 c -2.5,5.667 0.37,12.758 2.333,16.167 3.167,5.5 5.087,9.667 5.087,17.548 0,5.284 -1.951,10.259 -5.242,14.148 3.742,-0.702 6.326,-1.335 6.326,-1.335 l 12.152,-2.371 c 10e-4,-10e-4 -1.765,7.261 -8.55,14.254 z");
+    }
+    50% { d: path("M 56.667,0.667 C 25.372,0.667 0,26.036 0,57.332 c 0,31.295 25.372,56.666 56.667,56.666 31.295,0 56.666,-25.371 56.666,-56.666 0,-31.296 -25.372,-56.665 -56.666,-56.665 z m 0,106.055 c -8.904,0 -16.123,-5.948 -16.123,-13.283 H 72.79 c 0,7.334 -7.219,13.283 -16.123,13.283 z M 83.297,89.04 H 30.034 V 79.382 H 83.298 V 89.04 Z M 83.106,74.411 H 30.186 C 30.01,74.208 29.83,74.008 29.66,73.802 24.208,67.182 22.924,63.726 21.677,60.204 c -0.021,-0.116 6.611,1.355 11.314,2.413 0,0 2.42,0.56 5.958,1.205 -3.397,-3.982 -5.414,-9.044 -5.414,-14.218 0,-11.359 1.640181,-23.047128 7.294982,-29.291475 C 39.391377,29.509803 45.435,26.752 45.656,36.457 c 3.252,-4.494 7.100362,-8.366957 7.100362,-13.398957 0,-5.21 0.137393,-8.650513 -3.479689,-15.0672265 7.834063,1.6180944 8.448052,4.2381285 11.874052,14.9671285 1.285,4.03 1.325275,15.208055 2.317275,19.509055 0.329,-8.933 6.441001,-14.01461 5.163951,-21.391003 5.755224,5.771457 4.934508,10.495521 7.126537,14.288218 3.167,5.5 2.382625,7.496239 2.382625,15.377239 0,5.284 -1.672113,9.232546 -4.963113,13.121546 3.742,-0.702 6.326,-1.335 6.326,-1.335 l 12.152,-2.371 c 10e-4,-10e-4 -1.765,7.261 -8.55,14.254 z"); }
+    100% {
+        d: path("M 56.667,0.667 C 25.372,0.667 0,26.036 0,57.332 c 0,31.295 25.372,56.666 56.667,56.666 31.295,0 56.666,-25.371 56.666,-56.666 0,-31.296 -25.372,-56.665 -56.666,-56.665 z m 0,106.055 c -8.904,0 -16.123,-5.948 -16.123,-13.283 H 72.79 c 0,7.334 -7.219,13.283 -16.123,13.283 z M 83.297,89.04 H 30.034 V 79.382 H 83.298 V 89.04 Z M 83.106,74.411 H 30.186 C 30.01,74.208 29.83,74.008 29.66,73.802 24.208,67.182 22.924,63.726 21.677,60.204 c -0.021,-0.116 6.611,1.355 11.314,2.413 0,0 2.42,0.56 5.958,1.205 -3.397,-3.982 -5.414,-9.044 -5.414,-14.218 0,-11.359 8.712,-21.285 5.569,-29.308 3.059,0.249 6.331,6.456 6.552,16.161 3.252,-4.494 4.613,-12.701 4.613,-17.733 0,-5.21 3.433,-11.262 6.867,-11.469 -3.061,5.045 0.793,9.37 4.219,20.099 1.285,4.03 1.121,10.812 2.113,15.113 C 63.797,33.534 65.333,20.5 71,16 c -2.5,5.667 0.37,12.758 2.333,16.167 3.167,5.5 5.087,9.667 5.087,17.548 0,5.284 -1.951,10.259 -5.242,14.148 3.742,-0.702 6.326,-1.335 6.326,-1.335 l 12.152,-2.371 c 10e-4,-10e-4 -1.765,7.261 -8.55,14.254 z"); }
+}