diff --git a/src/app/core/layouts/header/header.html b/src/app/core/layouts/header/header.html
index 857a69a..1c825ed 100644
--- a/src/app/core/layouts/header/header.html
+++ b/src/app/core/layouts/header/header.html
@@ -19,7 +19,11 @@
 
     <div class="flex space-x-4">
       <div class="flex text-gray-600">
-        <button class="btn btn-ghost py-1 px-2 rounded-r-none!">
+        <button
+          popovertarget="popover-1"
+          style="anchor-name: --anchor-1"
+          class="btn btn-ghost py-1 px-2 rounded-r-none!"
+        >
           <lucide-angular [img]="UserIcon" class="w-5" />
         </button>
         <button class="btn btn-ghost py-1 px-2 rounded-l-none! border-l-0!">
@@ -28,4 +32,11 @@
       </div>
     </div>
   </nav>
+  <ul class="dropdown" popover id="popover-1" style="position-anchor: --anchor-1">
+    <li><a class="block h-full w-full" href="">Login</a></li>
+    <li><a class="block h-full w-full" href="">My Account</a></li>
+    <li><a class="block h-full w-full" href="">Orders</a></li>
+    <li><a class="block h-full w-full" href="">Wishlist</a></li>
+    <li><a class="block h-full w-full" href="">Notifications</a></li>
+  </ul>
 </header>
diff --git a/src/styles.css b/src/styles.css
index bcccb95..b41a67b 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -50,3 +50,12 @@ body {
 .input {
   @apply p-3 border border-gray-300 rounded-xl text-sm w-full;
 }
+
+.dropdown {
+  position-area: span-left bottom;
+  @apply p-4 mt-2 border border-gray-300 shadow-lg rounded-xl space-y-2 text-gray-800;
+}
+
+.dropdown li {
+  @apply rounded-lg hover:bg-linear-to-r hover:from-teal-300 hover:to-transparent px-5 py-1;
+}