diff --git a/next/src/components/Navigation/NavGroup.tsx b/next/src/components/Navigation/NavGroup.tsx
index e3a15fd..3418645 100644
--- a/next/src/components/Navigation/NavGroup.tsx
+++ b/next/src/components/Navigation/NavGroup.tsx
@@ -8,8 +8,6 @@ import Link from 'next/link'
 import { useRouter } from 'next/router'
 import { NavigationGroup } from './config'
 import NavLink from './NavLink'
-import { VisibleSectionHighlight } from './VisibleSectionHighlight'
-import { remToPx } from '@/lib/remToPx'
 
 interface NavGroupProps {
   group: NavigationGroup
@@ -25,16 +23,11 @@ export function NavGroup({ group, className }: NavGroupProps) {
     [useRouter(), useSectionStore((s: any) => s.sections)],
     isInsideMobileNavigation,
   )
-
   let isActiveGroup =
     group.group.href === router.pathname ||
     (group.links &&
       group.links.findIndex((link) => link.href === router.pathname) !== -1)
 
-  const groupTitleHeight = document.getElementById(
-    `${group.group.href}-link`,
-  )?.offsetHeight
-
   return (
     <li className={clsx('relative mt-6', className)}>
       <motion.h2
@@ -42,24 +35,29 @@ export function NavGroup({ group, className }: NavGroupProps) {
         className="text-xs font-semibold text-zinc-900 dark:text-white"
       >
         <Link
-          id={`${group.group.href}-link`}
           href={group.group.href}
           aria-current={isActiveGroup ? 'page' : undefined}
-          className={lora.className}
+          className={`${lora.className} relative block`}
         >
-          {group.group.title}
+          {group.group.title}{' '}
+          {group.group.href === router.pathname && (
+            <div
+              className={clsx(
+                'absolute',
+                'top-[-4px]',
+                'bottom-[-4px]',
+                'left-[-8px]',
+                'right-0',
+                'bg-indigo-600/30',
+                'dark:bg-white/2.5',
+                'rounded-[8px]',
+              )}
+            />
+          )}
         </Link>
       </motion.h2>
-      <div className="mt-3 pl-2">
-        <AnimatePresence initial={!isInsideMobileNavigation}>
-          {isActiveGroup && (
-            <VisibleSectionHighlight pathname={router.pathname} />
-          )}
-        </AnimatePresence>
-        <div
-          style={{ top: groupTitleHeight! + remToPx(1) }}
-          className="absolute bottom-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5"
-        />
+      <div className="relative mt-3 pl-2">
+        <div className="absolute inset-y-0 left-2 w-px bg-zinc-900/10 dark:bg-white/5" />
         <ul role="list" className="border-l border-transparent">
           {group.links?.map((link) => (
             <motion.li
@@ -67,12 +65,22 @@ export function NavGroup({ group, className }: NavGroupProps) {
               layout="position"
               className={`${spectral.className}`}
             >
-              <NavLink
-                id={`${link.href}-link`}
-                href={link.href}
-                active={link.href === router.pathname}
-              >
+              <NavLink href={link.href} active={link.href === router.pathname}>
                 {link.title}
+                {link.href === router.pathname && (
+                  <div
+                    className={clsx(
+                      'absolute',
+                      'top-[-4px]',
+                      'bottom-[-4px]',
+                      'left-[-16px]',
+                      'right-0',
+                      'bg-indigo-600/30',
+                      'dark:bg-white/2.5',
+                      'rounded-[8px]',
+                    )}
+                  />
+                )}
               </NavLink>
               <AnimatePresence mode="popLayout" initial={false}>
                 {link.href === router.pathname && sections.length > 0 && (
@@ -89,7 +97,7 @@ export function NavGroup({ group, className }: NavGroupProps) {
                     }}
                   >
                     {sections.map((section: any) => (
-                      <li id={`${section.id}-li`} key={section.id}>
+                      <li key={section.id}>
                         <NavLink
                           href={`${link.href}#${section.id}`}
                           tag={section.tag}
diff --git a/next/src/components/Navigation/NavLink.tsx b/next/src/components/Navigation/NavLink.tsx
index 7fd8355..ceb76f4 100644
--- a/next/src/components/Navigation/NavLink.tsx
+++ b/next/src/components/Navigation/NavLink.tsx
@@ -22,7 +22,7 @@ function NavLink(
       id={id}
       aria-current={active ? 'page' : undefined}
       className={clsx(
-        'flex justify-between gap-2 py-1 pr-3 text-sm transition',
+        'relative flex justify-between gap-2 py-1 pr-3 text-sm transition',
         isAnchorLink ? 'pl-7' : 'pl-4',
         active
           ? 'text-zinc-900 dark:text-white'
diff --git a/next/src/components/Navigation/VisibleSectionHighlight.tsx b/next/src/components/Navigation/VisibleSectionHighlight.tsx
deleted file mode 100644
index f50bea6..0000000
--- a/next/src/components/Navigation/VisibleSectionHighlight.tsx
+++ /dev/null
@@ -1,81 +0,0 @@
-import { useIsInsideMobileNavigation } from '@/components/MobileNavigation'
-import { useSectionStore } from '@/components/SectionProvider'
-import { useInitialValue } from '@/lib/useInitialValue'
-import clsx from 'clsx/lite'
-import { motion } from 'framer-motion'
-import { useState } from 'react'
-
-interface VisibleSectionHighlightProps {
-  pathname: string
-}
-
-export function VisibleSectionHighlight({
-  pathname,
-}: VisibleSectionHighlightProps) {
-  let [_, visibleSections] = useInitialValue(
-    [
-      useSectionStore((s: any) => s.sections),
-      useSectionStore((s: any) => s.visibleSections),
-    ],
-    useIsInsideMobileNavigation(),
-  )
-
-  const [uselessCounter, setUselessCounter] = useState<number>(0)
-  let height = 0
-  let top = 0
-
-  function renderAgain() {
-    setTimeout(() => {
-      setUselessCounter(uselessCounter + 1)
-    }, 100)
-  }
-
-  const activeNavItem = document.getElementById(`${pathname}-link`)
-  if (activeNavItem) {
-    if (visibleSections[0] === '_top' || visibleSections.length === 0) {
-      height = activeNavItem.offsetHeight
-      top = activeNavItem.offsetTop
-      if (top === 0) {
-        renderAgain()
-      }
-    } else {
-      top = document.getElementById(`${visibleSections[0]}-li`)!.offsetTop
-    }
-    for (let i = 0; i < visibleSections.length; i++) {
-      if (visibleSections[i] === '_top') continue
-      height += document.getElementById(
-        `${visibleSections[i]}-li`,
-      )!.offsetHeight
-    }
-    height += 8
-  } else {
-    // Wait a bit and force a re-render. `activeNavItem` should exist
-    renderAgain()
-  }
-
-  return (
-    <motion.div
-      layout
-      initial={{ opacity: 0 }}
-      animate={{
-        opacity: 1,
-        transition: { ease: 'easeInOut' },
-        y: top,
-      }}
-      exit={{ opacity: 0 }}
-      className={clsx(
-        'absolute',
-        'top-[-4px]',
-        'bottom-[4px]',
-        'left-[-8px]',
-        'right-0',
-        'bg-indigo-600/30',
-        'dark:bg-white/2.5',
-      )}
-      style={{
-        borderRadius: 8,
-        height,
-      }}
-    />
-  )
-}