diff --git a/Components/Transcripts/Attachment.js b/Components/Transcripts/Attachment.js
new file mode 100644
index 0000000..ddad85f
--- /dev/null
+++ b/Components/Transcripts/Attachment.js
@@ -0,0 +1,11 @@
+import Styles from "../../styles/Components/transcripts.module.css"
+
+function attachment(props) {
+    return (
+        <div className={Styles.attachment}>
+            <a className={Styles.attachmentLink} href={props.attachment.url} target="_blank" rel="noreferrer" >{props.attachment.name}</a>
+        </div>
+    )
+}
+
+export default attachment;
\ No newline at end of file
diff --git a/Components/Transcripts/Author.js b/Components/Transcripts/Author.js
index aa9ecdd..c096b69 100644
--- a/Components/Transcripts/Author.js
+++ b/Components/Transcripts/Author.js
@@ -1,20 +1,29 @@
 import Image from "next/image";
 import Styles from "../../styles/Components/transcripts.module.css"
+import * as hdate from 'human-date'
 
 function Author(props) {
+    const today = props.message.createdTimestamp - (1000 * 60 * 60 * 24) > 0;
+    const last2days = props.message.createdTimestamp - (1000 * 60 * 60 * 24 * 2) > 0;
+    const date = new Date(props.message.createdTimestamp)
+    let timeDelta;
+    if (today) {
+        timeDelta = "Today";
+    } else if (last2days) {
+        timeDelta = "Yesterday";
+    } else {
+        timeDelta = hdate.prettyPrint(date).split(", ")[0];
+    }
+    timeDelta += ` at ${date.getHours()}:${date.getMinutes()}`
     return (
-        <div className={Styles.container}>
-            <div className={Styles.verticalFlex} style={{width: "60px"}}>
-                <Image className={Styles.avatar} src={props.author.avatar ?? "https://picsum.photos/50"} width={50} height={50} alt=""/>  {/* TODO: Add a cync icon here as a default*/}
-            </div>
-            <div className={Styles.verticalFlex} style={{width: "calc(100vw - 60px - 40px)"}}>
-                <div className={Styles.horizontalFlex}>
-                    <p style={{color: props.author.topRole.color ? props.author.topRole.color : "var(--theme-ui-colors-text)", margin: "0", fontSize: "20px"}}>
-                        {props.author.username}#{props.author.discriminator}
-                    </p>
-                    {props.author.topRole.badge ? <Image src={props.author.topRole.badge} width={20} height={20} alt=""/> : null}
-                    {!props.author.bot ? <div className={Styles.botBadge}>BOT</div> : ""}
-                </div>
+        <div className={Styles.verticalFlex} style={{width: "calc(100vw - 60px - 40px)"}}>
+            <div className={Styles.horizontalFlex}>
+                <p style={{color: props.message.author.topRole.color ? props.message.author.topRole.color + " !important" : "var(--theme-ui-colors-text)"}} className={Styles.authorText}>
+                    {props.message.author.username}#{props.message.author.discriminator}
+                </p>
+                {props.message.author.topRole.badge ? <Image src={props.message.author.topRole.badge} width={20} height={20} alt=""/> : null}
+                {props.message.author.bot ? <div className={Styles.botBadge}>BOT</div> : ""}
+                <p style={{color: "#888888", margin: "0", fontSize: "20px"}}>{timeDelta.toString()}</p>
             </div>
         </div>
     )
diff --git a/Components/Transcripts/Embed.js b/Components/Transcripts/Embed.js
index 84d1c32..dca30b2 100644
--- a/Components/Transcripts/Embed.js
+++ b/Components/Transcripts/Embed.js
@@ -1,7 +1,62 @@
-import { Component } from "react";
+import Styles from "../../styles/Components/transcripts.module.css"
+import Image from "next/image";
+import JSDom from "jsdom";
 
-class Embed extends Component {
+function embed(props) {
 
+    let description = props.embed.description;
+    if (description) {
+        description = description.split("\n");
+    }
+
+    return ( // added it
+        <div className={Styles.embed} style={{borderColor: props.color ?? "#F27878"}}>
+            {
+                props.embed.author ?
+                <div className={Styles.embedAuthor}>
+                    {
+                        props.embed.author.iconURL ?
+                        <Image src={props.embed.author.iconURL} alt=""/> :
+                        null
+                    }
+                    {
+                        props.embed.author.url ?
+                        <a href={props.embed.author.url}>
+                            {props.embed.author?.name ?? ""}
+                        </a> :
+                        <p>{props.embed.author?.name ?? ""}</p>
+                    }
+                </div> :
+                null
+            }
+            {
+                props.embed.title ?
+                <div className={Styles.embedTitle}>{props.embed.title}</div> :
+                null
+            }
+            {
+                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
+                        })
+                    }
+                </div>
+                : null
+            }
+        </div>
+    )
 }
 
-export default Embed;
\ No newline at end of file
+export default embed;
\ No newline at end of file
diff --git a/Components/Transcripts/Message.js b/Components/Transcripts/Message.js
index 5006ade..2a74d62 100644
--- a/Components/Transcripts/Message.js
+++ b/Components/Transcripts/Message.js
@@ -1,9 +1,32 @@
-import { Component } from "react";
+import Styles from "../../styles/Components/transcripts.module.css"
+import Author from "./Author";
+import Image from "next/image";
+import Attachment from "./Attachment";
+import Embed from "./Embed";
 
-class Message extends Component {
+function message(props) {
 
-
-
+    return (
+        <div className={Styles.container}>
+            <div className={Styles.verticalFlex} style={{width: "60px"}}>
+                <Image className={Styles.avatar} src={props.message.author.iconURL ?? "https://picsum.photos/50"} width={50} height={50} alt=""/>  {/* TODO: Add a cync icon here as a default*/}
+            </div>
+            <div className={Styles.verticalFlex} style={{width: "calc(100vw - 60px - 40px)"}}>
+                <Author message={props.message} />
+                <p className={Styles.messageContent}>{props.message.content}</p>
+                {
+                    props.message.embeds ? props.message.embeds.map((embed, index) => {
+                        return <Embed key={index.toString()} embed={embed} />
+                    }) : null
+                }
+                {
+                    props.message.attachments ? props.message.attachments.map((attachment, index) => {
+                        return <Attachment key={index.toString()} attachment={attachment} alt="" />
+                    }) : null
+                }
+            </div>
+        </div>
+    )
 }
 
-export default Message;
\ No newline at end of file
+export default message;
\ No newline at end of file