diff --git a/src/pages/index.astro b/src/pages/index.astro
index 8b75810..a68dd22 100644
--- a/src/pages/index.astro
+++ b/src/pages/index.astro
@@ -31,16 +31,9 @@ const indexItems = [
 ---
 
 <BaseLayout title="Josh Bairstow" current="home" showCoordInTopbar={true}>
-  <Fragment slot="marks">
-    <Mark kind="ringdots" width={84} top="14%" left="3%" rotate={-5} />
-    <Mark kind="pipes"    width={28} top="73%" left="6%" rotate={8} />
-    <Mark kind="dots"     width={52} top="26%" right="3.5%" />
-    <Mark kind="concentric" width={42} bottom="9%" right="7%" />
-    <Mark kind="ringdots" width={66} bottom="20%" left="44%" rotate={-3} />
-  </Fragment>
-
   <main class="home" data-layout="stack">
     <section class="intro">
+      <Mark kind="ringdots" width={84} top="-10px" left="-24px" rotate={-5} />
       <Eyebrow>Engineer · Sydney</Eyebrow>
       <h2 class="statement">
         I make small,<br /><em>careful</em> things<span class="accent">.</span>
@@ -52,6 +45,8 @@ const indexItems = [
     </section>
 
     <section class="hero">
+      <Mark kind="dots"  width={52} top="-16px" right="-12px" />
+      <Mark kind="pipes" width={28} bottom="-8px" left="-6px" rotate={8} />
       <HeroZone client:load />
     </section>
 
@@ -69,6 +64,7 @@ const indexItems = [
     }
 
     <section class="index">
+      <Mark kind="concentric" width={42} bottom="-14px" right="-10px" />
       <Eyebrow>Index</Eyebrow>
       <nav>
         {indexItems.map((item) => (
@@ -101,6 +97,7 @@ const indexItems = [
   }
   .intro {
     grid-area: intro;
+    position: relative;
     display: flex;
     flex-direction: column;
     align-items: center;
@@ -144,6 +141,7 @@ const indexItems = [
 
   .hero {
     grid-area: hero;
+    position: relative;
     display: flex;
   }
   /* Styles for .hzframe + its children come from the React island's class names */
@@ -216,6 +214,7 @@ const indexItems = [
 
   .index {
     grid-area: index;
+    position: relative;
     text-align: left;
   }
   .index :global(.eyebrow) {