diff --git a/templates/includes/navbar.html b/templates/includes/navbar.html
index ccc41045..0efcf68b 100644
--- a/templates/includes/navbar.html
+++ b/templates/includes/navbar.html
@@ -11,13 +11,12 @@
 
     <div class="navbar-center hidden lg:flex">
         <ul class="menu menu-horizontal px-1">
-            <li><a href="#" id="predictLink">Predict</a></li>
+            <li><a href="#" role="button" class="btn btn-ghost" id="predictLink">Predict</a></li>
             <!-- <li><a href="{{ meta.server_url }}/package" id="packageLink">Package</a></li> -->
-            <li><a href="{{ meta.server_url }}/browse" id="browseLink">Browse</a></li>
-            <li>
-                <!-- <details>
-                    <summary>Browse Data</summary>
-                    <ul class="bg-base-100 rounded-t-none p-2 w-48 z-50">
+            <!--<li><a href="{{ meta.server_url }}/browse" id="browseLink">Browse</a></li>-->
+                <div class="dropdown dropdown-center">
+                    <div tabindex="0" role="button" class="btn btn-ghost">Browse</div>
+                    <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-1 w-52 p-2 shadow-sm">
                         <li><a href="{{ meta.server_url }}/pathway" id="pathwayLink">Pathway</a></li>
                         <li><a href="{{ meta.server_url }}/rule" id="ruleLink">Rule</a></li>
                         <li><a href="{{ meta.server_url }}/compound" id="compoundLink">Compound</a></li>
@@ -25,34 +24,24 @@
                         <li><a href="{{ meta.server_url }}/model" id="relative-reasoningLink">Model</a></li>
                         <li><a href="{{ meta.server_url }}/scenario" id="scenarioLink">Scenario</a></li>
                     </ul>
-                </details> -->
-            </li>
+                </div>
         </ul>
     </div>
 
     <div class="navbar-end">
-        <ul class="menu menu-horizontal px-1">
-            <button type="button" class="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&amp;]:block">⌘K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&amp;]:block dark:text-gray-400">Ctrl&nbsp;K</kbd></button>
-            {% if meta.user.username == 'anonymous' %}
-                <li><a href="{% url 'login' %}" id="loginButton">Login</a></li>
-            {% else %}
-                <li>
-                    <details>
-                        <summary id="loggedInButton">{{ user.username }}</summary>
-                        <ul class="bg-base-100 rounded-t-none p-2 w-48 z-50">
-                            <li><a href="{{ meta.user.url }}" id="accountbutton">My Account</a></li>
-                            <li class="divider"></li>
-                            <li>
-                                <form action="{% url 'logout' %}" method="post">
-                                    {% csrf_token %}
-                                    <input type="hidden" name="logout" value="true">
-                                    <button type="submit" class="btn btn-ghost btn-sm w-full">Logout</button>
-                                </form>
-                            </li>
-                        </ul>
-                    </details>
-                </li>
-            {% endif %}
-        </ul>
+        <button type="button" class="inline-flex items-center gap-1 rounded-full bg-gray-950/2 px-2 py-1 inset-ring inset-ring-gray-950/8 dark:bg-white/5 dark:inset-ring-white/2"><svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 16 16" class="-ml-0.5 size-4 fill-gray-600 dark:fill-gray-500"><path fill-rule="evenodd" d="M9.965 11.026a5 5 0 1 1 1.06-1.06l2.755 2.754a.75.75 0 1 1-1.06 1.06l-2.755-2.754ZM10.5 7a3.5 3.5 0 1 1-7 0 3.5 3.5 0 0 1 7 0Z" clip-rule="evenodd"></path></svg><kbd class="hidden font-sans text-xs/4 text-gray-500 dark:text-gray-400 [.os-macos_&amp;]:block">⌘K</kbd><kbd class="hidden font-sans text-xs/4 text-gray-500 not-[.os-macos_&amp;]:block dark:text-gray-400">Ctrl&nbsp;K</kbd></button>
+        {% if meta.user.username == 'anonymous' %}
+            <li><a href="{% url 'login' %}" id="loginButton">Login</a></li>
+        {% else %}
+            <div class="dropdown dropdown-end">
+                <div tabindex="0" role="button" class="btn btn-ghost m-1 btn-circle" id="loggedInButton">
+                    <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" class="lucide lucide-circle-user-icon lucide-circle-user"><circle cx="12" cy="12" r="10"/><circle cx="12" cy="10" r="3"/><path d="M7 20.662V19a2 2 0 0 1 2-2h6a2 2 0 0 1 2 2v1.662"/></svg>
+                </div>
+                <ul tabindex="-1" class="dropdown-content menu bg-base-100 rounded-box z-50 w-52 p-2 shadow-sm">
+                    <li><a href="{{ meta.user.url }}" id="accountbutton">Settings</a></li>
+                    <li><a href="{% url 'logout' %}" id="logoutButton">Logout</a></li>
+                </ul>
+            </div>
+        {% endif %}
     </div>
 </div>