diff --git a/packages/manager/src/MainContent.tsx b/packages/manager/src/MainContent.tsx
index bdfb168bd59..cb97cea4b27 100644
--- a/packages/manager/src/MainContent.tsx
+++ b/packages/manager/src/MainContent.tsx
@@ -9,17 +9,18 @@ import { makeStyles } from 'tss-react/mui';
 import Logo from 'src/assets/logo/akamai-logo.svg';
 import { MainContentBanner } from 'src/components/MainContentBanner';
 import { MaintenanceScreen } from 'src/components/MaintenanceScreen';
+import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/constants';
 import { SideMenu } from 'src/components/PrimaryNav/SideMenu';
-import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
+import { useIsPageScrollable } from 'src/components/PrimaryNav/utils';
 import { SuspenseLoader } from 'src/components/SuspenseLoader';
 import { useDialogContext } from 'src/context/useDialogContext';
-import { Footer } from 'src/features/Footer';
+import { FOOTER_HEIGHT, Footer } from 'src/features/Footer';
 import { GlobalNotifications } from 'src/features/GlobalNotifications/GlobalNotifications';
 import {
   notificationCenterContext,
   useNotificationContext,
 } from 'src/features/NotificationCenter/NotificationCenterContext';
-import { TopMenu } from 'src/features/TopMenu/TopMenu';
+import { TOPMENU_HEIGHT, TopMenu } from 'src/features/TopMenu/TopMenu';
 import {
   useMutatePreferences,
   usePreferences,
@@ -199,6 +200,7 @@ const IAM = React.lazy(() =>
 );
 
 export const MainContent = () => {
+  const contentRef = React.useRef<HTMLDivElement>(null);
   const { classes, cx } = useStyles();
   const { data: isDesktopSidebarOpenPreference } = usePreferences(
     (preferences) => preferences?.desktop_sidebar_open
@@ -239,6 +241,8 @@ export const MainContent = () => {
 
   const { isIAMEnabled } = useIsIAMEnabled();
 
+  const { isPageScrollable } = useIsPageScrollable(contentRef);
+
   /**
    * this is the case where the user has successfully completed signup
    * but needs a manual review from Customer Support. In this case,
@@ -292,6 +296,11 @@ export const MainContent = () => {
     });
   };
 
+  const sideMenuContainerHeight =
+    isPageScrollable === true
+      ? '100vh'
+      : `calc(100vh - ${FOOTER_HEIGHT + TOPMENU_HEIGHT}px)`;
+
   return (
     <div className={classes.appFrame}>
       <SessionExpirationProvider value={sessionExpirationContextValue}>
@@ -303,90 +312,100 @@ export const MainContent = () => {
                 openSideMenu={() => toggleMenu(true)}
                 username={username}
               />
-              <SideMenu
-                closeMenu={() => toggleMenu(false)}
-                collapse={desktopMenuIsOpen || false}
-                desktopMenuToggle={desktopMenuToggle}
-                open={menuIsOpen}
-              />
-              <div
-                className={cx(classes.content, {
-                  [classes.fullWidthContent]:
-                    desktopMenuIsOpen ||
-                    (desktopMenuIsOpen && desktopMenuIsOpen === true),
-                })}
-              >
-                <MainContentBanner />
-                <main
-                  className={classes.cmrWrapper}
-                  id="main-content"
-                  role="main"
+              <Box display="flex" flex={1} position="relative">
+                <Box
+                  alignSelf="flex-start"
+                  height={sideMenuContainerHeight}
+                  position="sticky"
+                  top={0}
+                  zIndex={10000}
+                >
+                  <SideMenu
+                    closeMenu={() => toggleMenu(false)}
+                    collapse={desktopMenuIsOpen || false}
+                    desktopMenuToggle={desktopMenuToggle}
+                    isPageScrollable={isPageScrollable}
+                    open={menuIsOpen}
+                  />
+                </Box>
+                <div
+                  className={cx(classes.content, {
+                    [classes.fullWidthContent]: desktopMenuIsOpen === true,
+                  })}
+                  ref={contentRef}
                 >
-                  <Grid className={classes.grid} container spacing={0}>
-                    <Grid className={cx(classes.switchWrapper, 'p0')}>
-                      <GlobalNotifications />
-                      <React.Suspense fallback={<SuspenseLoader />}>
-                        <Switch>
-                          <Route component={LinodesRoutes} path="/linodes" />
-                          {isPlacementGroupsEnabled && (
+                  <MainContentBanner />
+                  <main
+                    className={classes.cmrWrapper}
+                    id="main-content"
+                    role="main"
+                  >
+                    <Grid className={classes.grid} container spacing={0}>
+                      <Grid className={cx(classes.switchWrapper, 'p0')}>
+                        <GlobalNotifications />
+                        <React.Suspense fallback={<SuspenseLoader />}>
+                          <Switch>
+                            <Route component={LinodesRoutes} path="/linodes" />
+                            {isPlacementGroupsEnabled && (
+                              <Route
+                                component={PlacementGroups}
+                                path="/placement-groups"
+                              />
+                            )}
                             <Route
-                              component={PlacementGroups}
-                              path="/placement-groups"
+                              component={NodeBalancers}
+                              path="/nodebalancers"
                             />
-                          )}
-                          <Route
-                            component={NodeBalancers}
-                            path="/nodebalancers"
-                          />
-                          <Route component={Managed} path="/managed" />
-                          <Route component={Longview} path="/longview" />
-                          <Route component={Images} path="/images" />
-                          <Route
-                            component={StackScripts}
-                            path="/stackscripts"
-                          />
-                          <Route
-                            component={ObjectStorage}
-                            path="/object-storage"
-                          />
-                          <Route component={Kubernetes} path="/kubernetes" />
-                          {isIAMEnabled && (
-                            <Route component={IAM} path="/iam" />
-                          )}
-                          <Route component={Account} path="/account" />
-                          <Route component={Profile} path="/profile" />
-                          <Route component={Help} path="/support" />
-                          <Route component={SearchLanding} path="/search" />
-                          <Route component={EventsLanding} path="/events" />
-                          <Route component={Firewalls} path="/firewalls" />
-                          {isDatabasesEnabled && (
-                            <Route component={Databases} path="/databases" />
-                          )}
-                          <Route component={VPC} path="/vpcs" />
-                          {isACLPEnabled && (
-                            <Route component={CloudPulse} path="/monitor" />
-                          )}
-                          <Redirect exact from="/" to={defaultRoot} />
-                          {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
-                          <Redirect from="/dashboard" to={defaultRoot} />
-                          {/**
-                           * This is the catch all routes that allows TanStack Router to take over.
-                           * When a route is not found here, it will be handled by the migration router, which in turns handles the NotFound component.
-                           * It is currently set to the migration router in order to incrementally migrate the app to the new routing.
-                           * This is a temporary solution until we are ready to fully migrate to TanStack Router.
-                           */}
-                          <Route path="*">
-                            <RouterProvider
-                              context={{ queryClient }}
-                              router={migrationRouter as AnyRouter}
+                            <Route component={Managed} path="/managed" />
+                            <Route component={Longview} path="/longview" />
+                            <Route component={Images} path="/images" />
+                            <Route
+                              component={StackScripts}
+                              path="/stackscripts"
+                            />
+                            <Route
+                              component={ObjectStorage}
+                              path="/object-storage"
                             />
-                          </Route>
-                        </Switch>
-                      </React.Suspense>
+                            <Route component={Kubernetes} path="/kubernetes" />
+                            {isIAMEnabled && (
+                              <Route component={IAM} path="/iam" />
+                            )}
+                            <Route component={Account} path="/account" />
+                            <Route component={Profile} path="/profile" />
+                            <Route component={Help} path="/support" />
+                            <Route component={SearchLanding} path="/search" />
+                            <Route component={EventsLanding} path="/events" />
+                            <Route component={Firewalls} path="/firewalls" />
+                            {isDatabasesEnabled && (
+                              <Route component={Databases} path="/databases" />
+                            )}
+                            <Route component={VPC} path="/vpcs" />
+                            {isACLPEnabled && (
+                              <Route component={CloudPulse} path="/monitor" />
+                            )}
+                            <Redirect exact from="/" to={defaultRoot} />
+                            {/** We don't want to break any bookmarks. This can probably be removed eventually. */}
+                            <Redirect from="/dashboard" to={defaultRoot} />
+                            {/**
+                             * This is the catch all routes that allows TanStack Router to take over.
+                             * When a route is not found here, it will be handled by the migration router, which in turns handles the NotFound component.
+                             * It is currently set to the migration router in order to incrementally migrate the app to the new routing.
+                             * This is a temporary solution until we are ready to fully migrate to TanStack Router.
+                             */}
+                            <Route path="*">
+                              <RouterProvider
+                                context={{ queryClient }}
+                                router={migrationRouter as AnyRouter}
+                              />
+                            </Route>
+                          </Switch>
+                        </React.Suspense>
+                      </Grid>
                     </Grid>
-                  </Grid>
-                </main>
-              </div>
+                  </main>
+                </div>
+              </Box>
             </NotificationProvider>
             <Footer />
           </ComplianceUpdateProvider>
diff --git a/packages/manager/src/Root.styles.ts b/packages/manager/src/Root.styles.ts
index 821ad754a70..f1140cb2b21 100644
--- a/packages/manager/src/Root.styles.ts
+++ b/packages/manager/src/Root.styles.ts
@@ -1,6 +1,6 @@
 import { makeStyles } from 'tss-react/mui';
 
-import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
+import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/constants';
 
 import type { Theme } from '@mui/material/styles';
 
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
index cf6f8b816a4..890149ff5ee 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.styles.ts
@@ -1,11 +1,11 @@
-import { Accordion, Box, Divider, IconButton, omittedProps } from '@linode/ui';
+import { Accordion, Box, Divider, omittedProps } from '@linode/ui';
 import { Chip } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import Grid from '@mui/material/Unstable_Grid2';
 import { Link } from 'react-router-dom';
 
 import AkamaiLogo from 'src/assets/logo/akamai-logo.svg';
-import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/SideMenu';
+import { SIDEBAR_WIDTH } from 'src/components/PrimaryNav/constants';
 
 export const StyledGrid = styled(Grid, {
   label: 'StyledGrid',
@@ -15,10 +15,11 @@ export const StyledGrid = styled(Grid, {
   minHeight: 64,
   padding: 0,
   [theme.breakpoints.up('md')]: {
-    minHeight: 80,
-  },
-  [theme.breakpoints.up('sm')]: {
-    minHeight: 72,
+    '&:hover': {
+      '.primary-nav-toggle': {
+        left: SIDEBAR_WIDTH - 52,
+      },
+    },
   },
   width: '100%',
 }));
@@ -98,7 +99,9 @@ export const StyledPrimaryLinkBox = styled(Box, {
     ? theme.tokens.sideNavigation.SelectedMenuItem.Text
     : theme.tokens.sideNavigation.DefaultMenuItem.Text,
   display: 'flex',
-  font: theme.tokens.typography.Label.Semibold.S,
+  // TODO: Enable token once we have imported Nunito
+  // font: theme.tokens.typography.Label.Semibold.S,
+  fontFamily: 'LatoWeb',
   justifyContent: 'space-between',
   transition: theme.transitions.create(['color', 'opacity']),
   width: '100%',
@@ -110,7 +113,7 @@ export const StyledPrimaryLinkBox = styled(Box, {
 export const StyledMenuGrid = styled(Grid, {
   label: 'StyledMenuGrid',
 })(({ theme }) => ({
-  flex: '1 1 0%',
+  flexGrow: 1,
   overflowX: 'hidden',
   overflowY: 'auto',
   scrollbarColor: `${theme.color.grey4} transparent `,
@@ -147,7 +150,9 @@ export const StyledAccordion = styled(Accordion, {
       },
       alignItems: 'center',
       display: 'flex',
-      font: theme.tokens.typography.Label.Bold.S,
+      // TODO: Enable token once we have imported Nunito
+      // font: theme.tokens.typography.Label.Bold.S,
+      fontFamily: 'LatoWebBold',
       padding: '0 10px',
     },
     '.MuiAccordionDetails-root': {
@@ -182,15 +187,6 @@ export const StyledAccordion = styled(Accordion, {
   })
 );
 
-export const StyledIconButton = styled(IconButton, {
-  label: 'styledIconButton',
-})(({ theme }) => ({
-  '& svg': {
-    color: theme.tokens.sideNavigation.Icon,
-    transition: theme.transitions.create(['color']),
-  },
-}));
-
 export const StyledChip = styled(Chip, {
   label: 'styledChip',
   shouldForwardProp: omittedProps(['isActiveLink']),
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx
index a8f304e3b2a..4abb0b4a1e8 100644
--- a/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNav.tsx
@@ -1,4 +1,4 @@
-import { Box, Tooltip } from '@linode/ui';
+import { Box } from '@linode/ui';
 import { Hidden } from '@mui/material';
 import Grid from '@mui/material/Unstable_Grid2';
 import * as React from 'react';
@@ -10,10 +10,8 @@ import Database from 'src/assets/icons/entityIcons/database.svg';
 import IAM from 'src/assets/icons/entityIcons/iam.svg';
 import Linode from 'src/assets/icons/entityIcons/linode.svg';
 import Monitor from 'src/assets/icons/entityIcons/monitor.svg';
-import Networking from 'src/assets/icons/entityIcons/Networking.svg';
+import Networking from 'src/assets/icons/entityIcons/networking.svg';
 import More from 'src/assets/icons/more.svg';
-import PinFilledIcon from 'src/assets/icons/pin-filled.svg';
-import PinOutlineIcon from 'src/assets/icons/pin-outline.svg';
 import { useIsACLPEnabled } from 'src/features/CloudPulse/Utils/utils';
 import { useIsDatabasesEnabled } from 'src/features/Databases/utilities';
 import { useIsIAMEnabled } from 'src/features/IAM/Shared/utilities';
@@ -31,10 +29,10 @@ import {
   StyledAkamaiLogo,
   StyledDivider,
   StyledGrid,
-  StyledIconButton,
   StyledLogoBox,
   StyledMenuGrid,
 } from './PrimaryNav.styles';
+import { PrimaryNavToggle } from './PrimaryNavToggle';
 import { linkIsActive } from './utils';
 
 import type { PrimaryLink as PrimaryLinkType } from './PrimaryLink';
@@ -81,10 +79,11 @@ export interface PrimaryNavProps {
   closeMenu: () => void;
   desktopMenuToggle: () => void;
   isCollapsed: boolean;
+  isPageScrollable?: boolean;
 }
 
 export const PrimaryNav = (props: PrimaryNavProps) => {
-  const { closeMenu, desktopMenuToggle, isCollapsed } = props;
+  const { closeMenu, desktopMenuToggle, isCollapsed, isPageScrollable } = props;
 
   const flags = useFlags();
   const location = useLocation();
@@ -335,6 +334,7 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
           const filteredLinks = productFamily.links.filter(
             (link) => !link.hide
           );
+
           if (filteredLinks.length === 0) {
             return null;
           }
@@ -388,33 +388,11 @@ export const PrimaryNav = (props: PrimaryNavProps) => {
           );
         })}
       </StyledMenuGrid>
-      <Hidden mdDown>
-        <Box padding={1}>
-          {!isCollapsed ? (
-            <Tooltip placement="top-end" title={'unpin side menu'}>
-              <StyledIconButton
-                aria-label="unpin menu"
-                data-testid="unpin-nav-menu"
-                onClick={desktopMenuToggle}
-                size="small"
-              >
-                <PinFilledIcon />
-              </StyledIconButton>
-            </Tooltip>
-          ) : (
-            <Tooltip placement="top-end" title={'pin side menu'}>
-              <StyledIconButton
-                aria-label="pin menu"
-                data-testid="pin-nav-menu"
-                onClick={desktopMenuToggle}
-                size="small"
-              >
-                <PinOutlineIcon sx={{ fontSize: 16 }} />
-              </StyledIconButton>
-            </Tooltip>
-          )}
-        </Box>
-      </Hidden>
+      <PrimaryNavToggle
+        desktopMenuToggle={desktopMenuToggle}
+        isCollapsed={isCollapsed}
+        isPageScrollable={isPageScrollable}
+      />
     </StyledGrid>
   );
 };
diff --git a/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx b/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx
new file mode 100644
index 00000000000..76091cc8fbe
--- /dev/null
+++ b/packages/manager/src/components/PrimaryNav/PrimaryNavToggle.tsx
@@ -0,0 +1,76 @@
+import { Box, IconButton, Tooltip } from '@linode/ui';
+import { Hidden, styled, useScrollTrigger } from '@mui/material';
+import React from 'react';
+
+import PinFilledIcon from 'src/assets/icons/pin-filled.svg';
+import PinOutlineIcon from 'src/assets/icons/pin-outline.svg';
+import { TOPMENU_HEIGHT } from 'src/features/TopMenu/TopMenu';
+
+import { SIDEBAR_WIDTH } from './constants';
+
+interface PrimaryNavToggleProps {
+  desktopMenuToggle: () => void;
+  isCollapsed: boolean;
+  isPageScrollable?: boolean;
+}
+
+export const PrimaryNavToggle = (props: PrimaryNavToggleProps) => {
+  const { desktopMenuToggle, isCollapsed, isPageScrollable } = props;
+
+  const hasScrolledPastTopMenu = useScrollTrigger({
+    disableHysteresis: true,
+    threshold: TOPMENU_HEIGHT,
+  });
+
+  return (
+    <Hidden mdDown>
+      <Box
+        position={
+          isPageScrollable && !hasScrolledPastTopMenu ? 'fixed' : 'relative'
+        }
+        sx={{
+          transition: 'left 100ms ease-in-out',
+        }}
+        bottom={isPageScrollable && !hasScrolledPastTopMenu ? 0 : 'auto'}
+        className="primary-nav-toggle"
+        display="flex"
+        justifyContent="flex-end"
+        left={isCollapsed ? 0 : SIDEBAR_WIDTH - 52}
+        padding={1}
+      >
+        <Tooltip
+          PopperProps={{
+            sx: {
+              '& .MuiTooltip-tooltip': {
+                padding: '4px 6px',
+              },
+            },
+          }}
+          placement="top-end"
+          title={isCollapsed ? 'pin side menu' : 'unpin side menu'}
+        >
+          <StyledIconButton
+            sx={{
+              left: 1,
+            }}
+            aria-label="unpin menu"
+            data-testid="unpin-nav-menu"
+            onClick={desktopMenuToggle}
+            size="small"
+          >
+            {isCollapsed ? <PinOutlineIcon /> : <PinFilledIcon />}
+          </StyledIconButton>
+        </Tooltip>
+      </Box>
+    </Hidden>
+  );
+};
+
+const StyledIconButton = styled(IconButton, {
+  label: 'styledIconButton',
+})(({ theme }) => ({
+  '& svg': {
+    color: theme.tokens.sideNavigation.Icon,
+    transition: theme.transitions.create(['color']),
+  },
+}));
diff --git a/packages/manager/src/components/PrimaryNav/SideMenu.test.tsx b/packages/manager/src/components/PrimaryNav/SideMenu.test.tsx
index 7d8ca6d691d..dc88b34e6fa 100644
--- a/packages/manager/src/components/PrimaryNav/SideMenu.test.tsx
+++ b/packages/manager/src/components/PrimaryNav/SideMenu.test.tsx
@@ -4,7 +4,8 @@ import React from 'react';
 
 import { renderWithTheme, resizeScreenSize } from 'src/utilities/testHelpers';
 
-import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH, SideMenu } from './SideMenu';
+import { SIDEBAR_COLLAPSED_WIDTH, SIDEBAR_WIDTH } from './constants';
+import { SideMenu } from './SideMenu';
 
 // Mock PrimaryNav component
 vi.mock('./PrimaryNav', () => {
diff --git a/packages/manager/src/components/PrimaryNav/SideMenu.tsx b/packages/manager/src/components/PrimaryNav/SideMenu.tsx
index 68b1bad5468..bc112a1c81a 100644
--- a/packages/manager/src/components/PrimaryNav/SideMenu.tsx
+++ b/packages/manager/src/components/PrimaryNav/SideMenu.tsx
@@ -3,14 +3,13 @@ import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
 import { Hidden } from 'src/components/Hidden';
-import { FOOTER_HEIGHT } from 'src/features/Footer';
-import { TOPMENU_HEIGHT } from 'src/features/TopMenu/TopMenu';
+import {
+  SIDEBAR_COLLAPSED_WIDTH,
+  SIDEBAR_WIDTH,
+} from 'src/components/PrimaryNav/constants';
 
 import PrimaryNav from './PrimaryNav';
 
-export const SIDEBAR_WIDTH = 232;
-export const SIDEBAR_COLLAPSED_WIDTH = 52;
-
 export interface SideMenuProps {
   /**
    * Callback to close the menu.
@@ -20,7 +19,14 @@ export interface SideMenuProps {
    * If true, the menu will be collapsed.
    */
   collapse: boolean;
+  /**
+   * Callback to toggle the desktop menu.
+   */
   desktopMenuToggle: () => void;
+  /**
+   * Whether the page is scrollable.
+   */
+  isPageScrollable?: boolean;
   /**
    * If true, the menu will be open. Has no effect unless the viewport is less than 960px.
    */
@@ -33,7 +39,13 @@ export interface SideMenuProps {
  * The Linodes landing page is considered the homepage unless the account is managed. Otherwise, clicking on the Linode logo will take the user to the Managed landing page.
  */
 export const SideMenu = (props: SideMenuProps) => {
-  const { closeMenu, collapse, desktopMenuToggle, open } = props;
+  const {
+    closeMenu,
+    collapse,
+    desktopMenuToggle,
+    isPageScrollable,
+    open,
+  } = props;
 
   return (
     <>
@@ -65,6 +77,7 @@ export const SideMenu = (props: SideMenuProps) => {
             closeMenu={closeMenu}
             desktopMenuToggle={desktopMenuToggle}
             isCollapsed={collapse}
+            isPageScrollable={isPageScrollable}
           />
         </StyledDrawer>
       </Hidden>
@@ -79,16 +92,14 @@ const StyledDrawer = styled(Drawer, {
   '& .MuiDrawer-paper': {
     backgroundColor: theme.tokens.sideNavigation.Background.Default,
     boxShadow: 'none',
-    height: '100%',
     left: 'inherit',
-    overflowX: 'hidden',
+    overflow: 'hidden',
+    position: 'absolute',
     [theme.breakpoints.up('md')]: {
       borderRight: `1px solid ${theme.tokens.sideNavigation.Border}`,
-      height: `calc(100% - ${TOPMENU_HEIGHT}px - ${FOOTER_HEIGHT}px)`,
-      top: TOPMENU_HEIGHT,
     },
     transform: 'none',
-    transition: 'width linear .1s',
+    transition: 'width linear 100ms, height linear 250ms',
     width: SIDEBAR_WIDTH,
   },
   ...(props.collapse && {
diff --git a/packages/manager/src/components/PrimaryNav/constants.ts b/packages/manager/src/components/PrimaryNav/constants.ts
new file mode 100644
index 00000000000..8babec1a757
--- /dev/null
+++ b/packages/manager/src/components/PrimaryNav/constants.ts
@@ -0,0 +1,2 @@
+export const SIDEBAR_WIDTH = 232;
+export const SIDEBAR_COLLAPSED_WIDTH = 52;
diff --git a/packages/manager/src/components/PrimaryNav/utils.ts b/packages/manager/src/components/PrimaryNav/utils.ts
index 72dffac7ad5..b05f5998448 100644
--- a/packages/manager/src/components/PrimaryNav/utils.ts
+++ b/packages/manager/src/components/PrimaryNav/utils.ts
@@ -1,3 +1,5 @@
+import React from 'react';
+
 import { isPathOneOf } from 'src/utilities/routing/isPathOneOf';
 
 export const linkIsActive = (
@@ -19,3 +21,38 @@ export const linkIsActive = (
 
   return isPathOneOf([href, ...activeLinks], locationPathname);
 };
+
+/**
+ * This hook is used to determine if the page is scrollable.
+ * It is used to determine if the side menu should be sticky.
+ */
+export const useIsPageScrollable = (
+  contentRef: React.RefObject<HTMLElement>
+): { isPageScrollable: boolean } => {
+  const [isPageScrollable, setIsPageScrollable] = React.useState(false);
+
+  React.useEffect(() => {
+    const observer = new MutationObserver(() => {
+      requestAnimationFrame(() => {
+        if (!contentRef.current) {
+          return;
+        }
+
+        const contentHeight = contentRef.current.scrollHeight;
+        const windowHeight = window.innerHeight;
+
+        setIsPageScrollable(contentHeight > windowHeight);
+      });
+    });
+
+    if (contentRef.current) {
+      observer.observe(contentRef.current, {
+        attributes: true,
+        childList: true,
+        subtree: true,
+      });
+    }
+  }, [contentRef]);
+
+  return { isPageScrollable };
+};
diff --git a/packages/manager/src/features/Footer.tsx b/packages/manager/src/features/Footer.tsx
index 5f94455f4f8..d22e0103b47 100644
--- a/packages/manager/src/features/Footer.tsx
+++ b/packages/manager/src/features/Footer.tsx
@@ -1,5 +1,5 @@
 import { Stack } from '@linode/ui';
-import { Typography } from '@mui/material';
+import { Hidden, Typography } from '@mui/material';
 import { styled } from '@mui/material/styles';
 import * as React from 'react';
 
@@ -27,49 +27,58 @@ export const FOOTER_HEIGHT = 40;
 
 export const Footer = React.memo(() => {
   return (
-    <footer role="contentinfo" style={{ zIndex: 1300 }}>
+    <footer role="contentinfo">
       <Stack
         sx={(theme) => ({
           backgroundColor: theme.tokens.footer.Background,
-          height: FOOTER_HEIGHT,
-          paddingX: theme.spacing(4),
-          paddingY: theme.spacing(1.5),
-          textAlign: 'left',
-          [theme.breakpoints.down('sm')]: {
-            textAlign: 'center',
-          },
         })}
         alignItems="center"
-        direction={{ sm: 'row', xs: 'column' }}
+        direction="row"
         display="flex"
-        justifyContent={'space-between'}
+        height={FOOTER_HEIGHT}
+        justifyContent="space-between"
+        paddingX={{ md: 4, xs: 2 }}
+        paddingY={1.5}
         spacing={{ xs: 1 }}
+        textAlign="center"
       >
-        <Stack
-          direction={{ md: 'row', sm: 'column' }}
-          spacing={{ md: 3, sm: 1, xs: 1 }}
-        >
-          <StyledLink
-            to={`https://github.com/linode/manager/releases/tag/linode-manager@v${packageJson.version}`}
-          >
-            v{packageJson.version}
-          </StyledLink>
-          <StyledLink to={DEVELOPERS_LINK}>API Reference</StyledLink>
-          <StyledLink to={FEEDBACK_LINK}>Provide Feedback</StyledLink>
-        </Stack>
-        <Typography
-          sx={(theme) => ({
-            color: theme.tokens.footer.Text.Default,
-            [theme.breakpoints.down('sm')]: {
-              '&&': {
-                marginTop: theme.tokens.spacing[20],
-              },
-            },
-          })}
-          variant="body1"
-        >
-          Copyright ©2024 Akamai Technologies, Inc. All Rights Reserved
-        </Typography>
+        <Hidden mdDown>
+          <Stack direction="row" spacing={3}>
+            <StyledLink
+              to={`https://github.com/linode/manager/releases/tag/linode-manager@v${packageJson.version}`}
+            >
+              v{packageJson.version}
+            </StyledLink>
+          </Stack>
+          <Stack direction="row" spacing={3}>
+            <StyledLink to={DEVELOPERS_LINK}>API Reference</StyledLink>
+            <StyledLink to={FEEDBACK_LINK}>Provide Feedback</StyledLink>
+            <Typography
+              sx={(theme) => ({ color: theme.tokens.footer.Text.Default })}
+              variant="body1"
+            >
+              Copyright ©{new Date().getFullYear()} Akamai Technologies, Inc.
+              All Rights Reserved
+            </Typography>
+          </Stack>
+        </Hidden>
+        <Hidden mdUp>
+          <Stack direction="row" spacing={1}>
+            <StyledLink
+              to={`https://github.com/linode/manager/releases/tag/linode-manager@v${packageJson.version}`}
+            >
+              v{packageJson.version}
+            </StyledLink>
+          </Stack>
+          <Stack direction="row" spacing={1}>
+            <Typography
+              sx={(theme) => ({ color: theme.tokens.footer.Text.Default })}
+              variant="body1"
+            >
+              ©{new Date().getFullYear()} Akamai Technologies, Inc.
+            </Typography>
+          </Stack>
+        </Hidden>
       </Stack>
     </footer>
   );