diff --git a/public/assets/unknown.png b/public/assets/unknown.png
new file mode 100644
index 0000000..f70713c
Binary files /dev/null and b/public/assets/unknown.png differ
diff --git a/src/renderCard.tsx b/src/renderCard.tsx
index 9dd9a08..d231b0c 100644
--- a/src/renderCard.tsx
+++ b/src/renderCard.tsx
@@ -7,11 +7,13 @@ type Parameters = {
 }
 
 const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
-    //create svg, foreign object almost everything lol
-
+    
     let avatarBorderColor: string = "#747F8D";
     let userStatus: string = "";
     let avatarExtension: string = "webp";
+    let activity: any = false;
+
+    if(body.data.activities[Object.keys(body.data.activities).length - 1].type === 0) activity = body.data.activities[Object.keys(body.data.activities).length - 1];
 
     if(body.data.discord_user.avatar.startsWith("a_")) avatarExtension = "gif";
     if(params.animated === "false") avatarExtension = "webp";
@@ -35,19 +37,20 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
 
     if(body.data.activities[0] && body.data.activities[0].type === 4) userStatus = body.data.activities[0].state;
 
-    console.log(flags);
+    console.log(Object.keys(body.data.activities).length);
 
     return `
             <svg width="400px" height="218px">
+
                 <foreignObject>
                     <div xmlns="http://www.w3.org/1999/xhtml" style="
                         position: absolute;
                         width: 400px;
                         height: 200px;
                         inset: 0;
-                        background-color: #000;
+                        background-color: #1a1c1f;
                         color: #fff;
-                        font-family: Century Gothic;
+                        font-family: 'Century Gothic';
                         font-size: 16px;
                         display: flex;
                         flex-direction: column;
@@ -55,18 +58,19 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                         border-radius: 10px;
                     ">
                         <div style="
-                            position: relative;
                             width: 400px;
                             height: 100px;
                             inset: 0;
                             display: flex;
                             flex-direction: row;
+                            padding-bottom: 5px;
                             border-bottom: solid 0.5px #333;
                         ">
                             <div style="
                                 display: flex;
                                 flex-direction: row;
-                                height: auto;
+                                height: 80px;
+                                width: 80px;
                             ">
                                 <img src="https://cdn.discordapp.com/avatars/${body.data.discord_user.id}/${body.data.discord_user.avatar}.${avatarExtension}?size=2048" style="
                                     border: solid 3px ${avatarBorderColor};
@@ -74,13 +78,14 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                     width: 50px;
                                     height: 50px;
                                     position: relative;
-                                    top: 10px;
-                                    left: 10px;
+                                    top: 50%;
+                                    left: 50%;
+                                    transform: translate(-50%, -50%);
                                 "/>
                             </div>
                             <div style="
-                                margin-left: 1.75rem;
-                                height: 75px;
+                                height: 80px;
+                                width: 240px;
                             ">
                                 <div style="
                                     display: flex;
@@ -126,17 +131,35 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                 </h1>
 
                             </div>
+                            <a style="
+                                position: relative;
+                                top: 50%;
+                                width: 30px;
+                                height: 15px;
+                                transform: translate(0, -50%);
+                                background-color: #3BA55D;
+                                color: #fff;
+                                text-align: center;
+                                text-decoration: none;
+                                border-radius: 5px;
+                                font-size: 0.75rem;
+                                padding: 5px 10px;
+                            " 
+                            href="https://discord.com/users/${body.data.discord_user.id}">
+                                ADD
+                            </a>
                         </div>
 
-                        ${body.data.spotify ? 
+                        ${body.data.spotify && !body.data.activities[1] ? 
 
                             `
                             <div style="
                                 display: flex;
                                 flex-direction: row;
-                                height: 100px;
+                                height: 120px;
                                 margin-left: 15px;
                                 font-size: 0.75rem;
+                                padding-top: 18px;
                             ">
                                 <img src="${body.data.spotify.album_art_url}" style="
                                     width: 80px; 
@@ -144,23 +167,83 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                     border: solid 0.5px #222;
                                     border-radius: 10px; 
                                     margin-right: 15px;
-                                
                                 "/>
 
                                 <div style="
                                     color: #999;
-                                    line-height: 0.9rem;
-                                    margin-top: -5px;
+                                    line-height: 0.5rem;
                                 ">
+                                    <p style="font-size: 0.7rem; color: #1CB853; margin-bottom: 20px;">LISTENING NOW...</p> 
                                     <p style="color: #fff; font-weight: bold;">${body.data.spotify.song}</p>
-                                    <p>by <span style="color: #fff">${body.data.spotify.artist}</span></p>
-                                    <p style="font-style: italic;">on <span style="color: #e6e6e6">${body.data.spotify.album}</span></p> 
+                                    <p style="color: #ccc">${body.data.spotify.artist}</p>
                                 </div>
                             </div>
                             `
                         
-                        : `
+                        : ``}
+
+                        ${activity ? 
+                            
+                            `
                             <div style="
+                                display: flex;
+                                flex-direction: row;
+                                height: 120px;
+                                margin-left: 15px;
+                                font-size: 0.75rem;
+                                padding-top: 18px;
+                            ">
+                                <div style="
+                                    margin-right: 15px; 
+                                    width: auto;
+                                    height: auto;
+                                ">
+                                ${activity.assets > 0 ? 
+                                    `
+                                    <img src="https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.large_image}.webp" style="
+                                        width: 80px; 
+                                        height: 80px; 
+                                        border: solid 0.5px #222;
+                                        border-radius: 10px; 
+                                    "/>
+                                    `
+                                : `
+                                    <img src="/assets/unknown.png" style="
+                                        width: 80px; 
+                                        height: 80px; 
+                                        filter: invert(100);
+                                    "/>
+                                `}
+
+                                ${activity.assets ? 
+                                    `<img src="https://cdn.discordapp.com/app-assets/${activity.application_id}/${activity.assets.small_image}.webp" style="
+                                        width: 30px;
+                                        height: 30px;
+                                        border-radius: 50%;
+                                        margin-left: -26px;
+                                        margin-bottom: -8px;
+                                    "/>`
+                                : ``}
+
+                                </div>
+                                <div style="
+                                    color: #999;
+                                    line-height: 0.5rem;
+                                ">
+                                    <p style="font-size: 0.7rem; color: #7289DA; margin-bottom: 20px;">PLAYING A GAME...</p> 
+                                    <p style="color: #fff; font-weight: bold;">${activity.name}</p>
+                                    ${activity.details ? 
+                                        `<p style="color: #ccc">${activity.details}</p>`
+                                    : ``}
+                                   
+                                </div>
+                            </div>
+                            `
+                        
+                        : ``}
+
+                        ${!activity && !body.data.listening_to_spotify === false ? 
+                            `<div style="
                                 display: flex;
                                 flex-direction: row;
                                 height: 150px;
@@ -175,8 +258,8 @@ const renderCard = (body: LanyardTypes.Root, params: Parameters): any => {
                                 ">
                                     I'm not currently doing anything!
                                 </p>
-                            </div>
-                        `}
+                            </div>`
+                        : ``}
 
                     </div>
                 </foreignObject>