diff --git a/src/components/desktop-nav.js b/src/components/desktop-nav.js
index bbff9a6..97753c7 100644
--- a/src/components/desktop-nav.js
+++ b/src/components/desktop-nav.js
@@ -25,6 +25,8 @@ export const DesktopNav = ({ navItems, ...props }) => {
                 fontSize={'sm'}
                 fontWeight={'bold'}
                 // eslint-disable-next-line react-hooks/rules-of-hooks
+                whiteSpace={'nowrap'}
+                flexShrink={0}
                 color={useColorModeValue('gray.600', 'gray.200')}
                 _hover={{
                   textDecoration: 'none',
diff --git a/src/components/header.js b/src/components/header.js
index 064f5bf..a0203a6 100644
--- a/src/components/header.js
+++ b/src/components/header.js
@@ -2,7 +2,7 @@ import { DesktopNav } from '@/components/desktop-nav'
 import { Link } from '@/components/mdx'
 import { MobileNav } from '@/components/mobile-nav'
 import { menuItems } from '@/data/menu-items'
-import { CloseIcon, HamburgerIcon } from '@chakra-ui/icons'
+import { CloseIcon, HamburgerIcon, MoonIcon, SunIcon } from '@chakra-ui/icons'
 import {
   Box,
   Container,
@@ -95,6 +95,13 @@ export const Header = () => {
               navItems={navItems}
               display={{ base: 'none', md: 'flex' }}
             />
+            <IconButton
+              aria-label={`Switch to ${colorMode === 'light' ? 'dark' : 'light'} mode`}
+              icon={colorMode === 'light' ? <MoonIcon /> : <SunIcon />}
+              onClick={toggleColorMode}
+              variant={'ghost'}
+              size={'sm'}
+            />
           </Stack>
         </Container>
       </Flex>
diff --git a/src/components/mobile-nav.js b/src/components/mobile-nav.js
index 9d7e619..d3029e6 100644
--- a/src/components/mobile-nav.js
+++ b/src/components/mobile-nav.js
@@ -35,6 +35,7 @@ const MobileNavItem = ({ href, children, label }) => {
       >
         <Text
           fontWeight={600}
+          whiteSpace={'nowrap'}
           color={useColorModeValue('gray.600', 'gray.200')}
         >
           {label}
@@ -56,6 +57,7 @@ const MobileNavItem = ({ href, children, label }) => {
           pl={4}
           borderLeft={1}
           borderStyle={'solid'}
+          whiteSpace={'nowrap'}
           borderColor={useColorModeValue('gray.200', 'gray.700')}
           align={'start'}
         >
diff --git a/src/pages/_app.js b/src/pages/_app.js
index 961b8f0..1c027c3 100644
--- a/src/pages/_app.js
+++ b/src/pages/_app.js
@@ -4,7 +4,6 @@ import { ChakraProvider } from '@chakra-ui/react'
 import { useRouter } from 'next/router'
 import Script from 'next/script'
 import { useEffect } from 'react'
-import { ColorModeToggle } from '@/components/ColorModeToggle'
 
 function MyApp({ Component, pageProps }) {
   const router = useRouter()
@@ -42,7 +41,6 @@ function MyApp({ Component, pageProps }) {
         }}
       />
 
-      <ColorModeToggle />
       <Component {...pageProps} />
     </ChakraProvider>
   )