diff --git a/index.css b/index.css
index c4ff361..25ee318 100644
--- a/index.css
+++ b/index.css
@@ -3,13 +3,21 @@
 @tailwind utilities;
 
 @layer base {
-  svg {
-    @apply fill-current align-middle;
-  }
+    svg {
+        @apply fill-current align-middle;
+    }
 }
 
 @layer components {
-  .px-page {
-    @apply px-2 sm:px-4 lg:px-6;
-  }
+    .px-page {
+        @apply px-2 sm:px-4 lg:px-6;
+    }
+
+    .py-page {
+        @apply py-2 sm:py-4 lg:py-6;
+    }
+
+    .p-page {
+        @apply p-2 sm:p-4 lg:p-6;
+    }
 }
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index d91ac24..d2d157c 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -5,7 +5,7 @@ import {
   mdiCogOutline,
   mdiImage,
   mdiListStatus,
-  mdiNoteTextOutline
+  mdiNoteTextOutline,
 } from '@mdi/js'
 import { FC } from 'react'
 import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
@@ -28,13 +28,11 @@ import { useSearchMode } from './useSearchMode'
 import { useTheme } from './useTheme'
 import { useToggleBackground } from './useToggleBackground'
 import { useToggleDescriptions } from './useToggleDescriptions'
-import { useToggleJumpLinks } from './useToggleJumpLinks'
 
 export const WebdevHome: FC = () => {
   const customizeMode = useCustomizeMode()
   const searchMode = useSearchMode()
   const toggleDescriptions = useToggleDescriptions()
-  const toggleJumpLinks = useToggleJumpLinks()
   const toggleBackground = useToggleBackground()
   const isCurrentAppMode = useIsCurrentAppMode()
 
@@ -49,12 +47,6 @@ export const WebdevHome: FC = () => {
 
   return (
     <AppLayout
-      sidebar={
-        isCurrentAppMode(AppMode.default, AppMode.customize) &&
-        toggleJumpLinks.showJumpLinks || toggleJumpLinks.showJumpLinksMobile ? (
-          <JumpLinks />
-        ) : null
-      }
       header={
         <AppHeader
           centerItems={
@@ -120,6 +112,11 @@ export const WebdevHome: FC = () => {
           }
         />
       }
+      sidebar={
+        isCurrentAppMode(AppMode.default, AppMode.customize) ? (
+          <JumpLinks />
+        ) : null
+      }
     >
       {isCurrentAppMode(AppMode.default, AppMode.customize) ? (
         <Links />
diff --git a/src/components/App/AppLayout.tsx b/src/components/App/AppLayout.tsx
index f6817aa..b789e99 100644
--- a/src/components/App/AppLayout.tsx
+++ b/src/components/App/AppLayout.tsx
@@ -18,17 +18,16 @@ export const AppLayout: FC<PropsWithChildren<Props>> = ({
     <div
       className={classNames(
         'fixed inset-0',
-        'grid grid-cols-1 grid-rows-[auto,1fr]',
-        'lg:grid-cols-[auto,1fr]',
+        'grid grid-cols-[auto,1fr] grid-rows-[auto,1fr]',
         'overflow-hidden',
         {
-          'bg-page-light dark:bg-page-dark bg-cover bg-center':
+          'bg-page-light bg-cover bg-center dark:bg-page-dark':
             toggleBackground.showBackground,
           'bg-white dark:bg-gray-800': !toggleBackground.showBackground,
         },
       )}
     >
-      <div className="lg:col-span-2">{header}</div>
+      <div className="col-span-2">{header}</div>
       <div className="overflow-auto">{sidebar}</div>
       <div className="overflow-auto" id="main-content">
         {children}
diff --git a/src/components/App/useToggleJumpLinks.ts b/src/components/App/useToggleJumpLinks.ts
index 05c641a..93b6452 100644
--- a/src/components/App/useToggleJumpLinks.ts
+++ b/src/components/App/useToggleJumpLinks.ts
@@ -8,8 +8,8 @@ import {
 type UseToggleJumpLinksResult = {
   showJumpLinks: boolean
   showJumpLinksMobile: boolean
-  toggle: () => void
-  toggleMobile: () => void
+  toggle: (value?: boolean) => void
+  toggleMobile: (value?: boolean) => void
 }
 
 export function useToggleJumpLinks(): UseToggleJumpLinksResult {
@@ -23,13 +23,19 @@ export function useToggleJumpLinks(): UseToggleJumpLinksResult {
     (state) => state.appSettings.showJumpLinksMobile,
   )
 
-  const toggle = useCallback(() => {
-    dispatch(setDisplayJumpLinks(!showJumpLinks))
-  }, [dispatch, showJumpLinks])
+  const toggle = useCallback(
+    (value?: boolean) => {
+      dispatch(setDisplayJumpLinks(value ?? !showJumpLinks))
+    },
+    [dispatch, showJumpLinks],
+  )
 
-  const toggleMobile = useCallback(() => {
-    dispatch(setDisplayJumpLinksMobile(!showJumpLinksMobile))
-  }, [dispatch, showJumpLinksMobile])
+  const toggleMobile = useCallback(
+    (value?: boolean) => {
+      dispatch(setDisplayJumpLinksMobile(value ?? !showJumpLinksMobile))
+    },
+    [dispatch, showJumpLinksMobile],
+  )
 
   return { showJumpLinks, showJumpLinksMobile, toggle, toggleMobile }
 }
diff --git a/src/components/Header/AppAction.tsx b/src/components/Header/AppAction.tsx
index bda64c6..d43bb0f 100644
--- a/src/components/Header/AppAction.tsx
+++ b/src/components/Header/AppAction.tsx
@@ -4,6 +4,7 @@ import { MdiIcon } from '../Icon/MdiIcon'
 
 interface Props {
   icon: string
+  available?: boolean
   active?: boolean
   highlight?: boolean
   label?: string
@@ -12,11 +13,17 @@ interface Props {
 
 export const AppAction: FC<Props> = ({
   icon,
+  available = true,
   active = false,
   highlight = false,
   label,
   action = () => {},
 }) => {
+  function handleClick() {
+    if (!available) return
+    action()
+  }
+
   return (
     <div
       className={classNames(
@@ -26,24 +33,29 @@ export const AppAction: FC<Props> = ({
         'rounded-md',
         'select-none',
         {
-          'hover:bg-black/10 active:bg-black/15': !active && !highlight,
-          'bg-brand-500 hover:bg-brand-600 active:bg-brand-700':
-            active && !highlight,
-          'bg-brand-500/15 hover:bg-brand-500/25 active:bg-brand-500/35':
-            highlight,
+          'opacity-30': !available,
+          'hover:bg-black/10 active:bg-black/15':
+            !active && !highlight && available,
+          'bg-brand-500': active && !highlight,
+          'hover:bg-brand-600 active:bg-brand-700':
+            active && !highlight && available,
+          'bg-brand-500/15': highlight,
+          'hover:bg-brand-500/25 active:bg-brand-500/35':
+            highlight && available,
           'dark:hover:bg-white/10 dark:active:bg-white/15':
-            !active && !highlight,
+            !active && !highlight && available,
           'dark:hover:bg-brand-600 dark:active:bg-brand-700':
-            active && !highlight,
-          'dark:bg-white/10 dark:hover:bg-white/20 dark:active:bg-white/30':
-            highlight,
+            active && !highlight && available,
+          'dark:bg-white/10': highlight,
+          'dark:hover:bg-white/20 dark:active:bg-white/30':
+            highlight && available,
           'text-white': active && !highlight,
           'text-gray-800 dark:text-gray-100': !active && !highlight,
           'text-brand-600 dark:text-brand-300': highlight,
         },
       )}
       tabIndex={0}
-      onClick={action}
+      onClick={handleClick}
     >
       <MdiIcon path={icon} />
 
diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
index 66c9e7c..a8a672b 100644
--- a/src/components/Header/AppHeader.tsx
+++ b/src/components/Header/AppHeader.tsx
@@ -1,9 +1,12 @@
-import { mdiClose, mdiMenu } from '@mdi/js'
+import { mdiMenu } from '@mdi/js'
 import classNames from 'classnames'
 import { FC, ReactElement } from 'react'
 import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
 import { AppAction } from './AppAction'
 import { Logo } from './Logo'
+import { config } from '../../tailwindConfig'
+import { useIsCurrentAppMode } from '../../stores/appMode/appModeHooks'
+import { AppMode } from '../../stores/appMode/appModeReducer'
 
 interface Props {
   centerItems?: ReactElement | null
@@ -12,9 +15,17 @@ interface Props {
 
 export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
   const toggleJumpLinks = useToggleJumpLinks()
+  const isCurrentAppMode = useIsCurrentAppMode()
 
   function handleMenuClick() {
-    // TODO: if (mobile) { toggleJumpLinks.toggleMobile() } else { toggleJumpLinks.toggle() }
+    const query = `(min-width: ${config.theme.screens.md})`
+    const queryList = window.matchMedia(query)
+
+    if (queryList.matches) {
+      toggleJumpLinks.toggle()
+    } else {
+      toggleJumpLinks.toggleMobile()
+    }
   }
 
   return (
@@ -22,20 +33,26 @@ export const AppHeader: FC<Props> = ({ centerItems, actions }) => {
       className={classNames(
         'grid items-center',
         'grid-cols-[1fr,auto] grid-rows-[auto,auto] md:grid-cols-[1fr,auto,1fr] md:grid-rows-1',
+        'border-b border-black/10 dark:border-white/10',
         'px-page',
-        'bg-white/30 dark:bg-black/30',
       )}
     >
       <div className="flex items-center gap-x-2">
         <AppAction
-          icon={toggleJumpLinks.showJumpLinksMobile ? mdiClose : mdiMenu}
+          icon={mdiMenu}
           action={handleMenuClick}
+          available={isCurrentAppMode(AppMode.default, AppMode.customize)}
         />
         <Logo />
       </div>
 
       {centerItems !== null ? (
-        <div className="col-span-2 row-start-2 flex items-center gap-x-1 justify-self-center py-2 md:col-span-1 md:col-start-2 md:row-start-1">
+        <div
+          className={classNames(
+            'col-span-2 row-start-2 md:col-span-1 md:col-start-2 md:row-start-1',
+            'flex items-center gap-x-1 justify-self-center',
+          )}
+        >
           {centerItems}
         </div>
       ) : null}
diff --git a/src/components/Header/AppSearchButton.tsx b/src/components/Header/AppSearchButton.tsx
index 14080d5..c044a80 100644
--- a/src/components/Header/AppSearchButton.tsx
+++ b/src/components/Header/AppSearchButton.tsx
@@ -2,13 +2,22 @@ import { FC } from 'react'
 import { useSearchMode } from '../App/useSearchMode'
 import { MdiIcon } from '../Icon/MdiIcon'
 import { mdiMagnify } from '@mdi/js'
+import classNames from 'classnames'
 
 export const AppSearchButton: FC = () => {
   const searchMode = useSearchMode()
 
   return (
     <div
-      className="flex cursor-default gap-x-1 rounded bg-black/10 px-20 py-1 text-black/60 hover:bg-black/20 active:bg-black/25 dark:bg-white/10 dark:text-white/60 dark:hover:bg-white/20 dark:active:bg-white/25"
+      className={classNames(
+        'flex gap-x-1',
+        'mb-2 px-20 py-1 md:mt-2',
+        'rounded-full',
+        'bg-black/10 hover:bg-black/20 active:bg-black/25',
+        'dark:bg-white/10 dark:hover:bg-white/20 dark:active:bg-white/25',
+        'text-black/60 dark:text-white/60',
+        'cursor-default',
+      )}
       onClick={searchMode.handleSearchAction}
     >
       <MdiIcon path={mdiMagnify} />
diff --git a/src/components/JumpLinks/JumpLink.tsx b/src/components/JumpLinks/JumpLink.tsx
index 5131393..88df682 100644
--- a/src/components/JumpLinks/JumpLink.tsx
+++ b/src/components/JumpLinks/JumpLink.tsx
@@ -2,6 +2,7 @@ import classNames from 'classnames'
 import { FC } from 'react'
 import { slugify } from '../../utils/slugify'
 import { useToggleBackground } from '../App/useToggleBackground'
+import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
 
 interface Props {
   label: string
@@ -10,19 +11,21 @@ interface Props {
 
 export const JumpLink: FC<Props> = ({ label, color = 'gray' }) => {
   const toggleBackground = useToggleBackground()
+  const toggleJumpLinks = useToggleJumpLinks()
 
   function handleClick() {
     const target = document.getElementById(slugify(label))
     if (target === null) return
 
     target.scrollIntoView({ behavior: 'smooth' })
+    toggleJumpLinks.toggleMobile(false)
   }
 
   return (
     <div
       className={classNames(
         'jump-link',
-        'px-3 py-1 md:px-2.5 md:py-1',
+        'px-3 py-1.5 md:px-2.5 md:py-1',
         'rounded-md',
         'cursor-pointer',
         'text-sm font-semibold',
diff --git a/src/components/JumpLinks/JumpLinks.tsx b/src/components/JumpLinks/JumpLinks.tsx
index d43338c..f1e334c 100644
--- a/src/components/JumpLinks/JumpLinks.tsx
+++ b/src/components/JumpLinks/JumpLinks.tsx
@@ -4,34 +4,62 @@ import { links } from '../../links'
 import { useAllLinksInGroupAreHidden } from '../../stores/hiddenLinks/hiddenLinksHooks'
 import { useToggleJumpLinks } from '../App/useToggleJumpLinks'
 import { JumpLink } from './JumpLink'
+import { MdiIcon } from '../Icon/MdiIcon'
+import { mdiClose } from '@mdi/js'
 
 export const JumpLinks: FC = () => {
   const allLinksInGroupAreHidden = useAllLinksInGroupAreHidden()
   const toggleJumpLinks = useToggleJumpLinks()
 
+  function handleMobileCloseClick() {
+    toggleJumpLinks.toggleMobile()
+  }
+
   return (
-    <div
-      className={classNames(
-        'fixed top-10 lg:static',
-        'bg-white dark:bg-black lg:bg-white/20 dark:lg:bg-black/20',
-        'jump-links px-page w-[300px] py-4',
-        {
-          'left-0': toggleJumpLinks.showJumpLinksMobile,
-          '-left-full': !toggleJumpLinks.showJumpLinksMobile,
-        },
-      )}
-    >
-      <div className={classNames('flex flex-col gap-1 md:flex')}>
-        {links.items
-          .filter((group) => !allLinksInGroupAreHidden(group))
-          .map((linkGroup, index) => (
-            <JumpLink
-              key={index}
-              label={linkGroup.name}
-              color={linkGroup.color}
-            />
-          ))}
+    <>
+      <div
+        className={classNames('md:hidden', {
+          'max-md:fixed max-md:inset-0 max-md:block max-md:bg-black/50':
+            toggleJumpLinks.showJumpLinksMobile,
+          'max-md:hidden': !toggleJumpLinks.showJumpLinksMobile,
+        })}
+        onClick={handleMobileCloseClick}
+      />
+
+      <div
+        className={classNames(
+          'max-md:fixed max-md:bottom-0 max-md:top-0',
+          'max-md:bg-white dark:max-md:bg-black',
+          'jump-links w-[300px]',
+          'max-md:transition-[left] max-md:duration-300',
+          {
+            'max-md:left-0 max-md:grid max-md:grid-rows-[auto,1fr]':
+              toggleJumpLinks.showJumpLinksMobile,
+            'max-md:-left-[300px]': !toggleJumpLinks.showJumpLinksMobile,
+            'md:grid': toggleJumpLinks.showJumpLinks,
+            'md:hidden': !toggleJumpLinks.showJumpLinks,
+          },
+        )}
+      >
+        <div
+          className="m-4 place-self-end text-black dark:text-white md:hidden"
+          onClick={handleMobileCloseClick}
+        >
+          <MdiIcon path={mdiClose} />
+        </div>
+
+        <div className="p-page flex flex-col gap-1 max-md:overflow-auto md:flex">
+          {links.items
+            .filter((group) => !allLinksInGroupAreHidden(group))
+            .map((linkGroup, index) => (
+              <JumpLink
+                key={index}
+                label={linkGroup.name}
+                color={linkGroup.color}
+              />
+            ))}
+        </div>
       </div>
-    </div>
+    </>
   )
 }
diff --git a/src/components/Links/Link.tsx b/src/components/Links/Link.tsx
index 53f57aa..e3e0146 100644
--- a/src/components/Links/Link.tsx
+++ b/src/components/Links/Link.tsx
@@ -18,6 +18,7 @@ import { Kbd } from '../basics/Kbd'
 import { DefaultIcon } from '../Icon/DefaultIcon'
 import { MdiIcon } from '../Icon/MdiIcon'
 import { LinkAction } from './LinkAction'
+import { useToggleBackground } from '../App/useToggleBackground'
 
 interface Props {
   link: LinkItem
@@ -34,6 +35,7 @@ export const Link: FC<Props> = ({
 }) => {
   const dispatch = useAppDispatch()
   const isCurrentAppMode = useIsCurrentAppMode()
+  const toggleBackground = useToggleBackground()
 
   const showDescription = useAppSelector(
     (state) => state.appSettings.showDescriptions,
@@ -109,7 +111,10 @@ export const Link: FC<Props> = ({
           'grid items-center justify-center',
           'p-1',
           'bg-white',
-          'rounded shadow-sm dark:shadow-none',
+          'dark:shadow-none rounded',
+          {
+            'shadow-sm': toggleBackground.showBackground,
+          },
         )}
         style={{ color: link.color }}
       >
diff --git a/src/components/Links/Links.tsx b/src/components/Links/Links.tsx
index 9a0d5c1..824e1c5 100644
--- a/src/components/Links/Links.tsx
+++ b/src/components/Links/Links.tsx
@@ -9,7 +9,7 @@ export const Links: FC = () => {
       className={classNames(
         'grid grid-cols-[repeat(auto-fill,minmax(290px,1fr))]',
         'gap-x-2 gap-y-8 sm:gap-x-4 lg:gap-x-8',
-        'px-page py-4',
+        'p-page',
       )}
     >
       {links.items.map((group) => (