diff --git a/src/components/GlossarySearchNav.vue b/src/components/GlossarySearchNav.vue
index 32b5198..b096ae4 100644
--- a/src/components/GlossarySearchNav.vue
+++ b/src/components/GlossarySearchNav.vue
@@ -33,17 +33,13 @@ import { useRoute } from 'vue-router';
 import { SEARCH_LINKS_COLOR as searchLinksColorSetting } from '../obp/style-setting';
 
 const route = useRoute()
-const activeKeys = ref([])
-const glossaryKeys = ref([])
-const alphabet = ref([])
+const activeKeys = ref<string[]>([])
+const glossaryKeys = ref<string[]>([])
 const searchLinksColor = ref(searchLinksColorSetting)
 const form = reactive({
   search: ''
 })
 
-const alphabetCharCodes = Array.from(Array(26)).map((e, i) => i + 65)
-alphabet.value = alphabetCharCodes.map((x) => String.fromCharCode(x))
-
 onBeforeMount(() => {
   const glossary = inject(obpGlossaryKey)!
   for (const item of glossary.glossary_items) {
@@ -60,17 +56,17 @@ onMounted(() => {
   let hash = route.hash;
   let elements = document.querySelectorAll(`a[href="${hash}"][class="glossary-router-link"]`)
   if (elements.length == 1) {
-    elements[0].click()
+    (elements[0] as HTMLElement).click()
   }
 })
 
-const filterKeys = (keys, key) => {
-  return keys.filter((title) => {
+const filterKeys = (keys: string[], key: string) => {
+  return keys.filter((title: string) => {
     return title.toLowerCase().includes(key.toLowerCase())
   })
 }
 
-const searchEvent = (event) => {
+const searchEvent = (event: string) => {
   if (event) {
     glossaryKeys.value = filterKeys(activeKeys.value, event).sort()
   } else {
@@ -81,52 +77,18 @@ const searchEvent = (event) => {
 
 <template>
   <el-input v-model="form.search" class="w-50 m-1" placeholder="Search" :prefix-icon="Search" @input="searchEvent" />
-  <div class="tabs">
-    <div class="alphabet">
-      <div v-for="value of alphabet" :key="value">
-        <a :id="value" class="alphabet-router-link" v-bind:href="`#${value.toLowerCase()}-quick-nav`">
-          <div class="alphabet-link">
-            {{ value }}
-          </div>
+  <div class="tab-items">
+    <div class="el-tabs--right">
+      <div v-for="value of glossaryKeys" :key="value" class="glossary-router-tab">
+        <a class="glossary-router-link" :id="`${value.charAt(0).toLowerCase()}-quick-nav`" v-bind:href="`#${value}`">
+          {{ value }}
         </a>
       </div>
     </div>
-    <div class="tab-items">
-      <div class="el-tabs--right">
-        <div v-for="value of glossaryKeys" :key="value" class="glossary-router-tab">
-          <a class="glossary-router-link" :id="`${value.charAt(0).toLowerCase()}-quick-nav`" v-bind:href="`#${value}`">
-            {{ value }}
-          </a>
-        </div>
-      </div>
-    </div>
   </div>
 </template>
 
 <style scoped>
-.tabs {
-  display: flex;
-}
-
-.alphabet {
-  padding: 10px 5px 5px 5px;
-  min-width: 25px;
-}
-
-.alphabet-link {
-  padding: 5px 0px 5px 0px;
-  width: 100%;
-  text-align: center;
-  cursor: pointer;
-}
-
-.alphabet-router-link {
-  font-size: 13px;
-  font-family: 'Roboto';
-  color: #39455f;
-  text-decoration: none;
-}
-
 .glossary-router-link {
   margin-left: 15px;
   font-size: 13px;
@@ -134,11 +96,18 @@ const searchEvent = (event) => {
   text-decoration: none;
   color: #39455f;
   display: inline-block;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
 }
 
 .glossary-router-tab {
   border-left: 2px solid var(--el-menu-border-color);
   line-height: 30px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .glossary-router-tab:hover,
@@ -147,14 +116,15 @@ const searchEvent = (event) => {
 }
 
 .glossary-router-tab:hover .glossary-router-link,
-.active-glossary-router-link,
-.alphabet-router-link:hover,
-.alphabet-link:hover .alphabet-router-link {
+.active-glossary-router-link {
   color: v-bind(searchLinksColor);
 }
 
 .tab-items {
   margin-top: 10px;
-  margin-right: -8px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
 }
 </style>
diff --git a/src/components/HeaderNav.vue b/src/components/HeaderNav.vue
index 49a86d3..c510a09 100644
--- a/src/components/HeaderNav.vue
+++ b/src/components/HeaderNav.vue
@@ -137,25 +137,31 @@ const getCurrentPath = () => {
       <a v-if="showObpApiManagerButton && hasObpApiManagerHost" v-bind:href="obpApiManagerHost" class="router-link" id="header-nav-api-manager">
         {{ $t('header.api_manager') }}
       </a>
-      <span class="el-dropdown-link">
-        <el-dropdown class="menu-right router-link" id="header-nav-more" @command="handleMore">
-          <span class="el-dropdown-link">
-            {{ $t('header.more') }}
-            <el-icon class="el-icon--right">
-              <arrow-down />
-            </el-icon>
-          </span>
-          <template #dropdown>
-            <el-dropdown-menu>
-              <el-dropdown-item v-for="value in obpApiVersions" :command="value" key="value">{{
-                value
-              }}</el-dropdown-item>
-              <el-dropdown-item v-for="value in obpMessageDocs" :command="value" key="value">
-                Message Docs for: {{ value }}</el-dropdown-item>
-            </el-dropdown-menu>
-          </template>
-        </el-dropdown>
-      </span>
+      <el-dropdown 
+        class="menu-right router-link" 
+        id="header-nav-more" 
+        @command="handleMore"
+        trigger="hover"
+        placement="bottom-end"
+        :teleported="true"
+        max-height="700px"
+      >
+        <span class="el-dropdown-link">
+          {{ $t('header.more') }}
+          <el-icon class="el-icon--right">
+            <arrow-down />
+          </el-icon>
+        </span>
+        <template #dropdown>
+          <el-dropdown-menu>
+            <el-dropdown-item v-for="value in obpApiVersions" :command="value" :key="value">{{
+              value
+            }}</el-dropdown-item>
+            <el-dropdown-item v-for="value in obpMessageDocs" :command="value" :key="value">
+              Message Docs for: {{ value }}</el-dropdown-item>
+          </el-dropdown-menu>
+        </template>
+      </el-dropdown>
       <!--<span class="el-dropdown-link">
         <RouterLink class="router-link" id="header-nav-spaces" to="/spaces">{{
           $t('header.spaces')
@@ -251,4 +257,17 @@ a.logoff-button {
 .el-dropdown-menu__item:hover {
   color: v-bind(headerLinksHoverColor) !important;
 }
+
+/* Fix dropdown menu overflow */
+.el-dropdown-menu {
+  max-height: 400px;
+  overflow-y: auto;
+}
+
+/* Ensure dropdown trigger behaves correctly */
+#header-nav-more .el-dropdown-link {
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
 </style>
diff --git a/src/components/MessageDocsSearchNav.vue b/src/components/MessageDocsSearchNav.vue
index b43354d..3cfd0dc 100644
--- a/src/components/MessageDocsSearchNav.vue
+++ b/src/components/MessageDocsSearchNav.vue
@@ -127,10 +127,17 @@ const setDocs = () => {
   text-decoration: none;
   color: #39455f;
   display: inline-block;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
 }
 
 .api-router-tab {
   border-left: 2px solid var(--el-menu-border-color);
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .api-router-tab:hover,
@@ -150,11 +157,18 @@ const setDocs = () => {
   text-decoration: none;
   color: #39455f;
   display: inline-block;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
+  max-width: 100%;
 }
 
 .message-docs-router-tab {
   border-left: 2px solid var(--el-menu-border-color);
   line-height: 30px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  word-break: break-word;
 }
 
 .message-docs-router-tab:hover,
diff --git a/src/views/MessageDocsView.vue b/src/views/MessageDocsView.vue
index 6144377..d36cfa8 100644
--- a/src/views/MessageDocsView.vue
+++ b/src/views/MessageDocsView.vue
@@ -68,12 +68,15 @@ function showDependentEndpoints(value: any) {
 </script>
 
 <template>
-  <el-container class="root">
+  <el-container class="message-docs-container">
     <el-aside class="search-nav" width="20%">
-      <SearchNav />
+      <el-scrollbar>
+        <SearchNav />
+      </el-scrollbar>
     </el-aside>
-    <el-main>
-      <el-container class="main" direction="vertical">
+    <el-main class="message-docs-content">
+      <el-scrollbar>
+        <el-backtop :right="100" :bottom="100" />
         <div v-for="(group, key) of messageDocs" :key="key">
           <div v-for="(value, key) of group" :key="value">
             <el-divider></el-divider>
@@ -123,8 +126,7 @@ function showDependentEndpoints(value: any) {
             </section>
           </div>
         </div>
-
-      </el-container>
+      </el-scrollbar>
     </el-main>
   </el-container>
 
@@ -177,45 +179,63 @@ function showDependentEndpoints(value: any) {
 </template>
 
 <style scoped>
-.root {
-  height: 100%;
+.message-docs-container {
+  height: calc(100vh - 60px);
 }
-
-.main {
-  height: 100%;
-  overflow-y: auto;
-  flex-direction: column;
+.search-nav :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden;
 }
-
-.search-nav {
-  height: 100%;
-  max-height: 100%;
-  overflow: hidden;
+.search-nav :deep(.el-scrollbar__view) {
+  padding: 10px;
 }
-
-main {
-  margin: 25px;
+.message-docs-content {
   color: #39455f;
   font-family: 'Roboto';
+  padding: 0;
+}
+.message-docs-content :deep(.el-scrollbar__wrap) {
+  overflow-x: hidden;
+}
+.message-docs-content :deep(.el-scrollbar__view) {
+  padding: 25px;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
+  box-sizing: border-box;
 }
 
+h2 {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
 
-
-div {
-  font-size: 14px;
+section {
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+  max-width: 100%;
 }
 
 pre {
   font-family: 'Roboto';
-}
-
-.content :deep(strong) {
-  font-family: 'Roboto';
+  max-width: 100%;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
 }
 
 a {
   text-decoration: none;
   color: #39455f;
+  word-wrap: break-word;
+  overflow-wrap: break-word;
+}
+
+div {
+  font-size: 14px;
+}
+
+.content :deep(strong) {
+  font-family: 'Roboto';
 }
 
 /* .content :deep(a) {