diff --git a/src/main/resources/static/js/layout/accountDropdown.js b/src/main/resources/static/js/layout/accountDropdown.js
new file mode 100644
index 0000000000000000000000000000000000000000..f7c5077f80078f568727d3bff16a42c80d3a7722
--- /dev/null
+++ b/src/main/resources/static/js/layout/accountDropdown.js
@@ -0,0 +1,18 @@
+document.addEventListener('DOMContentLoaded', function() {
+    const accountOptions = document.getElementById('account-options');
+    const dropdownContent = document.getElementsByClassName('dropdown-content');
+
+    accountOptions.addEventListener('click', function (e) {
+            [...dropdownContent].forEach(dropdown => {
+                dropdown.style.display = dropdown.style.display ===
+                'block' ? 'none' : 'block'
+            });
+    });
+
+    //hide dropdown when user clicks outside of element
+    document.addEventListener('click', function(e) {
+        if (!accountOptions.contains(e.target)) {
+            [...dropdownContent].style.display = 'none';
+        }
+    });
+});
\ No newline at end of file
diff --git a/src/main/resources/static/js/layout/layout.js b/src/main/resources/static/js/layout/layout.js
deleted file mode 100644
index b6061aa1a6d1d8a174b12e20616ae394a0aa9405..0000000000000000000000000000000000000000
--- a/src/main/resources/static/js/layout/layout.js
+++ /dev/null
@@ -1,23 +0,0 @@
-document.addEventListener('DOMContentLoaded', function() {
-    const accountOptions = document.getElementsByClassName('account-options');
-    const dropdownContent = document.getElementsByClassName('dropdown-content');
-
-    accountOptions.addEventListener('click', function (e) {
-        if (window.innerWidth <= 768) {
-            e.preventDefault();
-            dropdownContent.style.display = dropdownContent.style.display ===
-            'block' ? 'none' : 'block';
-        }
-    });
-    document.addEventListener('click', function(e) {
-        if (!accountOptions.contains(e.target)) {
-            dropdownContent.style.display = 'none';
-        }
-    });
-    window.addEventListener('resize', function() {
-        if (window.innerWidth > 768) {
-            dropdownContent.style.display = '';
-        }
-    });
-
-});
\ No newline at end of file
diff --git a/src/main/resources/templates/layout/layout.html b/src/main/resources/templates/layout/layout.html
index 13cb3fd4f46c8b2671c6962cc44346f341528ea8..b71dc56bc155e03070b64f67e7a437b011235973 100644
--- a/src/main/resources/templates/layout/layout.html
+++ b/src/main/resources/templates/layout/layout.html
@@ -62,7 +62,7 @@
                     </div>
 
                     <!-- Profile -->
-                    <div class="account-options" id="dropdown">
+                    <div id="account-options">
                         <div sec:authorize="isAnonymous()">
                             <img src="/assets/navbarImages/profile.png" class="navIcons anonymous">
                             <span class="navText">Sign in</span>
@@ -123,6 +123,6 @@
         </div>
     </footer>
     <script th:replace="~{comments/commentFragment::commentScript}"></script>
-    <script src="/js/layout/layout.js"></script>
+    <script src="/js/layout/accountDropdown.js"></script>
 </body>
 </html>
\ No newline at end of file