diff --git a/src/components/index-page/hero.tsx b/src/components/index-page/hero.tsx
index 0319247ac6..502c341d00 100644
--- a/src/components/index-page/hero.tsx
+++ b/src/components/index-page/hero.tsx
@@ -5,7 +5,7 @@ import { clsx } from "clsx"
 
 export function Hero() {
   return (
-    <div className="hero">
+    <div className="[background:url('/img/graph-wash.png'),#171e26_repeat_center_center] xl:py-20">
       <div className="container conf-block">
         <section
           className={clsx(
diff --git a/src/components/index-page/index.tsx b/src/components/index-page/index.tsx
index 481c28a0b6..62e2d3c1f9 100644
--- a/src/components/index-page/index.tsx
+++ b/src/components/index-page/index.tsx
@@ -9,7 +9,7 @@ import { WhoIsUsing } from "./who-is-using"
 
 export function IndexPage() {
   return (
-    <div className="index xl:mt-10">
+    <div className="index">
       <Hero />
       <section className="text-center flex flex-col container items-center conf-block max-w-3xl">
         <h2>A query language for your API</h2>
diff --git a/src/components/index-page/predictable-results/index.module.css b/src/components/index-page/predictable-results/index.module.css
new file mode 100644
index 0000000000..44911bbcae
--- /dev/null
+++ b/src/components/index-page/predictable-results/index.module.css
@@ -0,0 +1,12 @@
+.cursor {
+  animation: cursor-blink 0.5s infinite linear both alternate;
+  
+  @keyframes cursor-blink {
+    0%, 30% {
+      opacity: 0;
+    }
+    70%, 100% {
+      opacity: 1;
+    }
+  }
+}
diff --git a/src/components/index-page/predictable-results.tsx b/src/components/index-page/predictable-results/index.tsx
similarity index 88%
rename from src/components/index-page/predictable-results.tsx
rename to src/components/index-page/predictable-results/index.tsx
index 8cc8e60f9f..53a53f7981 100644
--- a/src/components/index-page/predictable-results.tsx
+++ b/src/components/index-page/predictable-results/index.tsx
@@ -1,6 +1,8 @@
 import { useEffect, useRef } from "react"
-import { PredictableResult } from "../code-blocks"
+import { PredictableResult } from "../../code-blocks"
 import { Pre } from "nextra/components"
+import { clsx } from "clsx"
+import classes from "./index.module.css"
 
 export function PredictableResults() {
   const ref = useRef<HTMLDivElement>(null)
@@ -85,7 +87,7 @@ export function PredictableResults() {
         </div>
         <div
           ref={ref}
-          className="faux-graphiql nextra-codeblocks flex *:w-1/2 [&_pre]:!h-48"
+          className="nextra-codeblocks flex *:w-1/2 [&_pre]:!h-48"
           aria-hidden
         >
           <Pre data-filename="Query" className="p-4">
@@ -93,11 +95,16 @@ export function PredictableResults() {
             {"\n  hero {"}
             {"\n    name"}
             {"\n    height\n    mass".split("").map((char, i) => (
-              <span key={i} id={"ch" + i} className="ch">
+              <span key={i} id={"ch" + i} className="hidden">
                 {char === "\n" ? <br /> : char}
               </span>
             ))}
-            <span className="cursor" />
+            <span
+              className={clsx(
+                "inline-block !bg-primary/50 h-4 w-2 ml-px -mb-0.5",
+                classes.cursor,
+              )}
+            />
             {"\n  }"}
             {"\n}"}
           </Pre>
diff --git a/src/components/index-page/single-request/index.tsx b/src/components/index-page/single-request/index.tsx
index 9eb833fc26..d7d7408ee2 100644
--- a/src/components/index-page/single-request/index.tsx
+++ b/src/components/index-page/single-request/index.tsx
@@ -1,5 +1,4 @@
 import { QueryHeroFriends, ResponseHeroFriends } from "../../code-blocks"
-import { clsx } from "clsx"
 import classes from "./index.module.css"
 import phoneImage from "public/img/phone.svg"
 import serverImage from "public/img/server.svg"
@@ -7,52 +6,42 @@ import NextImage from "next-image-export-optimizer"
 
 export function SingleRequest() {
   return (
-    <div
-      className={clsx(
-        // "bg-gray-200",
-        "grayWash",
-      )}
+    <section
+      className="*:w-full lg:*:w-1/2 gap-14 flex max-lg:flex-col container conf-block !justify-around [&_pre]:!bg-transparent"
+      id="single-request"
     >
-      <section
-        className="*:w-full lg:*:w-1/2 gap-14 flex max-lg:flex-col container conf-block !justify-around [&_pre]:!bg-transparent"
-        id="single-request"
-      >
-        <div className="max-lg:text-center">
-          <h2>
-            Get many resources <br className="max-lg:hidden" />
-            in a single request
-          </h2>
-          {/*Illustration: a query 2 or 3 levels deep]*/}
-          <p>
-            GraphQL queries access not just the properties of one resource but
-            also smoothly follow references between them. While typical REST
-            APIs require loading from multiple URLs, GraphQL APIs get all the
-            data your app needs in a single request. Apps using GraphQL can be
-            quick even on slow mobile network connections.
-          </p>
+      <div className="max-lg:text-center">
+        <h2>
+          Get many resources <br className="max-lg:hidden" />
+          in a single request
+        </h2>
+        {/*Illustration: a query 2 or 3 levels deep]*/}
+        <p>
+          GraphQL queries access not just the properties of one resource but
+          also smoothly follow references between them. While typical REST APIs
+          require loading from multiple URLs, GraphQL APIs get all the data your
+          app needs in a single request. Apps using GraphQL can be quick even on
+          slow mobile network connections.
+        </p>
+      </div>
+      <div className="-my-8 h-[520px] relative pointer-events-none" aria-hidden>
+        <NextImage
+          src={serverImage}
+          alt="Server"
+          className="absolute left-1/2 -translate-x-1/2"
+        />
+        <NextImage
+          src={phoneImage}
+          alt="Phone"
+          className="absolute left-1/2 -translate-x-1/2 bottom-0"
+        />
+        <div className={classes.query}>
+          <QueryHeroFriends />
         </div>
-        <div
-          className="-my-8 h-[520px] relative pointer-events-none"
-          aria-hidden
-        >
-          <NextImage
-            src={serverImage}
-            alt="Server"
-            className="absolute left-1/2 -translate-x-1/2"
-          />
-          <NextImage
-            src={phoneImage}
-            alt="Phone"
-            className="absolute left-1/2 -translate-x-1/2 bottom-0"
-          />
-          <div className={classes.query}>
-            <QueryHeroFriends />
-          </div>
-          <div className={classes.response}>
-            <ResponseHeroFriends />
-          </div>
+        <div className={classes.response}>
+          <ResponseHeroFriends />
         </div>
-      </section>
-    </div>
+      </div>
+    </section>
   )
 }
diff --git a/src/index.less b/src/index.less
deleted file mode 100644
index febb2a9458..0000000000
--- a/src/index.less
+++ /dev/null
@@ -1,168 +0,0 @@
-@import "variables.less";
-
-// Index page uses a fixed header with an overlay
-div.index {
-  // GraphQLConf 2023 - Remove on Oct 1, 2023
-  a.conf-banner {
-    @apply rounded-none;
-    background-color: #562556;
-    background: url("/img/conf/graphql-conf-bg.png") repeat center center;
-    background-size: cover;
-    color: #fff;
-    text-align: center;
-    max-width: none;
-
-
-      color: white;
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      padding: 30px;
-      gap: 30px;
-      margin: 0 auto;
-
-      @media (max-width: 900px) {
-        flex-direction: column;
-        gap: 10px;
-      }
-
-      &:hover {
-        text-decoration: none;
-      }
-
-      & > div {
-        display: flex;
-        flex-direction: column;
-
-        & > * {
-          margin: 6px 0;
-        }
-      }
-
-    img {
-      height: 80px;
-    }
-
-    .button {
-      .headline-font(@size: 17px, @color: white);
-      border: solid 1px fadeout(white, 60%);
-      border-radius: 6px;
-      color: white;
-      line-height: 1.0;
-      transition: background 0.1s ease-out, color 0.1s ease-out;
-      padding: 0.6em 1.6em;
-      margin: 0 0.8em;
-      display: inline-block;
-      text-decoration: none;
-
-      &:hover, &:focus, &:active {
-        color: @text-color;
-        background: white;
-        text-decoration: none;
-      }
-    }
-  }
-  // End GraphQLConf 2023
-
-  header {
-    display: none;
-    @media screen and (min-width: 1020px) {
-      display: block;
-      position: fixed;
-      top: 0;
-      left: 0;
-      right: 0;
-    }
-  }
-
-  .hero {
-    @media screen and (min-width: 1020px) {
-      min-height: 450px;
-      max-height: 900px;
-      min-height: 65vh;
-      margin-top: -50px;
-      padding-top: 50px;
-      z-index: 11;
-    }
-    position: relative;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    background: url("/img/graph-wash.png"), #171e26 repeat center center;
-  }
-
-  section h1,
-  section h2 {
-    margin-top: 0;
-  }
-
-  section.lead {
-    .body-font(22px);
-    text-align: center;
-    max-width: 760px;
-    padding-top: 6em;
-  }
-
-  .grayWash {
-//     background: #e6e8ec;
-    position: relative;
-  }
-
-  .darkWash {
-    background: #2a3746;
-    box-shadow:
-      inset 0 30px 30px -30px rgba(0,0,0,0.35),
-      inset 0 -20px 30px -30px rgba(0,0,0,0.35);
-    overflow: hidden;
-    position: relative;
-  }
-
-  .faux-graphiql {
-    .cursor {
-      width: 7px;
-      height: 15px;
-      @apply bg-primary/50;
-      display: inline-block;
-      margin: -1px 1px -3px;
-      animation: cursor-blink 0.5s infinite linear both alternate;
-
-      @keyframes cursor-blink {
-        0%, 30% {
-          opacity: 0;
-        }
-        70%, 100% {
-          opacity: 1;
-        }
-      }
-    }
-
-    .ch {
-      display: none;
-    }
-  }
-
-  section.point4 {
-    color: white;
-    flex-direction: column;
-    padding-bottom: 0;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-
-    h2 {
-      color: white;
-    }
-
-    em {
-      font-family: Palatino, Georgia, serif;
-    }
-
-    .prose2 {
-      display: flex;
-      flex-direction: column;
-      flex: 1;
-      justify-content: center;
-      margin: 0 auto;
-      max-width: 575px;
-      text-align: center;
-    }
-  }
-}
diff --git a/src/pages/_app.tsx b/src/pages/_app.tsx
index b442d87133..e76f2a8888 100644
--- a/src/pages/_app.tsx
+++ b/src/pages/_app.tsx
@@ -4,7 +4,6 @@ import { useRouter } from "next/router"
 import { useEffect } from "react"
 import "@/globals.css"
 import "@/codemirror.less"
-import "@/index.less"
 
 const robotoFlex = Roboto_Flex({
   subsets: ["latin"],