diff --git a/events.html b/events.html
index 0bccf95a..817ce2f0 100644
--- a/events.html
+++ b/events.html
@@ -64,17 +64,7 @@
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
   <body>
-    <div class="dropdown hide">
-      <ul class="dropdown-list">
-        <li class="dropdown-item dropdown-link" id="myprofile-option">
-          My Profile
-        </li>
-        <hr class="line" />
-        <li class="dropdown-item dropdown-link" id="signout-option">
-          Sign out
-        </li>
-      </ul>
-    </div>
+    <div class="dropdown hide" id="dropdown"></div>
     <nav>
       <div class="hamburger">
         <span class="bar"></span>
@@ -288,9 +278,12 @@ <h3 class="info-note">
         </a>
       </p>
     </footer>
+    <script src="/js/utils.js"></script>
+    <script src="js/dropdown.js"></script>
     <script type="module" src="js/user.js"></script>
     <script src="js/navbar.js"></script>
     <script src="js/darkmode.js"></script>
+
     <script type="module" src="js/fetchUserData.js" defer></script>
   </body>
 </html>
diff --git a/index.html b/index.html
index bf8c7a27..9c38e511 100644
--- a/index.html
+++ b/index.html
@@ -79,39 +79,7 @@
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
   <body>
-    <div class="dropdown hide">
-      <ul class="dropdown-list">
-        <li class="dropdown-item">
-          <a class="dropdown-link" href="https://www.realdevsquad.com/">
-            Home
-          </a>
-        </li>
-        <li class="dropdown-item">
-          <a class="dropdown-link" href="https://my.realdevsquad.com/">
-            Status
-          </a>
-        </li>
-        <li class="dropdown-item">
-          <a class="dropdown-link" href="https://my.realdevsquad.com/profile">
-            Profile
-          </a>
-        </li>
-        <li class="dropdown-item">
-          <a class="dropdown-link" href="https://my.realdevsquad.com/tasks">
-            Tasks
-          </a>
-        </li>
-        <li class="dropdown-item">
-          <a class="dropdown-link" href="https://my.realdevsquad.com/identity">
-            Identity
-          </a>
-        </li>
-        <hr class="line" />
-        <li class="dropdown-item dropdown-link" id="signout-option">
-          Sign out
-        </li>
-      </ul>
-    </div>
+    <div class="dropdown hide" id="dropdown"></div>
     <button id="scroll-to-top-btn">
       <img src="./img/arrow_up.svg" alt="scroll to top button" />
     </button>
@@ -682,6 +650,7 @@ <h3 class="info-note">
       </p>
     </footer>
     <script src="js/utils.js"></script>
+    <script src="js/dropdown.js"></script>
     <script src="https://api.mapbox.com/mapbox-gl-js/v2.10.0/mapbox-gl.js"></script>
     <script type="module" src="js/index.js"></script>
     <script type="module" src="js/animate.js"></script>
diff --git a/intro.html b/intro.html
index 981b6af1..f055b224 100644
--- a/intro.html
+++ b/intro.html
@@ -23,19 +23,7 @@
     <script src="/js/analytics.js"></script>
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
   <body>
-    <div class="dropdown hide">
-      <ul class="dropdown-list">
-        <li class="dropdown-item">
-          <a class="dropdown-link" href="https://my.realdevsquad.com/">
-            My Profile
-          </a>
-        </li>
-        <hr class="line" />
-        <li class="dropdown-item dropdown-link" id="signout-option">
-          Sign out
-        </li>
-      </ul>
-    </div>
+    <div class="dropdown hide" id="dropdown"></div>
     <nav>
       <div class="hamburger">
         <span class="bar"></span>
@@ -119,8 +107,9 @@ <h1 class="loading">Loading...</h1>
         >
       </p>
     </footer>
-    <script src="js/navbar.js"></script>
     <script src="/js/utils.js"></script>
+    <script src="js/dropdown.js"></script>
+    <script src="js/navbar.js"></script>
     <script type="module" src="/js/intro.js"></script>
     <script type="module" src="js/fetchUserData.js" defer></script>
   </body>
diff --git a/join.html b/join.html
index e58e6ec4..6a5ad6ff 100644
--- a/join.html
+++ b/join.html
@@ -77,19 +77,7 @@
           <style>
          .commit-tease,
          .user-profile-mini-avatar,
          .avatar,
          .vcard-details,
          .signup-prompt-bg {
            display: none !IMPORTANT;
          }
        </style>
         <script>
          document.addEventListener('DOMContentLoaded', function() {
            this.querySelectorAll('a').forEach(anchor => {
              anchor.addEventListener('click', e => {
                e.preventDefault();

                const redact = new URLSearchParams(window.location.search).get('redact');
                const hasExistingParams = anchor.href.includes('?');
                window.location.href = anchor.href + (hasExistingParams ? `&redact=${redact}` : `?redact=${redact}`);
              });
            });
          });
        </script>
 </head>
 
   <body>
-    <div class="dropdown hide">
-      <ul class="dropdown-list">
-        <li class="dropdown-item">
-          <a class="dropdown-link" href="https://my.realdevsquad.com/">
-            My Profile
-          </a>
-        </li>
-        <hr class="line" />
-        <li class="dropdown-item dropdown-link" id="signout-option">
-          Sign out
-        </li>
-      </ul>
-    </div>
+    <div class="dropdown hide" id="dropdown"></div>
     <button id="scroll-to-top-btn">
       <img src="./img/arrow_up.svg" alt="scroll to top button" />
     </button>
@@ -493,6 +481,7 @@ <h2 class="progress">Here is your personalized link</h2>
       </p>
     </footer>
     <script src="js/utils.js"></script>
+    <script src="js/dropdown.js"></script>
     <script type="module" src="js/index.js"></script>
     <script type="module" src="js/animate.js"></script>
     <script src="js/navbar.js"></script>
diff --git a/js/dropdown.js b/js/dropdown.js
new file mode 100644
index 00000000..27caafc0
--- /dev/null
+++ b/js/dropdown.js
@@ -0,0 +1,60 @@
+const DROPDOWN_OPTIONS = [
+  {
+    name: 'Home',
+    link: 'https://www.realdevsquad.com/',
+  },
+  {
+    name: 'Status',
+    link: 'https://my.realdevsquad.com/',
+  },
+  {
+    name: 'Profile',
+    link: 'https://my.realdevsquad.com/profile',
+  },
+  {
+    name: 'Tasks',
+    link: 'https://my.realdevsquad.com/tasks',
+  },
+  {
+    name: 'Identity',
+    link: 'https://my.realdevsquad.com/identity',
+  },
+];
+
+const generateDropDown = () => {
+  const dropdown = document.getElementById('dropdown');
+  const unorderedList = createElement({
+    type: 'ul',
+    classList: ['dropdown-list'],
+  });
+  DROPDOWN_OPTIONS.map((option) => {
+    const listElement = createElement({
+      type: 'li',
+      classList: ['dropdown-item'],
+    });
+    const anchorElement = createElement({
+      type: 'a',
+      classList: ['dropdown-link'],
+    });
+    anchorElement.href = `${option.link}`;
+    anchorElement.innerText = `${option.name}`;
+    listElement.append(anchorElement);
+    unorderedList.append(listElement);
+  });
+
+  const horizontalLine = createElement({
+    type: 'hr',
+    classList: ['line'],
+  });
+  const signOutElement = createElement({
+    type: 'li',
+    classList: ['dropdown-item', 'dropdown-link'],
+    id: 'signout-option',
+  });
+  signOutElement.innerText = 'Sign Out';
+  unorderedList.append(horizontalLine);
+  unorderedList.append(signOutElement);
+  dropdown.append(unorderedList);
+};
+
+generateDropDown();
