diff --git a/frontend/src/components/header/NotificationDropdown.tsx b/frontend/src/components/header/NotificationDropdown.tsx
index e7fa0229..29d43ea4 100644
--- a/frontend/src/components/header/NotificationDropdown.tsx
+++ b/frontend/src/components/header/NotificationDropdown.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { Dropdown } from "../ui/dropdown/Dropdown";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
 import { Link } from "react-router";
@@ -6,6 +6,7 @@ import { Link } from "react-router";
 export default function NotificationDropdown() {
   const [isOpen, setIsOpen] = useState(false);
   const [notifying, setNotifying] = useState(true);
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   function toggleDropdown() {
     setIsOpen(!isOpen);
@@ -22,6 +23,7 @@ export default function NotificationDropdown() {
   return (
     <div className="relative">
       <button
+        ref={buttonRef}
         className="relative flex items-center justify-center text-gray-500 transition-colors bg-white border border-gray-200 rounded-full dropdown-toggle hover:text-gray-700 h-11 w-11 hover:bg-gray-100 dark:border-gray-800 dark:bg-gray-900 dark:text-gray-400 dark:hover:bg-gray-800 dark:hover:text-white"
         onClick={handleClick}
       >
@@ -50,7 +52,9 @@ export default function NotificationDropdown() {
       <Dropdown
         isOpen={isOpen}
         onClose={closeDropdown}
-        className="absolute -right-[240px] mt-[17px] flex h-[480px] w-[350px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark sm:w-[361px] lg:right-0"
+        anchorRef={buttonRef}
+        placement="bottom-right"
+        className="flex h-[480px] w-[350px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark sm:w-[361px]"
       >
         <div className="flex items-center justify-between pb-3 mb-3 border-b border-gray-100 dark:border-gray-700">
           <h5 className="text-lg font-semibold text-gray-800 dark:text-gray-200">
diff --git a/frontend/src/components/header/UserDropdown.tsx b/frontend/src/components/header/UserDropdown.tsx
index 85c40642..b44fcd2a 100644
--- a/frontend/src/components/header/UserDropdown.tsx
+++ b/frontend/src/components/header/UserDropdown.tsx
@@ -1,4 +1,4 @@
-import { useState } from "react";
+import { useState, useRef } from "react";
 import { useNavigate } from "react-router";
 import { DropdownItem } from "../ui/dropdown/DropdownItem";
 import { Dropdown } from "../ui/dropdown/Dropdown";
@@ -9,6 +9,7 @@ export default function UserDropdown() {
   const [isOpen, setIsOpen] = useState(false);
   const navigate = useNavigate();
   const { user, logout } = useAuthStore();
+  const buttonRef = useRef<HTMLButtonElement>(null);
 
   function toggleDropdown() {
     setIsOpen(!isOpen);
@@ -26,6 +27,7 @@ export default function UserDropdown() {
   return (
     <div className="relative">
       <button
+        ref={buttonRef}
         onClick={toggleDropdown}
         className="flex items-center text-gray-700 dropdown-toggle dark:text-gray-400"
       >
@@ -65,7 +67,9 @@ export default function UserDropdown() {
       <Dropdown
         isOpen={isOpen}
         onClose={closeDropdown}
-        className="absolute right-0 mt-[17px] flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
+        anchorRef={buttonRef}
+        placement="bottom-right"
+        className="flex w-[260px] flex-col rounded-2xl border border-gray-200 bg-white p-3 shadow-theme-lg dark:border-gray-800 dark:bg-gray-dark"
       >
         <div>
           <span className="block font-medium text-gray-700 text-theme-sm dark:text-gray-400">