diff --git a/index.css b/index.css
index 5665affb..fce334da 100644
--- a/index.css
+++ b/index.css
@@ -4,8 +4,7 @@
 
 @layer base {
   svg {
-    vertical-align: middle;
-    fill: currentColor;
+    @apply align-middle fill-current;
   }
 }
 
diff --git a/package.json b/package.json
index 45e40875..60e5fa31 100644
--- a/package.json
+++ b/package.json
@@ -1,11 +1,11 @@
 {
   "name": "webdevhome.github.io",
-  "version": "2.1.0",
+  "version": "2.2.0",
   "scripts": {
     "dev": "vite",
-    "build": "tsc && vite build",
+    "build": "npm test && vite build",
     "preview": "vite preview",
-    "typecheck": "tsc"
+    "test": "tsc && eslint src"
   },
   "dependencies": {
     "@mdi/react": "^1.4.0",
diff --git a/src/components/App/App.tsx b/src/components/App/App.tsx
index efa6ef38..82f9a9f1 100644
--- a/src/components/App/App.tsx
+++ b/src/components/App/App.tsx
@@ -1,4 +1,5 @@
 import {
+  mdiArrowCollapseUp,
   mdiArrowLeft,
   mdiCheck,
   mdiFormatListChecks,
@@ -17,6 +18,7 @@ import { FooterDivider } from '../Footer/FooterDivider'
 import { FooterGroup } from '../Footer/FooterGroup'
 import { AppAction } from '../Header/AppAction'
 import { AppHeader } from '../Header/AppHeader'
+import { JumpLinks } from '../JumpLinks/JumpLinks'
 import { LinkGroup } from '../Links/LinkGroup'
 import { Search } from '../Search/Search'
 import { AppContent } from './AppContent'
@@ -34,6 +36,13 @@ export const WebdevHome: FC = () => {
   const allLinks = useAllLinks()
   const hiddenLinksCount = useHiddenLinksCount()
 
+  function handleScrollTopClick() {
+    const htmlEl = document.children.item(0)
+    if (htmlEl === null) return
+
+    htmlEl.scrollTo({ top: 0, behavior: 'smooth' })
+  }
+
   return (
     <div className="min-h-full">
       <div
@@ -50,6 +59,11 @@ export const WebdevHome: FC = () => {
             <>
               {isCurrentAppMode(AppMode.default) ? (
                 <>
+                  <AppAction
+                    icon={mdiArrowCollapseUp}
+                    label="Top"
+                    action={handleScrollTopClick}
+                  />
                   <AppAction
                     icon={mdiMagnify}
                     label="Search"
@@ -64,7 +78,7 @@ export const WebdevHome: FC = () => {
                   <AppAction
                     icon={mdiStickerTextOutline}
                     active={toggleDescriptions.showDescriptions}
-                    label="Descriptions"
+                    label="Link info"
                     action={toggleDescriptions.toggle}
                   />
                   <AppAction
@@ -123,11 +137,14 @@ export const WebdevHome: FC = () => {
 
       <div className="h-full">
         {isCurrentAppMode(AppMode.default, AppMode.customize) ? (
-          <AppContent>
-            {links.items.map((group) => (
-              <LinkGroup group={group} key={group.name} />
-            ))}
-          </AppContent>
+          <>
+            <JumpLinks />
+            <AppContent>
+              {links.items.map((group, index) => (
+                <LinkGroup group={group} key={group.name} />
+              ))}
+            </AppContent>
+          </>
         ) : (
           <Search />
         )}
diff --git a/src/components/App/AppContent.tsx b/src/components/App/AppContent.tsx
index c4b981c2..b12ff13a 100644
--- a/src/components/App/AppContent.tsx
+++ b/src/components/App/AppContent.tsx
@@ -6,7 +6,7 @@ export const AppContent: FC<PropsWithChildren> = ({ children }) => {
     <div
       className={classNames(
         'grid grid-cols-[repeat(auto-fill,minmax(290px,1fr))]',
-        'gap-x-2 sm:gap-x-4 lg:gap-x-8 gap-y-20',
+        'gap-x-2 sm:gap-x-4 lg:gap-x-8 gap-y-8',
         'px-page py-4 lg:py-8',
       )}
     >
diff --git a/src/components/Header/AppAction.tsx b/src/components/Header/AppAction.tsx
index 6ec49a50..fbb5a617 100644
--- a/src/components/Header/AppAction.tsx
+++ b/src/components/Header/AppAction.tsx
@@ -20,7 +20,7 @@ export const AppAction: FC<Props> = ({
   return (
     <div
       className={classNames(
-        'flex items-center',
+        'flex flex-col items-center md:flex-row',
         'p-2',
         'rounded-md',
         'select-none',
@@ -44,7 +44,7 @@ export const AppAction: FC<Props> = ({
     >
       <MdiIcon path={icon} />
 
-      <div className="ml-2 text-sm font-semibold tracking-wide">{label}</div>
+      <div className="md:ml-2 text-xs md:text-sm font-semibold">{label}</div>
     </div>
   )
 }
diff --git a/src/components/Header/AppHeader.tsx b/src/components/Header/AppHeader.tsx
index 71f047f2..58d11488 100644
--- a/src/components/Header/AppHeader.tsx
+++ b/src/components/Header/AppHeader.tsx
@@ -11,7 +11,7 @@ export const AppHeader: FC<Props> = ({ actions }) => {
     <div
       className={classNames(
         'grid items-center',
-        'grid-rows-[auto,auto] md:grid-rows-[auto] md:grid-cols-[1fr,auto]',
+        'grid-rows-[auto,auto] lg:grid-rows-[auto] lg:grid-cols-[1fr,auto]',
         'px-page',
       )}
     >
@@ -20,7 +20,7 @@ export const AppHeader: FC<Props> = ({ actions }) => {
       {actions !== null ? (
         <div
           className={classNames(
-            'flex gap-x-2 justify-center flex-wrap',
+            'flex md:gap-x-2 justify-center flex-wrap',
             'py-2',
           )}
         >
diff --git a/src/components/Header/Logo.tsx b/src/components/Header/Logo.tsx
index 44b9eaff..c0c7e95b 100644
--- a/src/components/Header/Logo.tsx
+++ b/src/components/Header/Logo.tsx
@@ -7,8 +7,9 @@ export const Logo: FC = () => {
       className={classNames(
         'font-mono text-2xl',
         'tracking-wide',
-        'text-center md:text-left text-gray-400 dark:text-gray-200',
-        'pt-2 md:pt-0',
+        'text-center lg:text-left text-gray-400 dark:text-gray-200',
+        'pt-2 lg:pt-0',
+        'text-nowrap',
       )}
     >
       <span>&lt;</span>
diff --git a/src/components/JumpLinks/JumpLink.tsx b/src/components/JumpLinks/JumpLink.tsx
new file mode 100644
index 00000000..12a7d3d5
--- /dev/null
+++ b/src/components/JumpLinks/JumpLink.tsx
@@ -0,0 +1,34 @@
+import classNames from 'classnames'
+import { FC } from 'react'
+import { slugify } from '../../utils/slugify'
+
+interface Props {
+  label: string
+  color?: string
+}
+
+export const JumpLink: FC<Props> = ({ label, color = 'gray' }) => {
+  function handleClick() {
+    const target = document.getElementById(slugify(label))
+    if (target === null) return
+
+    target.scrollIntoView({ behavior: 'smooth' })
+  }
+
+  return (
+    <div
+      className={classNames(
+        'jump-link',
+        'px-3 py-1 md:px-2.5 md:py-0.5',
+        'rounded-md',
+        'cursor-pointer',
+        'text-sm font-semibold',
+        `bg-${color}-100 dark:bg-${color}-600`,
+        `text-${color}-800 dark:text-${color}-50`,
+      )}
+      onClick={handleClick}
+    >
+      {label}
+    </div>
+  )
+}
diff --git a/src/components/JumpLinks/JumpLinks.tsx b/src/components/JumpLinks/JumpLinks.tsx
new file mode 100644
index 00000000..ea2a375b
--- /dev/null
+++ b/src/components/JumpLinks/JumpLinks.tsx
@@ -0,0 +1,45 @@
+import { mdiChevronDown, mdiChevronUp } from '@mdi/js'
+import classNames from 'classnames'
+import { FC, useState } from 'react'
+import { MdiIcon } from '../Icon/MdiIcon'
+import { JumpLink } from './JumpLink'
+import { links } from '../../links'
+import { useAllLinksInGroupAreHidden } from '../../stores/hiddenLinks/hiddenLinksHooks'
+
+export const JumpLinks: FC = () => {
+  const allLinksInGroupAreHidden = useAllLinksInGroupAreHidden()
+
+  const [isOpen, setIsOpen] = useState(false)
+
+  function handleToggleClick() {
+    setIsOpen(!isOpen)
+  }
+
+  return (
+    <div className="jump-links px-page pt-4 lg:pt-8">
+      <div
+        className="flex items-center gap-x-2 md:hidden dark:text-white cursor-default select-none"
+        onClick={handleToggleClick}
+      >
+        <MdiIcon path={isOpen ? mdiChevronUp : mdiChevronDown}></MdiIcon>
+        <div>Jump to</div>
+      </div>
+      <div
+        className={classNames('flex flex-wrap gap-1 md:flex pt-2', {
+          hidden: !isOpen,
+          block: isOpen,
+        })}
+      >
+        {links.items
+          .filter((group) => !allLinksInGroupAreHidden(group))
+          .map((linkGroup, index) => (
+            <JumpLink
+              key={index}
+              label={linkGroup.name}
+              color={linkGroup.color}
+            />
+          ))}
+      </div>
+    </div>
+  )
+}
diff --git a/src/components/Links/LinkGroup.tsx b/src/components/Links/LinkGroup.tsx
index c8a423b3..2430399b 100644
--- a/src/components/Links/LinkGroup.tsx
+++ b/src/components/Links/LinkGroup.tsx
@@ -13,6 +13,7 @@ import {
   useAllLinksInGroupAreHidden,
   useGetIsLinkHidden,
 } from '../../stores/hiddenLinks/hiddenLinksHooks'
+import { slugify } from '../../utils/slugify'
 import { MdiIcon } from '../Icon/MdiIcon'
 import { Link } from './Link'
 import { LinkGroupButton } from './LinkGroupButton'
@@ -34,20 +35,20 @@ export const LinkGroup: FC<Props> = ({ group }) => {
   }, [group.items, getIsLinkHidden])
 
   const allGroupLinksAreHidden = useMemo(
-    () => allLinksInGroupAreHidden(group.items.map((link) => link.url)),
-    [allLinksInGroupAreHidden, group.items],
+    () => allLinksInGroupAreHidden(group),
+    [allLinksInGroupAreHidden, group],
   )
 
   const handleToggleGroupClick = useCallback(
     (...items: LinkItem[]): void => {
-      dispatch(toggleHiddenLinksGroup(items.map((link) => link.url)))
+      dispatch(toggleHiddenLinksGroup(items))
     },
     [dispatch],
   )
 
   const noVisibleLinksInGroup = useMemo(() => {
-    return allLinksInGroupAreHidden(group.items.map((link) => link.url))
-  }, [allLinksInGroupAreHidden, group.items])
+    return allLinksInGroupAreHidden(group)
+  }, [allLinksInGroupAreHidden, group])
 
   const showHiddenLinksButtonLabel = useMemo(() => {
     const hiddenLinksCount = hiddenLinks.length
@@ -67,14 +68,17 @@ export const LinkGroup: FC<Props> = ({ group }) => {
   }
 
   return (
-    <div>
+    <div
+      id={slugify(group.name)}
+      className="scroll-mt-32 md:scroll-mt-28 lg:scroll-mt-20"
+    >
       <div className="flex gap-x-1 mb-2">
         <div
           className={classNames(
             'flex-auto',
             'px-4 py-2',
             `bg-${group.color ?? 'gray'}-100 dark:bg-${group.color ?? 'gray'}-600`,
-            'font-semibold uppercase tracking-wider',
+            'text-center font-semibold uppercase tracking-wider',
             `text-${group.color ?? 'gray'}-800 dark:text-${group.color ?? 'gray'}-50`,
             'rounded-md',
           )}
diff --git a/src/links.json b/src/links.json
index 5e5489d7..90923689 100644
--- a/src/links.json
+++ b/src/links.json
@@ -251,7 +251,7 @@
       ]
     },
     {
-      "name": "Code related services",
+      "name": "Code Related Services",
       "color": "orange",
       "items": [
         {
@@ -343,7 +343,7 @@
       ]
     },
     {
-      "name": "Find help & discuss",
+      "name": "Find Help & Discuss",
       "color": "cyan",
       "items": [
         {
@@ -411,7 +411,7 @@
       ]
     },
     {
-      "name": "Docs & learning resources",
+      "name": "Docs & Learning Resources",
       "color": "cyan",
       "items": [
         {
@@ -640,7 +640,7 @@
       ]
     },
     {
-      "name": "UI frameworks & libraries",
+      "name": "UI Frameworks & Libraries",
       "color": "blue",
       "items": [
         {
@@ -752,7 +752,7 @@
       ]
     },
     {
-      "name": "Native & hybrid apps",
+      "name": "Native & Hybrid Apps",
       "color": "blue",
       "items": [
         {
@@ -825,7 +825,7 @@
       ]
     },
     {
-      "name": "Additional libraries",
+      "name": "Additional Libraries",
       "color": "blue",
       "items": [
         {
@@ -964,7 +964,7 @@
       ]
     },
     {
-      "name": "Build & bundle",
+      "name": "Build & Bundle",
       "color": "green",
       "items": [
         {
@@ -1031,7 +1031,7 @@
       ]
     },
     {
-      "name": "Testing & security",
+      "name": "Testing & Security",
       "color": "green",
       "items": [
         {
@@ -1124,7 +1124,7 @@
       ]
     },
     {
-      "name": "Best practices & conventions",
+      "name": "Best Practices & Conventions",
       "color": "green",
       "items": [
         {
@@ -1161,7 +1161,7 @@
       ]
     },
     {
-      "name": "Browser languages",
+      "name": "Browser Languages",
       "color": "amber",
       "items": [
         {
@@ -1240,7 +1240,7 @@
       ]
     },
     {
-      "name": "Server languages",
+      "name": "Server Languages",
       "color": "amber",
       "items": [
         {
@@ -1359,7 +1359,7 @@
       ]
     },
     {
-      "name": "Server frameworks & CMS",
+      "name": "Server Frameworks & CMS",
       "color": "amber",
       "items": [
         {
@@ -1566,7 +1566,7 @@
     },
     {
       "name": "Resources",
-      "color": "pink",
+      "color": "fuchsia",
       "items": [
         {
           "title": "Google Fonts",
@@ -1648,8 +1648,8 @@
       ]
     },
     {
-      "name": "Browser status",
-      "color": "indigo",
+      "name": "Browser Status",
+      "color": "violet",
       "items": [
         {
           "title": "Can I use...",
@@ -1708,8 +1708,8 @@
       ]
     },
     {
-      "name": "Standards & proposals",
-      "color": "indigo",
+      "name": "Standards & Proposals",
+      "color": "violet",
       "items": [
         {
           "title": "W3C",
@@ -1896,7 +1896,7 @@
       ]
     },
     {
-      "name": "Stay focused",
+      "name": "Stay Focused",
       "color": "rose",
       "items": [
         {
@@ -1968,7 +1968,7 @@
       ]
     },
     {
-      "name": "Developer surveys",
+      "name": "Developer Surveys",
       "color": "stone",
       "items": [
         {
@@ -2004,7 +2004,7 @@
       ]
     },
     {
-      "name": "Stay in the loop",
+      "name": "Stay in the Loop",
       "color": "stone",
       "items": [
         {
diff --git a/src/links.ts b/src/links.ts
index f465e95f..c64c0946 100644
--- a/src/links.ts
+++ b/src/links.ts
@@ -2,7 +2,7 @@ import { useMemo } from 'react'
 import linksData from './links.json'
 import { OptionalExceptFor } from './utilityTypes'
 
-export interface LinkItem {
+export type LinkItem = {
   title: string
   url: string
   description?: string
@@ -42,13 +42,13 @@ export type TailwindColorName =
   | 'neutral'
   | 'stone'
 
-export interface LinkGroup {
+export type LinkGroup = {
   name: string
   color?: TailwindColorName
   items: LinkItem[]
 }
 
-export interface Links {
+export type Links = {
   items: LinkGroup[]
 }
 
diff --git a/src/stores/hiddenLinks/hiddenLinksActions.ts b/src/stores/hiddenLinks/hiddenLinksActions.ts
index e02fbc54..82c18083 100644
--- a/src/stores/hiddenLinks/hiddenLinksActions.ts
+++ b/src/stores/hiddenLinks/hiddenLinksActions.ts
@@ -25,19 +25,19 @@ export type HiddenLinksActions =
   | ToggleHiddenLinksGroup
 
 export function setHiddenLinks(
-  links: Array<LinkItem['url']>
+  links: Array<LinkItem['url']>,
 ): SetHiddenLinksAction {
   return { type: SET_HIDDEN_LINKS, payload: links }
 }
 
 export function toggleHiddenLink(
-  link: LinkItem['url']
+  link: LinkItem['url'],
 ): ToggleHiddenLinkAction {
   return { type: TOGGLE_HIDDEN_LINK, payload: link }
 }
 
 export function toggleHiddenLinksGroup(
-  links: Array<LinkItem['url']>
+  items: LinkItem[],
 ): ToggleHiddenLinksGroup {
-  return { type: TOGGLE_HIDDEN_LINKS_GROUP, payload: links }
+  return { type: TOGGLE_HIDDEN_LINKS_GROUP, payload: items.map((i) => i.url) }
 }
diff --git a/src/stores/hiddenLinks/hiddenLinksHooks.ts b/src/stores/hiddenLinks/hiddenLinksHooks.ts
index 3b59f5e5..55e19d41 100644
--- a/src/stores/hiddenLinks/hiddenLinksHooks.ts
+++ b/src/stores/hiddenLinks/hiddenLinksHooks.ts
@@ -1,14 +1,12 @@
 import { useMemo } from 'react'
 import { useAppSelector } from '..'
-import { LinkItem } from '../../links'
+import { LinkGroup, LinkItem } from '../../links'
 
-export function useAllLinksInGroupAreHidden(): (
-  links: Array<LinkItem['url']>,
-) => boolean {
+export function useAllLinksInGroupAreHidden(): (group: LinkGroup) => boolean {
   const hiddenLinks = useAppSelector((state) => state.hiddenLinks.links)
 
-  return function allLinksInGroupAreHidden(links) {
-    return links.every((link) => hiddenLinks.includes(link))
+  return function allLinksInGroupAreHidden(group) {
+    return group.items.every((link) => hiddenLinks.includes(link.url))
   }
 }
 
diff --git a/src/utils/slugify.ts b/src/utils/slugify.ts
new file mode 100644
index 00000000..5b4f46e3
--- /dev/null
+++ b/src/utils/slugify.ts
@@ -0,0 +1,3 @@
+export function slugify(input: string): string {
+  return input.toLowerCase().replaceAll(' ', '-')
+}
\ No newline at end of file