diff --git a/package-lock.json b/package-lock.json
index 7414116..99e9b0d 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -15,8 +15,8 @@
       "devDependencies": {
         "@eslint/eslintrc": "^3",
         "@types/node": "^20",
-        "@types/react": "^19",
-        "@types/react-dom": "^19",
+        "@types/react": "^19.0.8",
+        "@types/react-dom": "^19.0.3",
         "eslint": "^9",
         "eslint-config-next": "15.1.6",
         "postcss": "^8",
diff --git a/package.json b/package.json
index ce999df..019d5d3 100644
--- a/package.json
+++ b/package.json
@@ -9,19 +9,19 @@
     "lint": "next lint"
   },
   "dependencies": {
+    "next": "15.1.6",
     "react": "^19.0.0",
-    "react-dom": "^19.0.0",
-    "next": "15.1.6"
+    "react-dom": "^19.0.0"
   },
   "devDependencies": {
-    "typescript": "^5",
+    "@eslint/eslintrc": "^3",
     "@types/node": "^20",
-    "@types/react": "^19",
-    "@types/react-dom": "^19",
-    "postcss": "^8",
-    "tailwindcss": "^3.4.1",
+    "@types/react": "^19.0.8",
+    "@types/react-dom": "^19.0.3",
     "eslint": "^9",
     "eslint-config-next": "15.1.6",
-    "@eslint/eslintrc": "^3"
+    "postcss": "^8",
+    "tailwindcss": "^3.4.1",
+    "typescript": "^5"
   }
 }
diff --git a/src/app/layout.tsx b/src/app/layout.tsx
index 58f9f2e..d9574d5 100644
--- a/src/app/layout.tsx
+++ b/src/app/layout.tsx
@@ -27,23 +27,23 @@ export const metadata: Metadata = {
   },
   appleWebApp: {
     title: "Alex Frantz",
-    startupImage: "https://alexav.gg/apple-touch-icon.png"
+    startupImage: "/apple-touch-icon.png"
   },
   icons: [
     {
       rel: "icon",
       type: "image/png",
       sizes: "32x32",
-      url: "https://alexav.gg/favicon-32x32.png"
+      url: "/favicon-32x32.png"
     },
     {
       rel: "icon",
       type: "image/png",
       sizes: "16x16",
-      url: "https://alexav.gg/favicon-16x16.png"
+      url: "/favicon-16x16.png"
     }
   ],
-  manifest: "https://alexav.gg/site.webmanifest"
+  manifest: "/site.webmanifest"
 };
 
 export default function RootLayout({
diff --git a/src/app/links/page.tsx b/src/app/links/page.tsx
new file mode 100644
index 0000000..1bbee00
--- /dev/null
+++ b/src/app/links/page.tsx
@@ -0,0 +1,42 @@
+import Link from "next/link";
+import CustomButton from "@/components/CustomButton";
+
+export default function Links() {
+    return (
+        <div className="min-h-screen bg-black flex justify-center items-center text-black">
+            <div className="bg-white rounded-lg p-4 text-center mb-20">
+                <Link href="/">
+                    <h1 className="hover:underline font-bold text-2xl text-center">Alex Frantz</h1>
+                </Link>
+                <p>QA @ <a href="https://medal.tv" className="hover:underline" target="_blank">Medal.tv</a></p>
+                <hr className="my-2 mx-auto border-black" />
+                <div className="space-y-2">
+                    <CustomButton 
+                        to="https://medal.tv/users/215577"
+                        label="Medal"
+                    />
+                    <CustomButton 
+                        to="https://twitter.com/carlgrimesdupe"
+                        label="Twitter"
+                    />
+                    <CustomButton 
+                        to="https://bsky.app/profile/alexav.gg"
+                        label="Bluesky"
+                    />
+                    <CustomButton 
+                        to="https://github.com/azpha"
+                        label="GitHub"
+                    />
+                    <CustomButton 
+                        to="https://last.fm/user/lulawex"
+                        label="Last.fm"
+                    />
+                    <CustomButton 
+                        to="https://linkedin.com/in/thatalex"
+                        label="LinkedIn"
+                    />
+                </div>
+            </div>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 5889605..95dba22 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,3 +1,4 @@
+import Image from 'next/image';
 import { Twitter, Bluesky, Medal, GitHub, LinkedIn } from '@/components/Icons'
 import ProjectComponent from '@/components/ProjectComponent';
 import ContactForm from '@/components/ContactForm';
@@ -13,33 +14,37 @@ export default function Home() {
   return (
     <div className="">
       <section id="about">
-        <div className="w-full mx-auto text-center p-10">
-            <div className="my-1">
-                <h1 className="text-3xl font-bold">Hi, I&apos;m Alex</h1>
-                <p>I&apos;m a junior developer primarily working as QA, but sometimes writing questionable code at <a className="hover:underline text-yellow-400" href="https://medal.tv" target="_blank">Medal.tv</a></p>
+        <div className="mx-auto text-center p-10">
+            <div className="mx-auto grid gap-4 grid-cols-1 lg:grid-cols-2 lg:w-1/2">
+                <div className="flex justify-center">
+                    <Image className="rounded-full" src={"https://storage.alexav.gg/content/picture.jpg"} alt="Profile Picture" width={250} height={250} />
+                </div>
+                <div className="text-center lg:text-left lg:my-10 w-full">
+                    <h1 className="text-4xl font-bold">Hi, I&apos;m Alex</h1>
+                    <p>I&apos;m a junior developer primarily working as QA, but sometimes writing questionable code at <a className="hover:underline text-yellow-400" href="https://medal.tv" target="_blank">Medal.tv</a></p>
+                    
+                    <div className="block my-2 space-x-2">
+                        <a href="https://twitter.com/carlgrimesdupe" target="_blank">
+                            <Twitter />
+                        </a>
+                        <a href="https://bsky.app/profile/alexav.gg" target="_blank">
+                            <Bluesky />
+                        </a>
+                        <a href="https://medal.tv/users/215577" target="_blank">
+                            <Medal />
+                        </a>
+                        <a href="https://github.com/azpha/website" target="_blank">
+                            <GitHub />
+                        </a>
+                        <a href="https://linkedin.com/in/thatalex" target="_blank">
+                            <LinkedIn />
+                        </a>
+                        <a href="/links" className="opacity-40 text-sm">
+                            <p className="underline">and more..</p>
+                        </a>
+                    </div>
+                </div>
             </div>
-
-            <div className="block space-x-2">
-                {/* socials */}
-                <a href="https://twitter.com/carlgrimesdupe" target="_blank">
-                    <Twitter />
-                </a>
-                <a href="https://bsky.app/profile/alexav.gg" target="_blank">
-                    <Bluesky />
-                </a>
-                <a href="https://medal.tv/users/215577" target="_blank">
-                    <Medal />
-                </a>
-                <a href="https://github.com/azpha/website" target="_blank">
-                    <GitHub />
-                </a>
-                <a href="https://linkedin.com/in/thatalex" target="_blank">
-                    <LinkedIn />
-                </a>
-            </div>
-            <a href="/links" className="opacity-40 text-sm">
-                <p className="underline">and more..</p>
-            </a>
         </div>
       </section>
 
diff --git a/src/components/CustomButton.tsx b/src/components/CustomButton.tsx
new file mode 100644
index 0000000..ffe614d
--- /dev/null
+++ b/src/components/CustomButton.tsx
@@ -0,0 +1,24 @@
+import React from "react"
+import Link from "next/link"
+
+export default function CustomButton({
+    to,
+    label
+}: {
+    to: string,
+    label: string
+}) {
+    return (
+        <div>
+            <Link href={to} target="_blank">
+                <div className={`bg-black text-white text-lg font-semibold text-left p-2 w-52 rounded-lg`}>
+                    <div className="px-1 space-x-2">
+                        <div className="inline">
+                            {label}
+                        </div>
+                    </div>
+                </div>
+            </Link>
+        </div>
+    )
+}
\ No newline at end of file
diff --git a/src/components/Header.tsx b/src/components/Header.tsx
index a335901..4c4ec3c 100644
--- a/src/components/Header.tsx
+++ b/src/components/Header.tsx
@@ -1,27 +1,28 @@
+"use client"
+import { useState, useEffect } from 'react';
 import Link from "next/link"
 
-const quoteArray = [
-    "It works on my machine",
-    "Revert 'Revert 'Revert",
-    "'fuck the tests'",
-    "this is so cooked",
-    "Professional Production Tester",
-    "I break hearts to save lives.",
-    "go bills",
-    "josh allen is my goat",
-    "lets go buffalo",
-    "oorah",
-    "how bout them bills??",
-    "where else would you rather be..",
-    "..than right here, right now?!"
-]
+export default function Header() {
+    const quoteArray = [
+        "It works on my machine",
+        "Revert 'Revert 'Revert",
+        "'fuck the tests'",
+        "this is so cooked",
+        "Professional Production Tester",
+        "I break hearts to save lives.",
+        "go bills",
+        "josh allen is my goat",
+        "lets go buffalo",
+        "oorah",
+        "how bout them bills??",
+        "where else would you rather be..",
+        "..than right here, right now?!"
+    ]
+    const [ quote, setQuote ] = useState<string>(quoteArray[0])
 
-async function getQuote(index: number) {
-    return quoteArray[index]
-}
-
-export default async function Header() {
-    const quote = await getQuote(Math.floor(Math.random() * quoteArray.length))
+    useEffect(() => {
+        setQuote(quoteArray[Math.floor(Math.random() * quoteArray.length)]);
+    }, [])
 
     return (
         <div className="bg-zinc-900 p-4 flex justify-between">