diff --git a/Components/Transcripts/Author.js b/Components/Transcripts/Author.js
new file mode 100644
index 0000000..aa9ecdd
--- /dev/null
+++ b/Components/Transcripts/Author.js
@@ -0,0 +1,24 @@
+import Image from "next/image";
+import Styles from "../../styles/Components/transcripts.module.css"
+
+function Author(props) {
+    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>
+        </div>
+    )
+
+}
+
+export default Author;
diff --git a/Components/Transcripts/Embed.js b/Components/Transcripts/Embed.js
new file mode 100644
index 0000000..84d1c32
--- /dev/null
+++ b/Components/Transcripts/Embed.js
@@ -0,0 +1,7 @@
+import { Component } from "react";
+
+class Embed extends Component {
+
+}
+
+export default Embed;
\ No newline at end of file
diff --git a/Components/Transcripts/Message.js b/Components/Transcripts/Message.js
new file mode 100644
index 0000000..5006ade
--- /dev/null
+++ b/Components/Transcripts/Message.js
@@ -0,0 +1,9 @@
+import { Component } from "react";
+
+class Message extends Component {
+
+
+
+}
+
+export default Message;
\ No newline at end of file
diff --git a/next.config.js b/next.config.js
index 33c5c8e..86c2e9d 100644
--- a/next.config.js
+++ b/next.config.js
@@ -34,5 +34,8 @@
         ]
       },
     ];
+  },
+  images: {
+    domains: ["picsum.photos", "cdn.discordapp.com"]
   }
 };
\ No newline at end of file
diff --git a/package.json b/package.json
index a6512ff..6bf7993 100644
--- a/package.json
+++ b/package.json
@@ -7,7 +7,7 @@
     "build": "ANALYZE=true NODE_ENV=production next build",
     "start": "next start",
     "lint": "next lint",
-    "windev": "next dev",
+    "windev": "next dev -p 3030",
     "winbuild": "next build"
   },
   "dependencies": {
diff --git a/pages/nucleus/transcript/index.js b/pages/nucleus/transcript/index.js
index 1c9e88f..1275e67 100644
--- a/pages/nucleus/transcript/index.js
+++ b/pages/nucleus/transcript/index.js
@@ -1,5 +1,6 @@
 import Axios from 'axios';
 import React from 'react';
+import Author from '../../../Components/Transcripts/Author';
 
 function Index(props) {
     return <>
@@ -13,7 +14,7 @@
         paddingLeft: "25px",
         color: "white",
         fontSize: "1.5em",
-    }}>Nucleus Transcripts</div>
+    }}>Transcript for: {props.data.for.username}#{props.data.for.discriminator} | In {<a href={`https://discord.com/channels/${props.data.guild}/${props.data.channel}`}>ChannelName</a>} | Type: {props.data.type}</div>
     <div style={{
         height: "100vw",
         width: "100vw",
@@ -23,7 +24,13 @@
         paddingTop: "10px",
         transition: "all 0.3s ease-in-out"
     }}>
-        <p>{props.humanReadable}</p>
+        <Author author={props.data.messages[0].author} />
+    {/* {
+        props.data.messages.map((message, index) => {
+            console.log(index, message)
+            return <Author key={index.toString()} author={message.author} />
+        })
+    } */}
     </div>
 </>
 }
@@ -40,7 +47,7 @@
     }
     let code;
     try {
-        code = await Axios.get(`http://localhost:10000/transcript/${ctx.query.code}/human`);
+        code = (await Axios.get(`http://localhost:10000/transcript/${ctx.query.code}`))
     } catch (e) {
         return {
             redirect: {
@@ -51,7 +58,7 @@
     }
     return {
         props: {
-            humanReadable: code.data
+            data: code.data
         }
     }
 }
\ No newline at end of file
diff --git a/pages/nucleus/transcript/testing.js b/pages/nucleus/transcript/testing.js
index ac0240b..87e9a2c 100644
--- a/pages/nucleus/transcript/testing.js
+++ b/pages/nucleus/transcript/testing.js
@@ -22,7 +22,11 @@
             paddingTop: "10px",
             transition: "all 0.3s ease-in-out"
         }}>
-            <p>{props.humanReadable}</p>
+            {
+                props.humanReadable.split("\n").map((s, i) => {
+                    return <p key={i}>{s}</p>
+                })
+            }
         </div>
     </>
 }
@@ -40,7 +44,7 @@
     if (ctx.query.code === "test") {
         return {
             props: {
-                humanReadable: "This is a test string! It should render correctly on the page"
+                humanReadable: "This is a test string! It should render correctly on the page\nAnd a newline!"
             }
         }
     } else {
diff --git a/styles/Components/transcripts.module.css b/styles/Components/transcripts.module.css
new file mode 100644
index 0000000..e10da3f
--- /dev/null
+++ b/styles/Components/transcripts.module.css
@@ -0,0 +1,39 @@
+.horizontalFlex {
+    width: 100vw;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: center;
+    gap: 10px;
+}
+
+.container {
+    width: 100vw;
+    display: flex;
+    flex-direction: row;
+    justify-content: left;
+    align-items: top;
+    gap: 10px;
+    margin-top: 20px;
+}
+
+.verticalFlex {
+    width: 100vw;
+    display: flex;
+    flex-direction: column;
+    justify-content: left;
+    align-items: flex-start;
+    gap: 10px;
+}
+
+.avatar {
+    border-radius: 25px;
+}
+
+.botBadge {
+    background-color: #6576CC;
+    color: white;
+    border-radius: 5px;
+    padding: 2px 5px;
+    font-size: 12px;
+}
\ No newline at end of file