diff --git a/.eslintrc.json b/.eslintrc.json
index 7d669f9..1d561aa 100644
--- a/.eslintrc.json
+++ b/.eslintrc.json
@@ -9,6 +9,7 @@
     "eslint:recommended",
     "plugin:react/recommended",
     "plugin:@typescript-eslint/recommended",
+    "plugin:tailwindcss/recommended",
     "prettier",
     "next"
   ],
@@ -39,7 +40,8 @@
     ],
     "react/react-in-jsx-scope": "off",
     "@typescript-eslint/no-unused-vars": ["error"],
-    "react/prop-types": "off"
+    "react/prop-types": "off",
+    "tailwindcss/no-custom-classname": "off"
   },
   "settings": {
     "react": {
diff --git a/components/DocsSidebarNavigation.jsx b/components/DocsSidebarNavigation.jsx
index 259af9e..17234db 100644
--- a/components/DocsSidebarNavigation.jsx
+++ b/components/DocsSidebarNavigation.jsx
@@ -49,22 +49,22 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
       <ul role="list" className="space-y-9">
         {navigation.map((section) => (
           <li key={section.title}>
-            <div className="flex justify-between items-center">
+            <div className="flex items-center justify-between">
               <Link href={section.href}>
-                <h2 className="font-display font-medium text-slate-900 dark:text-white cursor-pointer">
+                <h2 className="cursor-pointer font-display font-medium text-slate-900 dark:text-white">
                   {section.title}
                 </h2>
               </Link>
-              <div className="inline-flex items-center justify-center p-2 rounded-full hover:bg-gray-200 dark:hover:bg-gray-800 transition-colors duration-300">
+              <div className="inline-flex items-center justify-center rounded-full p-2 transition-colors duration-300 hover:bg-gray-200 dark:hover:bg-gray-800">
                 <button
                   onClick={() => toggleSection(section.title)}
-                  className="text-slate-900 dark:text-white transition-transform duration-300"
+                  className="text-slate-900 transition-transform duration-300 dark:text-white"
                 >
                   <svg
                     className={clsx(
-                      'transform',
+                      '',
                       expandedSections[section.title] && 'rotate-90',
-                      'w-4 h-4'
+                      'h-4 w-4'
                     )}
                     xmlns="http://www.w3.org/2000/svg"
                     fill="none"
@@ -87,7 +87,7 @@ export function DocsSidebarNavigation({ className, data, navigation }) {
                 'mt-2 space-y-2 border-l-2 transition-all duration-300',
                 expandedSections[section.title]
                   ? 'border-slate-100 dark:border-slate-800'
-                  : 'border-transparent hidden',
+                  : 'hidden border-transparent',
                 'lg:mt-4 lg:space-y-4 lg:border-slate-200'
               )}
             >
diff --git a/components/FeatureTabsLeft.jsx b/components/FeatureTabsLeft.jsx
index 7f09019..51090d4 100644
--- a/components/FeatureTabsLeft.jsx
+++ b/components/FeatureTabsLeft.jsx
@@ -30,16 +30,16 @@ const FeatureTabsLeft = (layout) => {
     <section
       id="features"
       aria-label="Features of WPGraphQL for ACF"
-      className="relative overflow-hidden bg-slate-100  dark:bg-slate-800 pb-28 pt-20 sm:py-32"
+      className="relative overflow-hidden bg-slate-100  pb-28 pt-20 dark:bg-slate-800 sm:py-32"
     >
       <Container className="relative">
         <div className="max-w-2xl md:mx-auto md:text-center xl:max-w-none">
           <h2
-            className="font-display text-3xl tracking-tight text-gray dark:text-white sm:text-4xl md:text-5xl"
+            className="text-gray font-display text-3xl tracking-tight dark:text-white sm:text-4xl md:text-5xl"
             dangerouslySetInnerHTML={{ __html: layout.name }}
           />
           <div
-            className="mt-6 text-lg tracking-tight text-gray dark:text-white"
+            className="text-gray mt-6 text-lg tracking-tight dark:text-white"
             dangerouslySetInnerHTML={{ __html: layout.descripton }}
           />
         </div>
@@ -56,10 +56,10 @@ const FeatureTabsLeft = (layout) => {
                     <div
                       key={feature.name}
                       className={clsx(
-                        'group relative rounded-full px-4 my-2  py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
+                        'group relative my-2 rounded-full px-4  py-1 lg:rounded-l-xl lg:rounded-r-none lg:p-6',
                         selectedIndex === featureIndex
-                          ? 'bg-slate-600 dark:bg-slate-800 lg:dark:bg-slate-700 lg:ring-1 lg:ring-inset lg:ring-white/10 group-hover:text-white '
-                          : 'hover:bg-slate-600 dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700 bg-gray-100 group-hover:text-white',
+                          ? 'bg-slate-600 group-hover:text-white dark:bg-slate-800 lg:ring-1 lg:ring-inset lg:ring-white/10 lg:dark:bg-slate-700 '
+                          : 'bg-gray-100 hover:bg-slate-600 group-hover:text-white dark:hover:bg-slate-800 lg:dark:hover:bg-slate-700',
                       )}
                     >
                       <h3>
@@ -67,7 +67,7 @@ const FeatureTabsLeft = (layout) => {
                           className={clsx(
                             'font-display text-lg [&:not(:focus-visible)]:focus:outline-none',
                             selectedIndex === featureIndex
-                              ? 'text-white dark:text-slate-200 hover:text-white group-hover:text-white dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
+                              ? 'text-white hover:text-white group-hover:text-white dark:text-slate-200 dark:hover:text-slate-300 lg:dark:hover:text-slate-200'
                               : 'text-slate-800 hover:text-white group-hover:text-white dark:hover:text-slate-200',
                           )}
                         >
@@ -77,9 +77,9 @@ const FeatureTabsLeft = (layout) => {
                       </h3>
                       <p
                         className={clsx(
-                          'mt-2 hidden text-sm lg:block group-hover:text-white  dark:group-hover:text-slate-200',
+                          'mt-2 hidden text-sm group-hover:text-white dark:group-hover:text-slate-200  lg:block',
                           selectedIndex === featureIndex
-                            ? 'text-slate-800 lg:text-white dark:text-slate-200'
+                            ? 'text-slate-800 dark:text-slate-200 lg:text-white'
                             : 'text-slate-800',
                         )}
                       >
@@ -93,7 +93,7 @@ const FeatureTabsLeft = (layout) => {
                 {features.map((feature) => (
                   <Tab.Panel key={feature.name} unmount={false}>
                     <div className="relative sm:px-6 lg:hidden">
-                      <div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-slate-200 dark:bg-slate-700 lg:bg-white/10 ring-1 ring-inset ring-white/10 sm:inset-x-0 sm:rounded-t-xl" />
+                      <div className="absolute -inset-x-4 bottom-[-4.25rem] top-[-6.5rem] bg-slate-200 ring-1 ring-inset ring-white/10 dark:bg-slate-700 sm:inset-x-0 sm:rounded-t-xl lg:bg-white/10" />
                       <p className="relative mx-auto max-w-2xl text-base text-slate-800 dark:text-white sm:text-center">
                         {feature.featureDescription}
                       </p>
diff --git a/components/FeatureTabsTop.jsx b/components/FeatureTabsTop.jsx
index 025e645..57faa19 100644
--- a/components/FeatureTabsTop.jsx
+++ b/components/FeatureTabsTop.jsx
@@ -11,9 +11,9 @@ function Feature({ feature, isActive, className, ...props }) {
     <div
       className={clsx(
         className,
-        'p-5 rounded-lg',
+        'rounded-lg p-5',
         !isActive
-          ? 'opacity-75 hover:opacity-100 hover:bg-slate-50 dark:hover:bg-gray-800'
+          ? 'opacity-75 hover:bg-slate-50 hover:opacity-100 dark:hover:bg-gray-800'
           : 'bg-slate-100 dark:bg-slate-800',
       )}
       {...props}
@@ -26,7 +26,7 @@ function Feature({ feature, isActive, className, ...props }) {
       >
         {feature.featureSubtitle}
       </h3>
-      <p className="mt-2 font-display text-xl text-left text-slate-900 dark:text-slate-50">
+      <p className="mt-2 text-left font-display text-xl text-slate-900 dark:text-slate-50">
         {feature.name}
       </p>
       <p className="mt-4 text-sm text-slate-600 dark:text-slate-200">
@@ -75,7 +75,7 @@ function FeaturesDesktop({ features }) {
                 feature={{
                   ...feature,
                   name: (
-                    <Tab className="[&:not(:focus-visible)]:focus:outline-none text-left">
+                    <Tab className="text-left [&:not(:focus-visible)]:focus:outline-none">
                       <span className="absolute inset-0" />
                       {feature.name}
                     </Tab>
@@ -86,7 +86,7 @@ function FeaturesDesktop({ features }) {
               />
             ))}
           </Tab.List>
-          <Tab.Panels className="relative mt-20 overflow-hidden rounded-xl bg-slate-200 dark:bg-slate-700 px-14 py-16 xl:px-16">
+          <Tab.Panels className="relative mt-20 overflow-hidden rounded-xl bg-slate-200 px-14 py-16 dark:bg-slate-700 xl:px-16">
             <div className="-mx-5 flex">
               {features.map((feature, featureIndex) => (
                 <Tab.Panel
@@ -114,7 +114,7 @@ function FeaturesDesktop({ features }) {
                 </Tab.Panel>
               ))}
             </div>
-            <div className="pointer-events-none absolute inset-0 rounded-4xl ring-1 ring-inset ring-slate-900/10" />
+            <div className="rounded-4xl pointer-events-none absolute inset-0 ring-1 ring-inset ring-slate-900/10" />
           </Tab.Panels>
         </>
       )}
diff --git a/components/FieldTypesList.jsx b/components/FieldTypesList.jsx
index 87e6c52..fcad51b 100644
--- a/components/FieldTypesList.jsx
+++ b/components/FieldTypesList.jsx
@@ -26,10 +26,10 @@ export function FieldTypesList({ data }) {
         {contentNodes.nodes.map((fieldType) => (
           <div
             key={fieldType.uri}
-            className="group relative flex rounded-2xl bg-zinc-50 dark:bg-gray-800 dark:hover:bg-gray-900 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-white/2.5 dark:hover:shadow-black/5"
+            className="dark:bg-white/2.5 group relative flex rounded-2xl bg-zinc-50 transition-shadow hover:shadow-md hover:shadow-zinc-900/5 dark:bg-gray-800 dark:hover:bg-gray-900 dark:hover:shadow-black/5"
           >
-            <div className="absolute inset-0 rounded-2xl ring-1 ring-inset ring-zinc-900/7.5 group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
-            <div className="relative rounded-2xl px-4 pt-16 pb-4">
+            <div className="ring-zinc-900/7.5 absolute inset-0 rounded-2xl ring-1 ring-inset group-hover:ring-zinc-900/10 dark:ring-white/10 dark:group-hover:ring-white/20" />
+            <div className="relative rounded-2xl px-4 pb-4 pt-16">
               {fieldType?.featuredImage?.node && (
                 <Image
                   src={fieldType?.featuredImage?.node.sourceUrl}
diff --git a/components/HomepageLayoutsLayoutsFaqs.jsx b/components/HomepageLayoutsLayoutsFaqs.jsx
index 7af7aea..3244d21 100644
--- a/components/HomepageLayoutsLayoutsFaqs.jsx
+++ b/components/HomepageLayoutsLayoutsFaqs.jsx
@@ -28,18 +28,18 @@ const HomepageLayoutsLayoutsFaqs = ({ title, description, questions }) => {
     <section
       id="faq"
       aria-labelledby="faq-title"
-      className="relative overflow-hidden bg-slate-100 dark:bg-slate-800 py-20 sm:py-32"
+      className="relative overflow-hidden bg-slate-100 py-20 dark:bg-slate-800 sm:py-32"
     >
       <Container className="relative">
-        <div className="mx-auto max-w-2xl lg:mx-0 prose dark:prose-invert">
+        <div className="prose mx-auto max-w-2xl dark:prose-invert lg:mx-0">
           <h2
             id="faq-title"
-            className="font-display text-3xl tracking-tight dark:text-slate-200 text-slate-900 sm:text-4xl"
+            className="font-display text-3xl tracking-tight text-slate-900 dark:text-slate-200 sm:text-4xl"
           >
             {title}
           </h2>
           <div
-            className="mt-4 text-lg tracking-tight dark:text-slate-300 text-slate-700"
+            className="mt-4 text-lg tracking-tight text-slate-700 dark:text-slate-300"
             dangerouslySetInnerHTML={{ __html: description }}
           />
         </div>
@@ -52,11 +52,11 @@ const HomepageLayoutsLayoutsFaqs = ({ title, description, questions }) => {
               <ul role="list" className="flex flex-col gap-y-8">
                 {column.map((faq, faqIndex) => (
                   <li key={faqIndex}>
-                    <h3 className="font-display text-lg leading-7 dark:text-slate-200 text-slate-900">
+                    <h3 className="font-display text-lg leading-7 text-slate-900 dark:text-slate-200">
                       {faq.question}
                     </h3>
                     <div
-                      className="prose dark:prose-invert mt-4 text-sm dark:text-slate-300 text-slate-700"
+                      className="prose mt-4 text-sm text-slate-700 dark:prose-invert dark:text-slate-300"
                       dangerouslySetInnerHTML={{ __html: faq.answer }}
                     />
                   </li>
diff --git a/components/HomepageLayoutsLayoutsHero.jsx b/components/HomepageLayoutsLayoutsHero.jsx
index 303b441..868c4c3 100644
--- a/components/HomepageLayoutsLayoutsHero.jsx
+++ b/components/HomepageLayoutsLayoutsHero.jsx
@@ -18,13 +18,13 @@ function TrafficLightsIcon(props) {
 
 const HomepageLayoutsLayoutsHero = (hero) => {
   return (
-    <div className="overflow-hidden bg-white dark:bg-slate-900 dark:-mb-32 dark:mt-[-4.5rem] dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
+    <div className="overflow-hidden bg-white dark:-mb-32 dark:mt-[-4.5rem] dark:bg-slate-900 dark:pb-32 dark:pt-[4.5rem] dark:lg:mt-[-4.75rem] dark:lg:pt-[4.75rem]">
       <div className="py-16 sm:px-2 lg:relative lg:px-0 lg:py-20">
         <div className="mx-auto grid max-w-2xl grid-cols-1 items-center gap-x-8 gap-y-16 px-4 lg:max-w-8xl lg:grid-cols-2 lg:px-8 xl:gap-x-16 xl:px-12">
           <div className="relative z-10 md:text-center lg:text-left">
             <div className="relative">
               <div
-                className="inline bg-gradient-to-r from-orange-600 via-orange-500 to-orange-600 dark:from-orange-300 dark:via-orange-600 dark:to-orange-300 bg-clip-text font-display text-5xl tracking-tight text-transparent"
+                className="inline bg-gradient-to-r from-orange-600 via-orange-500 to-orange-600 bg-clip-text font-display text-5xl tracking-tight text-transparent dark:from-orange-300 dark:via-orange-600 dark:to-orange-300"
                 dangerouslySetInnerHTML={{ __html: hero.title }}
               />
               <div
@@ -45,7 +45,7 @@ const HomepageLayoutsLayoutsHero = (hero) => {
             <div className="relative">
               <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-orange-300 via-orange-300/70 to-orange-300 opacity-10 blur-lg" />
               <div className="absolute inset-0 rounded-2xl bg-gradient-to-tr from-orange-300 via-orange-300/70 to-orange-300 opacity-10" />
-              <div className="relative rounded-2xl bg-slate-900 dark:bg-[#0A101F]/80 ring-1 ring-white/10 backdrop-blur">
+              <div className="relative rounded-2xl bg-slate-900 ring-1 ring-white/10 backdrop-blur dark:bg-[#0A101F]/80">
                 <div className="absolute -top-px left-20 right-11 h-px bg-gradient-to-r from-orange-300/0 via-orange-300/70 to-orange-300/0" />
                 <div className="absolute -bottom-px left-11 right-20 h-px bg-gradient-to-r from-orange-400/0 via-orange-400 to-orange-400/0" />
                 <div className="pl-4 pt-4">
@@ -55,7 +55,7 @@ const HomepageLayoutsLayoutsHero = (hero) => {
                       key={hero?.codeFileName || 'query-acf-fields.gql'}
                       className="flex h-6 rounded-full bg-gradient-to-r from-orange-400/30 via-orange-400 to-orange-400/30 p-px font-medium text-orange-300"
                     >
-                      <div className="flex items-center rounded-full px-2.5 bg-slate-800">
+                      <div className="flex items-center rounded-full bg-slate-800 px-2.5">
                         {hero?.codeFileName || null}
                       </div>
                     </div>
diff --git a/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx b/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx
index 1874925..997d79c 100644
--- a/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx
+++ b/components/HomepageLayoutsLayoutsSupportedFieldTypes.jsx
@@ -151,17 +151,17 @@ const HomepageLayoutsLayoutsSupportedFieldTypes = (data) => {
     <section
       id="reviews"
       aria-labelledby="reviews-title"
-      className="pb-16 pt-20 sm:pb-24 sm:pt-32 dark:bg-slate-700"
+      className="pb-16 pt-20 dark:bg-slate-700 sm:pb-24 sm:pt-32"
     >
       <Container>
         <h2
           id="reviews-title"
-          className="text-3xl font-medium tracking-tight mb-5 dark:text-gray-100 text-gray-900 sm:text-center"
+          className="mb-5 text-3xl font-medium tracking-tight text-gray-900 dark:text-gray-100 sm:text-center"
         >
           {data.title}
         </h2>
         <div
-          className="mt-2 text-lg dark:text-gray-200 text-gray-600 sm:text-center"
+          className="mt-2 text-lg text-gray-600 dark:text-gray-200 sm:text-center"
           dangerouslySetInnerHTML={{ __html: data.description }}
         />
 
diff --git a/components/Layout.jsx b/components/Layout.jsx
index bc28e7b..3c2f0c7 100644
--- a/components/Layout.jsx
+++ b/components/Layout.jsx
@@ -126,123 +126,125 @@ export function Layout({ data, children, toc, title }) {
     <>
       <SiteHeader navigation={primaryNavigation} />
 
-      <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
-        <div className="hidden lg:relative lg:block lg:flex-none">
-          <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
-          <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
-          <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
-          <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
-            <DocsSidebarNavigation
-              data={data}
-              navigation={docsSidebarNavigation}
-            />
+      <main className='content'>
+        <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
+          <div className="hidden lg:relative lg:block lg:flex-none">
+            <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
+            <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
+            <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
+            <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
+              <DocsSidebarNavigation
+                data={data}
+                navigation={docsSidebarNavigation}
+              />
+            </div>
           </div>
-        </div>
-        <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
-          <article>
-            {(title || section) && (
-              <header className="mb-9 space-y-1">
-                {section && (
-                  <p className="font-display text-sm font-medium text-sky-500">
-                    {section.title}
-                  </p>
-                )}
-                {title && (
-                  <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
-                    {title}
-                  </h1>
-                )}
-              </header>
-            )}
-            <Prose>{children}</Prose>
-          </article>
-          <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
-            {previousPage && (
-              <div>
-                <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
-                  Previous
-                </dt>
-                <dd className="mt-1">
-                  <Link
-                    href={previousPage.href}
-                    className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
-                  >
-                    <span aria-hidden="true">&larr;</span> {previousPage.title}
-                  </Link>
-                </dd>
-              </div>
-            )}
-            {nextPage && (
-              <div className="ml-auto text-right">
-                <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
-                  Next
-                </dt>
-                <dd className="mt-1">
-                  <Link
-                    href={nextPage.href}
-                    className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+          <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
+            <article>
+              {(title || section) && (
+                <header className="mb-9 space-y-1">
+                  {section && (
+                    <p className="font-display text-sm font-medium text-sky-500">
+                      {section.title}
+                    </p>
+                  )}
+                  {title && (
+                    <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
+                      {title}
+                    </h1>
+                  )}
+                </header>
+              )}
+              <Prose>{children}</Prose>
+            </article>
+            <dl className="mt-12 flex border-t border-slate-200 pt-6 dark:border-slate-800">
+              {previousPage && (
+                <div>
+                  <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
+                    Previous
+                  </dt>
+                  <dd className="mt-1">
+                    <Link
+                      href={previousPage.href}
+                      className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+                    >
+                      <span aria-hidden="true">&larr;</span> {previousPage.title}
+                    </Link>
+                  </dd>
+                </div>
+              )}
+              {nextPage && (
+                <div className="ml-auto text-right">
+                  <dt className="font-display text-sm font-medium text-slate-900 dark:text-white">
+                    Next
+                  </dt>
+                  <dd className="mt-1">
+                    <Link
+                      href={nextPage.href}
+                      className="text-base font-semibold text-slate-500 hover:text-slate-600 dark:text-slate-400 dark:hover:text-slate-300"
+                    >
+                      {nextPage.title} <span aria-hidden="true">&rarr;</span>
+                    </Link>
+                  </dd>
+                </div>
+              )}
+            </dl>
+          </div>
+          <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
+            <nav aria-labelledby="on-this-page-title" className="w-56">
+              {tableOfContents && tableOfContents?.length > 0 && (
+                <>
+                  <h2
+                    id="on-this-page-title"
+                    className="font-display text-sm font-medium text-slate-900 dark:text-white"
                   >
-                    {nextPage.title} <span aria-hidden="true">&rarr;</span>
-                  </Link>
-                </dd>
-              </div>
-            )}
-          </dl>
-        </div>
-        <div className="hidden xl:sticky xl:top-[4.5rem] xl:-mr-6 xl:block xl:h-[calc(100vh-4.5rem)] xl:flex-none xl:overflow-y-auto xl:py-16 xl:pr-6">
-          <nav aria-labelledby="on-this-page-title" className="w-56">
-            {tableOfContents && tableOfContents?.length > 0 && (
-              <>
-                <h2
-                  id="on-this-page-title"
-                  className="font-display text-sm font-medium text-slate-900 dark:text-white"
-                >
-                  On this page
-                </h2>
-                <ol role="list" className="mt-4 space-y-3 text-sm">
-                  {tableOfContents.map((section) => (
-                    <li key={section.id}>
-                      <h3>
-                        <Link
-                          href={`#${section.id}`}
-                          className={clsx(
-                            isActive(section)
-                              ? 'text-sky-500'
-                              : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
-                          )}
-                        >
-                          {section.title}
-                        </Link>
-                      </h3>
-                      {section.children.length > 0 && (
-                        <ol
-                          role="list"
-                          className="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400"
-                        >
-                          {section.children.map((subSection) => (
-                            <li key={subSection.id}>
-                              <Link
-                                href={`#${subSection.id}`}
-                                className={
-                                  isActive(subSection)
-                                    ? 'text-sky-500'
-                                    : 'hover:text-slate-600 dark:hover:text-slate-300'
-                                }
-                              >
-                                {subSection.title}
-                              </Link>
-                            </li>
-                          ))}
-                        </ol>
-                      )}
-                    </li>
-                  ))}
-                </ol>
-              </>
-            )}
-          </nav>
+                    On this page
+                  </h2>
+                  <ol role="list" className="mt-4 space-y-3 text-sm">
+                    {tableOfContents.map((section) => (
+                      <li key={section.id}>
+                        <h3>
+                          <Link
+                            href={`#${section.id}`}
+                            className={clsx(
+                              isActive(section)
+                                ? 'text-sky-500'
+                                : 'font-normal text-slate-500 hover:text-slate-700 dark:text-slate-400 dark:hover:text-slate-300',
+                            )}
+                          >
+                            {section.title}
+                          </Link>
+                        </h3>
+                        {section.children.length > 0 && (
+                          <ol
+                            role="list"
+                            className="mt-2 space-y-3 pl-5 text-slate-500 dark:text-slate-400"
+                          >
+                            {section.children.map((subSection) => (
+                              <li key={subSection.id}>
+                                <Link
+                                  href={`#${subSection.id}`}
+                                  className={
+                                    isActive(subSection)
+                                      ? 'text-sky-500'
+                                      : 'hover:text-slate-600 dark:hover:text-slate-300'
+                                  }
+                                >
+                                  {subSection.title}
+                                </Link>
+                              </li>
+                            ))}
+                          </ol>
+                        )}
+                      </li>
+                    ))}
+                  </ol>
+                </>
+              )}
+            </nav>
+          </div>
         </div>
-      </div>
+      </main>
 
       <SiteFooter navigation={footerNavigation} />
     </>
diff --git a/components/LayoutArchive.jsx b/components/LayoutArchive.jsx
index f42a876..e4d219e 100644
--- a/components/LayoutArchive.jsx
+++ b/components/LayoutArchive.jsx
@@ -54,38 +54,40 @@ export function LayoutArchive({ data, children, title }) {
   return (
     <>
       <SiteHeader navigation={primaryNavigation} />
-      <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
-        <div className="hidden lg:relative lg:block lg:flex-none">
-          <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
-          <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
-          <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
-          <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
-            <DocsSidebarNavigation
-              data={data}
-              navigation={docsSidebarNavigation}
-            />
+      <main className='content'>
+        <div className="relative mx-auto flex max-w-8xl justify-center sm:px-2 lg:px-8 xl:px-12">
+          <div className="hidden lg:relative lg:block lg:flex-none">
+            <div className="absolute inset-y-0 right-0 w-[50vw] bg-slate-50 dark:hidden" />
+            <div className="absolute bottom-0 right-0 top-16 hidden h-12 w-px bg-gradient-to-t from-slate-800 dark:block" />
+            <div className="absolute bottom-0 right-0 top-28 hidden w-px bg-slate-800 dark:block" />
+            <div className="sticky top-[4.5rem] -ml-0.5 h-[calc(100vh-4.5rem)] w-64 overflow-y-auto overflow-x-hidden py-16 pl-0.5 pr-8 xl:w-72 xl:pr-16">
+              <DocsSidebarNavigation
+                data={data}
+                navigation={docsSidebarNavigation}
+              />
+            </div>
+          </div>
+          <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
+            <article>
+              {(title || section) && (
+                <header className="mb-9 space-y-1">
+                  {section && (
+                    <p className="font-display text-sm font-medium text-sky-500">
+                      {section.title}
+                    </p>
+                  )}
+                  {title && (
+                    <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
+                      {title}
+                    </h1>
+                  )}
+                </header>
+              )}
+              <Prose>{children}</Prose>
+            </article>
           </div>
         </div>
-        <div className="min-w-0 max-w-2xl flex-auto px-4 py-16 lg:max-w-none lg:pl-8 lg:pr-0 xl:px-16">
-          <article>
-            {(title || section) && (
-              <header className="mb-9 space-y-1">
-                {section && (
-                  <p className="font-display text-sm font-medium text-sky-500">
-                    {section.title}
-                  </p>
-                )}
-                {title && (
-                  <h1 className="font-display text-3xl tracking-tight text-slate-900 dark:text-white">
-                    {title}
-                  </h1>
-                )}
-              </header>
-            )}
-            <Prose>{children}</Prose>
-          </article>
-        </div>
-      </div>
+      </main>
       <SiteFooter navigation={footerNavigation} />
     </>
   )
diff --git a/components/LayoutFrontPage.jsx b/components/LayoutFrontPage.jsx
index 5421b58..0bf1238 100644
--- a/components/LayoutFrontPage.jsx
+++ b/components/LayoutFrontPage.jsx
@@ -37,7 +37,9 @@ export function LayoutFrontPage({ data, children }) {
   return (
     <>
       <SiteHeader navigation={primaryNavigation} data={data} />
-      {children}
+      <main className='content'>
+        {children}
+      </main>
       <SiteFooter navigation={footerNavigation} />
     </>
   )
diff --git a/components/Search.jsx b/components/Search.jsx
index d23fbc2..dd88c95 100644
--- a/components/Search.jsx
+++ b/components/Search.jsx
@@ -1,296 +1,120 @@
-/* eslint-disable */
-import { useEffect, useId, useState, forwardRef, useRef, Fragment } from 'react'
-import { useRouter } from 'next/router'
-import { createAutocomplete } from '@algolia/autocomplete-core'
-import { Dialog } from '@headlessui/react'
+import { DocSearchModal } from "@docsearch/react";
 import clsx from 'clsx'
-import Highlighter from 'react-highlight-words'
+import Head from 'next/head'
+import Link from 'next/link'
+import { useRouter } from "next/router";
+import { createContext, useCallback, useContext, useEffect, useRef, useState } from "react";
+import { createPortal } from "react-dom";
 
-function SearchIcon(props) {
-  return (
-    <svg aria-hidden="true" viewBox="0 0 20 20" {...props}>
-      <path d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z" />
-    </svg>
-  )
-}
+import { SearchIcon } from '@/components/icons/SearchIcon';
+import '@docsearch/css/dist/style.css';
 
-function useAutocomplete() {
-  let id = useId()
-  let router = useRouter()
-  let [autocompleteState, setAutocompleteState] = useState({})
+const INDEX_NAME = 'wpgraphql';
+const API_KEY = '0c11d662dad18e8a18d20c969b25c65f';
+const APP_ID = 'HB50HVJDY8';
 
-  let [autocomplete] = useState(() =>
-    createAutocomplete({
-      id,
-      placeholder: 'Find something...',
-      defaultActiveItemId: 0,
-      onStateChange({ state }) {
-        setAutocompleteState(state)
-      },
-      shouldPanelOpen({ state }) {
-        return state.query !== ''
-      },
-      getSources({ query }) {
-        return import('@/markdoc/search.mjs').then(({ search }) => {
-          return [
-            {
-              sourceId: 'documentation',
-              getItems() {
-                return search(query, { limit: 5 })
-              },
-              getItemUrl({ item }) {
-                return item.url
-              },
-              onSelect({ itemUrl }) {
-                router.push(itemUrl)
-              },
-            },
-          ]
-        })
-      },
-    }),
-  )
+const SearchContext = createContext();
 
-  return { autocomplete, autocompleteState }
-}
+export function SearchProvider({ children }) {
+  const router = useRouter();
+  const [isOpen, setIsOpen] = useState(false)
+  const [initialQuery, setInitialQuery] = useState(null)
+  const [initialScrollY, setInitialScrollY] = useState(null);
 
-function LoadingIcon(props) {
-  let id = useId()
+  const onOpen = useCallback(() => {
+    setIsOpen(true);
+  }, [setIsOpen]);
 
-  return (
-    <svg viewBox="0 0 20 20" fill="none" aria-hidden="true" {...props}>
-      <circle cx="10" cy="10" r="5.5" strokeLinejoin="round" />
-      <path
-        stroke={`url(#${id})`}
-        strokeLinecap="round"
-        strokeLinejoin="round"
-        d="M15.5 10a5.5 5.5 0 1 0-5.5 5.5"
-      />
-      <defs>
-        <linearGradient
-          id={id}
-          x1="13"
-          x2="9.5"
-          y1="9"
-          y2="15"
-          gradientUnits="userSpaceOnUse"
-        >
-          <stop stopColor="currentColor" />
-          <stop offset="1" stopColor="currentColor" stopOpacity="0" />
-        </linearGradient>
-      </defs>
-    </svg>
-  )
-}
+  const onClose = useCallback(() => {
+    setIsOpen(false)
+  }, [setIsOpen])
 
-function HighlightQuery({ text, query }) {
-  return (
-    <Highlighter
-      highlightClassName="group-aria-selected:underline bg-transparent text-sky-600 dark:text-sky-400"
-      searchWords={[query]}
-      autoEscape={true}
-      textToHighlight={text}
-    />
-  )
-}
-
-function SearchResult({ result, autocomplete, collection, query }) {
-  // let id = useId()
-
-  // let sectionTitle = navigation?.find((section) =>
-  //   section.links.find((link) => link.href === result.url.split('#')[0]),
-  // )?.title
-  // let hierarchy = [sectionTitle, result.pageTitle].filter(Boolean)
+  const onInput = useCallback((e) => {
+    setIsOpen(true)
+    setInitialQuery(e.key)
+  }, [setIsOpen, setInitialQuery])
 
-  return <>test</>
-}
+  useEffect(() => {
+    if (typeof window !== 'undefined') {
+      setInitialScrollY(window.scrollY);
+    }
+  }, []);
 
-function SearchResults({ autocomplete, query, collection }) {
-  if (collection.items.length === 0) {
-    return (
-      <p className="px-4 py-8 text-center text-sm text-slate-700 dark:text-slate-400">
-        No results for &ldquo;
-        <span className="break-words text-slate-900 dark:text-white">
-          {query}
-        </span>
-        &rdquo;
-      </p>
-    )
-  }
+  useDocSearchKeyboardEvents({
+    isOpen,
+    onOpen,
+    onClose
+  })
 
   return (
-    <ul role="list" {...autocomplete.getListProps()}>
-      {collection.items.map((result) => (
-        <SearchResult
-          key={result.url}
-          result={result}
-          autocomplete={autocomplete}
-          collection={collection}
-          query={query}
-        />
-      ))}
-    </ul>
+    <>
+      <Head>
+        <link rel="preconnect" href={`https://${APP_ID}-dsn.algolia.net`} crossOrigin="true" />
+      </Head>
+      <SearchContext.Provider value={{ isOpen, onOpen, onClose, onInput }}>
+        {children}
+      </SearchContext.Provider>
+      {isOpen && createPortal(
+        <DocSearchModal
+          initialQuery={initialQuery}
+          initialScrollY={initialScrollY}
+          searchParameters={{
+            distinct: 1
+          }}
+          onClose={onClose}
+          indexName={INDEX_NAME}
+          apiKey={API_KEY}
+          appId={APP_ID}
+          placeholder="Search..."
+          navigator={{
+            navigate({ itemUrl }) {
+              setIsOpen(false);
+              router.push(itemUrl);
+            },
+          }}
+          hitComponent={Hit}
+        />, document.body
+      )}
+    </>
   )
 }
 
-const SearchInput = forwardRef(function SearchInput(
-  { autocomplete, autocompleteState, onClose },
-  inputRef,
-) {
-  let inputProps = autocomplete.getInputProps({})
-
+function Hit({ hit, children }) {
   return (
-    <div className="group relative flex h-12">
-      <SearchIcon className="pointer-events-none absolute left-4 top-0 h-full w-5 fill-slate-400 dark:fill-slate-500" />
-      <input
-        ref={inputRef}
-        className={clsx(
-          'flex-auto appearance-none bg-transparent pl-12 text-slate-900 outline-none placeholder:text-slate-400 focus:w-full focus:flex-none dark:text-white sm:text-sm [&::-webkit-search-cancel-button]:hidden [&::-webkit-search-decoration]:hidden [&::-webkit-search-results-button]:hidden [&::-webkit-search-results-decoration]:hidden',
-          autocompleteState.status === 'stalled' ? 'pr-11' : 'pr-4',
-        )}
-        {...inputProps}
-        onKeyDown={(event) => {
-          if (
-            event.key === 'Escape' &&
-            !autocompleteState.isOpen &&
-            autocompleteState.query === ''
-          ) {
-            // In Safari, closing the dialog with the escape key can sometimes cause the scroll position to jump to the
-            // bottom of the page. This is a workaround for that until we can figure out a proper fix in Headless UI.
-            document.activeElement?.blur()
-
-            onClose()
-          } else {
-            inputProps.onKeyDown(event)
-          }
-        }}
-      />
-      {autocompleteState.status === 'stalled' && (
-        <div className="absolute inset-y-0 right-3 flex items-center">
-          <LoadingIcon className="h-6 w-6 animate-spin stroke-slate-200 text-slate-400 dark:stroke-slate-700 dark:text-slate-500" />
-        </div>
-      )}
-    </div>
+    <Link href={hit.url} legacyBehavior>
+      <a
+        className={clsx({
+          'DocSearch-Hit--Result': hit.__is_result?.(),
+          'DocSearch-Hit--Parent': hit.__is_parent?.(),
+          'DocSearch-Hit--FirstChild': hit.__is_first?.(),
+          'DocSearch-Hit--LastChild': hit.__is_last?.(),
+          'DocSearch-Hit--Child': hit.__is_child?.(),
+        })}
+      >
+        {children}
+      </a>
+    </Link>
   )
-})
-
-function SearchDialog({ open, setOpen, className }) {
-  let router = useRouter()
-  let formRef = useRef()
-  let panelRef = useRef()
-  let inputRef = useRef()
-  let { autocomplete, autocompleteState } = useAutocomplete()
-
-  useEffect(() => {
-    if (!open) {
-      return
-    }
-
-    function onRouteChange() {
-      setOpen(false)
-    }
-
-    router.events.on('routeChangeStart', onRouteChange)
-    router.events.on('hashChangeStart', onRouteChange)
+}
 
-    return () => {
-      router.events.off('routeChangeStart', onRouteChange)
-      router.events.off('hashChangeStart', onRouteChange)
-    }
-  }, [open, setOpen, router])
+export function Search({ ...props }) {
+  let [modifierKey, setModifierKey] = useState()
+  let searchButtonRef = useRef()
+  let { onOpen, onInput } = useContext(SearchContext)
 
   useEffect(() => {
-    if (open) {
-      return
-    }
-
     function onKeyDown(event) {
-      if (event.key === 'k' && (event.metaKey || event.ctrlKey)) {
-        event.preventDefault()
-        setOpen(true)
+      if (searchButtonRef && searchButtonRef.current === document.activeElement && onInput) {
+        if (/[a-zA-Z0-9]/.test(String.fromCharCode(event.keyCode))) {
+          onInput(event)
+        }
       }
     }
-
     window.addEventListener('keydown', onKeyDown)
-
     return () => {
       window.removeEventListener('keydown', onKeyDown)
     }
-  }, [open, setOpen])
-
-  return (
-    <Dialog
-      open={open}
-      onClose={() => {
-        setOpen(false)
-        autocomplete.setQuery('')
-      }}
-      className={clsx('fixed inset-0 z-50', className)}
-    >
-      <div className="fixed inset-0 bg-slate-900/50 backdrop-blur" />
-
-      <div className="fixed inset-0 overflow-y-auto px-4 py-4 sm:px-6 sm:py-20 md:py-32 lg:px-8 lg:py-[15vh]">
-        <Dialog.Panel className="mx-auto overflow-hidden rounded-xl bg-white shadow-xl dark:bg-slate-800 dark:ring-1 dark:ring-slate-700 sm:max-w-xl">
-          <div {...autocomplete.getRootProps({})}>
-            <form
-              ref={formRef}
-              {...autocomplete.getFormProps({
-                inputElement: inputRef.current,
-              })}
-            >
-              <SearchInput
-                ref={inputRef}
-                autocomplete={autocomplete}
-                autocompleteState={autocompleteState}
-                onClose={() => setOpen(false)}
-              />
-              <div
-                ref={panelRef}
-                className="border-t border-slate-200 bg-white px-2 py-3 empty:hidden dark:border-slate-400/10 dark:bg-slate-800"
-                {...autocomplete.getPanelProps({})}
-              >
-                {autocompleteState.isOpen && (
-                  <SearchResults
-                    autocomplete={autocomplete}
-                    query={autocompleteState.query}
-                    collection={autocompleteState.collections[0]}
-                  />
-                )}
-              </div>
-            </form>
-          </div>
-        </Dialog.Panel>
-      </div>
-    </Dialog>
-  )
-}
-
-function useSearchProps() {
-  let buttonRef = useRef()
-  let [open, setOpen] = useState(false)
-
-  return {
-    buttonProps: {
-      ref: buttonRef,
-      onClick() {
-        setOpen(true)
-      },
-    },
-    dialogProps: {
-      open,
-      setOpen(open) {
-        let { width, height } = buttonRef.current.getBoundingClientRect()
-        if (!open || (width !== 0 && height !== 0)) {
-          setOpen(open)
-        }
-      },
-    },
-  }
-}
-
-export function Search() {
-  let [modifierKey, setModifierKey] = useState()
-  let { buttonProps, dialogProps } = useSearchProps()
+  }, [onInput, searchButtonRef])
 
   useEffect(() => {
     setModifierKey(
@@ -299,13 +123,14 @@ export function Search() {
   }, [])
 
   return (
-    <>
-      <button
-        type="button"
-        className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
-        {...buttonProps}
-      >
-        <SearchIcon className="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400" />
+    <button
+      className="group flex h-6 w-6 items-center justify-center sm:justify-start md:h-auto md:w-80 md:flex-none md:rounded-lg md:py-2.5 md:pl-4 md:pr-3.5 md:text-sm md:ring-1 md:ring-slate-200 md:hover:ring-slate-300 dark:md:bg-slate-800/75 dark:md:ring-inset dark:md:ring-white/5 dark:md:hover:bg-slate-700/40 dark:md:hover:ring-slate-500 lg:w-96"
+      type="button"
+      ref={searchButtonRef}
+      onClick={onOpen}
+      {...props}
+    >
+      <SearchIcon className="h-5 w-5 flex-none fill-slate-400 group-hover:fill-slate-500 dark:fill-slate-500 md:group-hover:fill-slate-400" />
         <span className="sr-only md:not-sr-only md:ml-2 md:text-slate-500 md:dark:text-slate-400">
           Search docs
         </span>
@@ -315,8 +140,50 @@ export function Search() {
             <kbd className="font-sans">K</kbd>
           </kbd>
         )}
-      </button>
-      <SearchDialog {...dialogProps} />
-    </>
+    </button>
+  )
+}
+
+function useDocSearchKeyboardEvents({ isOpen, onOpen, onClose }) {
+  useEffect(() => {
+    function onKeyDown(event) {
+      function open() {
+        // We check that no other DocSearch modal is showing before opening
+        // another one.
+        if (!document.body.classList.contains('DocSearch--active')) {
+          onOpen()
+        }
+      }
+
+      if (
+        (event.keyCode === 27 && isOpen) ||
+        (event.key === 'k' && (event.metaKey || event.ctrlKey)) ||
+        (!isEditingContent(event) && event.key === '/' && !isOpen)
+      ) {
+        event.preventDefault()
+
+        if (isOpen) {
+          onClose()
+        } else if (!document.body.classList.contains('DocSearch--active')) {
+          open()
+        }
+      }
+    }
+
+    window.addEventListener('keydown', onKeyDown)
+    return () => {
+      window.removeEventListener('keydown', onKeyDown)
+    }
+  }, [isOpen, onOpen, onClose])
+}
+
+function isEditingContent(event) {
+  let element = event.target
+  let tagName = element.tagName
+  return (
+    element.isContentEditable ||
+    tagName === 'INPUT' ||
+    tagName === 'SELECT' ||
+    tagName === 'TEXTAREA'
   )
 }
diff --git a/components/SiteFooter.jsx b/components/SiteFooter.jsx
index 4ceea01..2d8b25c 100644
--- a/components/SiteFooter.jsx
+++ b/components/SiteFooter.jsx
@@ -9,7 +9,7 @@ export function SiteFooter({ navigation }) {
           <p className="text-center text-sm leading-loose text-muted-foreground md:text-left">
             &copy; 2023 WPGraphQL. All rights reserved. | Development sponsored by <a href="https://www.wpengine.com/atlas" target="_blank" rel="noreferrer" className="font-medium underline underline-offset-4">WP Engine</a>
           </p>
-          <div className="text-muted-foreground flex flex-row gap-4">
+          <div className="flex flex-row gap-4 text-muted-foreground">
             <FooterNavigation navigation={navigation} />
           </div>
         </div>
diff --git a/components/SiteHeader.jsx b/components/SiteHeader.jsx
index 82a33f1..a69ac51 100644
--- a/components/SiteHeader.jsx
+++ b/components/SiteHeader.jsx
@@ -36,16 +36,18 @@ export function SiteHeader({ navigation }) {
       <div className="mr-6 flex lg:hidden">
         <MobileNavigation navigation={navigation} />
       </div>
-      <div className="relative flex flex-grow basis-0 items-center gap-4">
-        <Link href="/" aria-label="Home page">
-          <Logo className="h-5 lg:h-9 w-auto bg-slate-900/95 p-1 rounded-md fill-slate-700 dark:fill-sky-100 lg:block" />
+      <div className="relative flex grow basis-0 items-center gap-4">
+        <Link href="/" aria-label="Home page" className='shrink-0'>
+          <Logo className="h-5 w-auto rounded-md bg-slate-900/95 fill-slate-700 p-1 dark:fill-sky-100 md:block lg:block lg:h-9" />
         </Link>
-        <PrimaryNavigation navigation={navigation} />
+        <div className="hidden lg:block">
+          <PrimaryNavigation navigation={navigation} />
+        </div>
       </div>
       <div className="-my-5 mr-6 sm:mr-8 md:mr-0">
         <Search />
       </div>
-      <div className="relative flex basis-0 justify-end gap-4 sm:gap-8 md:flex-grow">
+      <div className="relative flex basis-0 justify-end gap-4 sm:gap-8 md:grow">
         <ThemeSelector className="relative z-10" />
         <Link
           href="https://github.com/wp-graphql/wpgraphql-acf"
diff --git a/components/icons/SearchIcon.jsx b/components/icons/SearchIcon.jsx
new file mode 100644
index 0000000..ddf21bb
--- /dev/null
+++ b/components/icons/SearchIcon.jsx
@@ -0,0 +1,7 @@
+export function SearchIcon(props) {
+  return (
+    <svg aria-hidden="true" viewBox="0 0 20 20" {...props}>
+      <path d="M16.293 17.707a1 1 0 0 0 1.414-1.414l-1.414 1.414ZM9 14a5 5 0 0 1-5-5H2a7 7 0 0 0 7 7v-2ZM4 9a5 5 0 0 1 5-5V2a7 7 0 0 0-7 7h2Zm5-5a5 5 0 0 1 5 5h2a7 7 0 0 0-7-7v2Zm8.707 12.293-3.757-3.757-1.414 1.414 3.757 3.757 1.414-1.414ZM14 9a4.98 4.98 0 0 1-1.464 3.536l1.414 1.414A6.98 6.98 0 0 0 16 9h-2Zm-1.464 3.536A4.98 4.98 0 0 1 9 14v2a6.98 6.98 0 0 0 4.95-2.05l-1.414-1.414Z" />
+    </svg>
+  )
+}
diff --git a/components/ui/badge.tsx b/components/ui/badge.tsx
index 37687c1..0fe3291 100644
--- a/components/ui/badge.tsx
+++ b/components/ui/badge.tsx
@@ -4,16 +4,16 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const badgeVariants = cva(
-  'inline-flex items-center border rounded-full px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
+  'inline-flex items-center rounded-full border px-2.5 py-0.5 text-xs font-semibold transition-colors focus:outline-none focus:ring-2 focus:ring-ring focus:ring-offset-2',
   {
     variants: {
       variant: {
         default:
-          'bg-primary hover:bg-primary/80 border-transparent text-primary-foreground',
+          'border-transparent bg-primary text-primary-foreground hover:bg-primary/80',
         secondary:
-          'bg-secondary hover:bg-secondary/80 border-transparent text-secondary-foreground',
+          'border-transparent bg-secondary text-secondary-foreground hover:bg-secondary/80',
         destructive:
-          'bg-destructive hover:bg-destructive/80 border-transparent text-destructive-foreground',
+          'border-transparent bg-destructive text-destructive-foreground hover:bg-destructive/80',
         outline: 'text-foreground',
       },
     },
diff --git a/components/ui/button.tsx b/components/ui/button.tsx
index 7cb6e2d..d69fe22 100644
--- a/components/ui/button.tsx
+++ b/components/ui/button.tsx
@@ -5,7 +5,7 @@ import * as React from 'react'
 import { cn } from '@/lib/utils'
 
 const buttonVariants = cva(
-  'inline-flex items-center justify-center rounded-md text-sm font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:opacity-50 disabled:pointer-events-none ring-offset-background',
+  'inline-flex items-center justify-center rounded-md text-sm font-medium ring-offset-background transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50',
   {
     variants: {
       variant: {
@@ -17,12 +17,12 @@ const buttonVariants = cva(
         secondary:
           'bg-secondary text-secondary-foreground hover:bg-secondary/80',
         ghost: 'hover:bg-accent hover:text-accent-foreground',
-        link: 'underline-offset-4 hover:underline text-primary',
+        link: 'text-primary underline-offset-4 hover:underline',
       },
       size: {
-        default: 'h-10 py-2 px-4',
-        sm: 'h-9 px-3 rounded-md',
-        lg: 'h-11 px-8 rounded-md',
+        default: 'h-10 px-4 py-2',
+        sm: 'h-9 rounded-md px-3',
+        lg: 'h-11 rounded-md px-8',
       },
     },
     defaultVariants: {
diff --git a/package-lock.json b/package-lock.json
index 71dbd4d..4174ccc 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,8 @@
       "dependencies": {
         "@algolia/autocomplete-core": "^1.9.2",
         "@apollo/client": "^3.7.7",
+        "@docsearch/css": "^3.5.2",
+        "@docsearch/react": "^3.5.2",
         "@faustwp/blocks": "^2.0.0",
         "@faustwp/cli": "^1.1.4",
         "@faustwp/core": "^1.1.2",
@@ -76,6 +78,7 @@
         "eslint-plugin-prettier": "^5.0.1",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
+        "eslint-plugin-tailwindcss": "^3.13.0",
         "jest": "^29.7.0",
         "prettier": "^3.0.3",
         "prettier-plugin-tailwindcss": "^0.5.5"
@@ -110,6 +113,27 @@
         "search-insights": ">= 1 < 3"
       }
     },
+    "node_modules/@algolia/autocomplete-preset-algolia": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-preset-algolia/-/autocomplete-preset-algolia-1.9.3.tgz",
+      "integrity": "sha512-d4qlt6YmrLMYy95n5TB52wtNDr6EgAIPH81dvvvW8UmuWRgxEtY0NJiPwl/h95JtG2vmRM804M0DSwMCNZlzRA==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
+    "node_modules/@algolia/autocomplete-preset-algolia/node_modules/@algolia/autocomplete-shared": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
     "node_modules/@algolia/autocomplete-shared": {
       "version": "1.11.1",
       "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.11.1.tgz",
@@ -2325,6 +2349,71 @@
       "integrity": "sha512-0hYQ8SB4Db5zvZB4axdMHGwEaQjkZzFjQiN9LVYvIFB2nSUHW9tYpxWriPrWDASIxiaXax83REcLxuSdnGPZtw==",
       "dev": true
     },
+    "node_modules/@docsearch/css": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/css/-/css-3.5.2.tgz",
+      "integrity": "sha512-SPiDHaWKQZpwR2siD0KQUwlStvIAnEyK6tAE2h2Wuoq8ue9skzhlyVQ1ddzOxX6khULnAALDiR/isSF3bnuciA=="
+    },
+    "node_modules/@docsearch/react": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/@docsearch/react/-/react-3.5.2.tgz",
+      "integrity": "sha512-9Ahcrs5z2jq/DcAvYtvlqEBHImbm4YJI8M9y0x6Tqg598P40HTEkX7hsMcIuThI+hTFxRGZ9hll0Wygm2yEjng==",
+      "dependencies": {
+        "@algolia/autocomplete-core": "1.9.3",
+        "@algolia/autocomplete-preset-algolia": "1.9.3",
+        "@docsearch/css": "3.5.2",
+        "algoliasearch": "^4.19.1"
+      },
+      "peerDependencies": {
+        "@types/react": ">= 16.8.0 < 19.0.0",
+        "react": ">= 16.8.0 < 19.0.0",
+        "react-dom": ">= 16.8.0 < 19.0.0",
+        "search-insights": ">= 1 < 3"
+      },
+      "peerDependenciesMeta": {
+        "@types/react": {
+          "optional": true
+        },
+        "react": {
+          "optional": true
+        },
+        "react-dom": {
+          "optional": true
+        },
+        "search-insights": {
+          "optional": true
+        }
+      }
+    },
+    "node_modules/@docsearch/react/node_modules/@algolia/autocomplete-core": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-core/-/autocomplete-core-1.9.3.tgz",
+      "integrity": "sha512-009HdfugtGCdC4JdXUbVJClA0q0zh24yyePn+KUGk3rP7j8FEe/m5Yo/z65gn6nP/cM39PxpzqKrL7A6fP6PPw==",
+      "dependencies": {
+        "@algolia/autocomplete-plugin-algolia-insights": "1.9.3",
+        "@algolia/autocomplete-shared": "1.9.3"
+      }
+    },
+    "node_modules/@docsearch/react/node_modules/@algolia/autocomplete-plugin-algolia-insights": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-plugin-algolia-insights/-/autocomplete-plugin-algolia-insights-1.9.3.tgz",
+      "integrity": "sha512-a/yTUkcO/Vyy+JffmAnTWbr4/90cLzw+CC3bRbhnULr/EM0fGNvM13oQQ14f2moLMcVDyAx/leczLlAOovhSZg==",
+      "dependencies": {
+        "@algolia/autocomplete-shared": "1.9.3"
+      },
+      "peerDependencies": {
+        "search-insights": ">= 1 < 3"
+      }
+    },
+    "node_modules/@docsearch/react/node_modules/@algolia/autocomplete-shared": {
+      "version": "1.9.3",
+      "resolved": "https://registry.npmjs.org/@algolia/autocomplete-shared/-/autocomplete-shared-1.9.3.tgz",
+      "integrity": "sha512-Wnm9E4Ye6Rl6sTTqjoymD+l8DjSTHsHboVRYrKgEt8Q7UHm9nYbqhN/i0fhUYA3OAEH7WA8x3jfpnmJm3rKvaQ==",
+      "peerDependencies": {
+        "@algolia/client-search": ">= 4.9.1 < 6",
+        "algoliasearch": ">= 4.9.1 < 6"
+      }
+    },
     "node_modules/@emotion/is-prop-valid": {
       "version": "0.8.8",
       "resolved": "https://registry.npmjs.org/@emotion/is-prop-valid/-/is-prop-valid-0.8.8.tgz",
@@ -6706,6 +6795,22 @@
         "semver": "bin/semver.js"
       }
     },
+    "node_modules/eslint-plugin-tailwindcss": {
+      "version": "3.13.0",
+      "resolved": "https://registry.npmjs.org/eslint-plugin-tailwindcss/-/eslint-plugin-tailwindcss-3.13.0.tgz",
+      "integrity": "sha512-Fcep4KDRLWaK3KmkQbdyKHG0P4GdXFmXdDaweTIPcgOP60OOuWFbh1++dufRT28Q4zpKTKaHwTsXPJ4O/EjU2Q==",
+      "dev": true,
+      "dependencies": {
+        "fast-glob": "^3.2.5",
+        "postcss": "^8.4.4"
+      },
+      "engines": {
+        "node": ">=12.13.0"
+      },
+      "peerDependencies": {
+        "tailwindcss": "^3.3.2"
+      }
+    },
     "node_modules/eslint-scope": {
       "version": "7.2.2",
       "resolved": "https://registry.npmjs.org/eslint-scope/-/eslint-scope-7.2.2.tgz",
diff --git a/package.json b/package.json
index a803c6b..ff4b765 100644
--- a/package.json
+++ b/package.json
@@ -14,6 +14,8 @@
   "dependencies": {
     "@algolia/autocomplete-core": "^1.9.2",
     "@apollo/client": "^3.7.7",
+    "@docsearch/css": "^3.5.2",
+    "@docsearch/react": "^3.5.2",
     "@faustwp/blocks": "^2.0.0",
     "@faustwp/cli": "^1.1.4",
     "@faustwp/core": "^1.1.2",
@@ -82,6 +84,7 @@
     "eslint-plugin-prettier": "^5.0.1",
     "eslint-plugin-react": "^7.33.2",
     "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-tailwindcss": "^3.13.0",
     "jest": "^29.7.0",
     "prettier": "^3.0.3",
     "prettier-plugin-tailwindcss": "^0.5.5"
diff --git a/pages/_app.js b/pages/_app.js
index ab3b4e8..db9453d 100644
--- a/pages/_app.js
+++ b/pages/_app.js
@@ -8,24 +8,27 @@ import React from 'react'
 import 'focus-visible'
 import '@/styles/tailwind.css'
 // import '../globalStylesheet.css'
+import { SearchProvider } from '@/components/Search'
 import blocks from '@/wp-blocks'
 
 export default function MyApp({ Component, pageProps }) {
   const router = useRouter()
 
   return (
-    <FaustProvider pageProps={pageProps}>
-      <WordPressBlocksProvider config={{ blocks, theme: null }}>
-        <Head>
-          {router.pathname === '/' ? (
-            <title>WPGraphQL</title>
-          ) : (
-            <title>{`${pageProps?.title} - WPGraphQL`}</title>
-          )}
-          <meta name="description" content={pageProps?.description} />
-        </Head>
-        <Component {...pageProps} key={router.asPath} />
-      </WordPressBlocksProvider>
-    </FaustProvider>
+    <SearchProvider>
+      <FaustProvider pageProps={pageProps}>
+        <WordPressBlocksProvider config={{ blocks, theme: null }}>
+          <Head>
+            {router.pathname === '/' ? (
+              <title>WPGraphQL</title>
+            ) : (
+              <title>{`${pageProps?.title} - WPGraphQL`}</title>
+            )}
+            <meta name="description" content={pageProps?.description} />
+          </Head>
+          <Component {...pageProps} key={router.asPath} />
+        </WordPressBlocksProvider>
+      </FaustProvider>
+    </SearchProvider>
   )
 }