diff --git a/mobile/package.json b/mobile/package.json
index 08778f3d8..3c542a00a 100644
--- a/mobile/package.json
+++ b/mobile/package.json
@@ -1,7 +1,7 @@
 {
   "name": "mobile",
   "private": true,
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
@@ -21,6 +21,7 @@
     "@radix-ui/themes": "^3.0.2",
     "@tiptap/extension-code-block-lowlight": "^2.2.3",
     "@tiptap/extension-highlight": "^2.2.3",
+    "@tiptap/extension-image": "^2.2.3",
     "@tiptap/extension-link": "^2.2.3",
     "@tiptap/extension-mention": "^2.2.3",
     "@tiptap/extension-placeholder": "^2.2.3",
diff --git a/mobile/src/components/features/chat-space/ChatInterface.tsx b/mobile/src/components/features/chat-space/ChatInterface.tsx
index af69ae2d6..d545cfd81 100644
--- a/mobile/src/components/features/chat-space/ChatInterface.tsx
+++ b/mobile/src/components/features/chat-space/ChatInterface.tsx
@@ -144,6 +144,7 @@ export const ChatInterface = ({ channel }: { channel: ChannelListItem | DMChanne
             <IonContent
                 className='flex flex-col'
                 onIonScrollStart={() => setIsScrolling(true)}
+                scrollEvents
                 onIonScrollEnd={() => setIsScrolling(false)}
                 fullscreen
                 ref={conRef}>
diff --git a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx
index 2716d271e..df57a323a 100644
--- a/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx
+++ b/mobile/src/components/features/chat-space/chat-view/MessageBlock.tsx
@@ -1,7 +1,6 @@
-import { memo, useContext, useEffect, useMemo, useState } from 'react'
+import { memo, useContext, useEffect, useMemo, useRef, useState } from 'react'
 import { FileMessage, ImageMessage, Message, TextMessage, PollMessage } from '../../../../../../types/Messaging/Message'
 import { IonIcon, IonSkeletonText, IonText } from '@ionic/react'
-import { MarkdownRenderer } from '@/components/common/MarkdownRenderer'
 import { UserFields } from '@/utils/users/UserListProvider'
 import { DateObjectToFormattedDateStringWithoutYear, DateObjectToTimeString } from '@/utils/operations/operations'
 import { ChannelMembersContext } from '../ChatInterface'
@@ -22,6 +21,7 @@ import { RavenPoll } from '@/types/RavenMessaging/RavenPoll'
 import { RavenPollOption } from '@/types/RavenMessaging/RavenPollOption'
 import { MdOutlineBarChart } from 'react-icons/md'
 import { ViewPollVotes } from '../../polls/ViewPollVotes'
+import { TiptapRenderer } from './components/TiptapRenderer/TiptapRenderer'
 
 type Props = {
     message: Message,
@@ -82,8 +82,13 @@ export const NonContinuationMessageBlock = ({ message, onMessageSelect, isScroll
     const { user, isActive } = useGetUserDetails(message.is_bot_message && message.bot ? message.bot : message.owner)
 
     const [disableLongPress, setDisableLongPress] = useState(false)
+
+    const scrollingRef = useRef<boolean>(isScrolling)
+
+    scrollingRef.current = isScrolling
+
     const longPressEvent = useLongPress((e) => {
-        if (isScrolling) return
+        if (scrollingRef.current) return
         if (disableLongPress) return
         Haptics.impact({
             style: ImpactStyle.Medium
@@ -95,7 +100,8 @@ export const NonContinuationMessageBlock = ({ message, onMessageSelect, isScroll
     // const color = useMemo(() => generateAvatarColor(user?.full_name ?? userID), [user?.full_name, userID])
     return <div>
         <div className={clsx('px-2 mt-1 py-1 rounded-md select-none flex active:bg-gray-3 focus:bg-gray-3 focus-visible:bg-gray-3 focus-within:bg-gray-3',
-            isHighlighted ? 'bg-yellow-300/20 dark:bg-yellow-300/20' : '')} {...longPressEvent}>
+            isHighlighted ? 'bg-yellow-300/20 dark:bg-yellow-300/20' : '',
+            isScrolling ? `focus:bg-transparent active:bg-transparent` : '')} {...longPressEvent}>
             <MessageSenderAvatar user={user} userID={message.owner} isActive={isActive} />
             <div>
                 <div className='flex items-baseline'>
@@ -157,8 +163,12 @@ interface ContinuationMessageBlockProps {
 const ContinuationMessageBlock = ({ message, onMessageSelect, isScrolling, isHighlighted, onReplyMessageClick }: ContinuationMessageBlockProps) => {
 
     const [disableLongPress, setDisableLongPress] = useState(false)
+
+    const scrollingRef = useRef<boolean>(isScrolling)
+
+    scrollingRef.current = isScrolling
     const longPressEvent = useLongPress((e) => {
-        if (isScrolling) return
+        if (scrollingRef.current) return
         if (disableLongPress) return
         Haptics.impact({
             style: ImpactStyle.Medium
@@ -168,7 +178,8 @@ const ContinuationMessageBlock = ({ message, onMessageSelect, isScrolling, isHig
 
     return <div>
         <div className={clsx('px-2 py-1 flex rounded-md select-none active:bg-gray-3 focus:bg-gray-3 focus-visible:bg-gray-3 focus-within:bg-gray-3',
-            isHighlighted ? 'bg-yellow-300/20 dark:bg-yellow-300/20' : '')} {...longPressEvent}>
+            isHighlighted ? 'bg-yellow-300/20 dark:bg-yellow-300/20' : '',
+            isScrolling ? `focus:bg-transparent active:bg-transparent` : '')} {...longPressEvent}>
             <div className='w-11'>
             </div>
             <div>
@@ -221,10 +232,7 @@ const MessageContent = ({ message, onReplyMessageClick, onLongPressDisabled, onL
 
 const TextMessageBlock = ({ message, truncate = false }: { message: TextMessage, truncate?: boolean }) => {
 
-
-    return <div className={'py-0.5 rounded-lg' + (truncate ? ' line-clamp-3' : '')}>
-        <MarkdownRenderer content={message.text} truncate={truncate} />
-    </div>
+    return <TiptapRenderer message={message} />
 }
 const options = {
     root: null,
diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Blockquote.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Blockquote.tsx
new file mode 100644
index 000000000..b579d247d
--- /dev/null
+++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Blockquote.tsx
@@ -0,0 +1,19 @@
+import { Blockquote } from '@radix-ui/themes';
+import TiptapBlockquote from '@tiptap/extension-blockquote'
+import { NodeViewRendererProps, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+
+export const CustomBlockquote = TiptapBlockquote.extend({
+    addNodeView() {
+        return ReactNodeViewRenderer(BlockquoteRenderer)
+    }
+})
+
+const BlockquoteRenderer = ({ node }: NodeViewRendererProps) => {
+    return (
+        <NodeViewWrapper>
+            <Blockquote m='2' size='3'>
+                {node.textContent}
+            </Blockquote>
+        </NodeViewWrapper>
+    );
+};
\ No newline at end of file
diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Bold.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Bold.tsx
new file mode 100644
index 000000000..120721f45
--- /dev/null
+++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Bold.tsx
@@ -0,0 +1,14 @@
+import TiptapBold from '@tiptap/extension-bold'
+import { mergeAttributes } from "@tiptap/react";
+
+export const CustomBold = TiptapBold.extend({
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "strong",
+            mergeAttributes(HTMLAttributes, {
+                class: 'rt-Strong'
+            }), // mergeAttributes is a exported function from @tiptap/core
+            0,
+        ];
+    },
+})
\ No newline at end of file
diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Link.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Link.tsx
new file mode 100644
index 000000000..6258607dd
--- /dev/null
+++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Link.tsx
@@ -0,0 +1,127 @@
+// import { Skeleton } from '@/components/common/Skeleton';
+// import { Box, Flex, Text } from '@radix-ui/themes';
+import TiptapLink from '@tiptap/extension-link'
+import { mergeAttributes, useCurrentEditor } from "@tiptap/react";
+// import { useFrappeGetCall } from 'frappe-react-sdk';
+// import { memo, useMemo } from 'react';
+
+export const CustomLink = TiptapLink.extend({
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "a",
+            mergeAttributes(HTMLAttributes, {
+                class: 'rt-Text rt-reset rt-Link rt-underline-auto break-all'
+            }), // mergeAttributes is a exported function from @tiptap/core
+            0,
+        ];
+    },
+}).configure({
+    protocols: ['mailto', 'https', 'http'],
+    openOnClick: false,
+})
+
+export type LinkPreviewDetails = {
+    title: string,
+    description: string,
+    image: string,
+    force_title: string,
+    absolute_image: string,
+    site_name: string
+}
+
+// export const LinkPreview = memo(({ isScrolling }: { isScrolling?: boolean }) => {
+
+//     const { editor } = useCurrentEditor()
+
+//     // We need to find the first mark of type link in a message and extract the href.
+
+//     const json = editor?.getJSON()
+
+//     const href = useMemo(() => {
+//         if (!json) return null
+
+//         let firstLink = ''
+
+//         // At every level of the json, we need to find the first mark of type link and extract the href.
+//         // Once we find the first link, we can stop searching.
+//         const findFirstLink = (json: any) => {
+//             if (firstLink) return firstLink
+
+//             if (Array.isArray(json)) {
+//                 for (const item of json) {
+//                     if (typeof item === 'object') {
+//                         findFirstLink(item)
+//                     }
+//                 }
+//             } else {
+//                 if (json?.type === 'link') {
+//                     const link = json?.attrs?.href
+//                     if (link?.startsWith('mailto')) {
+//                     } else {
+//                         firstLink = json?.attrs?.href
+//                     }
+//                 } else {
+//                     for (const key in json) {
+//                         if (typeof json?.[key] === 'object') {
+//                             findFirstLink(json?.[key])
+//                         }
+//                     }
+//                 }
+//             }
+//         }
+
+//         findFirstLink(json)
+
+//         return firstLink
+//     }, [json])
+
+//     // const href = editor?.getAttributes('link').href
+
+
+//     const { data, isLoading } = useFrappeGetCall<{ message: LinkPreviewDetails[] }>('raven.api.preview_links.get_preview_link', {
+//         urls: JSON.stringify([href])
+//     }, href ? undefined : null, {
+//         revalidateIfStale: false,
+//         revalidateOnFocus: false,
+//         revalidateOnReconnect: false,
+//         shouldRetryOnError: false,
+//     })
+
+//     if (!href) return null
+
+//     const linkPreview = data?.message?.[0]
+
+//     return <a href={href} target='_blank'>
+//         <Flex direction='column' gap='2' py='2'>
+//             {linkPreview ? linkPreview.site_name && linkPreview.description ? <Flex gap='4'>
+//                 {(linkPreview.absolute_image || linkPreview.image) &&
+//                     <Box className='relative min-w-[18rem] min-h-[9rem] w-72 h-36'>
+//                         {/* Absolute positioned skeleton loader */}
+//                         <Box className='absolute top-0 z-0 left-0 w-72 h-36' >
+//                             <Box className='animate-pulse bg-gray-3 z-0 w-72 h-36 dark:bg-gray-5 rounded-md'>
+
+//                             </Box>
+//                         </Box>
+
+//                         <img
+//                             width='100%'
+//                             className='absolute object-cover min-w-[18rem] min-h-[9rem] w-72 h-36 rounded-md z-50 top-0 left-0'
+//                             src={linkPreview.absolute_image || linkPreview.image}
+//                             alt={linkPreview.title} />
+
+//                     </Box>
+//                 }
+//                 <Flex direction='column' gap='1' py='1' className='w-84'>
+//                     <Flex gap='1' direction='column'>
+//                         <Text as='span' weight='bold' size='5' className='cal-sans'>{linkPreview.title}</Text>
+//                         <Text as='span' color='gray' size='2' weight='medium'>{linkPreview.site_name}</Text>
+//                     </Flex>
+//                     <Text as='p' size='2' className='whitespace-break-spaces'>{linkPreview.description}</Text>
+//                 </Flex>
+//             </Flex> : null :
+
+//                 null}
+//         </Flex>
+//     </a>
+
+// })
\ No newline at end of file
diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Mention.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Mention.tsx
new file mode 100644
index 000000000..76a110dae
--- /dev/null
+++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Mention.tsx
@@ -0,0 +1,75 @@
+import { UserAvatar } from '@/components/common/UserAvatar';
+import { useGetUser } from '@/hooks/useGetUser';
+import { useIsUserActive } from '@/hooks/useIsUserActive';
+import { Flex, HoverCard, Link, Text } from '@radix-ui/themes';
+import Mention from '@tiptap/extension-mention'
+import { NodeViewRendererProps, NodeViewWrapper, ReactNodeViewRenderer } from "@tiptap/react";
+import { BsFillCircleFill } from 'react-icons/bs';
+import { Link as RouterLink } from 'react-router-dom';
+
+export const CustomUserMention = Mention.extend({
+    name: 'userMention',
+    addNodeView() {
+        return ReactNodeViewRenderer(UserMentionRenderer)
+    }
+})
+
+export const CustomChannelMention = Mention.extend({
+    name: 'channelMention',
+    addNodeView() {
+        return ReactNodeViewRenderer(ChannelMentionRenderer)
+    }
+})
+
+const UserMentionRenderer = ({ node }: NodeViewRendererProps) => {
+
+    const user = useGetUser(node.attrs.id)
+    const isActive = useIsUserActive(node.attrs.id)
+
+    return (
+        <NodeViewWrapper as={'span'}>
+            <HoverCard.Root>
+                <HoverCard.Trigger>
+                    <Link size='2'>
+                        @{user?.full_name ?? node.attrs.label}
+                    </Link>
+                </HoverCard.Trigger>
+                <HoverCard.Content>
+                    <Flex gap='2' align='center'>
+                        <UserAvatar src={user?.user_image} alt={user?.full_name ?? node.attrs.label} size='4' />
+                        <Flex direction='column'>
+                            <Flex gap='3' align='center'>
+                                <Text className='text-gray-12' weight='bold' size='3'>{user?.full_name ?? node.attrs.label}</Text>
+                                {isActive && <Flex gap='1' align='center'>
+                                    <BsFillCircleFill className='text-green-400' size='8' />
+                                    <Text className='text-gray-10' size='1'>Online</Text>
+                                </Flex>}
+                            </Flex>
+                            {user && <Text className='text-gray-11' size='1'>{user?.name}</Text>}
+                        </Flex>
+                    </Flex>
+
+                </HoverCard.Content>
+            </HoverCard.Root>
+            {/* <Link>
+                @{node.attrs.label}
+            </Link> */}
+        </NodeViewWrapper>
+    );
+};
+
+
+
+const ChannelMentionRenderer = ({ node }: NodeViewRendererProps) => {
+
+
+    return (
+        <NodeViewWrapper as={'span'}>
+            <Link asChild>
+                <RouterLink to={`/channels/${node.attrs.id}`}>
+                    @{node.attrs.label}
+                </RouterLink>
+            </Link>
+        </NodeViewWrapper>
+    );
+};
\ No newline at end of file
diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx
new file mode 100644
index 000000000..d8e85123d
--- /dev/null
+++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/TiptapRenderer.tsx
@@ -0,0 +1,105 @@
+import { EditorContent, EditorContext, useEditor } from '@tiptap/react'
+import { TextMessage } from '../../../../../../../../types/Messaging/Message'
+import { UserFields } from '@/utils/users/UserListProvider'
+import { Box, BoxProps } from '@radix-ui/themes'
+import Highlight from '@tiptap/extension-highlight'
+import StarterKit from '@tiptap/starter-kit'
+import css from 'highlight.js/lib/languages/css'
+import js from 'highlight.js/lib/languages/javascript'
+import ts from 'highlight.js/lib/languages/typescript'
+import html from 'highlight.js/lib/languages/xml'
+import json from 'highlight.js/lib/languages/json'
+import CodeBlockLowlight from '@tiptap/extension-code-block-lowlight'
+import { common, createLowlight } from 'lowlight'
+import python from 'highlight.js/lib/languages/python'
+import { CustomBlockquote } from './Blockquote'
+import { CustomBold } from './Bold'
+import { CustomUserMention } from './Mention'
+import { CustomLink } from './Link'
+import { CustomUnderline } from './Underline'
+import { Image } from '@tiptap/extension-image'
+import { clsx } from 'clsx'
+import Italic from '@tiptap/extension-italic';
+const lowlight = createLowlight(common)
+
+lowlight.register('html', html)
+lowlight.register('css', css)
+lowlight.register('js', js)
+lowlight.register('ts', ts)
+lowlight.register('json', json)
+lowlight.register('python', python)
+type TiptapRendererProps = BoxProps & {
+  message: TextMessage,
+  user?: UserFields,
+  showLinkPreview?: boolean,
+  isScrolling?: boolean,
+  isTruncated?: boolean
+}
+
+export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated = false, showLinkPreview = true, ...props }: TiptapRendererProps) => {
+
+  const editor = useEditor({
+    content: message.text,
+    editable: false,
+    editorProps: {
+      attributes: {
+        class: isTruncated ? 'line-clamp-3' : ''
+      }
+    },
+    enableCoreExtensions: true,
+    extensions: [
+      StarterKit.configure({
+        heading: false,
+        codeBlock: false,
+        bold: false,
+        blockquote: false,
+        italic: false,
+        listItem: {
+          HTMLAttributes: {
+            class: 'ml-5 rt-Text text-base'
+          }
+        },
+        paragraph: {
+          HTMLAttributes: {
+            class: 'rt-Text text-base'
+          }
+        }
+      }),
+      Highlight.configure({
+        multicolor: true,
+        HTMLAttributes: {
+          class: 'bg-[var(--yellow-6)] dark:bg-[var(--yellow-11)] px-2 py-1'
+        }
+      }),
+      CustomUnderline,
+      CodeBlockLowlight.configure({
+        lowlight
+      }),
+      CustomBlockquote,
+      CustomBold,
+      CustomUserMention,
+      CustomLink,
+      Italic,
+      Image.configure({
+        HTMLAttributes: {
+          class: 'mt-2 object-cover max-w-[280px]'
+        },
+        inline: true
+      }),
+      // TODO: Add channel mention
+      // CustomChannelMention
+    ]
+  })
+
+  return (
+    <Box className={clsx('overflow-x-hidden text-ellipsis', props.className)} {...props}>
+      <EditorContext.Provider value={{ editor }}>
+        <EditorContent
+          contentEditable={false}
+          editor={editor}
+          readOnly />
+        {/* {showLinkPreview && <LinkPreview isScrolling={isScrolling} />} */}
+      </EditorContext.Provider>
+    </Box>
+  )
+}
\ No newline at end of file
diff --git a/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Underline.tsx b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Underline.tsx
new file mode 100644
index 000000000..a4da9fa7e
--- /dev/null
+++ b/mobile/src/components/features/chat-space/chat-view/components/TiptapRenderer/Underline.tsx
@@ -0,0 +1,15 @@
+import TiptapUnderline from '@tiptap/extension-underline'
+import { mergeAttributes } from "@tiptap/react";
+
+export const CustomUnderline = TiptapUnderline.extend({
+    renderHTML({ HTMLAttributes }) {
+        return [
+            "span",
+            mergeAttributes(HTMLAttributes, {
+                class: 'rt-Text rt-reset rt-Link rt-underline-always text-gray-12',
+                'data-accent-color': 'gray',
+            }), // mergeAttributes is a exported function from @tiptap/core
+            0,
+        ];
+    },
+})
\ No newline at end of file
diff --git a/mobile/src/pages/direct-messages/DirectMessageList.tsx b/mobile/src/pages/direct-messages/DirectMessageList.tsx
index b7a787ac1..882dfbac4 100644
--- a/mobile/src/pages/direct-messages/DirectMessageList.tsx
+++ b/mobile/src/pages/direct-messages/DirectMessageList.tsx
@@ -76,12 +76,9 @@ const useMessageUsersList = () => {
         })
 
         return usersWithChannels.sort((a, b) => {
-            if (a.channel && b.channel) {
-                const bTimestamp = b.channel.last_message_timestamp ? new Date(b.channel.last_message_timestamp).getTime() : 0
-                const aTimestamp = a.channel.last_message_timestamp ? new Date(a.channel.last_message_timestamp).getTime() : 0
-                return new Date(bTimestamp).getTime() - new Date(aTimestamp).getTime()
-            }
-            return 0
+            const bTimestamp = b.channel?.last_message_timestamp ? new Date(b.channel.last_message_timestamp).getTime() : 0
+            const aTimestamp = a.channel?.last_message_timestamp ? new Date(a.channel.last_message_timestamp).getTime() : 0
+            return bTimestamp - aTimestamp
         })
     }, [users, dm_channels])
 
diff --git a/mobile/src/pages/profile/Profile.tsx b/mobile/src/pages/profile/Profile.tsx
index 851232911..32bbf27ed 100644
--- a/mobile/src/pages/profile/Profile.tsx
+++ b/mobile/src/pages/profile/Profile.tsx
@@ -62,7 +62,7 @@ export const Profile = () => {
                     </IonItem>
                 </IonList>
                 <div className="ion-text-center mt-16">
-                    <Text as='span'><Text as='span' size='6' className='cal-sans'>raven</Text> <Text as='span' color='gray'>v1.5.0</Text></Text>
+                    <Text as='span'><Text as='span' size='6' className='cal-sans'>raven</Text> <Text as='span' color='gray'>v1.5.1</Text></Text>
                     <br />
                     <Text as='span' color='gray'>Made by The Commit Company</Text>
                 </div>
diff --git a/mobile/yarn.lock b/mobile/yarn.lock
index bc2a55aed..56609c796 100644
--- a/mobile/yarn.lock
+++ b/mobile/yarn.lock
@@ -2627,6 +2627,11 @@
   resolved "https://registry.yarnpkg.com/@tiptap/extension-horizontal-rule/-/extension-horizontal-rule-2.3.0.tgz#e4934b32c005b1cf0f03fab5f4caff8cacbf4c7e"
   integrity sha512-4DB8GU3uuDzzyqUmONIb3CHXcQ6Nuy4mHHkFSmUyEjg1i5eMQU5H7S6mNvZbltcJB2ImgCSwSMlj1kVN3MLIPg==
 
+"@tiptap/extension-image@^2.2.3":
+  version "2.3.0"
+  resolved "https://registry.yarnpkg.com/@tiptap/extension-image/-/extension-image-2.3.0.tgz#914c4c5030fa4278f53e808c03819f7422da4497"
+  integrity sha512-v1fLEEzrfXWavsLFUEkTiYYxwm1WDNrjuUriU5tG2Jv22NL1BL4BLVbZbGdkAk+qHWy8QWszrDJbcgGh2VNCoQ==
+
 "@tiptap/extension-italic@^2.3.0":
   version "2.3.0"
   resolved "https://registry.yarnpkg.com/@tiptap/extension-italic/-/extension-italic-2.3.0.tgz#72279632a2652642abed2078a920e2e05aff030e"
diff --git a/package.json b/package.json
index a9fee4059..47db4c594 100644
--- a/package.json
+++ b/package.json
@@ -1,6 +1,6 @@
 {
   "name": "raven",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "Messaging Application",
   "main": "index.js",
   "scripts": {
diff --git a/raven-app/package.json b/raven-app/package.json
index 605166334..73aa33f9b 100644
--- a/raven-app/package.json
+++ b/raven-app/package.json
@@ -1,7 +1,7 @@
 {
   "name": "raven-app",
   "private": true,
-  "version": "1.5.0",
+  "version": "1.5.1",
   "type": "module",
   "scripts": {
     "dev": "vite",
diff --git a/raven-app/src/components/feature/channels/ChannelList.tsx b/raven-app/src/components/feature/channels/ChannelList.tsx
index 9ad79059e..59dd2fba4 100644
--- a/raven-app/src/components/feature/channels/ChannelList.tsx
+++ b/raven-app/src/components/feature/channels/ChannelList.tsx
@@ -19,7 +19,7 @@ export const ChannelList = ({ unread_count }: { unread_count?: UnreadCountData }
 
     return (
         <SidebarGroup>
-            <SidebarGroupItem gap='2' className={'pl-1.5'}>
+            <SidebarGroupItem className={'pl-1.5 gap-1.5'}>
                 <SidebarViewMoreButton onClick={toggle} />
                 <Flex width='100%' justify='between' align='center' gap='2'>
                     <Flex gap='2' align='center'>
diff --git a/raven-app/src/components/feature/channels/CreateChannelModal.tsx b/raven-app/src/components/feature/channels/CreateChannelModal.tsx
index 69e100b66..aba3ce2c6 100644
--- a/raven-app/src/components/feature/channels/CreateChannelModal.tsx
+++ b/raven-app/src/components/feature/channels/CreateChannelModal.tsx
@@ -100,8 +100,8 @@ export const CreateChannelButton = ({ updateChannelList }: { updateChannelList:
 
     return <Dialog.Root open={isOpen} onOpenChange={onOpenChange}>
         <Dialog.Trigger>
-            <IconButton variant='ghost' size='1' color='gray' aria-label='Create Channel' className='h-[18px]' title='Create Channel'>
-                <BiPlus className='text-slate-12' />
+            <IconButton variant='ghost' size='1' color='gray' aria-label='Create Channel' title='Create Channel'>
+                <BiPlus className='text-slate-12 text-sm' />
             </IconButton>
         </Dialog.Trigger>
         <Dialog.Content className={DIALOG_CONTENT_CLASS}>
diff --git a/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx b/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx
index ccaf68fa4..f6cd2c3d9 100644
--- a/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx
+++ b/raven-app/src/components/feature/chat/ChatInput/Tiptap.tsx
@@ -249,12 +249,12 @@ const Tiptap = ({ slotBefore, fileProps, onMessageSend, replyMessage, clearReply
             codeBlock: false,
             listItem: {
                 HTMLAttributes: {
-                    class: 'rt-Text'
+                    class: 'rt-Text text-sm'
                 }
             },
             paragraph: {
                 HTMLAttributes: {
-                    class: 'rt-Text'
+                    class: 'rt-Text text-sm'
                 }
             }
         }),
diff --git a/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx b/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx
index 5de3998fc..cabef7d28 100644
--- a/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx
+++ b/raven-app/src/components/feature/chat/ChatMessage/MessageItem.tsx
@@ -111,7 +111,7 @@ export const MessageItem = ({ message, setDeleteMessage, isHighlighted, onReplyM
                             <MessageContent
                                 message={message}
                                 user={user}
-                                className={clsx(message.is_continuation ? 'ml-0.5' : '')} />
+                            />
 
                             {message.link_doctype && message.link_document && <Box className={clsx(message.is_continuation ? 'ml-0.5' : '-ml-0.5')}>
                                 <DoctypeLinkRenderer doctype={message.link_doctype} docname={message.link_document} />
diff --git a/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/List.tsx b/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/List.tsx
deleted file mode 100644
index e69de29bb..000000000
diff --git a/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx b/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx
index ded1b1498..827983453 100644
--- a/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx
+++ b/raven-app/src/components/feature/chat/ChatMessage/Renderers/TiptapRenderer/TiptapRenderer.tsx
@@ -57,12 +57,12 @@ export const TiptapRenderer = ({ message, user, isScrolling = false, isTruncated
         italic: false,
         listItem: {
           HTMLAttributes: {
-            class: 'ml-5 rt-Text rt-r-size-2'
+            class: 'ml-5 rt-Text text-sm'
           }
         },
         paragraph: {
           HTMLAttributes: {
-            class: 'rt-Text rt-r-size-2'
+            class: 'rt-Text text-sm'
           }
         }
       }),
diff --git a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
index ce1f96021..ae5c510ed 100644
--- a/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
+++ b/raven-app/src/components/feature/direct-messages/DirectMessageList.tsx
@@ -21,12 +21,10 @@ export const DirectMessageList = ({ unread_count }: { unread_count?: UnreadCount
 
     return (
         <SidebarGroup pb='4'>
-            <SidebarGroupItem gap='2' className={'pl-1.5'}>
+            <SidebarGroupItem className={'pl-1.5 gap-1.5'}>
                 <SidebarViewMoreButton onClick={toggle} />
                 <Flex width='100%' justify='between' align='center' gap='2'>
-                    <Flex gap='2' align='center'>
-                        <SidebarGroupLabel className='cal-sans'>Direct Messages</SidebarGroupLabel>
-                    </Flex>
+                    <SidebarGroupLabel className='cal-sans'>Direct Messages</SidebarGroupLabel>
                     {!showData && unread_count && unread_count?.total_unread_count_in_dms > 0 &&
                         <Box pr='2'>
                             <SidebarBadge>{unread_count.total_unread_count_in_dms}</SidebarBadge>
diff --git a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
index d5b37c1cf..69003a3fc 100644
--- a/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
+++ b/raven-app/src/components/layout/Sidebar/SidebarComp.tsx
@@ -1,12 +1,12 @@
 import React, { ReactNode, useState } from 'react'
 import { NavLink } from 'react-router-dom'
-import { Flex, IconButton, Text, Badge } from '@radix-ui/themes';
+import { Flex, IconButton, Text, Theme } from '@radix-ui/themes';
 import { FlexProps } from '@radix-ui/themes/dist/cjs/components/flex';
 import { TextProps } from '@radix-ui/themes/dist/cjs/components/text';
 import { IconButtonProps } from '@radix-ui/themes/dist/cjs/components/icon-button';
 import { BadgeProps } from '@radix-ui/themes/dist/cjs/components/badge';
 import { clsx } from 'clsx';
-import { BsCaretDownFill, BsCaretRightFill } from 'react-icons/bs';
+import { FaCaretDown, FaCaretRight } from 'react-icons/fa';
 
 interface SidebarGroupProps extends FlexProps {
     children: ReactNode;
@@ -39,7 +39,7 @@ type SidebarGroupLabelProps = TextProps & {
 
 export const SidebarGroupLabel = ({ children, ...props }: SidebarGroupLabelProps) => {
     return (
-        <Text size='2' weight='medium' {...props}>
+        <Text size='2' {...props}>
             {children}
         </Text>
     )
@@ -67,7 +67,7 @@ interface SidebarItemProps extends FlexProps {
 
 export const SidebarItem = ({ to, children, end, active = false, activeStyles, className, ...props }: SidebarItemProps) => {
 
-    const activeClass = 'bg-[#EBEBEB] dark:bg-gray-6 text-gray-12'
+    const activeClass = 'bg-[#EBEBEB] dark:bg-gray-4 text-gray-12'
 
     return (
         <NavLink
@@ -81,7 +81,7 @@ export const SidebarItem = ({ to, children, end, active = false, activeStyles, c
                         gap='2'
                         align='center'
                         px='2'
-                        className={clsx('cursor-pointer text-black dark:text-gray-100 user-select-none rounded-md no-underline transition-all duration-200 hover:bg-gray-3 dark:hover:bg-gray-5', isActive ? activeClass : '', className)}
+                        className={clsx('cursor-pointer text-black dark:text-gray-100 user-select-none rounded-md no-underline transition-all duration-200 hover:bg-gray-3 dark:hover:bg-gray-3', isActive ? activeClass : '', className)}
                         {...props}>
                         {children}
                     </Flex>
@@ -145,14 +145,14 @@ export const SidebarViewMoreButton = ({ onClick, ...props }: SidebarViewMoreButt
             title='View'
             variant='ghost'
             size='1'
-            className='cursor-pointer text-slate-12 bg-transparent hover:text-gray-12'
+            className='cursor-pointer pb-[4px] text-slate-12 bg-transparent hover:text-gray-12'
             highContrast
             onClick={() => {
                 setIsViewMore(!isViewMore)
                 onClick()
             }}
             {...props}>
-            {isViewMore ? <BsCaretRightFill size='13' /> : <BsCaretDownFill size='13' />}
+            {isViewMore ? <FaCaretRight size='18' /> : <FaCaretDown size='18' />}
         </IconButton>
     )
 }
@@ -160,15 +160,14 @@ export const SidebarViewMoreButton = ({ onClick, ...props }: SidebarViewMoreButt
 export const SidebarBadge = ({ children, ...props }: BadgeProps) => {
 
     return (
-        <Badge
-            color='gray'
-            variant='solid'
-            size='1'
-            radius="large"
-            highContrast
-            {...props}
-        >
-            {children}
-        </Badge>
+        <Theme accentColor='gray'>
+            <div className='flex items-center justify-center dark:text-accent-a12 dark:bg-accent-a3 bg-accent-a4 text-xs py-0.5 px-2 rounded-radius2
+            whitespace-nowrap font-medium
+            '>
+                {children}
+            </div>
+        </Theme>
+
+
     )
 }
diff --git a/raven/__init__.py b/raven/__init__.py
index 5b6018861..0f228f258 100644
--- a/raven/__init__.py
+++ b/raven/__init__.py
@@ -1 +1 @@
-__version__ = "1.5.0"
+__version__ = "1.5.1"
diff --git a/raven/package.json b/raven/package.json
index e1e2b57f0..c6ae1aa72 100644
--- a/raven/package.json
+++ b/raven/package.json
@@ -1,6 +1,6 @@
 {
   "name": "raven",
-  "version": "1.5.0",
+  "version": "1.5.1",
   "description": "",
   "main": "index.js",
   "scripts": {