diff --git a/src/components/card.webc b/src/components/card.webc
index 081b60f..0d63978 100644
--- a/src/components/card.webc
+++ b/src/components/card.webc
@@ -48,14 +48,14 @@
     padding-inline: var(--card-spacing);
   }
 
-  :host :where(h2, h3, h4, h5, h6) {
+  :host h2 {
     position: relative;
     font-size: 1.375rem;
     margin-block: 0 0.5em;
     padding-block: 0 0.5em;
   }
 
-  :host :where(h2, h3, h4, h5, h6)::after {
+  :host h2::after {
     content: '';
     position: absolute;
     display: block;
diff --git a/src/components/head/page-head-meta.webc b/src/components/head/page-head-meta.webc
index 3d46c3e..3d7a457 100644
--- a/src/components/head/page-head-meta.webc
+++ b/src/components/head/page-head-meta.webc
@@ -4,7 +4,7 @@
       return `${fullName} — Character Reference`;
     }
 
-    return "The World of Sebin's Characters";
+    return "Sebin's Characters — Home";
   };
 
   const getImageUrl = (char, type = 'og') =>
@@ -24,6 +24,7 @@
 
 <meta property="fediverse:creator" content="@SebinNyshkim@meow.social" />
 
+<meta property="og:site_name" content="Sebin's Characters" />
 <meta property="og:type" content="website" />
 <meta property="og:url" :content="$data.base + $data.page.url" />
 <meta property="og:title" :content="getTitle($data.fullName)" />
diff --git a/src/components/head/page-head-style.webc b/src/components/head/page-head-style.webc
index 9797a93..3ca802e 100644
--- a/src/components/head/page-head-style.webc
+++ b/src/components/head/page-head-style.webc
@@ -2,7 +2,6 @@
   :root {
     font-family: var(--font-family-copy);
     font-size: var(--font-size);
-    scroll-behavior: smooth;
   }
 
   * {
diff --git a/src/components/page-footer.webc b/src/components/page-footer.webc
index afe0aca..c401f63 100644
--- a/src/components/page-footer.webc
+++ b/src/components/page-footer.webc
@@ -9,7 +9,8 @@
   </p>
   <p>
     &copy; <time @text="new Date().getFullYear()"></time> Sebin Nyshkim<br />
-    Got <a :href="feedbackLink" target="_blank">feedback</a>?<br />
+    Got
+    <a :href="feedbackLink" target="_blank"> feedback </a>?<br />
     <a href="/privacy/">Privacy Policy</a>
   </p>
 </footer>
diff --git a/src/img/og.png b/src/img/og.png
index b8b30b1..3552dc7 100644
Binary files a/src/img/og.png and b/src/img/og.png differ
diff --git a/src/index.11tydata.js b/src/index.11tydata.js
index 03ac5c7..1bd0048 100644
--- a/src/index.11tydata.js
+++ b/src/index.11tydata.js
@@ -4,5 +4,5 @@ export default {
   },
   layout: 'base.webc',
   language: 'en_US',
-  description: 'Your primary source to learn all about the anatomy, personality and backstory of my cast of characters!'
+  description: 'Your go to place to learn all about the characters of Sebin!'
 };
diff --git a/src/index.webc b/src/index.webc
index 32eb45a..f922d95 100644
--- a/src/index.webc
+++ b/src/index.webc
@@ -17,26 +17,17 @@
 </script>
 
 <main>
-  <svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.1">
-    <path
-      d="M0 324.5C-35.1 298.7 -70.1 272.9 -106.4 256.8C-142.7 240.8 -180.1 234.6 -215 215C-249.8 195.3 -282 162.2 -299.8 124.2C-317.6 86.1 -321.1 43.1 -324.5 0L0 0Z"
-    ></path>
-    <path
-      d="M0 -324.5C47.4 -325.2 94.7 -325.9 124.2 -299.8C153.6 -273.7 165.2 -220.7 186.7 -186.7C208.2 -152.6 239.6 -137.4 264.2 -109.4C288.9 -81.5 306.7 -40.7 324.5 0L0 0Z"
-    ></path>
-  </svg>
+  <section class="beta-note">
+    <p>
+      <strong>🏗️ Work in progress! 🚧</strong> Please note that while most of this site is close to
+      98% done, it is still being worked on and contents are subject to change.
+    </p>
+    <ref-button class="btn">Okie-dokie!</ref-button>
+  </section>
 
-  <header>
-    <h1>
-      The World of<br />
-      <span>Sebin's Characters!</span>
-    </h1>
-    <p @text="description"></p>
+  <section class="intro">
+    <h1>Sebin's Characters</h1>
 
-    <a href="#intro">Jump in!</a>
-  </header>
-
-  <section id="intro" class="intro">
     <p>Hiya! 👋🏻 Welcome to my character reference page! 😊</p>
     <p>
       This is where you can learn all about my characters with detailed descriptions and lore about
@@ -57,185 +48,71 @@
       I put a lot of effort into giving all of them a home and I hope you'll find the information
       provided enlightening and insightful. Have fun!
     </p>
-    <a href="#characters">Meet the crew!</a>
   </section>
 
-  <section id="characters" class="char-select">
-    <h2>Select Your Character</h2>
+  <h2 class="char-select">Select Your Character</h2>
 
-    <div class="characters">
-      <card webc:for="char of characters" :href="`/${char}/`">
-        <eleventy-image
-          slot="image"
-          :src="getAvatar(char)"
-          :alt="getAltText(char)"
-          :width="[500,1000]"
-        ></eleventy-image>
-        <h3 slot="title" @text="getCharacterName(char)"></h3>
-        <p @text="getDescription(char)"></p>
-      </card>
-    </div>
-  </section>
+  <div class="characters">
+    <card webc:for="char of characters" :href="`/${char}/`">
+      <eleventy-image
+        slot="image"
+        :src="getAvatar(char)"
+        :alt="getAltText(char)"
+        :width="[500,1000]"
+      ></eleventy-image>
+      <h2 slot="title" @text="getCharacterName(char)"></h2>
+      <p @text="getDescription(char)"></p>
+    </card>
+  </div>
 </main>
 
 <style>
-  svg {
-    position: fixed;
-    inset: 0;
-    width: 100%;
-    height: 100%;
-    object-fit: fill;
-    z-index: -1;
-  }
-
-  svg path {
-    --scale: 0.75;
-    --fill: oklch(40% 60% 220deg / 0.5);
-
-    fill: var(--fill);
-
-    @media (min-width: 32em) {
-      --scale: 1;
-    }
-
-    @media (min-width: 64em) {
-      --scale: 1.5;
-    }
-
-    @media (min-width: 80em) {
-      --scale: 1.75;
-    }
-
-    @media (min-width: 120em) {
-      --scale: 2;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      --fill: oklch(40% 60% 220deg);
-    }
-  }
-
-  svg path:first-child {
-    transform: translate(100%, 0) scale(var(--scale));
-  }
-
-  svg path:last-child {
-    transform: translate(0, 100%) scale(var(--scale));
-  }
-
-  header {
-    position: relative;
-    display: grid;
-    grid-auto-rows: min-content;
-    justify-content: center;
-    justify-items: center;
-    align-content: center;
-    align-items: center;
-    gap: 1em;
-
-    text-align: center;
-    text-wrap: balance;
-
-    min-height: 100vh;
-
-    background: url('/img/home-bg.svg');
-  }
-
-  header h1 {
-    font-size: clamp(2.125em, 8vw, 4.5em);
-    max-width: 20ch;
-    margin: 0;
-  }
-
-  header h1 span {
-    --clr-accent-1: oklch(58% 0.16 33deg);
-    --clr-accent-2: oklch(78% 0.13 68deg);
-
-    color: transparent;
-
-    background: linear-gradient(var(--clr-accent-1) 35%, var(--clr-accent-2) 100%);
-    background-clip: text;
-  }
-
-  header p {
-    --font-size: 1em;
-
-    font-size: var(--font-size);
-    color: oklch(from var(--clr-text) 50% c h);
-    max-width: 65ch;
-    margin: 0;
-
-    @media (min-width: 35em) {
-      --font-size: 1.25em;
-    }
-
-    @media (prefers-color-scheme: dark) {
-      color: oklch(from var(--clr-text) 70% c h);
-    }
-  }
-
-  a:not([class])[href^='#'] {
-    --clr-accent: oklch(40% 60% 220deg);
-
-    display: block;
-    justify-self: center;
-
-    color: var(--theme-c-primary-100);
-    text-decoration: none;
-
-    background: var(--clr-accent);
-    box-shadow: 0.125em 0.125em 0.75em 0.25em var(--clr-box-shadow);
-
-    border-radius: 0.75em;
-    padding-block: 0.75em;
-    padding-inline: 1.25em;
-
-    transition: background-color 0.4s ease;
-
-    &:hover {
-      background: oklch(from var(--clr-accent) 50% c h);
-    }
+  main {
+    margin: auto;
+    padding: 1em;
   }
 
   .intro {
-    display: grid;
-    align-content: center;
-    gap: 1em;
-
-    min-height: 100vh;
     max-width: 65ch;
     margin: auto;
-    padding-inline: 1em;
   }
 
-  .intro > * {
-    margin-block: 0;
+  .intro h1 {
+    font-size: clamp(2.125em, 10vw, 4em);
+    text-align: center;
   }
 
   .char-select {
-    display: grid;
-    justify-content: center;
-    align-content: center;
-    gap: 2em;
-
-    min-height: 100vh;
-    padding-block: 2em;
-  }
-
-  .char-select > h2 {
     font-size: clamp(1.75em, 8vw, 3em);
     text-align: center;
-    margin: 0;
   }
 
   .characters {
     display: grid;
     grid-template-columns: repeat(auto-fit, minmax(17.5em, 1fr));
-    justify-content: center;
-    align-content: center;
     gap: 1.5em;
-
     width: 90vw;
     max-width: 100ch;
+    margin: auto;
+  }
+
+  .beta-note {
+    display: flex;
+    flex-flow: row wrap;
+    justify-content: space-between;
+    align-items: center;
+    gap: 1em;
+
+    background-color: var(--clr-box-background);
+
+    margin: auto;
+
+    border: 0.125em solid var(--clr-box-border);
+    border-radius: 1em;
+    padding: 1em;
+  }
+
+  .beta-note > * {
+    margin-block: 0;
   }
 </style>