diff --git a/components.d.ts b/components.d.ts
index 1813313..680c1d0 100644
--- a/components.d.ts
+++ b/components.d.ts
@@ -11,6 +11,7 @@ declare module 'vue' {
     ChatMessage: typeof import('./src/components/ChatMessage.vue')['default']
     ChatWidget: typeof import('./src/components/ChatWidget.vue')['default']
     ChatWidgetOld: typeof import('./src/components/ChatWidgetOld.vue')['default']
+    CodeBlock: typeof import('./src/components/CodeBlock.vue')['default']
     Collections: typeof import('./src/components/Collections.vue')['default']
     Content: typeof import('./src/components/Content.vue')['default']
     ElAlert: typeof import('element-plus/es')['ElAlert']
@@ -21,6 +22,7 @@ declare module 'vue' {
     ElCollapse: typeof import('element-plus/es')['ElCollapse']
     ElCollapseItem: typeof import('element-plus/es')['ElCollapseItem']
     ElContainer: typeof import('element-plus/es')['ElContainer']
+    ElContainter: typeof import('element-plus/es')['ElContainter']
     ElDescriptions: typeof import('element-plus/es')['ElDescriptions']
     ElDescriptionsItem: typeof import('element-plus/es')['ElDescriptionsItem']
     ElDivider: typeof import('element-plus/es')['ElDivider']
@@ -38,10 +40,12 @@ declare module 'vue' {
     ElMenuItem: typeof import('element-plus/es')['ElMenuItem']
     ElRow: typeof import('element-plus/es')['ElRow']
     ElScrollbar: typeof import('element-plus/es')['ElScrollbar']
+    ElTag: typeof import('element-plus/es')['ElTag']
     ElTooltip: typeof import('element-plus/es')['ElTooltip']
     GlossarySearchNav: typeof import('./src/components/GlossarySearchNav.vue')['default']
     HeaderNav: typeof import('./src/components/HeaderNav.vue')['default']
     Menu: typeof import('./src/components/Menu.vue')['default']
+    MessageDocsContent: typeof import('./src/components/MessageDocsContent.vue')['default']
     MessageDocsSearchNav: typeof import('./src/components/MessageDocsSearchNav.vue')['default']
     Preview: typeof import('./src/components/Preview.vue')['default']
     RouterLink: typeof import('vue-router')['RouterLink']
diff --git a/src/components/CodeBlock.vue b/src/components/CodeBlock.vue
new file mode 100644
index 0000000..a6cc2cd
--- /dev/null
+++ b/src/components/CodeBlock.vue
@@ -0,0 +1,258 @@
+<!--
+  - Open Bank Project -  API Explorer II
+  - Copyright (C) 2023-2024, TESOBE GmbH
+  -
+    <div v-if="copyable" class="code-block-header">
+      <button 
+        @click="copyToClipboard" 
+        class="copy-button"
+        :class="{ 'copied': copied }"
+      >
+        <el-icon v-if="!copied" class="icon"><DocumentCopy /></el-icon>
+        <el-icon v-else class="icon"><Check /></el-icon>
+        <span v-if="!copied">Copy</span>
+        <span v-else>Copied!</span>
+      </button>
+    </div>rogram is free software: you can redistribute it and/or modify
+  - it under the terms of the GNU Affero General Public License as published by
+  - the Free Software Foundation, either version 3 of the License, or
+  - (at your option) any later version.
+  -
+  - This program is distributed in the hope that it will be useful,
+  - but WITHOUT ANY WARRANTY; without even the implied warranty of
+  - MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+  - GNU Affero General Public License for more details.
+  -
+  - You should have received a copy of the GNU Affero General Public License
+  - along with this program.  If not, see <http://www.gnu.org/licenses/>.
+  -
+  - Email: contact@tesobe.com
+  - TESOBE GmbH
+  - Osloerstrasse 16/17
+  - Berlin 13359, Germany
+  -
+  -   This product includes software developed at
+  -   TESOBE (http://www.tesobe.com/)
+  -
+  -->
+
+<script setup lang="ts">
+import { ref, onMounted, onUpdated, nextTick } from 'vue'
+import { DocumentCopy, Check } from '@element-plus/icons-vue'
+
+// Declare global hljs
+declare global {
+  interface Window {
+    hljs: {
+      highlightElement: (element: HTMLElement) => void
+    }
+  }
+}
+
+interface Props {
+  code: any
+  language?: string
+  copyable?: boolean
+}
+
+const props = withDefaults(defineProps<Props>(), {
+  language: 'json',
+  copyable: false
+})
+
+const codeBlockRef = ref<HTMLElement>()
+const copied = ref(false)
+
+const highlight = async () => {
+  await nextTick()
+  if (codeBlockRef.value && window.hljs) {
+    const codeElements = codeBlockRef.value.querySelectorAll('pre code')
+    codeElements.forEach((block) => {
+      window.hljs.highlightElement(block as HTMLElement)
+    })
+  }
+}
+
+const copyToClipboard = async () => {
+  try {
+    await navigator.clipboard.writeText(formattedCode)
+    copied.value = true
+    setTimeout(() => {
+      copied.value = false
+    }, 2000)
+  } catch (err) {
+    console.error('Failed to copy: ', err)
+  }
+}
+
+onMounted(() => {
+  highlight()
+})
+
+onUpdated(() => {
+  highlight()
+})
+
+const formattedCode = typeof props.code === 'string' 
+  ? props.code 
+  : JSON.stringify(props.code, null, 2)
+</script>
+
+<template>
+  <div ref="codeBlockRef" class="code-block">
+    <div v-if="copyable" class="code-block-header">
+      <button 
+        @click="copyToClipboard" 
+        class="copy-button"
+        :class="{ 'copied': copied }"
+      >
+        <span v-if="!copied">
+          <el-icon :size="10">
+            <DocumentCopy /> 
+          </el-icon>
+          Copy
+        </span>
+        <span v-else>
+          <el-icon :size="10">
+            <Check /> 
+          </el-icon>
+          Copied!
+        </span>
+      </button>
+    </div>
+    <div class="code-container">
+      <pre><code :class="language">{{ formattedCode }}</code></pre>
+    </div>
+  </div>
+</template>
+
+<style scoped>
+.code-block {
+  margin: 1rem 0;
+  border-radius: 8px;
+  overflow: hidden;
+  background: #1e1e1e;
+  border: 1px solid #333;
+  position: relative;
+}
+
+.code-block-header {
+  background: #2d2d2d;
+  padding: 0.5rem 1rem;
+  border-bottom: 1px solid #333;
+  display: flex;
+  justify-content: flex-end;
+}
+
+.copy-button {
+  background: #444;
+  border: 1px solid #666;
+  color: #ddd;
+  padding: 0.25rem 0.75rem;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 12px;
+  transition: all 0.2s ease;
+  display: flex;
+  align-items: center;
+  gap: 0.25rem;
+}
+
+.copy-button .icon {
+  font-size: 14px;
+}
+
+.copy-button:hover {
+  background: #555;
+  border-color: #777;
+}
+
+.copy-button.copied {
+  background: #4caf50;
+  border-color: #4caf50;
+  color: white;
+}
+
+.code-container {
+  max-height: 500px;
+  overflow-y: auto;
+}
+
+.code-container pre {
+  margin: 0;
+  padding: 1.5rem;
+  background: #1e1e1e;
+  color: #ddd;
+  font-family: 'Fira Code', 'Courier New', monospace;
+  font-size: 14px;
+  line-height: 1.5;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-wrap: break-word;
+}
+
+.code-container code {
+  background: transparent;
+  padding: 0;
+  border-radius: 0;
+  font-family: inherit;
+  font-size: inherit;
+}
+
+/* Custom scrollbar for code blocks */
+.code-container::-webkit-scrollbar {
+  width: 8px;
+}
+
+.code-container::-webkit-scrollbar-track {
+  background: #2d2d2d;
+}
+
+.code-container::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 4px;
+}
+
+.code-container::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+.code-container pre::-webkit-scrollbar {
+  height: 8px;
+  width: 8px;
+}
+
+.code-container pre::-webkit-scrollbar-track {
+  background: #2d2d2d;
+}
+
+.code-container pre::-webkit-scrollbar-thumb {
+  background: #555;
+  border-radius: 4px;
+}
+
+.code-container pre::-webkit-scrollbar-thumb:hover {
+  background: #777;
+}
+
+/* Syntax highlighting enhancements */
+.code-block :deep(.hljs-string) {
+  color: #98c379;
+}
+
+.code-block :deep(.hljs-number) {
+  color: #d19a66;
+}
+
+.code-block :deep(.hljs-literal) {
+  color: #56b6c2;
+}
+
+.code-block :deep(.hljs-attr) {
+  color: #e06c75;
+}
+
+.code-block :deep(.hljs-punctuation) {
+  color: #abb2bf;
+}
+</style>
\ No newline at end of file
diff --git a/src/components/Preview.vue b/src/components/Preview.vue
index 76fbb9d..cf8f081 100644
--- a/src/components/Preview.vue
+++ b/src/components/Preview.vue
@@ -296,9 +296,10 @@ const onError = (error) => {
         <JsonEditorVue
           v-model="exampleRequestBody"
           :stringified="true"
-          :mode="Mode.tree"
+          :mode="Mode.text"
           v-bind="{/* local props & attrs */}"
           :onChange="onJsonEditorChange"
+          :mainMenuBar="false"
         />
       </div>
       
diff --git a/src/router/index.ts b/src/router/index.ts
index 8675f9b..07cf1c0 100644
--- a/src/router/index.ts
+++ b/src/router/index.ts
@@ -36,6 +36,7 @@ import InternalServerErrorView from '../views/InternalServerErrorView.vue'
 import APIServerErrorView from '../views/APIServerErrorView.vue'
 import APIServerStatusView from '../views/APIServerStatusView.vue'
 import { isServerUp } from '../obp'
+import MessageDocsContent from '@/components/CodeBlock.vue'
 
 export default async function router(): Promise<any> {
   const isServerActive = await isServerUp()
@@ -60,7 +61,7 @@ export default async function router(): Promise<any> {
       {
         path: '/message-docs/:id',
         name: 'message-docs',
-        component: isServerActive ? MessageDocsView : InternalServerErrorView
+        component: isServerActive ? MessageDocsView : InternalServerErrorView,
       },
       {
         path: '/operationid',
diff --git a/src/views/MessageDocsView.vue b/src/views/MessageDocsView.vue
index 20b5659..6144377 100644
--- a/src/views/MessageDocsView.vue
+++ b/src/views/MessageDocsView.vue
@@ -31,11 +31,15 @@ import { useRoute } from 'vue-router'
 import SearchNav from '../components/MessageDocsSearchNav.vue'
 import { connectors } from '../obp/message-docs'
 import { obpGroupedMessageDocsKey } from '@/obp/keys';
+import MessageDocsSearchNav from '../components/MessageDocsSearchNav.vue';
+import CodeBlock from '../components/CodeBlock.vue';
 
 let connector = connectors[0]
 const route = useRoute()
 const groupedMessageDocs = ref(inject(obpGroupedMessageDocsKey)!)
-const messageDocs = ref({})
+const messageDocs = ref(null as any)
+
+const activeNames = ref(['1', '2', '3', '4', '5', '6'])
 
 onBeforeMount(() => {
   setDoc()
@@ -64,68 +68,129 @@ function showDependentEndpoints(value: any) {
 </script>
 
 <template>
-  <el-container>
+  <el-container class="root">
     <el-aside class="search-nav" width="20%">
       <SearchNav />
     </el-aside>
     <el-main>
-      <el-container class="main">
-        <el-container>
-          <main>
-            <el-backtop :right="100" :bottom="100" target="main" />
-            <div v-for="(group, key) of messageDocs" :key="key">
-              <div v-for="(value, key) of group" :key="value">
-                <el-divider content-position="left">{{ value.process }}</el-divider>
-                <a v-bind:href="`#${value.process}`" :id="value.process">
-                  <h2>{{ value.description }}</h2>
-                </a>
-                <el-descriptions direction="vertical" :column="1" border>
-                  <el-descriptions-item label="Outbound Topic">
-                    {{ value.outbound_topic }}
-                  </el-descriptions-item>
-                  <el-descriptions-item label="Inbound Topic">
-                    {{ value.inbound_topic }}
-                  </el-descriptions-item>
-                  <el-descriptions-item label="Outbound Message">
-                    <pre>{{ JSON.stringify(value.example_outbound_message, null, 4) }}</pre>
-                  </el-descriptions-item>
-                  <el-descriptions-item label="Inbound Message">
-                    <pre>{{ JSON.stringify(value.example_inbound_message, null, 4) }}</pre>
-                  </el-descriptions-item>
-                  <el-descriptions-item v-if="showRequiredFieldInfo(value.requiredFieldInfo)" label="Required Fields">
-                    <pre>{{ JSON.stringify(value.requiredFieldInfo, null, 4) }}</pre>
-                  </el-descriptions-item>
-                  <el-descriptions-item v-if="showDependentEndpoints(value.dependent_endpoints)"
-                    label="Dependent Endpoints">
-                    <ul>
-                      <li v-for="(endpoint, key) of value.dependent_endpoints">
-                        {{ endpoint.version }}: {{ endpoint.name }}
-                      </li>
-                    </ul>
-                  </el-descriptions-item>
-                </el-descriptions>
-                <el-divider content-position="right">{{ value.process }}</el-divider>
-                <br />
-                <br />
-                <br />
-                <br />
+      <el-container class="main" direction="vertical">
+        <div v-for="(group, key) of messageDocs" :key="key">
+          <div v-for="(value, key) of group" :key="value">
+            <el-divider></el-divider>
+            <header>
+
+            </header>
+            <a v-bind:href="`#${value.process}`" :id="value.process">
+              <h2>{{ value.process }}</h2>
+            </a>
+            <p>{{ value.description }}</p>
+
+            <section class="topics">
+              <div>
+                <strong>Outbound Topic: </strong>
+                <el-tag v-if="value.outbound_topic" type="info" round>{{ value.outbound_topic }}</el-tag>
+                <el-tag v-else type="error" round>None</el-tag>
               </div>
-            </div>
-          </main>
-        </el-container>
+              <div>
+                <strong>Inbound Topic: </strong>
+                <el-tag v-if="value.inbound_topic" type="info" round>{{ value.inbound_topic }}</el-tag>
+                <el-tag v-else type="error" round>None</el-tag>
+              </div>
+            </section>
+
+            <section>
+              <h3>Example Outbound Message</h3>
+              <CodeBlock :code="value.example_outbound_message" copyable />
+            </section>
+
+            <section>
+              <h3>Example Inbound Message</h3>
+              <CodeBlock :code="value.example_inbound_message" copyable />
+            </section>
+
+            <section v-if="showRequiredFieldInfo(value.requiredFieldInfo)">
+              <h3>Required Fields</h3>
+              <CodeBlock :code="value.requiredFieldInfo" copyable />
+            </section>
+
+            <section v-if="showDependentEndpoints(value.dependent_endpoints)">
+              <h3>Dependent Endpoints</h3>
+              <ul>
+                <li v-for="endpoint in value.dependent_endpoints" :key="endpoint.name">
+                  {{ endpoint.version }} — {{ endpoint.name }}
+                </li>
+              </ul>
+            </section>
+          </div>
+        </div>
+
       </el-container>
     </el-main>
   </el-container>
+
+  <!-- <el-container>
+    <el-aside class="search-nav" width="20%">
+      <MessageDocsSearchNav />
+    </el-aside>
+    <el-main>
+      <el-backtop :right="100" :bottom="100" target="main" />
+      <div v-for="(group, key) of messageDocs" :key="key">
+        <div v-for="(value, key) of group" :key="value">
+          <el-divider content-position="left">{{ value.process }}</el-divider>
+          <a v-bind:href="`#${value.process}`" :id="value.process">
+            <h2>{{ value.description }}</h2>
+          </a>
+          <el-collapse v-model="activeNames" @change="handleChange">
+            <el-collapse-item title="Outbound Topic" name="1">
+              {{ value.outbound_topic }}
+            </el-collapse-item>
+            <el-collapse-item title="Inbound Topic" name="2">
+              {{ value.inbound_topic }}
+            </el-collapse-item>
+            <el-collapse-item title="Outbound Message" name="3">
+              <pre>{{ JSON.stringify(value.example_outbound_message, null, 4) }}</pre>
+            </el-collapse-item>
+            <el-collapse-item title="Inbound Message" name="4">
+              <pre>{{ JSON.stringify(value.example_inbound_message, null, 4) }}</pre>
+            </el-collapse-item>
+            <el-collapse-item v-if="showRequiredFieldInfo(value.requiredFieldInfo)" title="Required Fields" name="5">
+              <pre>{{ JSON.stringify(value.requiredFieldInfo, null, 4) }}</pre>
+            </el-collapse-item>
+            <el-collapse-item v-if="showDependentEndpoints(value.dependent_endpoints)" title="Dependent Endpoints"
+              name="6">
+              <ul>
+                <li v-for="(endpoint, key) of value.dependent_endpoints">
+                  {{ endpoint.version }}: {{ endpoint.name }}
+                </li>
+              </ul>
+            </el-collapse-item>
+          </el-collapse>
+          <el-divider content-position="right">{{ value.process }}</el-divider>
+          <br />
+          <br />
+          <br />
+          <br />
+        </div>
+      </div>
+    </el-main>
+  </el-container> -->
 </template>
 
 <style scoped>
+.root {
+  height: 100%;
+}
+
 .main {
-  max-height: 90vh;
+  height: 100%;
+  overflow-y: auto;
+  flex-direction: column;
 }
 
-template {
-  overflow: auto;
-  max-height: 900px;
+.search-nav {
+  height: 100%;
+  max-height: 100%;
+  overflow: hidden;
 }
 
 main {
@@ -134,13 +199,12 @@ main {
   font-family: 'Roboto';
 }
 
-span {
-  font-size: 28px;
-}
+
 
 div {
   font-size: 14px;
 }
+
 pre {
   font-family: 'Roboto';
 }
@@ -154,7 +218,7 @@ a {
   color: #39455f;
 }
 
-.content :deep(a) {
+/* .content :deep(a) {
   text-decoration: none;
   color: #ffffff;
   font-family: 'Roboto';
@@ -162,7 +226,7 @@ a {
   border-radius: 3px;
   background-color: #52b165;
   padding: 1px;
-}
+} */
 
 .content :deep(a):hover {
   background-color: #39455f;