diff --git a/src/Client/src/components/Link.tsx b/src/Client/src/components/Link.tsx
new file mode 100644
index 0000000..578f1d5
--- /dev/null
+++ b/src/Client/src/components/Link.tsx
@@ -0,0 +1,17 @@
+interface Props {
+  children: string;
+  href: string;
+  target?: "_blank" | "";
+}
+
+export default function Link({ children, href, target }: Props) {
+  return (
+    <a
+      href={href}
+      target={target}
+      className="underline underline-offset-2 hover:underline-offset-4"
+    >
+      {children}
+    </a>
+  );
+}
diff --git a/src/Client/src/components/NavBar.tsx b/src/Client/src/components/NavBar.tsx
index e2d36c7..e2a0434 100644
--- a/src/Client/src/components/NavBar.tsx
+++ b/src/Client/src/components/NavBar.tsx
@@ -46,7 +46,7 @@ export default function NavBar() {
         onClose={setMobileMenuOpen}
       >
         <div className="fixed inset-0 z-10" />
-        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 bg-black w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 text-white border-l-2">
+        <Dialog.Panel className="fixed inset-y-0 right-0 z-10 bg-black w-full overflow-y-auto px-6 py-6 sm:max-w-sm sm:ring-1 sm:ring-gray-900/10 text-white sm:border-l-2">
           <div className="flex items-center justify-between">
             <a href="#" className="-m-1.5 p-1.5">
               <span className="sr-only">Beau Findlay</span>
diff --git a/src/Client/src/components/Subtitle.tsx b/src/Client/src/components/Subtitle.tsx
new file mode 100644
index 0000000..a84f69d
--- /dev/null
+++ b/src/Client/src/components/Subtitle.tsx
@@ -0,0 +1,11 @@
+interface Props {
+  children: string;
+  className?: string | null;
+}
+
+export default function Subtitle({ children, className }: Props) {
+  const defaultStyles = "text-2xl py-4 font-semibold";
+  const styles = className ? `${defaultStyles} ${className}` : defaultStyles;
+
+  return <h2 className={styles}>{children}</h2>;
+}
diff --git a/src/Client/src/components/Text.tsx b/src/Client/src/components/Text.tsx
new file mode 100644
index 0000000..e67b657
--- /dev/null
+++ b/src/Client/src/components/Text.tsx
@@ -0,0 +1,9 @@
+import { ReactNode } from "react";
+
+interface Props {
+  children: ReactNode;
+}
+
+export default function Text({ children }: Props) {
+  return <p className="text-xl py-4">{children}</p>;
+}
diff --git a/src/Client/src/components/Title.tsx b/src/Client/src/components/Title.tsx
new file mode 100644
index 0000000..086c2cc
--- /dev/null
+++ b/src/Client/src/components/Title.tsx
@@ -0,0 +1,7 @@
+interface Props {
+  children: string;
+}
+
+export default function Title({ children }: Props) {
+  return <h1 className="text-4xl">{children}</h1>;
+}
diff --git a/src/Client/src/pages/HomePage.tsx b/src/Client/src/pages/HomePage.tsx
index 9a570db..9be6c7f 100644
--- a/src/Client/src/pages/HomePage.tsx
+++ b/src/Client/src/pages/HomePage.tsx
@@ -1,3 +1,26 @@
+import Link from "../components/Link";
+import Subtitle from "../components/Subtitle";
+import Text from "../components/Text";
+import Title from "../components/Title";
+
 export default function HomePage() {
-  return <p className="text-3xl font-bold underline">Hello world</p>;
+  return (
+    <>
+      <Title>Hi, I'm Beau.</Title>
+      <Text>
+        I'm a UK-based software engineer and I love building cool stuff.
+      </Text>
+
+      <Subtitle className="mt-12">A bit about me</Subtitle>
+      <Text>
+        I mostly specialise in back-end C#/.NET development and I've built
+        systems that scale for hundreds-of-thousands of global users.
+      </Text>
+      <Text>
+        I've worked with businesses at all sizes and stages and I'm currently
+        heading up the tech as CTO at a cool startup called{" "}
+        <Link href="https://unhurdmusic.com">un:hurd music</Link>.
+      </Text>
+    </>
+  );
 }
diff --git a/src/Client/src/pages/Layout.tsx b/src/Client/src/pages/Layout.tsx
index b40dbe0..3de92b2 100644
--- a/src/Client/src/pages/Layout.tsx
+++ b/src/Client/src/pages/Layout.tsx
@@ -7,10 +7,9 @@ export default function Layout() {
     <div className="bg-black font-mono text-slate-50 antialiased px-6 lg:px-8">
       <div className="flex flex-col min-h-screen mx-auto max-w-7xl fade-in ">
         <NavBar />
-        <div className="flex-1">
+        <div className="flex-1 py-8">
           <Outlet />
         </div>
-
         <Footer />
       </div>
     </div>