diff --git a/web/src/components/MarkdownRenderer.vue b/web/src/components/MarkdownRenderer.vue
index a8b6632d..3e97b25d 100644
--- a/web/src/components/MarkdownRenderer.vue
+++ b/web/src/components/MarkdownRenderer.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class=" break-all w-full">
+  <div class=" break-all ">
     <div v-html="renderedMarkdown" class=""></div>
   </div>
 </template>
@@ -32,36 +32,30 @@ const markdownIt = new MarkdownIt('commonmark', {
 
 
         return (
-          '<div class="hljs language-html break-all whitespace-pre  p-2 rounded-lg shadow-sm ">' +
+          '<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel  p-2 rounded-lg shadow-sm ">' +
           languageCapital +
 
-          '<pre class="break-all whitespace-pre p-1 overflow-x-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary ">' +
+          '<pre class=" hljs  p-1 rounded-md  break-all  grid grid-cols-1 ">' +
 
-          '<code>' +
+          '<code class="overflow-x-auto break-all scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary ">' +
           hljs.highlightAuto(str).value +
           '</code></pre>' + '</div>'
         );
 
       } catch (__) { }
     }
-    // return (
-    //   '<pre class="hljs p-4 overflow-x-auto rounded-lg shadow-sm scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary">' +
-    //   '<code>' +
-    //   markdownIt.utils.escapeHtml(str) +
-    //   '</code></pre>'
-    // );
-
 
     return (
-      '<div class="hljs language-html break-all whitespace-pre  p-2 rounded-lg shadow-sm ">' +
+      '<div class="bg-bg-light-tone-panel dark:bg-bg-dark-tone-panel  p-2 rounded-lg shadow-sm ">' +
       languageCapital +
 
-      '<pre class="break-all whitespace-pre p-1 overflow-x-auto scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary ">' +
+      '<pre class=" hljs  p-1 rounded-md  break-all  grid grid-cols-1 ">' +
 
-      '<code>' +
+      '<code class="overflow-x-auto break-all scrollbar-thin scrollbar-track-bg-light-tone scrollbar-thumb-bg-light-tone-panel hover:scrollbar-thumb-primary dark:scrollbar-track-bg-dark-tone dark:scrollbar-thumb-bg-dark-tone-panel dark:hover:scrollbar-thumb-primary active:scrollbar-thumb-secondary ">' +
       markdownIt.utils.escapeHtml(str) +
       '</code></pre>' + '</div>'
     );
+
   }
 }).use(emoji);
 
@@ -116,4 +110,4 @@ export default {
 };
 </script>
   
-<style></style>
\ No newline at end of file
+<style type='text/css'></style>
\ No newline at end of file
diff --git a/web/src/components/Message.vue b/web/src/components/Message.vue
index b9d48667..5ab6f58a 100644
--- a/web/src/components/Message.vue
+++ b/web/src/components/Message.vue
@@ -1,14 +1,14 @@
 <template>
     <div
-        class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex-row p-4 pb-2">
-        <div class="flex flex-row flex-grow gap-2">
-            <div class="flex-shrink-0">
+        class="group rounded-lg m-2 shadow-lg hover:border-primary dark:hover:border-primary hover:border-solid hover:border-2 border-2 border-transparent even:bg-bg-light-discussion-odd dark:even:bg-bg-dark-discussion-odd flex flex-col flex-grow flex-wrap overflow-x-hidden p-4 pb-2">
+        <div class="flex flex-row  gap-2 ">
+            <div class="flex-shrink-0 ">
                 <!-- AVATAR -->
                 <img :src="getImgUrl()" @error="defaultImg($event)" class="w-10 h-10 rounded-full object-fill text-red-700">
 
             </div>
 
-            <div class="flex flex-col flex-grow ">
+            <div class="flex flex-col w-full flex-grow-0 ">
                 <div class="flex flex-row flex-grow items-start ">
                     <!-- SENDER NAME -->
                     <div class="flex ">
@@ -19,7 +19,7 @@
 
                     </div>
                     <!-- MESSAGE CONTROLS -->
-                    <div class="flex-row justify-end">
+                    <div class="flex-row justify-end mx-2">
                         <div class="invisible group-hover:visible flex flex-row ">
                             <!-- MESSAGE CONTROLS -->
                             <!-- EDIT CONFIRMATION -->
@@ -81,9 +81,9 @@
                     </div>
                 </div>
 
-                <div >
+                <div class="overflow-x-auto w-full " >
                     <!-- MESSAGE CONTENT -->
-                    <MarkdownRenderer ref="mdRender"  v-if="!editMsgMode" :markdown-text="message.content">
+                    <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"