diff --git a/web/src/components/MarkdownRenderer.vue b/web/src/components/MarkdownRenderer.vue
index cdd70e96..f0074d57 100644
--- a/web/src/components/MarkdownRenderer.vue
+++ b/web/src/components/MarkdownRenderer.vue
@@ -24,29 +24,23 @@ export default {
   },
   mounted() {
     const markdownIt = new MarkdownIt({
-      html: false,        // Enable HTML tags in source
-      xhtmlOut: true,        // Use '/' to close single tags (<br />).
-      // This is only for full CommonMark compatibility.
-      breaks: true,        // Convert '\n' in paragraphs into <br>
-      // langPrefix: 'language-',  // CSS language prefix for fenced blocks. Can be
-      // useful for external highlighters.
-      linkify: true,        // Autoconvert URL-like text to links
-
-      // Enable some language-neutral replacement + quotes beautification
-      // For the full list of replacements, see https://github.com/markdown-it/markdown-it/blob/master/lib/rules_core/replacements.js
+      html: false,        
+      xhtmlOut: true,        
+      breaks: true,
+      linkify: true,
       typographer: true,
       highlight: (str, lang) => {
         if (lang && hljs.getLanguage(lang)) {
           try {
             return (
-              '<pre class="hljs rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
+              '<pre class="hljs p-4 overflow-x-auto  rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
               hljs.highlight(lang, str, true).value +
               '</code></pre>'
             );
           } catch (__) { }
         }
         return (
-          '<pre class="hljs rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
+          '<pre class="hljs p-4 overflow-x-auto rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
           markdownIt.utils.escapeHtml(str) +
           '</code></pre>'
         );
@@ -62,14 +56,14 @@ export default {
           if (lang && hljs.getLanguage(lang)) {
             try {
               return (
-                '<pre class="hljs rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
+                '<pre class="hljs p-4 overflow-x-auto rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
                 hljs.highlight(lang, str, true).value +
                 '</code></pre>'
               );
             } catch (__) { }
           }
           return (
-            '<pre class="hljs rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
+            '<pre class="hljs p-4 overflow-x-auto rounded-lg dark:bg-bg-dark-code-block bg-bg-light-code-block shadow-lg"><code>' +
             markdownIt.utils.escapeHtml(str) +
             '</code></pre>'
           );
@@ -82,20 +76,3 @@ export default {
 };
 </script>
   
-<style>
-/* Add styles for code highlighting */
-.hljs {
-  display: block;
-  overflow-x: auto;
-  padding: 0.5em;
-  background: #f5f5f5;
-}
-
-.hljs code {
-  display: inline;
-  padding: 0;
-  border: none;
-  background: none;
-}
-</style>
-  
\ No newline at end of file
diff --git a/web/src/components/Message.vue b/web/src/components/Message.vue
index b0597fff..ab28c228 100644
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@@ -13,9 +13,10 @@
         </div>
         <div class="-mt-4  ml-10 mr-0 pt-1 px-2 ">
             <!-- CONTENT/MESSAGE -->
-            <MarkdownRenderer v-if="!editMsgMode" :markdown-text="message.content"></MarkdownRenderer>
-            <textarea v-if="editMsgMode" rows="4"
+            <MarkdownRenderer ref="mdRender" v-if="!editMsgMode" :markdown-text="message.content"></MarkdownRenderer>
+            <textarea v-if="editMsgMode" ref="mdTextarea" :rows="4"
                 class="block p-2.5 w-full text-sm text-gray-900 bg-gray-50 rounded-lg border border-gray-300 focus:ring-blue-500 focus:border-blue-500 dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 dark:text-white dark:focus:ring-blue-500 dark:focus:border-blue-500"
+                :style="{minHeight:mdRenderHeight+`px`}"
                 placeholder="Enter message here..." v-model="new_message_content"></textarea>
         </div>
         <div class="invisible group-hover:visible flex flex-row mt-3 -mb-2">
@@ -98,6 +99,7 @@ export default {
             showConfirmation: false,
             editMsgMode: false,
             deleteMsgMode: false,
+            mdRenderHeight:Number
 
         }
     }, mounted() {
@@ -105,8 +107,12 @@ export default {
         this.new_message_content = this.message.content
         nextTick(() => {
             feather.replace()
-
+           
+        this.mdRenderHeight=this.$refs.mdRender.$el.offsetHeight
+           
+            
         })
+        
     }, methods: {
         copyContentToClipboard() {
             this.$emit('copy', this.message.content)
@@ -145,17 +151,16 @@ export default {
         showConfirmation() {
             nextTick(() => {
                 feather.replace()
-
+               
             })
         },
-        content(val) {
-            this.new_message_content = this.message.content
-        
-        },
+
         editMsgMode(val){
+           
             if(!val){
                 this.new_message_content = this.message.content 
             }
+
             nextTick(() => {
                 feather.replace()
 
@@ -167,12 +172,8 @@ export default {
 
             })
         },
-    },
-    computed: {
-        content() {
-            return this.message.content
-        }
     }
 
+
 }
 </script>
\ No newline at end of file