diff --git a/public/images/erectile-dysfunction.png b/public/images/erectile-dysfunction.png
new file mode 100644
index 0000000..dc73b54
Binary files /dev/null and b/public/images/erectile-dysfunction.png differ
diff --git a/public/images/hair-loss.png b/public/images/hair-loss.png
new file mode 100644
index 0000000..6d0c491
Binary files /dev/null and b/public/images/hair-loss.png differ
diff --git a/src/app/page.tsx b/src/app/page.tsx
index 2c83646..ac3e7c8 100644
--- a/src/app/page.tsx
+++ b/src/app/page.tsx
@@ -1,21 +1,25 @@
-import Image from "next/image";
 import { Button } from "@/components/ui/button";
-import { Logo } from "@/components/ui/logo";
+import { FacebookLogo } from "@/components/ui/logos/facebook-logo";
+import { GoogleLogo } from "@/components/ui/logos/google-logo";
+import { ManualLogo } from "@/components/ui/logos/manual-logo";
+import { TwitterLogo } from "@/components/ui/logos/twitter-logo";
+import Image from "next/image";
 
 export default function Home() {
   return (
     <main>
+      {/* Hero */}
       <div className="flex pt-8 bg-brand/25">
         <div className="mx-auto max-w-2xl">
           <div>
             <span className="sr-only">Manual</span>
-            <Logo />
+            <ManualLogo />
           </div>
           <div className="mt-28">
-            <h2 className="font-medium tracking-tight text-8xl text-brand">
+            <h1 className="font-medium tracking-tight text-8xl text-brand">
               Be good
               <br /> to yourself
-            </h2>
+            </h1>
             <p className="mt-5 text-lg text-brand">
               We’re working around the clock to bring you a holistic approach to
               your wellness. From top to bottom, inside and out.
@@ -27,7 +31,7 @@ export default function Home() {
         </div>
         <Image
           src="/images/hero-bg.png"
-          alt="Hero Logo"
+          alt="Hero Background"
           className="flex-none mt-8 mr-8"
           width={596}
           height={697}
@@ -35,17 +39,188 @@ export default function Home() {
         />
       </div>
 
-      <div className="flex flex-col items-center mt-8">
-        <h3 className="font-medium text-xl">What we can help with</h3>
-        <h4>Hair loss</h4>
-        <h5 className="font-medium text-lg">
-          Hair loss needn’t be irreversible. We can help!
-        </h5>
-        <p>
-          We’re working around the clock to bring you a holistic approach to
-          your wellness. From top to bottom, inside and out.
-        </p>
+      {/* Treatments */}
+      <div className="flex flex-col items-center pt-16 pb-24">
+        <h2 className="font-medium text-brand tracking-tight text-4xl">
+          What we can help with
+        </h2>
+        <div className="mt-16">
+          <div className="flex items-center relative">
+            <Image
+              src="/images/hair-loss.png"
+              className="z-10"
+              alt="Hair loss"
+              width={370}
+              height={445}
+              priority
+            />
+            <span className="select-none text-brand/5 text-[450px] leading-none absolute left-[30%] z-0">
+              01
+            </span>
+            <div className="pl-32 z-10">
+              <div className="flex flex-col max-w-80">
+                <h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
+                  Hair loss
+                </h3>
+                <h4 className="font-medium text-2xl text-brand mt-2">
+                  Hair loss needn’t be irreversible. We can help!
+                </h4>
+                <p className="mt-5 text-brand">
+                  We’re working around the clock to bring you a holistic
+                  approach to your wellness. From top to bottom, inside and out.
+                </p>
+              </div>
+            </div>
+          </div>
+          <div className="flex items-center relative mt-44">
+            <span className="select-none text-brand/5 text-[450px] leading-none absolute right-[30%] z-0">
+              02
+            </span>
+            <div className="pr-32 z-10">
+              <div className="flex flex-col max-w-80">
+                <h3 className="font-bold text-xs text-brand/75 uppercase tracking-wider">
+                  Erectile dysfunction
+                </h3>
+                <h4 className="font-medium text-2xl text-brand mt-2">
+                  Erections can be a tricky thing. But no need to feel down!
+                </h4>
+                <p className="mt-5 text-brand">
+                  We’re working around the clock to bring you a holistic
+                  approach to your wellness. From top to bottom, inside and out.
+                </p>
+              </div>
+            </div>
+            <Image
+              src="/images/erectile-dysfunction.png"
+              className="z-10"
+              alt="Erectile dysfunction"
+              width={370}
+              height={445}
+              priority
+            />
+          </div>
+        </div>
       </div>
+      <Footer />
     </main>
   );
 }
+
+const footerNavigation = {
+  product: [
+    { name: "Popular", href: "#" },
+    { name: "Trending", href: "#" },
+    { name: "Guided", href: "#" },
+    { name: "Products", href: "#" },
+  ],
+  company: [
+    { name: "Press", href: "#" },
+    { name: "Mission", href: "#" },
+    { name: "Strategy", href: "#" },
+    { name: "About", href: "#" },
+  ],
+  info: [
+    { name: "Support", href: "#" },
+    { name: "Customer Service", href: "#" },
+    { name: "Get started", href: "#" },
+  ],
+};
+
+function Footer() {
+  return (
+    <footer aria-labelledby="footer-heading" className="bg-brand/10">
+      <h2 id="footer-heading" className="sr-only">
+        Footer
+      </h2>
+      <div className="mx-auto max-w-7xl px-6 py-20 sm:py-24 lg:px-8">
+        <div className="xl:grid xl:grid-cols-3 xl:gap-8">
+          <ManualLogo size={75} />
+          <div className="mt-16 grid grid-cols-2 gap-8 xl:col-span-2 xl:mt-0">
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                  Product
+                </h3>
+                <ul role="list" className="mt-6 space-y-5">
+                  {footerNavigation.product.map((item) => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="leading-6 text-brand hover:text-brand/70"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                  Company
+                </h3>
+                <ul role="list" className="mt-6 space-y-5">
+                  {footerNavigation.company.map((item) => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="leading-6 text-brand hover:text-brand/70"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+            </div>
+            <div className="md:grid md:grid-cols-2 md:gap-8">
+              <div>
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                  Info
+                </h3>
+                <ul role="list" className="mt-6 space-y-5">
+                  {footerNavigation.info.map((item) => (
+                    <li key={item.name}>
+                      <a
+                        href={item.href}
+                        className="leading-6 text-brand hover:text-brand/70"
+                      >
+                        {item.name}
+                      </a>
+                    </li>
+                  ))}
+                </ul>
+              </div>
+              <div className="mt-10 md:mt-0">
+                <h3 className="text-xs uppercase tracking-wider font-bold leading-6 text-brand">
+                  Follow us
+                </h3>
+                <ul role="list" className="mt-6 flex gap-5">
+                  <li>
+                    <a href="#" className="leading-6 ">
+                      <FacebookLogo className="text-primary hover:text-primary/70" />
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#" className="leading-6 ">
+                      <GoogleLogo className="text-primary hover:text-primary/70" />
+                    </a>
+                  </li>
+                  <li>
+                    <a href="#" className="leading-6 ">
+                      <TwitterLogo className="text-primary hover:text-primary/70" />
+                    </a>
+                  </li>
+                </ul>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div className="mx-auto max-w-7xl border-brand/10 border-t">
+        <p className="text-center text-brand p-6">
+          &copy; 2024 Manual. All rights reserved.
+        </p>
+      </div>
+    </footer>
+  );
+}
diff --git a/src/components/ui/logos/facebook-logo.tsx b/src/components/ui/logos/facebook-logo.tsx
new file mode 100644
index 0000000..cbd1730
--- /dev/null
+++ b/src/components/ui/logos/facebook-logo.tsx
@@ -0,0 +1,21 @@
+type FacebookLogoProps = {
+  size?: number;
+  className: string;
+};
+
+export function FacebookLogo({ size = 24, className }: FacebookLogoProps) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fill="currentColor"
+        d="M9.52866 22L9.5 13.25H5.75V9.5H9.5V7C9.5 3.626 11.5894 2 14.5992 2C16.041 2 17.2801 2.10734 17.6412 2.15531V5.68134L15.5537 5.68229C13.9168 5.68229 13.5998 6.46012 13.5998 7.60155V9.5H18.25L17 13.25H13.5998V22H9.52866Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ui/logos/google-logo.tsx b/src/components/ui/logos/google-logo.tsx
new file mode 100644
index 0000000..e6a95dc
--- /dev/null
+++ b/src/components/ui/logos/google-logo.tsx
@@ -0,0 +1,21 @@
+type GoogleLogoProps = {
+  size?: number;
+  className: string;
+};
+
+export function GoogleLogo({ size = 24, className }: GoogleLogoProps) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fill="currentColor"
+        d="M20.9016 10.3612H12.1796V14.0439H17.122C16.3329 16.499 14.3808 17.3173 12.138 17.3173C11.2696 17.3185 10.4137 17.1132 9.64294 16.7189C8.8722 16.3246 8.20936 15.753 7.71066 15.0525C7.21197 14.3521 6.89213 13.5434 6.7783 12.6952C6.66446 11.847 6.75997 10.9843 7.05674 10.1802C7.35351 9.37611 7.84277 8.65442 8.48302 8.07634C9.12327 7.49827 9.8956 7.08088 10.7345 6.85958C11.5734 6.63828 12.4541 6.61961 13.3019 6.80514C14.1497 6.99068 14.9395 7.37495 15.6044 7.92535L18.3207 5.37695C17.2269 4.38545 15.904 3.67186 14.4669 3.2981C13.0298 2.92434 11.5218 2.9017 10.0738 3.23214C8.6258 3.56258 7.2815 4.23612 6.15754 5.19432C5.03358 6.15253 4.16392 7.36645 3.62401 8.73077C3.08409 10.0951 2.89024 11.5686 3.05926 13.0234C3.22828 14.4783 3.75507 15.8705 4.59393 17.0794C5.43279 18.2882 6.55837 19.2771 7.87302 19.9604C9.18768 20.6436 10.6517 21.0004 12.138 21C17.1764 21 21.7322 17.7265 20.9016 10.3612Z"
+      />
+    </svg>
+  );
+}
diff --git a/src/components/ui/logo.tsx b/src/components/ui/logos/manual-logo.tsx
similarity index 78%
rename from src/components/ui/logo.tsx
rename to src/components/ui/logos/manual-logo.tsx
index eb30ff7..5d6e9b3 100644
--- a/src/components/ui/logo.tsx
+++ b/src/components/ui/logos/manual-logo.tsx
@@ -1,14 +1,22 @@
-type LogoProps = {
+type ManualLogoProps = {
   size?: number;
-  color?: string;
+  className?: string;
 };
 
-// TODO: Import the brand colour from the tailwind theme
-export function Logo({ size = 40, color = "#0B3B3C" }: LogoProps) {
+export function ManualLogo({
+  size = 40,
+  className = "text-brand",
+}: ManualLogoProps) {
   return (
-    <svg width={size} height={size} viewBox="0 0 40 40" fill="none">
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 40 40"
+      fill="none"
+    >
       <path
-        fill={color}
+        fill="currentColor"
         fillRule="evenodd"
         d="M10.7 37.038c-.678 0-1.102-.514-1.102-1.356 0-3.976 7.89-13.009 15.761-20.665-1.33 8.599-10.124 22.021-14.66 22.021ZM38.944 1.503c-1.083.026-3.305.11-5.254.138-.686.01-.96.318-.872.76.104.521.447.907.964.92.665.018 1.556-.093 2.699-.149-2.598 1.999-5.74 4.625-8.983 7.548-.38-2.94-1.744-5.292-4.426-5.292-3.898 0-7.796 5.932-9.491 9.237-.17-2.711-1.356-5.254-3.898-5.254C4.397 9.411 0 21.44 0 23.24c0 .615.704 1.087 1.127 1.087.509 0 .674-.254.844-.847 2.203-7.203 5.508-12.204 7.712-12.204 1.101 0 1.949 1.272 1.949 4.238 0 2.182-.372 3.507-.372 4.024 0 .808.71 1.23 1.134 1.23.509 0 .678-.254.933-.847 2.542-6.272 6.694-12.543 9.66-12.543 1.461 0 2.455 1.866 2.537 5.149C16.63 20.776 7.67 30.718 7.67 35.609c0 2.035 1.123 3.209 2.944 3.209 6.538 0 16.77-16.25 16.993-25.952 3.638-3.423 7.107-6.413 9.604-8.315-.384.954-.772 1.881-.969 2.574-.144.506-.056 1.063.566 1.306.394.153.745-.07.9-.51.938-2.676 1.421-3.774 1.995-5.306.375-1.002.335-1.138-.76-1.112Z"
         clipRule="evenodd"
diff --git a/src/components/ui/logos/twitter-logo.tsx b/src/components/ui/logos/twitter-logo.tsx
new file mode 100644
index 0000000..72c08fe
--- /dev/null
+++ b/src/components/ui/logos/twitter-logo.tsx
@@ -0,0 +1,21 @@
+type TwitterLogoProps = {
+  size?: number;
+  className: string;
+};
+
+export function TwitterLogo({ size = 24, className }: TwitterLogoProps) {
+  return (
+    <svg
+      className={className}
+      width={size}
+      height={size}
+      viewBox="0 0 24 24"
+      fill="none"
+    >
+      <path
+        fill="currentColor"
+        d="M19.995 6.68799C20.8914 6.15208 21.5622 5.30823 21.882 4.31399C21.0397 4.81379 20.118 5.16587 19.157 5.35499C17.8246 3.94552 15.7135 3.60251 14.0034 4.51764C12.2933 5.43277 11.4075 7.37948 11.841 9.26999C8.39062 9.09676 5.17598 7.4669 2.99702 4.78599C1.85986 6.74741 2.44097 9.25477 4.32502 10.516C3.64373 10.4941 2.97754 10.3096 2.38202 9.97799C2.38202 9.99599 2.38202 10.014 2.38202 10.032C2.38241 12.0751 3.82239 13.8351 5.82502 14.24C5.19308 14.4119 4.53022 14.4372 3.88702 14.314C4.45022 16.0613 6.06057 17.2583 7.89602 17.294C6.37585 18.4871 4.49849 19.1342 2.56602 19.131C2.22349 19.1315 1.88123 19.1118 1.54102 19.072C3.50341 20.333 5.78738 21.0023 8.12002 21C11.3653 21.0223 14.484 19.7429 16.7787 17.448C19.0734 15.1531 20.3526 12.0342 20.33 8.78899C20.33 8.60299 20.3257 8.41799 20.317 8.23399C21.1575 7.62659 21.8828 6.87414 22.459 6.01199C21.676 6.35905 20.8455 6.58691 19.995 6.68799Z"
+      />
+    </svg>
+  );
+}