diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
index 45eeb1a..1ed27b6 100644
--- a/src/components/Footer.tsx
+++ b/src/components/Footer.tsx
@@ -5,9 +5,11 @@ export default function Footer() {
     const [mailState, setMailState] = useState(false);
 
     useEffect(() => {
-        setTimeout(() => {
-            setMailState(false)
-        }, 3000)
+        if (mailState) {
+            setTimeout(() => {
+                setMailState(false)
+            }, 3000)
+        }
     }, [mailState])
 
     return (
diff --git a/src/components/Project.tsx b/src/components/ProjectCard.tsx
similarity index 100%
rename from src/components/Project.tsx
rename to src/components/ProjectCard.tsx
diff --git a/src/components/ProjectComponent.tsx b/src/components/ProjectComponent.tsx
new file mode 100644
index 0000000..117b143
--- /dev/null
+++ b/src/components/ProjectComponent.tsx
@@ -0,0 +1,29 @@
+export default function ProjectComponent({
+    url,
+    header,
+    subheader,
+    image,
+    imageSize = "100"
+}: {
+    url: string,
+    header: string,
+    subheader: string,
+    image: string,
+    imageSize?: string
+}) {
+    return (
+        <a href={url} target="_blank">
+            <div className="bg-white text-black max-w-fit mx-auto p-2">
+                <div className="flex items-center">
+                    <img src={image} width={imageSize} />
+
+                    <div className="flex flex-wrap mx-2">
+                        <h1 className="font-bold">{header}</h1>
+                        <div className="basis-10" />
+                        <h1>{subheader}</h1>
+                    </div>
+                </div>
+            </div>
+        </a>
+    )
+}
\ No newline at end of file
diff --git a/src/components/ProjectComponents/RecentListens.tsx b/src/components/ProjectComponents/RecentListens.tsx
index b94dea1..332d596 100644
--- a/src/components/ProjectComponents/RecentListens.tsx
+++ b/src/components/ProjectComponents/RecentListens.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import ProjectComponent from '../ProjectComponent';
 
 type MusicAPIResponse = {
     data: {
@@ -50,35 +51,14 @@ export default function RecentListens() {
         setLoading(false);
     }, []);
 
-    if (data) {
+    if (!loading && data) {
         return (
-            <a href={data[0].url} target="_blank">
-                <div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto">
-                    {
-                        (loading) ? (
-                            <h1>Loading..</h1>
-                        ) : (!errorState && data) ? (
-                            <div className="flex items-center">
-                                <img 
-                                    src={data[0].image.filter((v) => v.size === "large")[0]['#text']}
-                                    width="100"
-                                />
-                                <div className="flex flex-wrap mx-2">
-                                    <h1 className="w-full font-bold">{data[0].name}</h1>
-    
-                                    <h1>{data[0].artist['#text']}</h1>
-                                </div>
-                            </div>
-                        ) : (
-                            <>
-                                <h1 className="font-bold text-2xl">Failed to fetch :(</h1>
-                                <p>Check out <a className="underline" href="https://last.fm/user/lulawex" target="_blank">last.fm/lulawex</a> if this isn't working.</p>
-                                <p className="text-sm italic">{errorState}</p>
-                            </>
-                        )
-                    }
-                </div>
-            </a>
+            <ProjectComponent 
+                url={data[0].url}
+                header={data[0].name}
+                subheader={data[0].artist["#text"]}
+                image={data[0].image.filter((v) => v.size === "large")[0]["#text"]}
+            />
         )
     } else {
        <>
diff --git a/src/components/ProjectComponents/RecentPhoto.tsx b/src/components/ProjectComponents/RecentPhoto.tsx
index fbbfa36..f43dbd2 100644
--- a/src/components/ProjectComponents/RecentPhoto.tsx
+++ b/src/components/ProjectComponents/RecentPhoto.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import ProjectComponent from '../ProjectComponent';
 
 type PhotoData = {
     id: number,
@@ -45,34 +46,24 @@ export default function RecentPhoto() {
         return `${jsDate.getFullYear()}/${jsDate.getMonth() + 1}/${jsDate.getDate()}`;
     }
 
-    return (
-        <a href={"https://photos.alexav.gg/"} target="_blank">
-            <div className="bg-white text-black p-4 max-w-fit lg:max-w-full mx-auto">
-                {
-                    (loading) ? (
-                        <h1>Loading..</h1>
-                    ) : (!errorState && data) ? (
-                        <div className="flex items-center">
-                            <img 
-                                src={data.imageUrl}
-                                width="200"
-                            />
-                            <div className="flex flex-wrap mx-2">
-                                <h1 className="w-full font-bold">{data.name}</h1>
-
-                                <h1>{parseDate(data.dateTaken as Date)}</h1>
-                            </div>
-                        </div>
-                    ) : (
-                        <>
-                            <h1 className="font-bold text-2xl">Failed to fetch :(</h1>
-                            <p>Check out <a className="underline" href="https://photos.alexav.gg" target="_blank">photos.alexav.gg</a> if this isn't working.</p>
-                            <p className="text-sm italic">{errorState}</p>
-                        </>
-                    )
-                }
-            </div>
-        </a>
-    )
+    if (data && !loading) {
+        return (
+            <ProjectComponent 
+                url={"photos.alexav.gg"}
+                header={data.name}
+                subheader={parseDate(data.dateTaken as Date)}
+                image={data.imageUrl}
+                imageSize={"150"}
+            />
+        )
+    } else {
+        return (
+            <>
+                <h1 className="font-bold text-2xl">No data :(</h1>
+                <p>Check out <a className="underline" href="https://photos.alexav.gg" target="_blank">photos.alexav.gg</a> if this isn't working.</p>
+                <p className="text-sm italic">{errorState}</p>
+            </> 
+        )
+    }
 
 }
\ No newline at end of file
diff --git a/src/components/ProjectComponents/RecentWatch.tsx b/src/components/ProjectComponents/RecentWatch.tsx
index 86390d3..d4f8b44 100644
--- a/src/components/ProjectComponents/RecentWatch.tsx
+++ b/src/components/ProjectComponents/RecentWatch.tsx
@@ -1,4 +1,5 @@
 import { useState, useEffect } from 'react';
+import ProjectComponent from '../ProjectComponent';
 
 type WatchDataResponse = {
     status: number,
@@ -48,42 +49,23 @@ export default function RecentWatch() {
         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 max-w-fit lg:max-w-full mx-auto">
-                {
-                    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>
-                            <p className="text-sm italic">{errorState}</p>
-                        </>
-                    )
-                }
-            </div>
-        </a>
-    )
-
+    if (data && !loading) {
+        return (
+            <ProjectComponent 
+                header={data.title}
+                subheader={ data.finished ? "Finished!" : "Started on " + parseDate(data.startedOn) }
+                url={"https://watch.alexav.gg/?id=" + data.id}
+                image={data.imageKey}
+                imageSize={"50"}
+            />
+        )
+    } else {
+        return (
+            <>
+                <h1 className="font-bold text-2xl">No data :(</h1>
+                <p>Check out <a className="underline" href="https://watch.alexav.gg" target="_blank">watch.alexav.gg</a> if this isn't working.</p>
+                <p className="text-sm italic">{errorState}</p>
+            </> 
+        )
+    }
 }
\ No newline at end of file
diff --git a/src/index.tsx b/src/index.tsx
index 8a8b07c..7cc4b46 100644
--- a/src/index.tsx
+++ b/src/index.tsx
@@ -1,7 +1,7 @@
 import Footer from "./components/Footer";
 import Header from "./components/Header";
 import ListBox from "./components/ListBox";
-import Project from "./components/Project";
+import Project from "./components/ProjectCard";
 import ContactForm from "./components/ContactForm";
 
 // project components
@@ -45,7 +45,7 @@ export default function Home() {
                 <section id="watching" className="my-5 py-10 px-4 bg-gray-500">
                     <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
                         <div className="flex justify-center items-center">
-                            <div>
+                            <div className="text-left md:text-center">
                                 <h1 className="text-4xl font-bold">What am I watching?</h1>
                                 <p>Cool shows and movies I'm watching</p>
                             </div>
@@ -59,7 +59,7 @@ export default function Home() {
                     <div className="grid lg:grid-cols-2 md:grid-cols-1 gap-4">
                         <div className="flex justify-center items-center">
                             <div>
-                                <h1 className="text-4xl font-bold">What am I picturing?</h1>
+                                <h1 className="text-4xl font-bold">What am I capturing?</h1>
                                 <p>Cool game photos I've taken recently</p>
                             </div>
                         </div>
@@ -87,8 +87,9 @@ export default function Home() {
                             <div>
                                 <h2 className="text-3xl font-bold">About Me</h2>
                                 <p className="text-muted-foreground mt-4">
-                                I'm a junior developer with a burning passion for creating not only frontend applications, but also games.
-                                I have experience in languages like JavaScript and Python, along with libraries like React.
+                                    I'm a "junior" developer with a passion for software and games.
+                                    I have experience in languages like JavaScript and Python, and am primarily
+                                    working in libraries like React.
                                 </p>
                                 <div className="mt-8 grid grid-cols-2 gap-4">
                                     <ListBox