diff --git a/poetry.lock b/poetry.lock
index 8269624f2..60ed67abb 100644
--- a/poetry.lock
+++ b/poetry.lock
@@ -2300,4 +2300,4 @@ files = [
 [metadata]
 lock-version = "2.0"
 python-versions = "3.11.2"
-content-hash = "e1bf23d9e7c594ae51bda6e3ef09ac7ab6e9cb076faa650a35e68a49af01e6d4"
+content-hash = "eea0a20310e7ecfb191cb2f70632c5335970266a5afd132b37e4310f20d9d540"
diff --git a/website/templates/includes/header.html b/website/templates/includes/header.html
index ad9f030e2..5edceca26 100644
--- a/website/templates/includes/header.html
+++ b/website/templates/includes/header.html
@@ -11,8 +11,38 @@
         color: black;
     }
 </style>
+<script>
+    document.addEventListener('DOMContentLoaded', function () {
+        const desktopDropdownButton = document.getElementById('dropdownButton');
+        const desktopDropdownMenu = document.getElementById('dropdownMenu');
 
-<nav class="fixed top-0 z-50 w-full bg-white border-b border-[#F7F7F7] border-b-2 px-4">
+        if (desktopDropdownButton && desktopDropdownMenu) {
+            desktopDropdownButton.addEventListener('click', () => {
+                desktopDropdownMenu.classList.toggle('hidden');
+            });
+            document.addEventListener('click', (e) => {
+                if (!desktopDropdownButton.contains(e.target) && !desktopDropdownMenu.contains(e.target)) {
+                    desktopDropdownMenu.classList.add('hidden');
+                }
+            });
+        }
+
+        const mobileDropdownButton = document.getElementById('dropdown-toggle-mobile');
+        const mobileDropdownMenu = document.getElementById('dropdown-mobile');
+        if (mobileDropdownButton && mobileDropdownMenu) {
+            mobileDropdownButton.addEventListener('click', () => {
+                mobileDropdownMenu.classList.toggle('hidden');
+            });
+            document.addEventListener('click', (e) => {
+                if (!mobileDropdownButton.contains(e.target) && !mobileDropdownMenu.contains(e.target)) {
+                    mobileDropdownMenu.classList.add('hidden');
+                }
+            });
+        }
+    });
+</script>
+
+<nav class="fixed top-0 z-50 w-full bg-white border-b border-[#F7F7F7] border-b-2 px-4" style="height: 10%;">
     <div class="px-3 py-3 lg:px-5 lg:pl-3">
         <div class="flex items-center justify-between">
             <div class="flex items-center justify-start rtl:justify-end">
@@ -48,39 +78,89 @@
                 </a>
             </div>
 
-            <!-- User Avatar -->
             {% if request.user.is_authenticated %}
-            <a href="/accounts/logout" id="user" class="relative flex row items-center gap-3 mr-[30px] hover:no-underline inline-block">
-                {% if request.user.userprofile.avatar %}
-                <img src="{{ request.user.userprofile.avatar }}" class="h-[30px] w-[30px] rounded-full ">
-                {% elif request.user.socialaccount_set.all.0.get_avatar_url %}
-                <img src="{{ request.user.socialaccount_set.all.0.get_avatar_url }}"
-                    class="h-[30px] w-[30px] rounded-full ">
-                {% else %}
-                {% gravatar request.user.email 30 '' 'gravatar rounded-full' %}
-                {% endif %}
-                <span
-                    class="text-[1.6rem] font-[600]"><span
-                    class="">{{ request.user.username }}</span> ({{ request.user|score|default:"0" }} Pts)
-                </span>
-            </a>
+            <li class="h-[80px] flex justify-center items-center ">
+                <button id="dropdownButton" class="relative flex items-center sm:gap-3 mr-[30px]" type="button">
+                    {% if request.user.userprofile.avatar %}
+                    <img src="{{ request.user.userprofile.avatar }}" class="h-[30px] w-[30px] rounded-full ">
+                    {% elif request.user.socialaccount_set.all.0.get_avatar_url %}
+                    <img src="{{ request.user.socialaccount_set.all.0.get_avatar_url }}"
+                        class="h-[30px] w-[30px] rounded-full ">
+                    {% else %}
+                    {% gravatar request.user.email 30 '' 'gravatar rounded-full' %}
+                    {% endif %}
+                    <span
+                        class="absolute -right-[17px] -bottom-[25px] lg:-right-[25px] lg:-bottom-[25px] sm:static whitespace-nowrap"><span
+                            class="">{{ request.user.username }}</span> ({{ request.user|score|default:"0" }} Pts)
+                        <i class="fa fa-caret-down text-red-500"></i>
+                    </span>
+                </button>
+                <!-- Dropdown for User Avatar -->
+                <div id="dropdownMenu" class="z-50 hidden absolute bg-white top-32 right-5">
+                    <ul class="flex flex-col gap-2 px-8 py-4 border shadow-xl rounded-lg left-auto">
+                        <li>
+                            <a href="/accounts/profile/">
+                                <i class="fa fa-user fa-fw"></i> {% trans "User Profile" %}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{% env 'EXTENSION_URL' %}" target="_new">
+                                <i class="fa fa-chrome fa-fw"></i>
+                                {% trans "Add to chrome" %}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/start">
+                                <i class="fa fa-play fa-fw"></i> {% trans "Start a Bug Hunt" %}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/social">
+                                <i class="fa fa-share fa-fw"></i>
+                                {% trans "Social" %}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/accounts/password/change/">
+                                <i class="fa fa-gear fa-fw"></i> {% trans "Change Password" %}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="/invite/">
+                                <i class="fa fa-paper-plane fa-fw"></i> {% trans "Invite Friends" %}
+                            </a>
+                        </li>
+                        <li>
+                            <a href="{% url 'company_view' %}">
+                                <i class="fa fa-building fa-fw"></i> {% trans "Company Dashboard" %}
+                            </a>
+                        </li>
+                        <!-- divider -->
+                        <li class="border my-4 -mx-8"></li>
+                        <li>
+                            <a href="/accounts/logout/">
+                                <i class="fa fa-sign-out fa-fw"></i> {% trans "Logout" %}
+                            </a>
+                        </li>
+                    </ul>
+                </div>
+            </li>
             {% else %}
-
-
             <!-- Sign up and Log in Buttons -->
-            <div class="flex column items-center gap-[8px]">
+            <div class="lg:!flex h-[80px] justify-center items-center">
                 <a href="/accounts/signup"
-                    class="lg:!inline-block bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[25px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline rounded-xl tracking-wide">
-                    {% trans "Signup" %}
-                </a>
-                <a href="/accounts/login"
-                    class="lg:!inline-block bg-red-500 hover:bg-red-600 h-[38px] py-[8px] px-[25px] whitespace-nowrap !text-2xl font-bold text-white leading-[21px] cursor-pointer hover:text-white hover:no-underline rounded-xl tracking-wide">
-                    {% trans "Login" %}
-                </a>
+                    class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
+                    {% trans "Signup" %}</a>
+                <a href="/accounts/login" data-toggle="modal"
+                    class="h-[38px] px-[25px] py-[9px] bg-red-500 hover:bg-red-600 hover:no-underline text-white font-bold text-2xl mr-[20px] hover:text-white">
+                    {%trans "Login" %}</a>
             </div>
+            <!-- Log in icon -->
+            <a href="/accounts/login" class="block sm:hidden mr-[30px]">
+                <i class="fa fa-user !text-5xl text-red-500"></i>
+            </a>
             {% endif %}
 
-
         </div>
     </div>
 </nav>
\ No newline at end of file