diff --git a/shared/ui/src/lib/Footer.tsx b/shared/ui/src/lib/Footer.tsx
index 242a22a0..0cc08dc4 100644
--- a/shared/ui/src/lib/Footer.tsx
+++ b/shared/ui/src/lib/Footer.tsx
@@ -1,7 +1,11 @@
 import { LogoImageNeutral } from './LogoImageNeutral';
 
-export const Footer = () => (
-  <div className="absolute inset-x-0 bottom-0 h-40 py-14">
+export interface FooterProps {
+  className?: string;
+}
+
+export const Footer = ({ className }: FooterProps) => (
+  <div className={className}>
     <LogoImageNeutral className="mx-auto h-12 w-12" />
   </div>
 );
diff --git a/shared/ui/src/lib/NavLink.tsx b/shared/ui/src/lib/NavLink.tsx
index 3878bf2b..ca3863a8 100644
--- a/shared/ui/src/lib/NavLink.tsx
+++ b/shared/ui/src/lib/NavLink.tsx
@@ -1,11 +1,14 @@
-import { forwardRef, Ref } from 'react';
-import { NavLink as RouterNavLink, NavLinkProps, To } from 'react-router-dom';
 import { eventBus } from '@jasonruesch/shared/utils';
+import { forwardRef, Ref } from 'react';
+import { NavLinkProps, NavLink as RouterNavLink, To } from 'react-router-dom';
 
 export const NavLink = forwardRef(
   ({ to, ...props }: NavLinkProps, ref: Ref<HTMLAnchorElement>) => {
     const intendToNavigate = (to: To) => {
-      eventBus.dispatch('intendToNavigate', { to: to as string });
+      eventBus.dispatch('intendToNavigate', {
+        to: to as string,
+        y: window.scrollY,
+      });
     };
 
     return (
diff --git a/shared/ui/src/lib/PageTransitions.tsx b/shared/ui/src/lib/PageTransitions.tsx
index 62a4d478..c2104307 100644
--- a/shared/ui/src/lib/PageTransitions.tsx
+++ b/shared/ui/src/lib/PageTransitions.tsx
@@ -28,6 +28,7 @@ export const PageTransitions = ({
   const [isNavigating, setIsNavigating] = useState(false);
   const [slideRight, setSlideRight] = useState(false);
   const { resolvedTheme } = useTheme();
+  const [routingPageOffset, setRoutingPageOffset] = useState(0);
 
   useEffect(() => {
     if (previousPathname !== pathname) {
@@ -50,9 +51,10 @@ export const PageTransitions = ({
       pageMap.get(next)! < pageMap.get(current)!;
 
     // eslint-disable-next-line @typescript-eslint/no-explicit-any
-    const handleIntendToNavigate = ({ to }: any) => {
+    const handleIntendToNavigate = ({ to, y }: any) => {
       const slideRight = shouldSlideRight(pathname, to);
       setSlideRight(slideRight);
+      setRoutingPageOffset(y);
     };
 
     eventBus.on('intendToNavigate', handleIntendToNavigate);
@@ -74,7 +76,7 @@ export const PageTransitions = ({
       <AnimatePresence
         initial={false} // Disabled for now because the animate keyframes are running when the page loads
         mode="wait"
-        onExitComplete={() => window.scrollTo(0, 0)}
+        // onExitComplete={() => window.scrollTo(0, 0)}
       >
         <motion.div
           ref={pageRef}
@@ -107,7 +109,20 @@ export const PageTransitions = ({
             }
           }}
         >
-          {children}
+          <motion.div
+            initial={false}
+            animate={{
+              y: 0,
+            }}
+            exit={{
+              y: `-${routingPageOffset}px`,
+              transition: {
+                duration: 0,
+              },
+            }}
+          >
+            {children}
+          </motion.div>
         </motion.div>
       </AnimatePresence>
     </div>
diff --git a/shared/ui/src/lib/PageTransitionsVariants.ts b/shared/ui/src/lib/PageTransitionsVariants.ts
index ff74c013..5b2ffb6c 100644
--- a/shared/ui/src/lib/PageTransitionsVariants.ts
+++ b/shared/ui/src/lib/PageTransitionsVariants.ts
@@ -1,7 +1,7 @@
 import { Variants } from 'framer-motion';
 
 const SCALE = 0.6;
-const DURATION = 2; // seconds
+const DURATION = 1.5; // seconds
 
 export interface VariantProps {
   windowSize: { width: number; height: number };
diff --git a/shared/ui/src/lib/ThemeSelector.tsx b/shared/ui/src/lib/ThemeSelector.tsx
index d7e4b14c..c333df8b 100644
--- a/shared/ui/src/lib/ThemeSelector.tsx
+++ b/shared/ui/src/lib/ThemeSelector.tsx
@@ -1,16 +1,34 @@
-import { Fragment, useEffect } from 'react';
 import { Menu, Transition } from '@headlessui/react';
 import {
-  SunIcon,
-  MoonIcon,
-  ComputerDesktopIcon,
-} from '@heroicons/react/24/solid';
-import {
-  SunIcon as SunIconOutline,
   MoonIcon as MoonIconOutline,
+  SunIcon as SunIconOutline,
 } from '@heroicons/react/24/outline';
+import {
+  ComputerDesktopIcon,
+  MoonIcon,
+  SunIcon,
+} from '@heroicons/react/24/solid';
 import clsx from 'clsx';
 import { useTheme } from 'next-themes';
+import { Fragment, useEffect } from 'react';
+
+const menuItems = [
+  {
+    name: 'Light',
+    theme: 'light',
+    icon: <SunIcon className="mr-3 h-5 w-5" aria-hidden="true" />,
+  },
+  {
+    name: 'Dark',
+    theme: 'dark',
+    icon: <MoonIcon className="mr-3 h-5 w-5" aria-hidden="true" />,
+  },
+  {
+    name: 'System',
+    theme: 'system',
+    icon: <ComputerDesktopIcon className="mr-3 h-5 w-5" aria-hidden="true" />,
+  },
+];
 
 export interface ThemeSelectorProps {
   className?: string;
@@ -66,72 +84,27 @@ export function ThemeSelector({ className }: ThemeSelectorProps) {
       >
         <Menu.Items className="absolute right-0 z-50 mt-2 w-36 origin-top-right rounded-md bg-neutral-50 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-neutral-900 dark:shadow-black dark:ring-opacity-50">
           <div className="py-1">
-            <Menu.Item>
-              <button
-                className={clsx(
-                  'group flex w-full items-center px-4 py-2 text-sm text-neutral-900 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-700',
-                  theme === 'light'
-                    ? '!text-cyan-500 hover:!text-neutral-900 dark:!text-violet-400 dark:hover:!text-neutral-50'
-                    : ''
-                )}
-                onClick={() => setTheme('light')}
-              >
-                <SunIcon
-                  className={clsx(
-                    'mr-3 h-5 w-5',
-                    theme === 'light'
-                      ? 'text-cyan-500 group-hover:text-neutral-900 dark:text-violet-400 dark:group-hover:text-neutral-50'
-                      : ''
-                  )}
-                  aria-hidden="true"
-                />
-                <span>Light</span>
-              </button>
-            </Menu.Item>
-            <Menu.Item>
-              <button
-                className={clsx(
-                  'group flex w-full items-center px-4 py-2 text-sm text-neutral-900 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-700',
-                  theme === 'dark'
-                    ? '!text-cyan-500 hover:!text-neutral-900 dark:!text-violet-400 dark:hover:!text-neutral-50'
-                    : ''
-                )}
-                onClick={() => setTheme('dark')}
-              >
-                <MoonIcon
-                  className={clsx(
-                    'mr-3 h-5 w-5',
-                    theme === 'dark'
-                      ? 'text-cyan-500 group-hover:text-neutral-900 dark:text-violet-400 dark:group-hover:text-neutral-50'
-                      : ''
-                  )}
-                  aria-hidden="true"
-                />
-                <span>Dark</span>
-              </button>
-            </Menu.Item>
-            <Menu.Item>
-              <button
-                className={clsx(
-                  'group flex w-full items-center px-4 py-2 text-sm text-neutral-900 hover:bg-neutral-200 dark:text-neutral-50 dark:hover:bg-neutral-700',
-                  theme === 'system'
-                    ? '!text-cyan-500 hover:!text-neutral-900 dark:!text-violet-400 dark:hover:!text-neutral-50'
-                    : ''
+            {menuItems.map((item) => (
+              <Menu.Item key={item.name}>
+                {({ active }) => (
+                  <button
+                    className={clsx(
+                      'group flex w-full items-center px-4 py-2 text-sm',
+                      active ? 'bg-neutral-200 dark:bg-neutral-700' : '',
+                      theme === item.theme
+                        ? active
+                          ? 'text-neutral-900 dark:text-neutral-50'
+                          : 'text-cyan-500 dark:text-violet-400'
+                        : 'text-neutral-900 dark:text-neutral-50'
+                    )}
+                    onClick={() => setTheme(item.theme)}
+                  >
+                    {item.icon}
+                    {item.name}
+                  </button>
                 )}
-                onClick={() => setTheme('system')}
-              >
-                <ComputerDesktopIcon
-                  className={clsx(
-                    'mr-3 h-5 w-5',
-                    theme === 'system'
-                      ? 'text-cyan-500 group-hover:text-neutral-900 dark:text-violet-400 dark:group-hover:text-neutral-50'
-                      : ''
-                  )}
-                  aria-hidden="true"
-                />
-                <span>System</span>
-              </button>
-            </Menu.Item>
+              </Menu.Item>
+            ))}
           </div>
         </Menu.Items>
       </Transition>
diff --git a/src/app/about/about.tsx b/src/app/about/about.tsx
index cbe04359..b63a62c2 100644
--- a/src/app/about/about.tsx
+++ b/src/app/about/about.tsx
@@ -5,8 +5,8 @@ export interface AboutProps {}
 
 export function About(props: AboutProps) {
   return (
-    <div className="mx-auto grid h-full max-w-xl pb-40 pt-16 sm:place-items-center sm:pb-16">
-      <div className="w-full pt-6 sm:pt-0">
+    <div className="grid h-full sm:place-items-center">
+      <div className="mx-auto w-full max-w-xl pt-6 sm:pt-0">
         <div className="mb-4 space-y-4">
           <ProfileImage />
 
@@ -38,7 +38,7 @@ export function About(props: AboutProps) {
           <span aria-hidden="true"> &rarr;</span>
         </NavLink>
 
-        <Footer />
+        <Footer className="pt-16 sm:pt-20" />
       </div>
     </div>
   );
diff --git a/src/app/app.tsx b/src/app/app.tsx
index 2d09b696..9baa8e3c 100644
--- a/src/app/app.tsx
+++ b/src/app/app.tsx
@@ -29,10 +29,10 @@ export function App() {
       </Header>
       <PageTransitions>
         <main className="flex min-h-screen bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50">
-          <Beams className="z-10" />
-          <div className="relative z-20 mx-auto w-full max-w-screen-lg px-4 sm:px-8">
+          <div className="relative z-20 mx-auto w-full max-w-screen-lg px-4 py-16 sm:px-8 sm:py-20">
             <AnimatedOutlet />
           </div>
+          <Beams className="z-10" />
         </main>
       </PageTransitions>
     </ThemeProvider>
diff --git a/src/app/contact/contact.tsx b/src/app/contact/contact.tsx
index cc1ae6d7..43f2a248 100644
--- a/src/app/contact/contact.tsx
+++ b/src/app/contact/contact.tsx
@@ -89,8 +89,8 @@ export function Contact(props: ContactProps) {
   });
 
   return (
-    <div className="mx-auto grid h-full max-w-xl pb-40 pt-16 sm:place-items-center sm:pb-16">
-      <div className="w-full pt-6 sm:pt-0">
+    <div className="grid h-full sm:place-items-center">
+      <div className="mx-auto w-full max-w-xl pt-6 sm:pt-0">
         <h1 className="mb-4">Get In Touch</h1>
         <form onSubmit={handleSubmit} noValidate>
           <div className="grid grid-cols-1 gap-x-6 gap-y-1 sm:grid-cols-6">
@@ -271,7 +271,7 @@ export function Contact(props: ContactProps) {
           </div>
         </form>
 
-        <Footer />
+        <Footer className="pt-16 sm:pt-20" />
       </div>
 
       {notification && (
diff --git a/src/app/errors/404.tsx b/src/app/errors/404.tsx
index 31a87c04..76b5c23d 100644
--- a/src/app/errors/404.tsx
+++ b/src/app/errors/404.tsx
@@ -1,7 +1,7 @@
 export function Error404() {
   return (
-    <div className="mx-auto grid h-full max-w-xl pt-16 pb-4 sm:place-items-center sm:py-20">
-      <div className="w-full">
+    <div className="grid h-full sm:place-items-center">
+      <div className="mx-auto w-full max-w-xl pt-6 sm:pt-0">
         <div className="space-y-4">
           <h1>404</h1>
           <p className="text-neutral-500 dark:text-neutral-400">
diff --git a/src/app/errors/500.tsx b/src/app/errors/500.tsx
index ad5ad311..618f9917 100644
--- a/src/app/errors/500.tsx
+++ b/src/app/errors/500.tsx
@@ -23,11 +23,10 @@ export function Error500() {
           />
         )}
       </Header>
-      <Beams className="z-10" />
       <main className="flex min-h-screen bg-neutral-100 text-neutral-900 dark:bg-neutral-800 dark:text-neutral-50">
-        <div className="mx-auto w-full max-w-screen-lg px-4 sm:px-8">
-          <div className="mx-auto grid h-full max-w-xl pt-16 pb-4 sm:place-items-center sm:py-20">
-            <div className="w-full">
+        <div className="relative z-20 mx-auto w-full max-w-screen-lg px-4 py-16 sm:px-8 sm:py-20">
+          <div className="grid h-full sm:place-items-center">
+            <div className="mx-auto w-full max-w-xl pt-6 sm:pt-0">
               <div className="space-y-4">
                 <h1>500</h1>
                 <p className="text-neutral-500 dark:text-neutral-400">
@@ -37,6 +36,7 @@ export function Error500() {
             </div>
           </div>
         </div>
+        <Beams className="z-10" />
       </main>
     </ThemeProvider>
   );
diff --git a/src/app/home/home.tsx b/src/app/home/home.tsx
index a81e40a5..9afa97b4 100644
--- a/src/app/home/home.tsx
+++ b/src/app/home/home.tsx
@@ -64,8 +64,8 @@ export function Home(props: HomeProps) {
   }, [isXSmallScreen, handleHoverStart, handleHoverEnd]);
 
   return (
-    <div className="mx-auto grid h-full max-w-xl place-items-center py-16 sm:py-20">
-      <div className="w-full">
+    <div className="grid h-full place-items-center">
+      <div className="mx-auto max-w-xl w-full">
         <ProfileImage large className="mb-4" />
 
         <h1 className="mb-4 text-center text-neutral-500 dark:text-neutral-400">
@@ -86,14 +86,14 @@ export function Home(props: HomeProps) {
           Web Development and Design
         </h1>
 
-        <NavLink
-          to="/about"
-          aria-label="Learn more about me"
-          className="mx-auto flex w-12 cursor-pointer justify-end text-sm font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500 sm:w-24"
+        <motion.div
+          onHoverStart={() => handleHoverStart()}
+          onHoverEnd={() => handleHoverEnd()}
         >
-          <motion.div
-            onHoverStart={() => handleHoverStart()}
-            onHoverEnd={() => handleHoverEnd()}
+          <NavLink
+            to="/about"
+            aria-label="Learn more about me"
+            className="mx-auto flex w-12 cursor-pointer justify-end text-sm font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500 sm:w-24"
           >
             <motion.div
               initial="initial"
@@ -109,8 +109,8 @@ export function Home(props: HomeProps) {
                 aria-hidden="true"
               />
             </motion.div>
-          </motion.div>
-        </NavLink>
+          </NavLink>
+        </motion.div>
       </div>
     </div>
   );
diff --git a/src/app/privacy/privacy.tsx b/src/app/privacy/privacy.tsx
index cb564c89..39ea6704 100644
--- a/src/app/privacy/privacy.tsx
+++ b/src/app/privacy/privacy.tsx
@@ -1,5 +1,6 @@
 import { Footer } from '@jasonruesch/shared/ui';
-import { useCallback, useEffect, useRef } from 'react';
+import { MouseEvent, useCallback, useEffect, useRef } from 'react';
+import { useLocation, useNavigate } from 'react-router-dom';
 
 const navigation = [
   {
@@ -56,28 +57,32 @@ const navigation = [
 export interface PrivacyProps {}
 
 export function Privacy(props: PrivacyProps) {
+  const { hash } = useLocation();
+  const navigate = useNavigate();
   const targetRefs = useRef<Map<string, HTMLElement>>(new Map());
 
-  const handleScrollTo = useCallback((target: string) => {
-    targetRefs.current.get(target)?.scrollIntoView(true);
+  const handleScrollTo = useCallback(
+    (target: string, e?: MouseEvent<HTMLAnchorElement>) => {
+      e?.preventDefault();
 
-    const url = new URL(window.location.href);
-    if (url.hash !== `#${target}`) {
-      url.hash = `#${target}`;
-      window.history.pushState({}, '', url);
-    }
-  }, []);
+      targetRefs.current.get(target)?.scrollIntoView(true);
+
+      if (`#${target}` !== hash) {
+        navigate(`#${target}`);
+      }
+    },
+    [hash, navigate]
+  );
 
   useEffect(() => {
-    const hash = window.location.hash;
     if (hash) {
       handleScrollTo(hash.slice(1));
     }
-  }, [handleScrollTo]);
+  }, [hash, handleScrollTo]);
 
   return (
-    <div className="pb-40 pt-16">
-      <div className="w-full pt-6">
+    <div className="grid h-full sm:place-items-center">
+      <div className="mx-auto w-full pt-6">
         <div className="space-y-4">
           <h1>Privacy Policy</h1>
           <small>Last updated July 01, 2022</small>
@@ -131,13 +136,13 @@ export function Privacy(props: PrivacyProps) {
                 clicking the link following each key point or by using our table
                 of contents below to find the section you are looking for. You
                 can also{' '}
-                <button
-                  type="button"
+                <a
+                  href="#toc"
                   className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
-                  onClick={() => handleScrollTo('toc')}
+                  onClick={(e) => handleScrollTo('toc', e)}
                 >
                   click here to go directly to our table of contents.
-                </button>
+                </a>
               </em>
             </p>
             <p>
@@ -145,13 +150,13 @@ export function Privacy(props: PrivacyProps) {
               navigate our Services, we may process personal information
               depending on how you interact with Jason Ruesch and the Services,
               the choices you make, and the products and features you use.{' '}
-              <button
-                type="button"
+              <a
+                href="#personalinfo"
                 className="cursor-pointer text-cyan-500 dark:text-violet-400"
                 onClick={() => handleScrollTo('personalinfo')}
               >
                 Click here to learn more.
-              </button>
+              </a>
             </p>
             <p>
               Do we process any sensitive personal information? We do not
@@ -168,25 +173,25 @@ export function Privacy(props: PrivacyProps) {
               may also process your information for other purposes with your
               consent. We process your information only when we have a valid
               legal reason to do so.{' '}
-              <button
-                type="button"
+              <a
+                href="infouse"
                 className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
                 onClick={() => handleScrollTo('infouse')}
               >
                 Click here to learn more.
-              </button>
+              </a>
             </p>
             <p>
               In what situations and with which parties do we share personal
               information? We may share information in specific situations and
               with specific third parties.{' '}
-              <button
-                type="button"
+              <a
+                href="whoshare"
                 className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
                 onClick={() => handleScrollTo('whoshare')}
               >
                 Click here to learn more.
-              </button>
+              </a>
             </p>
             <p>
               How do we keep your information safe? We have organizational and
@@ -197,25 +202,25 @@ export function Privacy(props: PrivacyProps) {
               cybercriminals, or other unauthorized third parties will not be
               able to defeat our security and improperly collect, access, steal,
               or modify your information.{' '}
-              <button
-                type="button"
+              <a
+                href="infosafe"
                 className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
                 onClick={() => handleScrollTo('infosafe')}
               >
                 Click here to learn more.
-              </button>
+              </a>
             </p>
             <p>
               What are your rights? Depending on where you are located
               geographically, the applicable privacy law may mean you have
               certain rights regarding your personal information.{' '}
-              <button
-                type="button"
+              <a
+                href="privacyrights"
                 className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
                 onClick={() => handleScrollTo('privacyrights')}
               >
                 Click here to learn more.
-              </button>
+              </a>
             </p>
             <p>
               How do you exercise your rights? The easiest way to exercise your
@@ -234,13 +239,13 @@ export function Privacy(props: PrivacyProps) {
             <p>
               Want to learn more about what Jason Ruesch does with any
               information we collect?{' '}
-              <button
-                type="button"
+              <a
+                href="toc"
                 className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
                 onClick={() => handleScrollTo('toc')}
               >
                 Click here to review the notice in full.
-              </button>
+              </a>
             </p>
           </section>
           <section
@@ -252,13 +257,13 @@ export function Privacy(props: PrivacyProps) {
             <ol className="list-inside list-decimal">
               {navigation.map((item) => (
                 <li key={item.name}>
-                  <button
-                    type="button"
+                  <a
+                    href={`#${item.id}`}
                     className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
                     onClick={() => handleScrollTo(item.id)}
                   >
                     {item.name}
-                  </button>
+                  </a>
                 </li>
               ))}
             </ol>
@@ -530,13 +535,13 @@ export function Privacy(props: PrivacyProps) {
                 right to withdraw your consent at any time. You can withdraw
                 your consent at any time by contacting us by using the contact
                 details provided in the section{' '}
-                <button
-                  type="button"
+                <a
+                  href="contact"
                   className="font-medium text-cyan-500 hover:text-cyan-600 dark:text-violet-400 dark:hover:text-violet-500"
                   onClick={() => handleScrollTo('contact')}
                 >
                   &quot;HOW CAN YOU CONTACT US ABOUT THIS NOTICE?&quot;
-                </button>{' '}
+                </a>{' '}
                 below.
               </u>
             </p>
@@ -672,7 +677,7 @@ export function Privacy(props: PrivacyProps) {
           </section>
         </div>
 
-        <Footer />
+        <Footer className="pt-16 sm:pt-20" />
       </div>
     </div>
   );
diff --git a/src/main.tsx b/src/main.tsx
index dc99e591..9dc5dc42 100644
--- a/src/main.tsx
+++ b/src/main.tsx
@@ -4,11 +4,11 @@ import { createBrowserRouter, RouterProvider } from 'react-router-dom';
 
 import About from './app/about/about';
 import App from './app/app';
-import Error404 from './app/errors/404';
 import Contact from './app/contact/contact';
+import Error404 from './app/errors/404';
+import Error500 from './app/errors/500';
 import Home from './app/home/home';
 import Privacy from './app/privacy/privacy';
-import Error500 from './app/errors/500';
 
 const router = createBrowserRouter([
   {
@@ -16,14 +16,15 @@ const router = createBrowserRouter([
     element: <App />,
     errorElement: <Error500 />,
     children: [
-      { path: '', errorElement: <Error500 /> },
       { index: true, element: <Home /> },
       { path: 'about', element: <About /> },
       { path: 'contact', element: <Contact /> },
       { path: 'privacy', element: <Privacy /> },
+      { path: '404', element: <Error404 /> },
       { path: '*', element: <Error404 /> },
     ],
   },
+  { path: '/500', element: <Error500 /> },
 ]);
 
 const root = ReactDOM.createRoot(