diff --git a/src/app/components/Main.tsx b/src/app/components/Main.tsx
index 6f97a05..d2e00aa 100644
--- a/src/app/components/Main.tsx
+++ b/src/app/components/Main.tsx
@@ -1,7 +1,7 @@
 'use client';
 
 import { Fragment } from 'react';
-import { themes, useThemeContext } from '../theme';
+import { themes, useThemeContext } from '../context/theme';
 import { DocSection } from '../types/types';
 import styles from './Main.module.css';
 import Section from './Section';
diff --git a/src/app/components/NavBar.tsx b/src/app/components/NavBar.tsx
index b728ed0..a22c71a 100644
--- a/src/app/components/NavBar.tsx
+++ b/src/app/components/NavBar.tsx
@@ -2,7 +2,7 @@
 
 import Link from 'next/link';
 import { useState } from 'react';
-import { themes, useThemeContext } from '../theme';
+import { themes, useThemeContext } from '../context/theme';
 import { DocsStructure } from '../types/types';
 import styles from './NavBar.module.css';
 import SectionDropdown from './SectionDropdown';
diff --git a/src/app/components/Page.tsx b/src/app/components/Page.tsx
index 1ce34c2..98408e3 100644
--- a/src/app/components/Page.tsx
+++ b/src/app/components/Page.tsx
@@ -1,7 +1,8 @@
 'use client';
 
-import { useEffect, useRef, useState } from 'react';
-import { themes, useThemeContext } from '../theme';
+import { useEffect } from 'react';
+import { useSectionContext } from '../context/section';
+import { themes, useThemeContext } from '../context/theme';
 import { DocSection, DocsStructure } from '../types/types';
 import Main from './Main';
 import NavBar from './NavBar';
@@ -17,26 +18,31 @@ export default function Page({
 }) {
   const { theme } = useThemeContext();
   const themeStyles = themes[theme];
-  const docRef = useRef<HTMLDivElement>(null);
-  const [currentSection, setCurrentSection] = useState('');
+
+  const { setSection } = useSectionContext();
 
   useEffect(() => {
     const titles =
       document.querySelectorAll<HTMLHeadingElement>(
-        '.section-title'
+        'article:nth-child(1) > h1'
       );
 
     const observer = new IntersectionObserver(
       entries => {
         entries.forEach(entry => {
           if (entry.isIntersecting) {
-            setCurrentSection(entry.target.id);
+            setSection(entry.target.id);
+            history.pushState(
+              null,
+              '',
+              `#${entry.target.id}`
+            );
           }
         });
       },
       {
         root: null,
-        rootMargin: '-10% 0% -80% 0%',
+        rootMargin: '-10% 0% -70% 0%',
         threshold: 1,
       }
     );
@@ -46,12 +52,12 @@ export default function Page({
     return () => {
       titles.forEach(title => observer.unobserve(title));
     };
-  }, []);
+  }, [setSection]);
 
   return (
     <div className={styles.wrapper} style={themeStyles}>
       <SideBar version={version} />
-      <div ref={docRef} className={styles.container}>
+      <div className={styles.container}>
         <NavBar version={version} />
         <Main versionSections={versionSections} />
       </div>
diff --git a/src/app/components/SectionDropdown.tsx b/src/app/components/SectionDropdown.tsx
index e31e155..83c430d 100644
--- a/src/app/components/SectionDropdown.tsx
+++ b/src/app/components/SectionDropdown.tsx
@@ -1,5 +1,7 @@
 import { Fragment } from 'react';
+import { useSectionContext } from '../context/section';
 import { Doc, DocsStructure } from '../types/types';
+import { toKebabCase } from '../utils/stringUtils';
 import styles from './SectionDropdown.module.css';
 
 function SectionDropdownOption({ doc }: { doc: Doc }) {
@@ -9,6 +11,7 @@ function SectionDropdownOption({ doc }: { doc: Doc }) {
         <option
           className={styles.selectItem}
           label={doc.title}
+          value={toKebabCase(doc.title)}
         >
           {doc.title}
         </option>
@@ -17,6 +20,7 @@ function SectionDropdownOption({ doc }: { doc: Doc }) {
         <optgroup label={doc.title}>
           {doc.children.map(child => (
             <option
+              value={toKebabCase(child.title)}
               className={styles.selectItem}
               label={child.title}
               key={child.title}
@@ -35,11 +39,10 @@ export default function SectionDropdown({
 }: {
   version: DocsStructure;
 }) {
+  const { section, setSection } = useSectionContext();
   const handleSelectChange = (e: any) => {
-    const selectedOption = e.target.value;
-    location.hash = selectedOption
-      .replaceAll(' ', '-')
-      .toLowerCase();
+    setSection(e.target.value);
+    location.hash = e.target.value;
   };
 
   return (
@@ -47,6 +50,7 @@ export default function SectionDropdown({
       onChange={handleSelectChange}
       title="navigation dropdown"
       className={styles.dropdownSelect}
+      value={section}
     >
       {version.docs.map(doc => {
         return (
diff --git a/src/app/components/SideBar.tsx b/src/app/components/SideBar.tsx
index aebe64c..2f681c2 100644
--- a/src/app/components/SideBar.tsx
+++ b/src/app/components/SideBar.tsx
@@ -2,8 +2,9 @@
 
 import Link from 'next/link.js';
 import { useState } from 'react';
-import { useThemeContext } from '../theme';
-import { Doc, DocsStructure } from '../types/types.js';
+import { useThemeContext } from '../context/theme';
+import { Doc, DocsStructure } from '../types/types';
+import { toKebabCase } from '../utils/stringUtils';
 import styles from './SideBar.module.css';
 
 function TreeNode({ doc }: { doc: Doc }) {
@@ -19,9 +20,7 @@ function TreeNode({ doc }: { doc: Doc }) {
         <div className={styles.expandable}>
           {doc.copy ? (
             <a
-              href={`#${doc.title
-                .replaceAll(' ', '-')
-                .toLowerCase()}`}
+              href={`#${toKebabCase(doc.title)}`}
               className={styles.link}
             >
               {doc.title}
@@ -66,9 +65,7 @@ function TreeNode({ doc }: { doc: Doc }) {
         </div>
       ) : doc.copy ? (
         <a
-          href={`#${doc.title
-            .replaceAll(' ', '-')
-            .toLowerCase()}`}
+          href={`#${toKebabCase(doc.title)}`}
           className={styles.link}
         >
           {doc.title}
diff --git a/src/app/context/section.tsx b/src/app/context/section.tsx
new file mode 100644
index 0000000..2bd8a0d
--- /dev/null
+++ b/src/app/context/section.tsx
@@ -0,0 +1,29 @@
+'use client';
+
+import {
+  ReactNode,
+  createContext,
+  useContext,
+  useState,
+} from 'react';
+
+const SectionContext = createContext({});
+
+export const SectionContextProvider = ({
+  children,
+}: {
+  children: ReactNode;
+}) => {
+  const [section, setSection] = useState('introduction');
+
+  return (
+    <SectionContext.Provider
+      value={{ section, setSection }}
+    >
+      {children}
+    </SectionContext.Provider>
+  );
+};
+
+export const useSectionContext: any = () =>
+  useContext(SectionContext);
diff --git a/src/app/theme.tsx b/src/app/context/theme.tsx
similarity index 100%
rename from src/app/theme.tsx
rename to src/app/context/theme.tsx
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 8ef781a..5424df7 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -1,7 +1,8 @@
 import { Analytics } from '@vercel/analytics/react';
 import { ReactNode } from 'react';
+import { SectionContextProvider } from './context/section';
+import { ThemeContextProvider } from './context/theme';
 import './globals.css';
-import { ThemeContextProvider } from './theme';
 
 export const metadata = {
   title: 'Onspring API Docs',
@@ -30,7 +31,9 @@ export default function RootLayout({
     <html lang="en">
       <body>
         <ThemeContextProvider>
-          {children}
+          <SectionContextProvider>
+            {children}
+          </SectionContextProvider>
         </ThemeContextProvider>
         <Analytics />
       </body>
diff --git a/src/app/utils/stringUtils.ts b/src/app/utils/stringUtils.ts
new file mode 100644
index 0000000..33e83b7
--- /dev/null
+++ b/src/app/utils/stringUtils.ts
@@ -0,0 +1,3 @@
+export function toKebabCase(str: string): string {
+  return str.replaceAll(' ', '-').toLowerCase();
+}