diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index f9b4ab1..286db93 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import { GitHub, LastFM, Twitter } from './SocialIcons';
+import { GitHub, LastFM, Twitter, Medal } from './SocialIcons';
 
 export default function Footer() {
     const [mailState, setMailState] = useState(false);
@@ -11,7 +11,7 @@ export default function Footer() {
     }, [mailState])
 
     return (
-        <div className="bg-stone-800 lg:w-1/2 md:w-full mx-auto rounded-lg text-center text-white bottom-0 left-0 right-0 p-4 select-none">
+        <div className="bg-gray-500 lg:w-1/2 md:w-full mx-auto rounded-lg text-center text-white bottom-0 left-0 right-0 p-4 select-none">
             <h1 className="font-bold">&copy; {new Date().getFullYear()}, Alex Frantz. All Rights Reserved</h1>
             <p>All logos & images on this page belong to their respective owners.</p>
 
@@ -36,6 +36,9 @@ export default function Footer() {
                 <a href="https://last.fm/user/lulawex" target="_blank">
                     <LastFM />
                 </a>
+                <a href="https://medal.tv/users/215577" target="_blank">
+                    <Medal />
+                </a>
             </div>
         </div>
     )
diff --git a/src/components/RecentWatch.tsx b/src/components/RecentWatch.tsx
new file mode 100644
index 0000000..bb80aba
--- /dev/null
+++ b/src/components/RecentWatch.tsx
@@ -0,0 +1,91 @@
+import { useState, useEffect } from 'react';
+
+type WatchDataResponse = {
+    result: {
+        data: {
+            json: WatchData
+        }
+    }
+};
+type WatchData = {
+    id: number,
+    title: string,
+    description: string,
+    imageKey: string,
+    currentEpisode: string,
+    tmdbID: string,
+    finished: boolean,
+    startedOn: Date,
+    createdAt: Date,
+    updatedAt: Date,
+    createdById: string   
+}
+
+export default function RecentWatch() {
+    const [ data, setData ] = useState<WatchData | null>(null);
+    const [ loading, setLoading ] = useState<boolean>(true);
+    const [ errorState, setErrorState ] = useState<string>("");
+
+    useEffect(() => {
+        fetch("https://watch.alexav.gg/api/trpc/watchItem.getLatest", {
+            method: 'get'
+        })
+        .then(async (res) => {    
+            if (res.ok) {
+                const json = await res.json() as WatchDataResponse;
+                setData(json.result.data.json);
+                setLoading(false)
+            } else {
+                setErrorState("Failed to fetch data!");
+                setLoading(false);
+            }
+        })
+        .catch((e) => {
+            setLoading(false);
+            setErrorState(e.message)
+        })
+    }, []);
+
+    const parseDate = (date: Date) => {
+        const jsDate = new Date(date);
+        return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
+    }
+
+    return (
+        <a href={data?.id ? "https://watch.alexav.gg/?id=" + data?.id : "#"} target="_blank">
+            <div className="bg-white text-black p-4">
+                {
+                    loading ? (
+                        <h1>Loading..</h1>
+                    ) : !errorState ? (
+                        <div className="flex items-center">
+                            <img 
+                                src={data?.imageKey}
+                                width="50"
+                            />
+                            <div className="flex flex-wrap mx-2">
+                                <h1 className="w-full font-bold">{data?.title}</h1>
+                                
+                                {
+                                    data?.finished ? (
+                                        <h1 className="w-full font-bold">Finished!</h1>
+                                    ) : (
+                                        <h1 className="w-full">Started on {parseDate(new Date(data?.startedOn as Date))}</h1>
+                                    )
+                                }
+
+                                <h1>{data?.currentEpisode}</h1>
+                            </div>
+                        </div>
+                    ) : (
+                        <>
+                            <h1 className="font-bold text-2xl">Failed to fetch :(</h1>
+                            <p>Check out <a className="underline" href="https://watch.alexav.gg" target="_blank">watch.alexav.gg</a> if this isn't working.</p>
+                        </>
+                    )
+                }
+            </div>
+        </a>
+    )
+
+}
\ No newline at end of file
diff --git a/src/components/SocialIcons.tsx b/src/components/SocialIcons.tsx
index 6258fe2..9ec8788 100644
--- a/src/components/SocialIcons.tsx
+++ b/src/components/SocialIcons.tsx
@@ -46,4 +46,32 @@ export const Twitter = () => {
             1.154h7.594l5.243 6.932ZM17.61 20.644h2.039L6.486 3.24H4.298Z"/>
         </svg>
     )
+}
+
+export const Medal = () => {
+    return (
+        <svg xmlns="http://www.w3.org/2000/svg" className="w-7 mt-2 mx-auto bg-white p-1 rounded-lg inline" x="0px" y="0px" viewBox="0,0,256,256">
+            <g fill="none" fillRule="nonzero" stroke="none" strokeWidth="1" strokeLinecap="butt" strokeLinejoin="miter" strokeMiterlimit="10" 
+            strokeDasharray="" strokeDashoffset="0" fontFamily="none" fontWeight="none" fontSize="none" textAnchor="none"
+            >
+                <g transform="scale(5.33333,5.33333)">
+                    <path d="M40,18.723l-8.239,4.777l8.239,4.777z" fill="none">
+                    </path>
+                    <path d="M8,28.277l8.239,-4.777l-8.239,-4.777z" fill="none">
+                    </path>
+                    <path d="M8,18.723l8.239,4.777l7.761,-4.5l-16,-9l-8,4.085v18.83l8,-4.638z" fill="#000000">
+                    </path>
+                    <path d="M40,10l-16,9l7.761,4.5l8.239,-4.777v9.554l8,4.638v-18.83z" fill="#000000">
+                    </path><path d="M31.761,23.5l-7.761,4.5l16,9v-8.723z" fill="#000000">
+                    </path><path d="M8,28.277v8.723l16,-9l-7.761,-4.5z" fill="#000000">
+                    </path>
+                    <path d="M0,32.915l8,4.085v-8.723z" fill="#060606"></path>
+                    <path d="M24,19l-7.761,4.5l7.761,4.5l7.761,-4.5z" fill="#060606">
+                    </path>
+                    <path d="M40,37l8,-4.085l-8,-4.638z" fill="#060606">
+                    </path>
+                </g>
+            </g>
+        </svg>
+    )
 }
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index d4e55e7..2e5b12b 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -3,6 +3,7 @@ import Header from "./components/Header";
 import ListBox from "./components/ListBox";
 import Project from "./components/Project";
 import ContactForm from "./components/ContactForm";
+import RecentWatch from "./components/RecentWatch";
 
 export default function Home() {
     return (
@@ -37,7 +38,17 @@ export default function Home() {
                             />
                         </div>
                 </section>
-                <section className="bg-muted py-10 px-4">
+                <section className="my-5 py-10 px-4 bg-gray-500">
+                    <div className="grid grid-cols-2 gap-4">
+                        <div className="flex justify-center items-center">
+                            <h1 className="text-4xl font-bold">What am I watching?</h1>
+                        </div>
+                        <div>
+                            <RecentWatch />
+                        </div>
+                    </div>
+                </section>
+                <section className="my-5 px-4">
                     <div className="container max-w-5xl mx-auto">
                         <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
                             <div>