diff --git a/components/layouts/container.module.css b/components/layouts/container.module.css
index 5b37579ae..fa12c78eb 100644
--- a/components/layouts/container.module.css
+++ b/components/layouts/container.module.css
@@ -29,6 +29,6 @@
   }
 
   .ArticleContainer :global(.toc):not(.advanced-features) ~ .ContentContainer {
-    padding-right: calc(226px + 2rem);
+    @apply pr-64 3xl:pr-72;
   }
 }
diff --git a/components/navigation/navItem.module.css b/components/navigation/navItem.module.css
index 3c917537a..bed7a535a 100644
--- a/components/navigation/navItem.module.css
+++ b/components/navigation/navItem.module.css
@@ -6,6 +6,12 @@
   @apply flex items-center p-2 mr-4 xl:mr-4 mb-0 rounded-md;
 }
 
+/* Design pass needed.
+Centering the text under the icons when condensed creates misalignment.
+Either complete the details for center alignment, or remove this to leave it left
+justified. The condensed menu requires hover to expand, which isn't mobile-friendly.*/
+
+/*
 .CondensedHeadingContainer {
   @apply lg:flex-wrap lg:justify-center lg:text-center lg:w-min;
 }
@@ -13,6 +19,7 @@
 .CondensedHeadingIconContainer {
   @apply lg:mr-0;
 }
+*/
 
 .Icon {
   @apply text-white !important;
diff --git a/components/utilities/breadCrumbs.module.css b/components/utilities/breadCrumbs.module.css
index 4e912c5f7..653929017 100644
--- a/components/utilities/breadCrumbs.module.css
+++ b/components/utilities/breadCrumbs.module.css
@@ -17,7 +17,7 @@
 }
 
 :global(.dark) .Link {
-  @apply text-gray-50 !important;
+  @apply text-gray-70 !important;
 }
 
 .Separator {
diff --git a/components/utilities/floatingNav.module.css b/components/utilities/floatingNav.module.css
index dde65dbb8..8aca21104 100644
--- a/components/utilities/floatingNav.module.css
+++ b/components/utilities/floatingNav.module.css
@@ -1,5 +1,5 @@
 .ListContainer {
-  @apply absolute right-0 top-0 h-full w-56 z-10 hidden;
+  @apply absolute right-0 top-0 h-full w-56 z-10 hidden 3xl:w-64;
 }
 
 .List {
@@ -27,7 +27,7 @@
 
 /* Styles for the active item on the floating nav */
 .Link {
-  @apply border-none inline-block pr-2 w-40 leading-4 hover:opacity-70 hover:no-underline;
+  @apply border-none inline-block pr-2 w-40 leading-4 hover:opacity-70 hover:no-underline 3xl:w-48;
   @apply text-gray-70 !important;
 }
 
diff --git a/components/utilities/themeToggle.js b/components/utilities/themeToggle.js
index 446a117ca..7da5b1a45 100644
--- a/components/utilities/themeToggle.js
+++ b/components/utilities/themeToggle.js
@@ -5,6 +5,7 @@ import styles from "./themeToggle.module.css";
 const ThemeToggle = () => {
   const [activeTheme, setActiveTheme] = useState("light");
   let inactiveTheme;
+  inactiveTheme = activeTheme === "light" ? "dark" : "light";
 
   const getUserPreference = () => {
     if (window.localStorage.getItem("theme")) {
@@ -16,11 +17,7 @@ const ThemeToggle = () => {
   };
 
   const changeTailwindTheme = (theme) => {
-    if (theme === "dark") {
-      inactiveTheme = "light";
-    } else {
-      inactiveTheme = "dark";
-    }
+    inactiveTheme = theme === "light" ? "dark" : "light";
     document.documentElement.classList.add(theme);
     document.documentElement.classList.remove(inactiveTheme);
     setActiveTheme(theme);
diff --git a/tailwind.config.js b/tailwind.config.js
index 92634f9b7..3852469a4 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -16,6 +16,7 @@ module.exports = {
       lg: "1024px",
       xl: "1280px",
       "2xl": "1448px",
+      "3xl": "1600px",
     },
     fontFamily: {
       sans: [