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