diff --git a/Version b/Version
index 5328966..eb54abf 100644
--- a/Version
+++ b/Version
@@ -1 +1 @@
-3.3.62
\ No newline at end of file
+3.3.63
\ No newline at end of file
diff --git a/directory/Version b/directory/Version
index 8684498..492b167 100644
--- a/directory/Version
+++ b/directory/Version
@@ -1 +1 @@
-1.0.11
\ No newline at end of file
+1.0.12
\ No newline at end of file
diff --git a/directory/src/component/dropdown.jsx b/directory/src/component/dropdown.jsx
index 150c4cc..4240751 100644
--- a/directory/src/component/dropdown.jsx
+++ b/directory/src/component/dropdown.jsx
@@ -13,7 +13,7 @@ export default function Dropdown(props) {
 
   return (
     <>
-      <section className={`dropdown ${props.className} ${hidden ? '' : 'active'}`} >
+      <section className={`dropdown ${props.className ? props.className : ''} ${hidden ? '' : 'active'}`} >
         <section
           className='text'
           onClick={() => toggleDropdown()}
diff --git a/directory/src/component/popup.css b/directory/src/component/popup.css
index 83fc6bf..54350f6 100644
--- a/directory/src/component/popup.css
+++ b/directory/src/component/popup.css
@@ -35,7 +35,7 @@
 
 .popup.active {
   opacity: 1;
-  z-index: 1;
+  z-index: 10;
 }
 
 .popup .title {
@@ -58,6 +58,7 @@
 .popup .content {
   line-height: 1.3em;
   padding: 1rem 1rem 0 1rem;
+  user-select: text;
 }
 
 @media (max-width: 768px) {
diff --git a/directory/src/routes/root.css b/directory/src/routes/root.css
index c092da2..7a3c2d0 100644
--- a/directory/src/routes/root.css
+++ b/directory/src/routes/root.css
@@ -23,6 +23,7 @@
   align-items: center;
   flex-wrap: nowrap;
   justify-content: flex-start;
+  pointer-events: none;
 }
 
 .header .spacer {
@@ -73,6 +74,17 @@
   transform: translate(0, -100%) rotateZ(45deg) scaleX(0.5) translate(50%);
 }
 
+.extra-area {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+
+.navButton,
+.extra-area {
+  pointer-events: auto;
+}
+
 .drawer {
   position: fixed;
   top: 0;
@@ -162,55 +174,55 @@
 }
 
 .main .main-header .main-tab {
-    flex: auto;
-    white-space: pre;
-    user-select: none;
-    display: flex;
-    flex-direction: row;
-    justify-content: flex-end;
-    overflow: hidden;
-    z-index: 2;
+  flex: auto;
+  white-space: pre;
+  user-select: none;
+  display: flex;
+  flex-direction: row;
+  justify-content: flex-end;
+  overflow: hidden;
+  z-index: 2;
 }
 
 .main .main-header .main-tab .main-tab-item {
-    font-size: 1.25rem;
-    line-height: 3em;
-    font-weight: 700;
-    padding: 0 1rem;
-    text-transform: uppercase;
-    cursor: pointer; 
-    border-bottom: 0.3rem solid transparent;
-    display: inline-block;
-    cursor: pointer;
-    text-decoration: none;
-    overflow: hidden;
-    text-overflow: ellipsis;
+  font-size: 1.25rem;
+  line-height: 3em;
+  font-weight: 700;
+  padding: 0 1rem;
+  text-transform: uppercase;
+  cursor: pointer;
+  border-bottom: 0.3rem solid transparent;
+  display: inline-block;
+  cursor: pointer;
+  text-decoration: none;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .main .main-header .main-tab .main-tab-item .main-tab-text-wrapper {
-    overflow: hidden;
-    text-overflow: ellipsis;
+  overflow: hidden;
+  text-overflow: ellipsis;
 }
 
 .main .main-header .main-tab .main-tab-item.active .main-tab-text-wrapper,
 .main .main-header .main-tab .main-tab-item:hover .main-tab-text-wrapper,
 .main .main-header .main-tab .main-tab-item.active .text,
 .main .main-header .main-tab .main-tab-item:hover .text {
-    color: currentColor
+  color: currentColor;
 }
 
 .main .main-header .main-tab .main-tab-item.active {
-    border-bottom-color: currentColor;
+  border-bottom-color: currentColor;
 }
 
 .main .main-header .main-tab .main-tab-item.active,
 .main .main-header .main-tab .main-tab-item:hover {
-    color: var(--link-highlight-color);
+  color: var(--link-highlight-color);
 }
 
 .main .main-header .main-tab .main-tab-item .main-tab-text-wrapper {
-    color: var(--text-color);
-    transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+  color: var(--text-color);
+  transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
 }
 
 .main .main-icon {
@@ -222,21 +234,21 @@
 }
 
 .main .return-button {
-    position: absolute;
-    right: -4rem;
-    bottom: -24px;
-    color: var(--button-color);
-    transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
+  position: absolute;
+  right: -4rem;
+  bottom: -24px;
+  color: var(--button-color);
+  transition: color cubic-bezier(0.65, 0.05, 0.36, 1) 0.3s;
 }
 
 @media (max-width: 768px) {
-    .main .return-button {
-        right: -3.4rem;
-    }
+  .main .return-button {
+    right: -3.4rem;
+  }
 }
 
 .main .return-button:hover {
-    color: var(--text-color);
+  color: var(--text-color);
 }
 
 .footer {
diff --git a/directory/src/routes/root.jsx b/directory/src/routes/root.jsx
index df17dc9..4e703ba 100644
--- a/directory/src/routes/root.jsx
+++ b/directory/src/routes/root.jsx
@@ -86,8 +86,10 @@ export default function Root() {
           <section className='bar'></section>
         </section>
         <section className='spacer' />
-        {extraArea}
-        <LanguageDropdown />
+        <section className='extra-area'>
+          {extraArea}
+          <LanguageDropdown />
+        </section>
       </header>
       <nav className={`drawer ${drawerHidden ? '' : 'active'}`}>
         <section