diff --git a/daily-thought-frontend/src/components/navigation/MenuTransition.tsx b/daily-thought-frontend/src/components/navigation/MenuTransition.tsx
new file mode 100644
index 0000000000000000000000000000000000000000..4e2b1aadc3d8128bbe2631ed75b1e48716cd1942
--- /dev/null
+++ b/daily-thought-frontend/src/components/navigation/MenuTransition.tsx
@@ -0,0 +1,20 @@
+import { Transition } from "@headlessui/react"
+import { FC, Fragment, PropsWithChildren } from "react"
+
+const MenuTransition:FC<PropsWithChildren> = ({children}) => {
+  return (
+    <Transition
+      as={Fragment}
+      enter="transition ease-out duration-100"
+      enterFrom="transform opacity-0 scale-95"
+      enterTo="transform opacity-100 scale-100"
+      leave="transition ease-in duration-75"
+      leaveFrom="transform opacity-100 scale-100"
+      leaveTo="transform opacity-0 scale-95"
+      >
+      {children}
+    </Transition>
+  )
+}
+
+export default MenuTransition
\ No newline at end of file