diff --git a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
index c9ea67c9..d459ac6b 100644
--- a/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
+++ b/app/(app)/alpha/new/[[...postIdArr]]/_client.tsx
@@ -2,7 +2,12 @@
 import { redirect, useParams } from "next/navigation";
 import React, { useEffect, Fragment } from "react";
 import { Controller } from "react-hook-form";
-import { Disclosure, Transition } from "@headlessui/react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Transition,
+} from "@headlessui/react";
 import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import Editor from "@/components/editor/editor";
 import RenderPost from "@/components/editor/editor/RenderPost";
@@ -57,7 +62,7 @@ const Create = () => {
         Preview
       </button>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <Transition.Root show={open} as={Fragment}>
+        <Transition show={open} as={Fragment}>
           <div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full bg-black">
             <button
               type="button"
@@ -137,15 +142,15 @@ const Create = () => {
                     <Disclosure>
                       {({ open }) => (
                         <>
-                          <Disclosure.Button className="flex w-full justify-between py-2 text-left text-sm font-medium text-white focus:outline-none focus-visible:ring focus-visible:ring-pink-300 focus-visible:ring-opacity-75">
+                          <DisclosureButton className="flex w-full justify-between py-2 text-left text-sm font-medium text-white focus:outline-none focus-visible:ring focus-visible:ring-pink-300 focus-visible:ring-opacity-75">
                             <span>View advanced settings</span>
                             <ChevronUpIcon
                               className={`${
                                 open ? "rotate-180 transform" : ""
                               } h-5 w-5 text-neutral-400`}
                             />
-                          </Disclosure.Button>
-                          <Disclosure.Panel className="pb-2 pt-4">
+                          </DisclosureButton>
+                          <DisclosurePanel className="pb-2 pt-4">
                             <label htmlFor="canonicalUrl">Canonical URL</label>
                             <input
                               id="canonicalUrl"
@@ -159,7 +164,7 @@ const Create = () => {
                               elsewhere and you want to link to it as the
                               original source.
                             </p>
-                          </Disclosure.Panel>
+                          </DisclosurePanel>
                         </>
                       )}
                     </Disclosure>
@@ -201,7 +206,7 @@ const Create = () => {
               </div>
             </div>
           </div>
-        </Transition.Root>
+        </Transition>
         {dataStatus === "loading" && postId && (
           <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
             <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
diff --git a/app/(app)/alpha/settings/_client.tsx b/app/(app)/alpha/settings/_client.tsx
index 1bce13f8..4b08de9c 100644
--- a/app/(app)/alpha/settings/_client.tsx
+++ b/app/(app)/alpha/settings/_client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Switch } from "@headlessui/react";
+import { Description, Field, Label, Switch } from "@headlessui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -357,17 +357,17 @@ const Settings = ({ profile }: { profile: User }) => {
                       aria-labelledby="privacy-heading"
                       className="mt-2 divide-y divide-neutral-200"
                     >
-                      <Switch.Group
+                      <Field
                         as="li"
                         className="flex items-center justify-between py-4"
                       >
                         <div className="flex flex-col items-center">
-                          <Switch.Label as="p" className="sr-only" passive>
+                          <Label as="p" className="sr-only" passive>
                             Email notifications
-                          </Switch.Label>
-                          <Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                          </Label>
+                          <Description className="text-sm text-neutral-600 dark:text-neutral-400">
                             Occasional email notifications from the platform.
-                          </Switch.Description>
+                          </Description>
                         </div>
                         <Switch
                           checked={emailNotifications}
@@ -389,18 +389,18 @@ const Settings = ({ profile }: { profile: User }) => {
                             )}
                           />
                         </Switch>
-                      </Switch.Group>
-                      <Switch.Group
+                      </Field>
+                      <Field
                         as="li"
                         className="mt-2 flex items-center justify-between py-4"
                       >
                         <div className="flex flex-col">
-                          <Switch.Label as="p" className="sr-only" passive>
+                          <Label as="p" className="sr-only" passive>
                             Weekly newsletter
-                          </Switch.Label>
-                          <Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                          </Label>
+                          <Description className="text-sm text-neutral-600 dark:text-neutral-400">
                             Opt-in to our weekly newsletter.
-                          </Switch.Description>
+                          </Description>
                         </div>
                         <Switch
                           checked={weeklyNewsletter}
@@ -422,7 +422,7 @@ const Settings = ({ profile }: { profile: User }) => {
                             )}
                           />
                         </Switch>
-                      </Switch.Group>
+                      </Field>
                     </ul>
                   </div>
                   <div className="mt-2 flex justify-end py-4">
diff --git a/app/(app)/create/[[...paramsArr]]/_client.tsx b/app/(app)/create/[[...paramsArr]]/_client.tsx
index e529b128..85e9d96e 100644
--- a/app/(app)/create/[[...paramsArr]]/_client.tsx
+++ b/app/(app)/create/[[...paramsArr]]/_client.tsx
@@ -5,7 +5,12 @@ import React, { useState, useEffect, Fragment, useRef } from "react";
 import { useForm } from "react-hook-form";
 import CustomTextareaAutosize from "@/components/CustomTextareAutosize/CustomTextareaAutosize";
 import { toast } from "sonner";
-import { Disclosure, Transition } from "@headlessui/react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Transition,
+} from "@headlessui/react";
 import { ChevronUpIcon } from "@heroicons/react/20/solid";
 import type { SavePostInput } from "@/schema/post";
 import { ConfirmPostSchema } from "@/schema/post";
@@ -363,7 +368,7 @@ const Create = ({ session }: { session: Session }) => {
   return (
     <>
       <form onSubmit={handleSubmit(onSubmit)}>
-        <Transition.Root show={open} as={Fragment}>
+        <Transition show={open} as={Fragment}>
           <div className="fixed bottom-0 left-0 top-0 z-50 h-screen w-full overflow-y-scroll bg-white dark:bg-black">
             <div className="m-2 max-w-full">
               <button
@@ -484,15 +489,15 @@ const Create = ({ session }: { session: Session }) => {
                       <Disclosure>
                         {({ open }) => (
                           <>
-                            <Disclosure.Button className="flex w-full justify-between py-2 text-left text-sm font-medium text-neutral-800 focus:outline-none focus-visible:ring focus-visible:ring-pink-500 focus-visible:ring-opacity-75 dark:text-white">
+                            <DisclosureButton className="flex w-full justify-between py-2 text-left text-sm font-medium text-neutral-800 focus:outline-none focus-visible:ring focus-visible:ring-pink-500 focus-visible:ring-opacity-75 dark:text-white">
                               <span>More Options</span>
                               <ChevronUpIcon
                                 className={`${
                                   open ? "" : "rotate-180 transform"
                                 } h-5 w-5 text-neutral-400`}
                               />
-                            </Disclosure.Button>
-                            <Disclosure.Panel className="pb-2 pt-4">
+                            </DisclosureButton>
+                            <DisclosurePanel className="pb-2 pt-4">
                               <label htmlFor="canonicalUrl">
                                 Canonical URL
                               </label>
@@ -529,7 +534,7 @@ const Create = ({ session }: { session: Session }) => {
                                 Share this link with others to preview your
                                 draft. Anyone with the link can view your draft.
                               </p>
-                            </Disclosure.Panel>
+                            </DisclosurePanel>
                           </>
                         )}
                       </Disclosure>
@@ -581,7 +586,7 @@ const Create = ({ session }: { session: Session }) => {
               </div>
             </div>
           </div>
-        </Transition.Root>
+        </Transition>
         {dataStatus === "loading" && postId && (
           <div className="bg-gray fixed left-0 top-0 z-40 flex h-screen w-screen items-center justify-center ">
             <div className="z-50 flex flex-col items-center border-2 border-black bg-white px-5 py-2 opacity-100">
diff --git a/app/(app)/my-posts/_client.tsx b/app/(app)/my-posts/_client.tsx
index 91e1b3f7..49389e0d 100644
--- a/app/(app)/my-posts/_client.tsx
+++ b/app/(app)/my-posts/_client.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import { useState, Fragment } from "react";
-import { Transition, Menu } from "@headlessui/react";
+import {
+  Transition,
+  Menu,
+  MenuButton,
+  MenuItems,
+  MenuItem,
+} from "@headlessui/react";
 import Link from "next/link";
 import {
   ChevronDownIcon,
@@ -167,13 +173,13 @@ const MyPosts = () => {
                         className="relative inline-block text-left"
                       >
                         <div>
-                          <Menu.Button className="dropdown-button">
+                          <MenuButton className="dropdown-button">
                             Options
                             <ChevronDownIcon
                               className="-mr-1 ml-2 h-5 w-5"
                               aria-hidden="true"
                             />
-                          </Menu.Button>
+                          </MenuButton>
                         </div>
 
                         <Transition
@@ -185,51 +191,35 @@ const MyPosts = () => {
                           leaveFrom="transform opacity-100 scale-100"
                           leaveTo="transform opacity-0 scale-95"
                         >
-                          <Menu.Items className="absolute right-0 mt-2 w-40 origin-top-right divide-y divide-neutral-100 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                          <MenuItems className="absolute right-0 mt-2 w-40 origin-top-right divide-y divide-neutral-100 bg-white shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                             <div className="dropdown-bg py-1">
-                              <Menu.Item>
-                                {({ active }) => (
-                                  <Link
-                                    className={classNames(
-                                      active
-                                        ? "bg-neutral-100 text-black"
-                                        : "text-neutral-700",
-                                      "dropdown-item group flex items-center px-4 py-2 text-sm",
-                                    )}
-                                    href={`/create/${id}`}
-                                  >
-                                    <PencilIcon
-                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
-                                      aria-hidden="true"
-                                    />
-                                    Edit
-                                  </Link>
-                                )}
-                              </Menu.Item>
-
-                              <Menu.Item>
-                                {({ active }) => (
-                                  <button
-                                    onClick={() =>
-                                      setSelectedArticleToDelete(id)
-                                    }
-                                    className={classNames(
-                                      active
-                                        ? "bg-neutral-100 text-black"
-                                        : "text-neutral-700",
-                                      "dropdown-item group flex w-full items-center px-4 py-2 text-sm",
-                                    )}
-                                  >
-                                    <TrashIcon
-                                      className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
-                                      aria-hidden="true"
-                                    />
-                                    Delete
-                                  </button>
-                                )}
-                              </Menu.Item>
+                              <MenuItem>
+                                <Link
+                                  className="dropdown-item group flex items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-black"
+                                  href={`/create/${id}`}
+                                >
+                                  <PencilIcon
+                                    className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
+                                    aria-hidden="true"
+                                  />
+                                  Edit
+                                </Link>
+                              </MenuItem>
+
+                              <MenuItem>
+                                <button
+                                  onClick={() => setSelectedArticleToDelete(id)}
+                                  className="dropdown-item group flex w-full items-center px-4 py-2 text-sm text-neutral-700 data-[focus]:bg-neutral-100 data-[focus]:text-black"
+                                >
+                                  <TrashIcon
+                                    className="mr-3 h-5 w-5 text-neutral-400 group-hover:text-neutral-500"
+                                    aria-hidden="true"
+                                  />
+                                  Delete
+                                </button>
+                              </MenuItem>
                             </div>
-                          </Menu.Items>
+                          </MenuItems>
                         </Transition>
                       </Menu>
                     </div>
diff --git a/app/(app)/settings/_client.tsx b/app/(app)/settings/_client.tsx
index c2ff6542..833b70d2 100644
--- a/app/(app)/settings/_client.tsx
+++ b/app/(app)/settings/_client.tsx
@@ -1,7 +1,7 @@
 "use client";
 
 import { useEffect, useState } from "react";
-import { Switch } from "@headlessui/react";
+import { Description, Field, Label, Switch } from "@headlessui/react";
 import { zodResolver } from "@hookform/resolvers/zod";
 import type { SubmitHandler } from "react-hook-form";
 import { useForm } from "react-hook-form";
@@ -357,17 +357,17 @@ const Settings = ({ profile }: { profile: User }) => {
                       aria-labelledby="privacy-heading"
                       className="mt-2 divide-y divide-neutral-200"
                     >
-                      <Switch.Group
+                      <Field
                         as="li"
                         className="flex items-center justify-between py-4"
                       >
                         <div className="flex flex-col items-center">
-                          <Switch.Label as="p" className="sr-only" passive>
+                          <Label as="p" className="sr-only" passive>
                             Email notifications
-                          </Switch.Label>
-                          <Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                          </Label>
+                          <Description className="text-sm text-neutral-600 dark:text-neutral-400">
                             Occasional email notifications from the platform.
-                          </Switch.Description>
+                          </Description>
                         </div>
                         <Switch
                           checked={emailNotifications}
@@ -389,18 +389,18 @@ const Settings = ({ profile }: { profile: User }) => {
                             )}
                           />
                         </Switch>
-                      </Switch.Group>
-                      <Switch.Group
+                      </Field>
+                      <Field
                         as="li"
                         className="mt-2 flex items-center justify-between py-4"
                       >
                         <div className="flex flex-col">
-                          <Switch.Label as="p" className="sr-only" passive>
+                          <Label as="p" className="sr-only" passive>
                             Weekly newsletter
-                          </Switch.Label>
-                          <Switch.Description className="text-sm text-neutral-600 dark:text-neutral-400">
+                          </Label>
+                          <Description className="text-sm text-neutral-600 dark:text-neutral-400">
                             Opt-in to our weekly newsletter.
-                          </Switch.Description>
+                          </Description>
                         </div>
                         <Switch
                           checked={weeklyNewsletter}
@@ -422,7 +422,7 @@ const Settings = ({ profile }: { profile: User }) => {
                             )}
                           />
                         </Switch>
-                      </Switch.Group>
+                      </Field>
                     </ul>
                   </div>
                   <div className="mt-2 flex justify-end py-4">
diff --git a/components/ArticleMenu/ArticleMenu.tsx b/components/ArticleMenu/ArticleMenu.tsx
index a97aca71..2e4a1448 100644
--- a/components/ArticleMenu/ArticleMenu.tsx
+++ b/components/ArticleMenu/ArticleMenu.tsx
@@ -1,6 +1,11 @@
 "use client";
 
-import { Popover, Transition } from "@headlessui/react";
+import {
+  Popover,
+  PopoverButton,
+  PopoverPanel,
+  Transition,
+} from "@headlessui/react";
 import React, { Fragment, useEffect, useState } from "react";
 
 import { api } from "@/server/trpc/react";
@@ -166,14 +171,14 @@ const ArticleMenu = ({
           </button>
 
           <Popover className="relative ml-4">
-            <Popover.Button
+            <PopoverButton
               onClick={openPopoverPanel}
               aria-label="more-options-trigger"
               className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800"
             >
               <span className="sr-only">Open user menu</span>
               <EllipsisHorizontalIcon className="h-6 w-6 fill-neutral-800 dark:fill-neutral-300" />
-            </Popover.Button>
+            </PopoverButton>
             <Transition
               as={Fragment}
               enter="transition ease-out duration-100"
@@ -183,7 +188,7 @@ const ArticleMenu = ({
               leaveFrom="transform opacity-100 scale-100"
               leaveTo="transform opacity-0 scale-95"
             >
-              <Popover.Panel
+              <PopoverPanel
                 className={`absolute bottom-14 right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-white lg:bottom-0 lg:left-16 
                 ${isPopoverPanelOpen ? "" : "hidden"}`}
               >
@@ -223,7 +228,7 @@ const ArticleMenu = ({
                     </li>
                   </ul>
                 </div>
-              </Popover.Panel>
+              </PopoverPanel>
             </Transition>
           </Popover>
         </div>
diff --git a/components/ArticlePreview/ArticlePreview.tsx b/components/ArticlePreview/ArticlePreview.tsx
index 4c724ead..766df4af 100644
--- a/components/ArticlePreview/ArticlePreview.tsx
+++ b/components/ArticlePreview/ArticlePreview.tsx
@@ -8,7 +8,13 @@ import {
   BookmarkIcon,
   EllipsisHorizontalIcon,
 } from "@heroicons/react/20/solid";
-import { Menu, Transition } from "@headlessui/react";
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Transition,
+} from "@headlessui/react";
 import { api } from "@/server/trpc/react";
 import { signIn, useSession } from "next-auth/react";
 
@@ -160,10 +166,10 @@ const ArticlePreview: NextPage<Props> = ({
             {menuOptions && (
               <Menu as="div" className="relative">
                 <div>
-                  <Menu.Button className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800">
+                  <MenuButton className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800">
                     <span className="sr-only">Open user menu</span>
                     <EllipsisHorizontalIcon className="h-6 w-6" />
-                  </Menu.Button>
+                  </MenuButton>
                 </div>
                 <Transition
                   as={Fragment}
@@ -174,9 +180,9 @@ const ArticlePreview: NextPage<Props> = ({
                   leaveFrom="transform opacity-100 scale-100"
                   leaveTo="transform opacity-0 scale-95"
                 >
-                  <Menu.Items className="absolute bottom-10 right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                  <MenuItems className="absolute bottom-10 right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                     {menuOptions.map((item) => (
-                      <Menu.Item key={item.label}>
+                      <MenuItem key={item.label}>
                         {"href" in item ? (
                           <Link
                             className="block w-full rounded px-4 py-2 text-left text-neutral-700 hover:bg-neutral-200"
@@ -193,9 +199,9 @@ const ArticlePreview: NextPage<Props> = ({
                             {item.label}
                           </button>
                         )}
-                      </Menu.Item>
+                      </MenuItem>
                     ))}
-                  </Menu.Items>
+                  </MenuItems>
                 </Transition>
               </Menu>
             )}
diff --git a/components/Comments/CommentsArea.tsx b/components/Comments/CommentsArea.tsx
index 86b730f1..e98c7e4c 100644
--- a/components/Comments/CommentsArea.tsx
+++ b/components/Comments/CommentsArea.tsx
@@ -1,7 +1,13 @@
 "use client";
 
 import React, { useEffect } from "react";
-import { Menu, Transition } from "@headlessui/react";
+import {
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Transition,
+} from "@headlessui/react";
 import { EllipsisHorizontalIcon } from "@heroicons/react/20/solid";
 import { signIn, useSession } from "next-auth/react";
 import { useForm } from "react-hook-form";
@@ -249,10 +255,10 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                   {isCurrentUser ? (
                     <Menu as="div" className="relative">
                       <div>
-                        <Menu.Button className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800">
+                        <MenuButton className="rounded-full p-1 hover:bg-neutral-300 dark:hover:bg-neutral-800">
                           <span className="sr-only">Open user menu</span>
                           <EllipsisHorizontalIcon className="h-6 w-6" />
-                        </Menu.Button>
+                        </MenuButton>
                       </div>
                       <Transition
                         as={Fragment}
@@ -263,11 +269,11 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                         leaveFrom="transform opacity-100 scale-100"
                         leaveTo="transform opacity-0 scale-95"
                       >
-                        <Menu.Items className="absolute bottom-10 right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                        <MenuItems className="absolute bottom-10 right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                           <>
-                            <Menu.Item>
+                            <MenuItem>
                               <button
-                                className="block w-full rounded px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-200"
+                                className="block w-full rounded px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-200 data-[focus]:bg-neutral-100 data-[focus]:text-black"
                                 onClick={() => {
                                   if (id !== editCommentBoxId) {
                                     setValue("edit", body);
@@ -278,19 +284,19 @@ const CommentsArea = ({ postId, postOwnerId }: Props) => {
                               >
                                 Edit comment
                               </button>
-                            </Menu.Item>
-                            <Menu.Item>
+                            </MenuItem>
+                            <MenuItem>
                               <button
-                                className="block w-full rounded px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-200"
+                                className="block w-full rounded px-4 py-2 text-left text-sm text-neutral-700 hover:bg-neutral-200 data-[focus]:bg-neutral-100 data-[focus]:text-black"
                                 onClick={() => {
                                   deleteComment({ id });
                                 }}
                               >
                                 Delete comment
                               </button>
-                            </Menu.Item>
+                            </MenuItem>
                           </>
-                        </Menu.Items>
+                        </MenuItems>
                       </Transition>
                     </Menu>
                   ) : null}
diff --git a/components/ImageDetailsModal/ImageDetailsModal.tsx b/components/ImageDetailsModal/ImageDetailsModal.tsx
index bd83cc53..de6b028b 100644
--- a/components/ImageDetailsModal/ImageDetailsModal.tsx
+++ b/components/ImageDetailsModal/ImageDetailsModal.tsx
@@ -6,7 +6,7 @@ import { XIcon } from "lucide-react";
 import { z } from "zod";
 import { zodResolver } from "@hookform/resolvers/zod";
 import { useForm } from "react-hook-form";
-import { Dialog } from "@headlessui/react";
+import { Description, DialogTitle } from "@headlessui/react";
 
 const imageDetailsSchema = z.object({
   src: z
@@ -62,14 +62,14 @@ export default function ImageDetailsModal(props: Props) {
       }}
     >
       <>
-        <Dialog.Title className="mb-4 text-center text-lg">
+        <DialogTitle className="mb-4 text-center text-lg">
           Image details
-        </Dialog.Title>
+        </DialogTitle>
 
-        <Dialog.Description className="mb-4">
+        <Description className="mb-4">
           Please enter a URL for the image, along with an alt description and a
           title.
-        </Dialog.Description>
+        </Description>
         <form>
           <div>
             <label htmlFor="src">Image URL:</label>
diff --git a/components/Modal/Modal.tsx b/components/Modal/Modal.tsx
index 72f5d751..701d950b 100644
--- a/components/Modal/Modal.tsx
+++ b/components/Modal/Modal.tsx
@@ -1,5 +1,10 @@
 import React, { Fragment } from "react";
-import { Dialog, Transition } from "@headlessui/react";
+import {
+  Dialog,
+  DialogPanel,
+  Transition,
+  TransitionChild,
+} from "@headlessui/react";
 
 interface Props {
   open: boolean;
@@ -9,9 +14,9 @@ interface Props {
 
 export function Modal({ open, onClose, children }: Props) {
   return (
-    <Transition.Root show={open} as={Fragment}>
+    <Transition show={open} as={Fragment}>
       <Dialog as="div" className="relative z-10" onClose={onClose}>
-        <Transition.Child
+        <TransitionChild
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -21,11 +26,11 @@ export function Modal({ open, onClose, children }: Props) {
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-neutral-800 bg-opacity-75 transition-opacity" />
-        </Transition.Child>
+        </TransitionChild>
 
         <div className="fixed inset-0 z-10 overflow-y-auto">
           <div className="flex min-h-full items-end justify-center p-4 text-center sm:items-center sm:p-0">
-            <Transition.Child
+            <TransitionChild
               as={Fragment}
               enter="ease-out duration-300"
               enterFrom="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
@@ -34,13 +39,13 @@ export function Modal({ open, onClose, children }: Props) {
               leaveFrom="opacity-100 translate-y-0 sm:scale-100"
               leaveTo="opacity-0 translate-y-4 sm:translate-y-0 sm:scale-95"
             >
-              <Dialog.Panel className="relative transform overflow-hidden border-2 border-black bg-neutral-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
+              <DialogPanel className="relative transform overflow-hidden border-2 border-black bg-neutral-900 px-4 pb-4 pt-5 text-left shadow-xl transition-all sm:my-8 sm:w-full sm:max-w-lg sm:p-6">
                 {children}
-              </Dialog.Panel>
-            </Transition.Child>
+              </DialogPanel>
+            </TransitionChild>
           </div>
         </div>
       </Dialog>
-    </Transition.Root>
+    </Transition>
   );
 }
diff --git a/components/Nav/MobileNav.tsx b/components/Nav/MobileNav.tsx
index e1717527..2bfa83c4 100644
--- a/components/Nav/MobileNav.tsx
+++ b/components/Nav/MobileNav.tsx
@@ -1,5 +1,10 @@
 import { type UserNavigationItem } from "@/types/types";
-import { Disclosure, Transition } from "@headlessui/react";
+import {
+  Disclosure,
+  DisclosureButton,
+  DisclosurePanel,
+  Transition,
+} from "@headlessui/react";
 import { type Session } from "next-auth";
 import { PromptLink as Link } from "../PromptService/PromptLink";
 import { type MutableRefObject, useRef, type FunctionComponent } from "react";
@@ -27,7 +32,7 @@ const MobileNav: FunctionComponent<MobileNavProps> = ({
       enterTo="transform translate-y-0 opacity-100"
       className="absolute z-10 w-screen bg-neutral-100 dark:bg-black"
     >
-      <Disclosure.Panel className="relative border-b border-neutral-400 dark:border-neutral-600 md:hidden">
+      <DisclosurePanel className="relative border-b border-neutral-400 dark:border-neutral-600 md:hidden">
         <div className="space-y-1 px-2 pb-3 pt-2">
           {navigation.map((item) => (
             <NavItem item={item} key={item.name} />
@@ -69,12 +74,12 @@ const MobileNav: FunctionComponent<MobileNavProps> = ({
                     </button>
                   ) : (
                     <Link key={item.name} to={item.href}>
-                      <Disclosure.Button
+                      <DisclosureButton
                         as="div"
                         className="nav-button w-full font-medium"
                       >
                         {item.name}
-                      </Disclosure.Button>
+                      </DisclosureButton>
                     </Link>
                   ),
                 )}
@@ -82,7 +87,7 @@ const MobileNav: FunctionComponent<MobileNavProps> = ({
             </div>
           </div>
         )}
-      </Disclosure.Panel>
+      </DisclosurePanel>
     </Transition>
   );
 };
@@ -99,7 +104,7 @@ interface NavItemProps {
 const NavItem: FunctionComponent<NavItemProps> = ({ item }) => {
   return item.href.includes("http") ? (
     <Disclosure>
-      <Disclosure.Button
+      <DisclosureButton
         as="a"
         href={item.href}
         target="_blank"
@@ -107,18 +112,18 @@ const NavItem: FunctionComponent<NavItemProps> = ({ item }) => {
         className="nav-button flex w-full items-center text-sm font-medium lg:text-base"
       >
         {item.name}
-      </Disclosure.Button>
+      </DisclosureButton>
     </Disclosure>
   ) : (
     <Disclosure>
-      <Disclosure.Button
+      <DisclosureButton
         as="a"
         href={item.href}
         rel="noopener noreferrer"
         className="nav-button flex w-full items-center text-sm font-medium lg:text-base"
       >
         {item.name}
-      </Disclosure.Button>
+      </DisclosureButton>
     </Disclosure>
   );
 };
@@ -140,7 +145,7 @@ const SubNav: FunctionComponent<SubNavProps> = ({ session, close }) => {
     <>
       {data.map((item) => (
         <Disclosure key={item.name}>
-          <Disclosure.Button
+          <DisclosureButton
             as={Link}
             to={item.href}
             close={close}
@@ -153,7 +158,7 @@ const SubNav: FunctionComponent<SubNavProps> = ({ session, close }) => {
             )}
           >
             {item.name}
-          </Disclosure.Button>
+          </DisclosureButton>
         </Disclosure>
       ))}
     </>
diff --git a/components/Nav/Nav.tsx b/components/Nav/Nav.tsx
index 80534b76..e376b641 100644
--- a/components/Nav/Nav.tsx
+++ b/components/Nav/Nav.tsx
@@ -1,6 +1,14 @@
 "use client";
 import { api } from "@/server/trpc/react";
-import { Disclosure, Menu, Transition } from "@headlessui/react";
+import {
+  Disclosure,
+  DisclosureButton,
+  Menu,
+  MenuButton,
+  MenuItem,
+  MenuItems,
+  Transition,
+} from "@headlessui/react";
 import { BellIcon, PlusIcon } from "@heroicons/react/20/solid";
 import { signIn, signOut } from "next-auth/react";
 import { PromptLink as Link } from "../PromptService/PromptLink";
@@ -139,7 +147,7 @@ const Nav = ({
                       </Link>
                       <Menu as="div" className="relative ml-4">
                         <div>
-                          <Menu.Button className="flex rounded-full bg-black text-sm ring-offset-2 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus:ring-offset-white">
+                          <MenuButton className="flex rounded-full bg-black text-sm ring-offset-2 focus:outline-none focus:ring-2 focus:ring-pink-600 focus:ring-offset-2 focus:ring-offset-white">
                             <span className="sr-only">Open user menu</span>
                             {session.user?.image ? (
                               <img
@@ -152,7 +160,7 @@ const Nav = ({
                                 {session.user?.name?.[0] || "C"}
                               </div>
                             )}
-                          </Menu.Button>
+                          </MenuButton>
                         </div>
                         <Transition
                           as={Fragment}
@@ -163,9 +171,9 @@ const Nav = ({
                           leaveFrom="transform opacity-100 scale-100"
                           leaveTo="transform opacity-0 scale-95"
                         >
-                          <Menu.Items className="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
+                          <MenuItems className="absolute right-0 mt-2 w-48 origin-top-right rounded-md bg-white px-1 py-1 shadow-lg ring-1 ring-black ring-opacity-5 focus:outline-none">
                             {userNavigation.map((item) => (
-                              <Menu.Item key={item.name}>
+                              <MenuItem key={item.name}>
                                 {item.onClick ? (
                                   <button
                                     className={
@@ -183,9 +191,9 @@ const Nav = ({
                                     {item.name}
                                   </Link>
                                 )}
-                              </Menu.Item>
+                              </MenuItem>
                             ))}
-                          </Menu.Items>
+                          </MenuItems>
                         </Transition>
                       </Menu>
                     </>
@@ -208,10 +216,10 @@ const Nav = ({
                   </Link>
                 )}
                 {/* Mobile menu button */}
-                <Disclosure.Button className="nav-button focus-style group">
+                <DisclosureButton className="nav-button focus-style group">
                   <span className="sr-only">Open main menu</span>
                   <AnimatedHamburger open={open} />
-                </Disclosure.Button>
+                </DisclosureButton>
               </div>
             </div>
           </div>
diff --git a/components/PromptService/PromptDialog.tsx b/components/PromptService/PromptDialog.tsx
index 29beced3..ea4d3d70 100644
--- a/components/PromptService/PromptDialog.tsx
+++ b/components/PromptService/PromptDialog.tsx
@@ -1,7 +1,7 @@
 import React from "react";
 import { Modal } from "../Modal/Modal";
 import { ExclamationCircleIcon, XMarkIcon } from "@heroicons/react/20/solid";
-import { Dialog } from "@headlessui/react";
+import { DialogTitle } from "@headlessui/react";
 
 export interface serviceProps {
   confirm: () => void;
@@ -42,12 +42,12 @@ export const PromptDialog = ({
           />
         </div>
         <div className="mt-3 text-center sm:ml-4 sm:mt-0 sm:text-left">
-          <Dialog.Title
+          <DialogTitle
             as="h3"
             className="text-lg font-medium leading-6 text-white"
           >
             {title}
-          </Dialog.Title>
+          </DialogTitle>
           <div className="mt-2">
             <p className="text-sm text-neutral-500">{subTitle}</p>
             {content && (
diff --git a/components/ReportModal/ReportModal.tsx b/components/ReportModal/ReportModal.tsx
index b1b96695..bb956e4f 100644
--- a/components/ReportModal/ReportModal.tsx
+++ b/components/ReportModal/ReportModal.tsx
@@ -3,7 +3,12 @@ import { XMarkIcon, FlagIcon } from "@heroicons/react/20/solid";
 import { toast } from "sonner";
 import { signIn, useSession } from "next-auth/react";
 import { api } from "@/server/trpc/react";
-import { Dialog } from "@headlessui/react";
+import {
+  Description,
+  Dialog,
+  DialogPanel,
+  DialogTitle,
+} from "@headlessui/react";
 
 type Props = Post | Comment;
 
@@ -109,13 +114,13 @@ export const ReportModal = (props: Props) => {
       >
         <div className="fixed inset-0 bg-gray-700/90" aria-hidden="true" />
         <div className="fixed inset-0 flex w-screen items-center justify-center">
-          <Dialog.Panel className="relative max-w-lg rounded-lg border border-neutral-900 bg-neutral-100 p-0 text-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:text-neutral-50 ">
+          <DialogPanel className="relative max-w-lg rounded-lg border border-neutral-900 bg-neutral-100 p-0 text-neutral-900 dark:border-neutral-50 dark:bg-neutral-900 dark:text-neutral-50 ">
             <div className="m-8">
-              <Dialog.Title className="text-center text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
+              <DialogTitle className="text-center text-2xl font-bold tracking-tight text-neutral-900 dark:text-neutral-50">
                 Submit a report
-              </Dialog.Title>
+              </DialogTitle>
 
-              <Dialog.Description as="div">
+              <Description as="div">
                 <p className="m-4 ml-0">
                   Is {isPost ? "something in this article" : "this comment"}{" "}
                   inappropriate?
@@ -125,7 +130,7 @@ export const ReportModal = (props: Props) => {
                   {isComment && props.comment}
                   {isPost && props.title}
                 </p>
-              </Dialog.Description>
+              </Description>
 
               <p className="m-4 ml-0">
                 Thank you for bringing it to our attention. We take reports very
@@ -170,7 +175,7 @@ export const ReportModal = (props: Props) => {
             >
               <XMarkIcon className="w-8" />
             </button>
-          </Dialog.Panel>
+          </DialogPanel>
         </div>
       </Dialog>
     </>
diff --git a/components/ui/Search.tsx b/components/ui/Search.tsx
index 1ce77b04..650723de 100644
--- a/components/ui/Search.tsx
+++ b/components/ui/Search.tsx
@@ -20,7 +20,12 @@ import {
 } from "@algolia/autocomplete-core";
 import { getAlgoliaResults } from "@algolia/autocomplete-preset-algolia";
 import algoliasearch from "algoliasearch/lite";
-import { Dialog, Transition } from "@headlessui/react";
+import {
+  Dialog,
+  DialogPanel,
+  Transition,
+  TransitionChild,
+} from "@headlessui/react";
 import { MagnifyingGlassIcon } from "@heroicons/react/24/outline";
 import clsx from "clsx";
 import Image from "next/image";
@@ -383,7 +388,7 @@ function SearchDialog({
   }, [open, setOpen]);
 
   return (
-    <Transition.Root
+    <Transition
       show={open}
       as={Fragment}
       afterLeave={() => autocomplete.setQuery("")}
@@ -392,7 +397,7 @@ function SearchDialog({
         onClose={setOpen}
         className={clsx("fixed inset-0 z-50 opacity-[98%]", className)}
       >
-        <Transition.Child
+        <TransitionChild
           as={Fragment}
           enter="ease-out duration-300"
           enterFrom="opacity-0"
@@ -402,10 +407,10 @@ function SearchDialog({
           leaveTo="opacity-0"
         >
           <div className="fixed inset-0 bg-neutral-400/25 backdrop-blur-sm dark:bg-black/40" />
-        </Transition.Child>
+        </TransitionChild>
 
         <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]">
-          <Transition.Child
+          <TransitionChild
             as={Fragment}
             enter="ease-out duration-300"
             enterFrom="opacity-0 scale-95"
@@ -414,7 +419,7 @@ function SearchDialog({
             leaveFrom="opacity-100 scale-100"
             leaveTo="opacity-0 scale-95"
           >
-            <Dialog.Panel className="mx-auto transform-gpu overflow-hidden rounded-lg bg-neutral-100 shadow-xl dark:bg-neutral-900 sm:max-w-xl">
+            <DialogPanel className="mx-auto transform-gpu overflow-hidden rounded-lg bg-neutral-100 shadow-xl dark:bg-neutral-900 sm:max-w-xl">
               <div {...autocomplete.getRootProps({})}>
                 <form
                   ref={formRef}
@@ -443,11 +448,11 @@ function SearchDialog({
                   </div>
                 </form>
               </div>
-            </Dialog.Panel>
-          </Transition.Child>
+            </DialogPanel>
+          </TransitionChild>
         </div>
       </Dialog>
-    </Transition.Root>
+    </Transition>
   );
 }
 
diff --git a/package-lock.json b/package-lock.json
index d3dcfcc1..64834408 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -14,7 +14,7 @@
         "@aws-sdk/client-s3": "^3.614.0",
         "@aws-sdk/client-ses": "^3.621.0",
         "@aws-sdk/s3-request-presigner": "^3.614.0",
-        "@headlessui/react": "^1.7.19",
+        "@headlessui/react": "^2.1.2",
         "@heroicons/react": "^2.1.5",
         "@hookform/resolvers": "^3.9.0",
         "@js-temporal/polyfill": "^0.4.4",
@@ -8725,6 +8725,20 @@
         "@floating-ui/utils": "^0.2.4"
       }
     },
+    "node_modules/@floating-ui/react": {
+      "version": "0.26.22",
+      "resolved": "https://registry.npmjs.org/@floating-ui/react/-/react-0.26.22.tgz",
+      "integrity": "sha512-LNv4azPt8SpT4WW7Kku5JNVjLk2GcS0bGGjFTAgqOONRFo9r/aaGHHPpdiIuQbB1t8shmWyWqTTUDmZ9fcNshg==",
+      "dependencies": {
+        "@floating-ui/react-dom": "^2.1.1",
+        "@floating-ui/utils": "^0.2.7",
+        "tabbable": "^6.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0",
+        "react-dom": ">=16.8.0"
+      }
+    },
     "node_modules/@floating-ui/react-dom": {
       "version": "2.1.1",
       "resolved": "https://registry.npmjs.org/@floating-ui/react-dom/-/react-dom-2.1.1.tgz",
@@ -8739,10 +8753,9 @@
       }
     },
     "node_modules/@floating-ui/utils": {
-      "version": "0.2.4",
-      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.4.tgz",
-      "integrity": "sha512-dWO2pw8hhi+WrXq1YJy2yCuWoL20PddgGaqTgVe4cOS9Q6qklXCiA1tJEqX6BEwRNSCP84/afac9hd4MS+zEUA==",
-      "license": "MIT"
+      "version": "0.2.7",
+      "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.2.7.tgz",
+      "integrity": "sha512-X8R8Oj771YRl/w+c1HqAC1szL8zWQRwFvgDwT129k9ACdBoud/+/rX9V0qiMl6LWUdP9voC2nDVZYPMQQsb6eA=="
     },
     "node_modules/@graphql-tools/executor": {
       "version": "0.0.18",
@@ -8842,19 +8855,21 @@
       }
     },
     "node_modules/@headlessui/react": {
-      "version": "1.7.19",
-      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-1.7.19.tgz",
-      "integrity": "sha512-Ll+8q3OlMJfJbAKM/+/Y2q6PPYbryqNTXDbryx7SXLIDamkF6iQFbriYHga0dY44PvDhvvBWCx1Xj4U5+G4hOw==",
+      "version": "2.1.2",
+      "resolved": "https://registry.npmjs.org/@headlessui/react/-/react-2.1.2.tgz",
+      "integrity": "sha512-Kb3hgk9gRNRcTZktBrKdHhF3xFhYkca1Rk6e1/im2ENf83dgN54orMW0uSKTXFnUpZOUFZ+wcY05LlipwgZIFQ==",
       "dependencies": {
-        "@tanstack/react-virtual": "^3.0.0-beta.60",
-        "client-only": "^0.0.1"
+        "@floating-ui/react": "^0.26.16",
+        "@react-aria/focus": "^3.17.1",
+        "@react-aria/interactions": "^3.21.3",
+        "@tanstack/react-virtual": "^3.8.1"
       },
       "engines": {
         "node": ">=10"
       },
       "peerDependencies": {
-        "react": "^16 || ^17 || ^18",
-        "react-dom": "^16 || ^17 || ^18"
+        "react": "^18",
+        "react-dom": "^18"
       }
     },
     "node_modules/@heroicons/react": {
@@ -10395,6 +10410,83 @@
       "integrity": "sha512-A9+lCBZoaMJlVKcRBz2YByCG+Cp2t6nAnMnNba+XiWxnj6r4JUFqfsgwocMBZU9LPtdxC6wB56ySYpc7LQIoJg==",
       "license": "MIT"
     },
+    "node_modules/@react-aria/focus": {
+      "version": "3.18.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/focus/-/focus-3.18.1.tgz",
+      "integrity": "sha512-N0Cy61WCIv+57mbqC7hiZAsB+3rF5n4JKabxUmg/2RTJL6lq7hJ5N4gx75ymKxkN8GnVDwt4pKZah48Wopa5jw==",
+      "dependencies": {
+        "@react-aria/interactions": "^3.22.1",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/interactions": {
+      "version": "3.22.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/interactions/-/interactions-3.22.1.tgz",
+      "integrity": "sha512-5TLzQaDAQQ5C70yG8GInbO4wIylKY67RfTIIwQPGR/4n5OIjbUD8BOj3NuSsuZ/frUPaBXo1VEBBmSO23fxkjw==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.5",
+        "@react-aria/utils": "^3.25.1",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/ssr": {
+      "version": "3.9.5",
+      "resolved": "https://registry.npmjs.org/@react-aria/ssr/-/ssr-3.9.5.tgz",
+      "integrity": "sha512-xEwGKoysu+oXulibNUSkXf8itW0npHHTa6c4AyYeZIJyRoegeteYuFpZUBPtIDE8RfHdNsSmE1ssOkxRnwbkuQ==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "engines": {
+        "node": ">= 12"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-aria/utils": {
+      "version": "3.25.1",
+      "resolved": "https://registry.npmjs.org/@react-aria/utils/-/utils-3.25.1.tgz",
+      "integrity": "sha512-5Uj864e7T5+yj78ZfLnfHqmypLiqW2mN+nsdslog2z5ssunTqjolVeM15ootXskjISlZ7MojLpq97kIC4nlnAw==",
+      "dependencies": {
+        "@react-aria/ssr": "^3.9.5",
+        "@react-stately/utils": "^3.10.2",
+        "@react-types/shared": "^3.24.1",
+        "@swc/helpers": "^0.5.0",
+        "clsx": "^2.0.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-stately/utils": {
+      "version": "3.10.2",
+      "resolved": "https://registry.npmjs.org/@react-stately/utils/-/utils-3.10.2.tgz",
+      "integrity": "sha512-fh6OTQtbeQC0ywp6LJuuKs6tKIgFvt/DlIZEcIpGho6/oZG229UnIk6TUekwxnDbumuYyan6D9EgUtEMmT8UIg==",
+      "dependencies": {
+        "@swc/helpers": "^0.5.0"
+      },
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
+    "node_modules/@react-types/shared": {
+      "version": "3.24.1",
+      "resolved": "https://registry.npmjs.org/@react-types/shared/-/shared-3.24.1.tgz",
+      "integrity": "sha512-AUQeGYEm/zDTN6zLzdXolDxz3Jk5dDL7f506F07U8tBwxNNI3WRdhU84G0/AaFikOZzDXhOZDr3MhQMzyE7Ydw==",
+      "peerDependencies": {
+        "react": "^16.8.0 || ^17.0.0-rc.1 || ^18.0.0 || ^19.0.0"
+      }
+    },
     "node_modules/@remirror/core-constants": {
       "version": "2.0.2",
       "resolved": "https://registry.npmjs.org/@remirror/core-constants/-/core-constants-2.0.2.tgz",
@@ -11946,11 +12038,11 @@
       }
     },
     "node_modules/@tanstack/react-virtual": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.5.0.tgz",
-      "integrity": "sha512-rtvo7KwuIvqK9zb0VZ5IL7fiJAEnG+0EiFZz8FUOs+2mhGqdGmjKIaT1XU7Zq0eFqL0jonLlhbayJI/J2SA/Bw==",
+      "version": "3.8.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/react-virtual/-/react-virtual-3.8.6.tgz",
+      "integrity": "sha512-YcOQAxccjIqiC8cQ8QQiDU6F+JZtfpKNvYsw/ju5Q6S5/m9KDs5SaJvKz1kLj3RKNAOBMIFA9snN2MDmyT9lBQ==",
       "dependencies": {
-        "@tanstack/virtual-core": "3.5.0"
+        "@tanstack/virtual-core": "3.8.6"
       },
       "funding": {
         "type": "github",
@@ -11962,9 +12054,9 @@
       }
     },
     "node_modules/@tanstack/virtual-core": {
-      "version": "3.5.0",
-      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.5.0.tgz",
-      "integrity": "sha512-KnPRCkQTyqhanNC0K63GBG3wA8I+D1fQuVnAvcBF8f13akOKeQp1gSbu6f77zCxhEk727iV5oQnbHLYzHrECLg==",
+      "version": "3.8.6",
+      "resolved": "https://registry.npmjs.org/@tanstack/virtual-core/-/virtual-core-3.8.6.tgz",
+      "integrity": "sha512-UJeU4SBrx3hqULNzJ3oC0kgJ5miIAg+FwomxMTlQNxob6ppTInifANHd9ukETvzdzxr6zt3CjQ0rttQpVjbt6Q==",
       "funding": {
         "type": "github",
         "url": "https://github.com/sponsors/tannerlinsley"
@@ -26635,6 +26727,11 @@
         "node": ">= 10"
       }
     },
+    "node_modules/tabbable": {
+      "version": "6.2.0",
+      "resolved": "https://registry.npmjs.org/tabbable/-/tabbable-6.2.0.tgz",
+      "integrity": "sha512-Cat63mxsVJlzYvN51JmVXIgNoUokrIaT2zLclCXjRd8boZ0004U4KCs/sToJ75C6sdlByWxpYnb5Boif1VSFew=="
+    },
     "node_modules/table": {
       "version": "6.8.2",
       "resolved": "https://registry.npmjs.org/table/-/table-6.8.2.tgz",
diff --git a/package.json b/package.json
index f66d49df..13b2d3da 100644
--- a/package.json
+++ b/package.json
@@ -32,7 +32,7 @@
     "@aws-sdk/client-s3": "^3.614.0",
     "@aws-sdk/client-ses": "^3.621.0",
     "@aws-sdk/s3-request-presigner": "^3.614.0",
-    "@headlessui/react": "^1.7.19",
+    "@headlessui/react": "^2.1.2",
     "@heroicons/react": "^2.1.5",
     "@hookform/resolvers": "^3.9.0",
     "@js-temporal/polyfill": "^0.4.4",