diff --git a/Components/Transcripts/Embed.js b/Components/Transcripts/Embed.js
index dca30b2..b163da8 100644
--- a/Components/Transcripts/Embed.js
+++ b/Components/Transcripts/Embed.js
@@ -1,15 +1,72 @@
 import Styles from "../../styles/Components/transcripts.module.css"
 import Image from "next/image";
-import JSDom from "jsdom";
+import Showdown from "showdown";
+import Axios from "axios";
+import { useEffect, useState } from "react";
 
-function embed(props) {
+const bold = /(\*\*.+\*\*)/g;
+const italic = /(\*.+\*|\_.+\_)/g;
+const emoji = /(<a?:.+:\D+>)/g;
+const user = /(<@!?\d+>)/g;
+const underline = /(\_\_.+\_\_)/g;
+const strikethrough = /(\~\~.+\~\~)/g;
+const code = /(\`.+\`)/g;
+const codeBlock = /(\`\`\`.+\`\`\`)/g;
+const spoiler = /(\`\`\`.+\`\`\`)/g;
+
+const regex = /(\*\*\*.+\*\*\*|\*\*.+\*\*|\*.+\*|\_.+\_|\_\_.+\_\_|\~\~.+\~\~|\`.+\`|\`\`\`.+\`\`\`|\`\`\`.+\`\`\`|<a?:.+:\D+>|<@!?\d+>)/g;
+
+const converter = new Showdown.Converter();
+
+async function parse(text) {
+    const splitText = text.split(regex);
+    console.log(splitText)
+    return await splitText.map( async (item, index) => {
+        if (item.match(bold)) {
+            return <b key={index}>{item.replaceAll(/\*\*/g, '')}</b>
+        }
+        if (item.match(underline)) {
+            return <u key={index}>{item.replaceAll(/\_\_/g, '')}</u>
+        }
+        if (item.match(italic)) {
+            return <i key={index}>{item.replaceAll(/\*/g, '')}</i>
+        }
+        if (item.match(code)) {
+            return <code key={index}>{item.replaceAll(/\`/g, '')}</code>
+        }
+        if (item.match(emoji)) {
+            return <Image key={index} src={`https://cdn.discord.com/emojis/${item.replaceAll(/\D/g, '')}`} width={20} height={20} alt="" />
+        }
+        if (item.match(user)) {
+            const username = (await Axios.get(`http://localhost:10000/users/${item.replaceAll(/\D/g, '')}`)).data;
+            console.log(username)
+            return <>{username}</>
+
+        }
+        return item
+    })
+
+
+}
+
+function Embed(props) {
 
     let description = props.embed.description;
     if (description) {
         description = description.split("\n");
     }
 
-    return ( // added it
+    const [newDesc, setNewDesc] = useState([]);
+
+    useEffect(() => {
+        async function stuff() {
+            const parsed = await parse(props.embed.description);
+            setNewDesc(newDesc => [...newDesc, parsed]);
+        }
+        stuff();
+    })
+
+    return (
         <div className={Styles.embed} style={{borderColor: props.color ?? "#F27878"}}>
             {
                 props.embed.author ?
@@ -38,18 +95,8 @@
                 props.embed.description ?
                 <div className={Styles.embedDescription}>
                     {
-                        description.map(i => {// idk how to do make this work
-                            i = i
-                            .replaceAll(/<a?:.+:\D+>/g, (match, id) => {
-                                return <Image src={`https://cdn.discordapp.com/emojis/${id}.png`} alt=""/>
-                            })
-                            .replaceAll(/\*\*.+\*\*/g, (match, text) => {
-                                return <b>{text}</b>
-                            })
-                            .replaceAll(/\*.+\*/g, (match, text) => {
-                                return <i>{text}</i>
-                            })
-                            return <>{new JSDom.JSDOM(i)}<br/></> // CANT FIND A DOM PARSER THAT WORKS
+                        newDesc.map((item) => {
+                            return item;
                         })
                     }
                 </div>
@@ -59,4 +106,4 @@
     )
 }
 
-export default embed;
\ No newline at end of file
+export default Embed;