diff --git a/packages/fakeyou/src/AppNew.scss b/packages/fakeyou/src/AppNew.scss
index 701fcd1742..1cc941f80a 100644
--- a/packages/fakeyou/src/AppNew.scss
+++ b/packages/fakeyou/src/AppNew.scss
@@ -30,7 +30,6 @@ $headings-font-family: "Merriweather", serif;
     color: $white;
 
     &.dark-mode {
-
       p,
       h1,
       h2,
@@ -38,7 +37,7 @@ $headings-font-family: "Merriweather", serif;
       h4,
       h5,
       h6 {
-        color: #fff;
+        color: $white;
       }
     }
   }
@@ -46,15 +45,16 @@ $headings-font-family: "Merriweather", serif;
   .bg-gradient {
     background: rgb(13, 16, 25) !important;
 
-    background: linear-gradient(325deg,
-        rgba(13, 16, 25, 1) 0%,
-        rgba(42, 21, 34, 1) 55%,
-        rgba(16, 14, 26, 1) 100%) !important;
+    background: linear-gradient(
+      325deg,
+      rgba(13, 16, 25, 1) 0%,
+      rgba(42, 21, 34, 1) 55%,
+      rgba(16, 14, 26, 1) 100%
+    ) !important;
     background-repeat: no-repeat;
     background-attachment: fixed;
 
     &.low-spec {
-
       .particle-1 {
         animation: animParticle $time-1 linear infinite;
         @include particles(0);
@@ -100,93 +100,116 @@ $headings-font-family: "Merriweather", serif;
         height: 1px;
         width: 1px;
       }
-
     }
 
     &.dark-mode {
+      .top-bar {
+        background-color: rgba($white, 0.02);
+      }
 
       .panel {
-        background-color: #261924 !important;
-
+        background-color: rgba(#353535, 0.25);
       }
 
       select {
-        border-color: #372C34 !important;
-        background-color: #372C34 !important;
-
+        border-color: #372c34 !important;
+        background-color: #372c34 !important;
+        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-chevron-down' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M1.646 4.646a.5.5 0 0 1 .708 0L8 10.293l5.646-5.647a.5.5 0 0 1 .708.708l-6 6a.5.5 0 0 1-.708 0l-6-6a.5.5 0 0 1 0-.708z'/%3E%3C/svg%3E");
       }
 
       .btn-destructive {
-
-        background-color: #FFCFCE !important;
-
+        background-color: #ffcfce !important;
       }
 
       .video-card-title,
       .video-card-text {
-
-        color: #ffffff !important;
-
+        color: $white !important;
       }
 
       textarea {
-
-        background-color: #372C34 !important;
-        border-color: #372C34 !important;
-
-
+        background-color: #372c34 !important;
+        border-color: #372c34 !important;
+        color: $white;
       }
 
       .form-select {
-        color: #fff;
+        color: $white;
       }
 
       ::placeholder {
-
-        color: #fff !important;
+        color: $white !important;
       }
 
       .input-icon .form-control-feedback {
-
-        color: #fff !important
+        color: $white !important;
       }
 
       input {
-        background-color: #372C34 !important;
-        border-color: #372C34 !important;
-      }
-
-      menu.item {
-
-        background: #372C34;
+        background-color: #372c34 !important;
+        border-color: #372c34 !important;
+        color: $white;
       }
 
       .btn-secondary {
-        color: #fff;
-        border-color: #46343F;
-        background-color: #46343F;
+        color: $white !important;
+        border-color: #5a4a54;
+        background-color: #5a4a54;
+
+        &:hover {
+          border-color: lighten(#5a4a54, 5%);
+          background-color: lighten(#5a4a54, 5%);
+        }
       }
 
       .btn-destructive {
-        background-color: #FC6B68;
-        border-color: #FFCFCE;
+        background-color: #5a3d47 !important;
+        border-color: #5a3d47;
+        color: $white;
+
+        &:hover {
+          border-color: lighten(#5a3d47, 6%);
+          background-color: lighten(#5a3d47, 6%) !important;
+        }
+      }
+
+      .btn-inform svg {
+        filter: invert(98%) sepia(2%) saturate(0%) hue-rotate(196deg)
+          brightness(200%) contrast(103%);
       }
 
       .dropdown-menu {
-        background-color: #261924;
+        background-color: #281b25;
       }
 
       .dropdown-item {
-        color: #fff;
+        color: $white;
+
+        &:hover {
+          background-color: lighten(#271e25, 8%);
+        }
+        &:focus {
+          background-color: lighten(#271e25, 8%);
+        }
+        &:active {
+          background-color: $primary;
+        }
       }
 
-      a.btn.btn-secondary {
-        color: #fff;
+      .form-control::placeholder {
+        /* Chrome, Firefox, Opera, Safari 10.1+ */
+        color: rgba($white, 0.5) !important;
+        opacity: 1; /* Firefox */
       }
 
+      .form-control:-ms-input-placeholder {
+        /* Internet Explorer 10-11 */
+        color: rgba($white, 0.5) !important;
+      }
 
-
-
+      .form-control::-ms-input-placeholder {
+        /* Microsoft Edge */
+        color: rgba($white, 0.5) !important;
+      }
     }
   }
 
@@ -335,7 +358,7 @@ $headings-font-family: "Merriweather", serif;
     .nav-login {
       font-size: 15px;
       font-weight: 600;
-      color: #fff;
+      color: $white;
       text-decoration: none;
       transition: 0.2s;
 
@@ -347,7 +370,7 @@ $headings-font-family: "Merriweather", serif;
   }
 
   a.top-bar-text:hover {
-    color: $primary  !important;
+    color: $primary !important;
   }
 
   .top-bar {
diff --git a/packages/fakeyou/src/scss/site-refresh.scss b/packages/fakeyou/src/scss/site-refresh.scss
index 398e0b679a..0d22a0c409 100644
--- a/packages/fakeyou/src/scss/site-refresh.scss
+++ b/packages/fakeyou/src/scss/site-refresh.scss
@@ -128,6 +128,9 @@ styles with important tags:
     font-weight: 600;
     padding: 10px 24px;
     z-index: 2;
+    display: flex;
+    align-items: center;
+    justify-content: center;
   }
 
   .btn-primary,
@@ -505,6 +508,20 @@ styles with important tags:
   .rounded-circle {
     border-radius: 50px;
   }
+
+  .btn-toggle {
+    margin: 0;
+    padding: 0;
+    color: rgba($white, 0.8);
+
+    &.dark {
+      color: rgba($white, 0.8);
+    }
+
+    &:hover {
+      color: rgba($white, 0.6);
+    }
+  }
 }
 
 @media (min-width: 992px) {
diff --git a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
index 7840909b18..31c34b4d43 100644
--- a/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
+++ b/packages/fakeyou/src/v2/view/NewTopNavFc.tsx
@@ -20,15 +20,28 @@ import {
   faMoon,
   faSun,
   faComputer,
-  faLaptop
+  faLaptop,
 } from "@fortawesome/free-solid-svg-icons";
 import { faPatreon } from "@fortawesome/free-brands-svg-icons";
 import { t } from "i18next";
 import { USE_REFRESH } from "../../Refresh";
 import { Logout } from "@storyteller/components/src/api/session/Logout";
 import { Gravatar } from "@storyteller/components/src/elements/Gravatar";
-import { GetPendingTtsJobCount, GetPendingTtsJobCountIsOk, GetPendingTtsJobCountSuccessResponse } from "@storyteller/components/src/api/tts/GetPendingTtsJobCount";
-import { container, item, panel, image, sessionItem } from "@storyteller/fakeyou/src/data/animation";
+import {
+  GetPendingTtsJobCount,
+  GetPendingTtsJobCountIsOk,
+  GetPendingTtsJobCountSuccessResponse,
+} from "@storyteller/components/src/api/tts/GetPendingTtsJobCount";
+import {
+  container,
+  item,
+  panel,
+  image,
+  sessionItem,
+} from "@storyteller/fakeyou/src/data/animation";
+import Tippy from "@tippyjs/react";
+import "tippy.js/dist/tippy.css";
+import "tippy.js/animations/shift-away.css";
 
 interface Props {
   sessionWrapper: SessionWrapper;
@@ -37,11 +50,15 @@ interface Props {
 }
 
 function NewTopNavFc(props: Props) {
-  const defaultColourView = window.localStorage.getItem('darkMode')
-  const defaultLowSpecView = window.localStorage.getItem('lowSpec')
+  const defaultColourView = window.localStorage.getItem("darkMode");
+  const defaultLowSpecView = window.localStorage.getItem("lowSpec");
 
-  const [darkModes, toggleDarkModes] = useState(defaultColourView === 'true' ? true : false)
-  const [lowSpecView, toggleLowSpecs] = useState(defaultLowSpecView === 'true' ? true : false)
+  const [darkModes, toggleDarkModes] = useState(
+    defaultColourView === "true" ? true : false
+  );
+  const [lowSpecView, toggleLowSpecs] = useState(
+    defaultLowSpecView === "true" ? true : false
+  );
 
   let history = useHistory();
 
@@ -54,18 +71,21 @@ function NewTopNavFc(props: Props) {
 
   // NB: The responses from the "job count" endpoint are cached in a distributed manner.
   // We use the timestamp as a vector clock to know when to update our view.
-  const [pendingTtsJobs, setPendingTtsJobs] = useState<GetPendingTtsJobCountSuccessResponse>({
-    success: true,
-    pending_job_count: 0,
-    cache_time: new Date(0), // NB: Epoch
-  });
+  const [pendingTtsJobs, setPendingTtsJobs] =
+    useState<GetPendingTtsJobCountSuccessResponse>({
+      success: true,
+      pending_job_count: 0,
+      cache_time: new Date(0), // NB: Epoch
+    });
 
   useEffect(() => {
     const fetch = async () => {
       const response = await GetPendingTtsJobCount();
       if (GetPendingTtsJobCountIsOk(response)) {
         console.log(response);
-        if (response.cache_time.getTime() > pendingTtsJobs.cache_time.getTime()) {
+        if (
+          response.cache_time.getTime() > pendingTtsJobs.cache_time.getTime()
+        ) {
           setPendingTtsJobs(response);
         }
       }
@@ -96,49 +116,48 @@ function NewTopNavFc(props: Props) {
     : "navbar-burger";
 
   const toggleDarkMode = () => {
-    window.localStorage.setItem("darkMode", (darkModes ? "true" : "false"))
+    window.localStorage.setItem("darkMode", darkModes ? "true" : "false");
 
-    toggleDarkModes(!darkModes)
-  }
+    toggleDarkModes(!darkModes);
+  };
 
   const toggleLowSpec = () => {
-    window.localStorage.setItem("lowSpec", (lowSpecView ? "true" : "false"))
+    window.localStorage.setItem("lowSpec", lowSpecView ? "true" : "false");
 
-    toggleLowSpecs(!lowSpecView)
+    toggleLowSpecs(!lowSpecView);
 
-    if (lowSpecView == false) {
-      image.hidden.opacity = 1
-      image.hidden.x = 0
-      panel.hidden.y = 0
-      item.hidden.y = 0
-      sessionItem.hidden.x = 0
-      panel.hidden.opacity = 1
-      item.hidden.opacity = 1
-      container.hidden.opacity = 1
-      sessionItem.hidden.opacity = 1
+    if (lowSpecView === false) {
+      image.hidden.opacity = 1;
+      image.hidden.x = 0;
+      panel.hidden.y = 0;
+      item.hidden.y = 0;
+      sessionItem.hidden.x = 0;
+      panel.hidden.opacity = 1;
+      item.hidden.opacity = 1;
+      container.hidden.opacity = 1;
+      sessionItem.hidden.opacity = 1;
+    } else {
+      image.hidden.opacity = 0;
+      image.hidden.x = 100;
+      panel.hidden.y = 50;
+      item.hidden.y = 50;
+      sessionItem.hidden.x = 50;
+      panel.hidden.opacity = 0;
+      item.hidden.opacity = 0;
+      container.hidden.opacity = 0;
+      sessionItem.hidden.opacity = 0;
     }
-    else {
-      image.hidden.opacity = 0
-      image.hidden.x = 100
-      panel.hidden.y = 50
-      item.hidden.y = 50
-      sessionItem.hidden.x = 50
-      panel.hidden.opacity = 0
-      item.hidden.opacity = 0
-      container.hidden.opacity = 0
-      sessionItem.hidden.opacity = 0
-    }
-  }
+  };
 
   useEffect(() => {
     // Logic for dark mode toggle
-    if (darkModes) document.getElementById('main')!.classList.add('dark-mode')
-    else document.getElementById('main')!.classList.remove('dark-mode')
+    if (darkModes) document.getElementById("main")!.classList.add("dark-mode");
+    else document.getElementById("main")!.classList.remove("dark-mode");
 
     // Logic for the animation toggle
-    if (lowSpecView) document.getElementById('main')!.classList.add('low-spec')
-    else document.getElementById('main')!.classList.remove('low-spec')
-  })
+    if (lowSpecView) document.getElementById("main")!.classList.add("low-spec");
+    else document.getElementById("main")!.classList.remove("low-spec");
+  });
 
   if (!USE_REFRESH) {
     return (
@@ -386,28 +405,7 @@ function NewTopNavFc(props: Props) {
   return (
     <div>
       <div className="top-bar d-none d-lg-flex">
-        <button
-          className={`btn ${darkModes ? '' : 'text-light'}`}
-          title={`${darkModes ? 'Turn on Dark mode' : 'Turn on Light Mode'}`}
-          onClick={() => toggleDarkMode()}
-        >
-          <FontAwesomeIcon
-            icon={darkModes ? faSun : faMoon}
-          />
-
-        </button>
-        <button
-          className={`btn  ${darkModes ? '' : 'text-light'}`}
-          title={`${lowSpecView ? 'Turn on animations' : 'Turn off animations'}`}
-          onClick={() => toggleLowSpec()}
-        >
-          <FontAwesomeIcon
-            icon={lowSpecView ? faLaptop : faComputer}
-            className={`${lowSpecView ? '' : 'fa-beat-fade'}`}
-          />
-        </button>
-
-        <div className="container d-flex">
+        <div className="container d-flex align-items-center">
           <div className="d-flex gap-4 flex-grow-1">
             <Link className="top-bar-text" to="/about">
               About
@@ -422,18 +420,45 @@ function NewTopNavFc(props: Props) {
               Developers
             </a>
           </div>
-          <div className="d-flex gap-4">
+          <div className="d-flex gap-3 align-items-center">
             {/* <p className="top-bar-text">
               Online Users: <span className="fw-bold text-red">1,204</span>
             </p> */}
-            <p className="top-bar-text">
-              TTS Queued: <span className="fw-bold text-red">{pendingTtsJobs.pending_job_count}</span>
+            <Tippy
+              content={`${
+                darkModes ? "Toggle Light Mode" : "Toggle Dark Mode"
+              }`}
+            >
+              <button
+                className={`btn btn-toggle ${darkModes ? "dark" : ""}`}
+                onClick={() => toggleDarkMode()}
+              >
+                <FontAwesomeIcon icon={darkModes ? faSun : faMoon} />
+              </button>
+            </Tippy>
+            <Tippy
+              content={`${
+                lowSpecView ? "Turn on animations" : "Turn off animations"
+              }`}
+            >
+              <button
+                className={`btn btn-toggle  ${darkModes ? "dark" : ""}`}
+                onClick={() => toggleLowSpec()}
+              >
+                <FontAwesomeIcon
+                  icon={lowSpecView ? faLaptop : faComputer}
+                  className={`${lowSpecView ? "" : ""}`}
+                />
+              </button>
+            </Tippy>
+            <p className="top-bar-text ms-2">
+              TTS Queued:{" "}
+              <span className="fw-bold text-red">
+                {pendingTtsJobs.pending_job_count}
+              </span>
             </p>
-
           </div>
-
         </div>
-
       </div>
 
       <nav
@@ -593,7 +618,11 @@ function NewTopNavFc(props: Props) {
 
                 <li className="nav-item d-lg-none">
                   {/* TODO(echelon): Fix the build warnings about href not being accessible. */}
-                  <a className="nav-link" aria-current="page" href={FrontendUrlConfig.developerDocs()}>
+                  <a
+                    className="nav-link"
+                    aria-current="page"
+                    href={FrontendUrlConfig.developerDocs()}
+                  >
                     Developers
                   </a>
                 </li>
@@ -607,7 +636,10 @@ function NewTopNavFc(props: Props) {
                       Online: <span className="fw-bold text-red">1,204</span>
                     </p> */}
                     <div className="top-bar-text mobile">
-                      TTS Queued: <span className="fw-bold text-red ">{pendingTtsJobs.pending_job_count}</span>
+                      TTS Queued:{" "}
+                      <span className="fw-bold text-red ">
+                        {pendingTtsJobs.pending_job_count}
+                      </span>
                     </div>
                   </div>
                 </li>