diff --git a/TODO.md b/TODO.md
index f72adf7..0713038 100644
--- a/TODO.md
+++ b/TODO.md
@@ -7,7 +7,7 @@ A more complex version of this list is available [here](https://trello.com/b/kJw
 - [ ] Documentation
 - [ ] Emoji picker
 - [ ] Images/Attatchments support
-- [ ] Markdown Support
+- [X] Markdown Support
 - [ ] Profile photos
 - [ ] Reactive channels list
 - [ ] Show characters before message gets cut off in textarea
diff --git a/bun.lockb b/bun.lockb
index e802048..5c6b35a 100755
Binary files a/bun.lockb and b/bun.lockb differ
diff --git a/package.json b/package.json
index b1ae95a..9338826 100644
--- a/package.json
+++ b/package.json
@@ -19,6 +19,8 @@
     "@eslint/js": "^9.18.0",
     "@sveltejs/kit": "^2.16.0",
     "@sveltejs/vite-plugin-svelte": "^5.0.0",
+    "@tailwindcss/typography": "^0.5.16",
+    "@types/markdown-it": "^14.1.2",
     "autoprefixer": "^10.4.20",
     "bits-ui": "^0.22.0",
     "clsx": "^2.1.1",
@@ -26,6 +28,7 @@
     "eslint-config-prettier": "^10.0.1",
     "eslint-plugin-svelte": "^2.46.1",
     "globals": "^15.14.0",
+    "markdown-it": "^14.1.0",
     "prettier": "^3.4.2",
     "prettier-plugin-svelte": "^3.3.3",
     "prettier-plugin-tailwindcss": "^0.6.11",
diff --git a/src/lib/components/message.svelte b/src/lib/components/message.svelte
index 369a955..9804cc2 100644
--- a/src/lib/components/message.svelte
+++ b/src/lib/components/message.svelte
@@ -1,6 +1,8 @@
 <script lang="ts">
   import { type TypeMessage } from '$lib/types';
   import escapeHTML from '$lib/functions/escapeHTML';
+  import Prose from '$lib/components/prose.svelte';
+  import renderMarkdown from '$lib/functions/renderMarkdown';
   const { message, imageSrc, user }: TypeMessage = $props();
 </script>
 
@@ -12,7 +14,7 @@
   </div>
   <div class="w-full">
     <p class="inline-size-full break-words font-bold">{user}</p>
-    <pre class="inline-size-full text-wrap break-words font-sans">{@html escapeHTML(message)}</pre>
+    <Prose class="inline-size-full text-wrap break-words font-sans">{@html renderMarkdown(escapeHTML(message))}</Prose>
   </div>
 </div>
 
diff --git a/src/lib/components/prose.svelte b/src/lib/components/prose.svelte
new file mode 100644
index 0000000..f85ba5d
--- /dev/null
+++ b/src/lib/components/prose.svelte
@@ -0,0 +1,12 @@
+<script lang="ts">
+  import type { Snippet } from 'svelte';
+
+  interface Props {
+    children: Snippet;
+    class: string;
+  }
+
+  const { children, class: className = '' }: Props = $props();
+</script>
+
+<div class={className + ' prose prose-stone dark:prose-invert prose-blue'}>{@render children()}</div>
diff --git a/src/lib/functions/renderMarkdown.ts b/src/lib/functions/renderMarkdown.ts
new file mode 100644
index 0000000..fec455d
--- /dev/null
+++ b/src/lib/functions/renderMarkdown.ts
@@ -0,0 +1,12 @@
+import markdownit from 'markdown-it';
+
+export default function renderMarkdown(input: string): string {
+  const md = markdownit({
+    html: false,
+    linkify: true,
+    typographer: true,
+    breaks: true,
+  }).disable(['image', 'table']);
+
+  return md.render(input);
+}
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 7c1b0d9..7cfa67e 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -1,5 +1,6 @@
 import { fontFamily } from 'tailwindcss/defaultTheme';
 import type { Config } from 'tailwindcss';
+import typography from '@tailwindcss/typography';
 
 const config: Config = {
   darkMode: ['class'],
@@ -59,6 +60,7 @@ const config: Config = {
       },
     },
   },
+  plugins: [typography],
 };
 
 export default config;