diff --git a/docs/intro.mdx b/docs/intro.mdx
index d3c25d8..f90c259 100644
--- a/docs/intro.mdx
+++ b/docs/intro.mdx
@@ -9,6 +9,10 @@ import CodeBlock from "@theme/CodeBlock";
 Zeno is an **interactive AI evaluation platform** for exploring, debugging, and sharing how your AI systems perform.
 Evaluate any task and data type with Zeno's [modular views](/docs/views/) which support everything from chatbot conversations to object detection and audio transcription.
 
+:::tip
+Explore public Zeno reports and projects on [Zeno Hub](https://hub.zenoml.com/) to see what's possible with Zeno!
+:::
+
 ## Creating a Project
 
 The core of Zeno are **projects**, which consist of a base evaluation dataset and any number of AI system outputs.
diff --git a/docusaurus.config.js b/docusaurus.config.js
index 2d8f24f..a572c91 100644
--- a/docusaurus.config.js
+++ b/docusaurus.config.js
@@ -79,13 +79,13 @@ const config = {
           srcDark: "img/zeno_dark.png",
         },
         items: [
-          { to: "/about", label: "About", position: "left" },
           {
             type: "doc",
             docId: "intro",
             position: "left",
             label: "Docs",
           },
+          { to: "/about", label: "About", position: "left" },
           { to: "/faq", label: "FAQ", position: "left" },
           {
             type: "html",
@@ -117,14 +117,14 @@ const config = {
                 label: "Home",
                 to: "/",
               },
-              {
-                label: "About",
-                to: "/about/",
-              },
               {
                 label: "Docs",
                 to: "/docs/intro",
               },
+              {
+                label: "About",
+                to: "/about/",
+              },
               {
                 label: "FAQ",
                 to: "/faq/",
diff --git a/src/components/ChartSelect/index.tsx b/src/components/ChartSelect/index.tsx
index b0e825d..afca393 100644
--- a/src/components/ChartSelect/index.tsx
+++ b/src/components/ChartSelect/index.tsx
@@ -16,6 +16,19 @@ export default function DatatypeSelect() {
   return (
     <div className={styles.reportWrapper}>
       <div className={styles.left}>
+        <Header
+          title="Chart"
+          summary="Chart Building"
+          description="Create beautiful, interactive visualizations to compare model performnce
+          across slices and models"
+        ></Header>
+        <p>
+          Use Zeno's drag-and-drop interface to create interactive charts. Create a radar chart
+          comparing multiple models on different slices of your data, or a beeswarm plot to compare
+          hundreds of models.
+        </p>
+      </div>
+      <div className={styles.right}>
         <img
           style={imageStyle}
           src={require("@site/static/img/radar-chart.png").default}
@@ -34,19 +47,6 @@ export default function DatatypeSelect() {
           />
         </div>
       </div>
-      <div className={styles.right}>
-        <Header
-          title="Chart"
-          summary="Chart Building"
-          description="Create beautiful, interactive visualizations to compare model performnce
-          across slices and models"
-        ></Header>
-        <p>
-          Use Zeno's drag-and-drop interface to create interactive charts. Create a radar chart
-          comparing multiple models on different slices of your data, or a beeswarm plot to compare
-          hundreds of models.
-        </p>
-      </div>
     </div>
   );
 }
diff --git a/src/components/ChartSelect/styles.module.css b/src/components/ChartSelect/styles.module.css
index 5e46929..a7408fb 100644
--- a/src/components/ChartSelect/styles.module.css
+++ b/src/components/ChartSelect/styles.module.css
@@ -17,13 +17,20 @@
   flex-wrap: wrap;
   flex-grow: 1;
 }
-.left {
+.right {
   width: 60%;
   height: fit-content;
   display: flex;
   flex-direction: row;
   flex-wrap: wrap;
   align-items: middle;
+  justify-content: end;
+}
+/* Add this at the bottom of your CSS file */
+@media (max-width: 768px) {
+  .right {
+    justify-content: start;
+  }
 }
 
 .reportWrapper {
@@ -31,7 +38,7 @@
   align-items: center;
 }
 
-.right {
+.left {
   width: 40%;
   margin-right: 10px;
   margin-left: 10px;
@@ -52,7 +59,6 @@
 }
 
 .featureWrapper {
-  /* background: linear-gradient(rgba(137,133,199,1) 0%, rgba(126,121,196,1) 100%); */
   border-radius: 20px;
   padding: 20px;
   flex: 1;
diff --git a/src/components/Demo/Demo.tsx b/src/components/Demo/Demo.tsx
index 031e4e7..2546cf8 100644
--- a/src/components/Demo/Demo.tsx
+++ b/src/components/Demo/Demo.tsx
@@ -3,12 +3,9 @@ import styles from "./index.module.css";
 
 export function Demo() {
   return (
-    <div className={styles.demo}>
-      <video controls width="100%" autoPlay loop>
-        <source
-          src={require("@site/static/img/teaser.m4v").default}
-          type="video/mp4"
-        ></source>
+    <div style={{ paddingBottom: "30px", paddingTop: "20px", textAlign: "center" }}>
+      <video controls autoPlay={true} loop className={styles.demo} muted>
+        <source src={require("@site/static/img/teaser.mp4").default} type="video/mp4"></source>
       </video>
     </div>
   );
diff --git a/src/components/Demo/index.module.css b/src/components/Demo/index.module.css
index 24babde..7797c3e 100644
--- a/src/components/Demo/index.module.css
+++ b/src/components/Demo/index.module.css
@@ -1,3 +1,7 @@
 .demo {
-    margin: 30px;
-}
\ No newline at end of file
+  width: 100%;
+  padding: 30px;
+  max-width: 800px;
+  text-align: center;
+  border-radius: 40px;
+}
diff --git a/src/components/DiscoverSelect/index.tsx b/src/components/DiscoverSelect/index.tsx
new file mode 100644
index 0000000..a250cfd
--- /dev/null
+++ b/src/components/DiscoverSelect/index.tsx
@@ -0,0 +1,36 @@
+import { Header } from "@site/src/pages";
+import React from "react";
+import styles from "./styles.module.css";
+
+let imageStyle = {
+  padding: "50px",
+  width: "500px",
+};
+
+export default function DiscoverSelect() {
+  return (
+    <div className={styles.reportWrapper}>
+      <div className={styles.left}>
+        <img
+          style={imageStyle}
+          src={require("@site/static/img/slice-finder.png").default}
+          alt="Screenshot of radar chart"
+        />
+      </div>
+      <div className={styles.right}>
+        <Header
+          title="Error Discovery"
+          summary="Error Discovery"
+          description="Discover where your models fail with automated error analysis."
+        ></Header>
+        <p>
+          Zeno includes advanced error discovery techniques such as{" "}
+          <a href="https://research.google/pubs/slice-finder-automated-data-slicing-for-model-validation/">
+            slice finder
+          </a>{" "}
+          to automatically surface your models' systematic failures.
+        </p>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/DiscoverSelect/styles.module.css b/src/components/DiscoverSelect/styles.module.css
new file mode 100644
index 0000000..f2a5bdb
--- /dev/null
+++ b/src/components/DiscoverSelect/styles.module.css
@@ -0,0 +1,69 @@
+.features {
+  display: flex;
+  align-items: center;
+  padding: 2rem 0;
+  width: 100%;
+}
+
+.featureIcon {
+  max-width: 100px;
+  margin: auto;
+}
+
+.featureContainer {
+  display: flex;
+  flex-basis: 100%;
+  gap: 50px;
+  flex-wrap: wrap;
+  flex-grow: 1;
+}
+.left {
+  width: 60%;
+  height: fit-content;
+  display: flex;
+  flex-direction: row;
+  flex-wrap: wrap;
+  align-items: middle;
+}
+
+.reportWrapper {
+  display: flex;
+  align-items: center;
+}
+
+.right {
+  width: 40%;
+  margin-right: 10px;
+  margin-left: 10px;
+}
+
+@media only screen and (max-width: 700px) {
+  .reportWrapper {
+    flex-direction: column;
+  }
+  .left {
+    width: 100%;
+    margin-bottom: 30px;
+    justify-content: center;
+  }
+  .right {
+    width: 100%;
+  }
+}
+
+.featureWrapper {
+  border-radius: 20px;
+  padding: 20px;
+  flex: 1;
+  min-width: 200px;
+  border: var(--gray) solid 1px;
+  box-shadow: 2px 8px 10px rgba(0, 0, 0, 0.25);
+}
+
+.centerText {
+  text-align: center;
+}
+
+.featureArrow {
+  position: absolute;
+}
diff --git a/src/components/HomepageHeader/HomepageHeader.tsx b/src/components/HomepageHeader/HomepageHeader.tsx
index 7fe2905..df84e4b 100644
--- a/src/components/HomepageHeader/HomepageHeader.tsx
+++ b/src/components/HomepageHeader/HomepageHeader.tsx
@@ -7,43 +7,28 @@ export function HomepageHeader() {
   return (
     <div className={styles.headerContainer}>
       <div className={styles.header}>
-        <div className={styles.headerLeft}>
-          <h1 style={{ fontSize: "45px" }}>AI Evaluation Made Easy</h1>
-          <h4 className={styles.subheader}>
-            Discover how your AI performs with <b>Zeno</b>. Explore your data,
-            uncover failures, and create beautiful, interactive reports.
-          </h4>
-          <div
-            className={styles.buttons}
-            style={{ justifyContent: "space-between", alignItems: "center" }}
-          >
-            <div className={styles.buttons}>
-              <Link
-                className="button button--lg heroButtonSecondary"
-                to="/docs/intro"
-              >
-                Get Started
-              </Link>
-              <Link
-                style={{ color: "#6a1b9a" }}
-                className="button button--lg heroButtonSecondary"
-                to="https://hub.zenoml.com/"
-              >
-                Try Zeno
-              </Link>
-            </div>
-            <iframe
-              src="https://ghbtns.com/github-btn.html?user=zeno-ml&repo=zeno-build&type=star&count=true&size=large"
-              width="140"
-              height="30"
-              title="GitHub"
-            ></iframe>
+        <h1 style={{ fontSize: "72px", textAlign: "center", fontFamily: "'Hammersmith One'" }}>
+          AI Evaluation Made Easy
+        </h1>
+        <h4 className={styles.subheader}>
+          Discover how your AI performs with <b>Zeno</b>.
+          <br /> Explore your data, uncover failures, and create beautiful, interactive charts.
+        </h4>
+        <div
+          className={styles.buttons}
+          style={{ justifyContent: "space-between", alignItems: "center" }}
+        >
+          <div className={styles.buttons}>
+            <Link className="button button--lg heroButtonSecondary" to="/docs/intro">
+              Get Started
+            </Link>
+            <Link className="button button--lg heroButtonSecondary" to="https://hub.zenoml.com/">
+              Explore Projects
+            </Link>
           </div>
         </div>
-        <div className={styles.headerRight}>
-          <Demo />
-        </div>
       </div>
+      <Demo />
     </div>
   );
 }
diff --git a/src/components/HomepageHeader/index.module.css b/src/components/HomepageHeader/index.module.css
index 5b4cfa3..1c4c566 100644
--- a/src/components/HomepageHeader/index.module.css
+++ b/src/components/HomepageHeader/index.module.css
@@ -6,41 +6,38 @@
 }
 
 .headerContainer {
-  background-image: linear-gradient(
-    140deg,
+  background: radial-gradient(
+    circle,
     hsl(277deg 70% 35%) 0%,
-    hsl(277deg 62% 38%) 8%,
-    hsl(276deg 57% 40%) 17%,
-    hsl(276deg 53% 42%) 26%,
-    hsl(276deg 50% 43%) 35%,
-    hsl(276deg 47% 45%) 44%,
-    hsl(276deg 45% 46%) 52%,
-    hsl(276deg 43% 48%) 60%,
-    hsl(277deg 41% 49%) 67%,
-    hsl(277deg 40% 51%) 74%,
-    hsl(277deg 41% 52%) 81%,
-    hsl(277deg 42% 53%) 88%,
-    hsl(277deg 42% 54%) 94%,
-    hsl(277deg 43% 55%) 100%
-  );
-  margin: 0px auto;
+    hsl(277deg 38.44% 69.63%)
+  ); /* Replace with your colors */
+  background-size: 200% 200%; /* This helps in creating the effect */
+  animation: gradientAnimation 10s linear infinite; /* Adjust timing as needed */
+  margin: auto;
+}
+
+@keyframes gradientAnimation {
+  0% {
+    background-position: left center;
+  }
+  50% {
+    background-position: right center;
+  }
+  100% {
+    background-position: left center;
+  }
 }
 
 .header {
   max-width: 1300px;
-  margin: 0px auto;
+  margin: auto;
   color: white;
   display: flex;
-  position: relative;
+  flex-direction: column;
   align-items: center;
   justify-content: center;
   overflow: hidden;
-  padding: 30px;
-}
-
-.headerLeft {
-  margin: 30px;
-  width: 50%;
+  padding: 70px 30px 30px;
 }
 
 .video-div {
@@ -56,32 +53,9 @@
   height: 100%;
 }
 
-.headerRight {
-  width: 50%;
-}
-
-@media only screen and (max-width: 900px) {
-  .header {
-    height: fit-content;
-    display: flex;
-    flex-direction: column;
-    padding: 10px;
-  }
-  .header video {
-    width: 100%;
-  }
-  .headerLeft {
-    padding: 30px;
-    width: 100%;
-    margin: 30px;
-  }
-  .headerRight {
-    width: 100%;
-  }
-}
-
 .subheader {
   font-weight: 300;
   margin-bottom: 50px;
   font-size: 30px;
+  text-align: center;
 }
diff --git a/src/components/MediaSelect/index.tsx b/src/components/MediaSelect/index.tsx
index 929ffc1..0ec7a8d 100644
--- a/src/components/MediaSelect/index.tsx
+++ b/src/components/MediaSelect/index.tsx
@@ -33,7 +33,7 @@ export default function Select(props) {
         <Header
           title="Explore"
           summary="Data Exploration"
-          description="Zeno can visualize any type of data, from images to text, audio, sensor data, and more."
+          description="Visualize any type of data with Zeno, from images to text, audio, sensor data, and more."
         ></Header>
         {menu}
       </div>
@@ -46,11 +46,10 @@ export default function Select(props) {
             <img
               key={img}
               style={{
-                maxHeight: "120px",
+                maxHeight: "130px",
                 maxWidth: "180px",
                 objectFit: "cover",
                 padding: "10px",
-                margin: "10px",
                 background: "white",
                 borderRadius: "4px",
                 border: "1px solid var(--gray)",
diff --git a/src/components/MediaSelect/styles.module.css b/src/components/MediaSelect/styles.module.css
index b969797..2a408d8 100644
--- a/src/components/MediaSelect/styles.module.css
+++ b/src/components/MediaSelect/styles.module.css
@@ -9,9 +9,7 @@
   margin-bottom: 5px;
   background: white;
   color: black;
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1);
+  box-shadow: 0 4px 6px -1px rgb(0 0 0 / 0.1), 0 2px 4px -2px rgb(0 0 0 / 0.1);
 }
 
 .activeSelection {
@@ -40,6 +38,7 @@
   flex-direction: row;
   flex-wrap: wrap;
   justify-content: space-between;
+  gap: 20px;
   width: 60%;
   margin-left: 100px;
   margin-right: 50px;
diff --git a/src/components/ReportSelect/index.tsx b/src/components/ReportSelect/index.tsx
index 3dd343e..06ca049 100644
--- a/src/components/ReportSelect/index.tsx
+++ b/src/components/ReportSelect/index.tsx
@@ -16,22 +16,19 @@ export default function DatatypeSelect() {
   return (
     <div className={styles.reportWrapper}>
       <div className={styles.left} style={{}}>
+        <div className={styles.imageWrapper} />
+      </div>
+      <div className={styles.right}>
         <Header
           title="Report"
           summary="Report Authoring"
           description="Create reports with interactive visualizations and markdown"
         ></Header>
         <p>
-          Visualizations can be combined with rich markdown text to share insights and
-          tell stories about your data and model performance.
-        </p>
-        <p>
-          Reports can be shared with other stakeholders or posted on any platform. All
-          that people need to read your report is a link to it.
+          Visualizations can be combined with rich markdown text to share insights and tell stories
+          about your data and model performance.
         </p>
-      </div>
-      <div className={styles.right}>
-        <div className={styles.imageWrapper} />
+        <p>Reports can be authored collaboratively and published broadly.</p>
       </div>
     </div>
   );
diff --git a/src/components/ReportSelect/styles.module.css b/src/components/ReportSelect/styles.module.css
index 0c16dcd..29f9960 100644
--- a/src/components/ReportSelect/styles.module.css
+++ b/src/components/ReportSelect/styles.module.css
@@ -42,6 +42,8 @@
   }
   .left {
     width: 100%;
+    height: 200px;
+    margin-bottom: 20px;
     justify-content: left;
   }
   .right {
diff --git a/src/components/Sections/Sections.tsx b/src/components/Sections/Sections.tsx
deleted file mode 100644
index 7daf8c6..0000000
--- a/src/components/Sections/Sections.tsx
+++ /dev/null
@@ -1,63 +0,0 @@
-import React from "react";
-import styles from "./styles.module.css";
-
-type SectionItem = {
-  title: string;
-  description: string;
-  icon: React.ComponentType<React.ComponentProps<"png">>;
-};
-
-const SectionList: SectionItem[] = [
-  {
-    title: "Explore",
-    description: "Visualize data and model outputs with views for any data type",
-    icon: require("@site/static/img/explore-icon.png").default,
-  },
-  {
-    title: "Analyze",
-    description: "Discover and save errors for model comparison and updates",
-    icon: require("@site/static/img/slice-icon.png").default,
-  },
-  {
-    title: "Report",
-    description: "Create rich, interactive reports sharing your findings",
-    icon: require("@site/static/img/report-icon.png").default,
-  },
-];
-
-export function Sections() {
-  return (
-    <div className={styles.sectionContainer}>
-      {SectionList.map((props, idx) => (
-        <SectionBlock {...props} key={idx} />
-      ))}
-    </div>
-  );
-}
-
-function SectionBlock(props) {
-  return (
-    <div className={styles.section}>
-      <div>
-        <img
-          className={styles.image}
-          src={props.icon}
-          alt="Diagram showing illustration of Zeno interface"
-        ></img>
-      </div>
-      <div className="section-text-container">
-        <h2
-          style={{
-            fontSize: "26px",
-            fontWeight: "600",
-            marginBottom: "10px",
-            color: "black",
-          }}
-        >
-          {props.title}
-        </h2>
-        <p className={styles.description}>{props.description}</p>
-      </div>
-    </div>
-  );
-}
diff --git a/src/components/Sections/styles.module.css b/src/components/Sections/styles.module.css
deleted file mode 100644
index c63eb6e..0000000
--- a/src/components/Sections/styles.module.css
+++ /dev/null
@@ -1,47 +0,0 @@
-.sectionContainer {
-  display: flex;
-  justify-content: space-between;
-  margin-top: 20px;
-}
-
-.section {
-  display: flex;
-  width: 32.8%;
-  padding: 15px;
-  border: 1px solid #eaeaea;
-  box-shadow:
-    0 4px 6px -1px rgb(0 0 0 / 0.1),
-    0 2px 4px -2px rgb(0 0 0 / 0.1);
-  background: white;
-}
-
-.navbar {
-  background: rgb(242, 242, 238);
-}
-
-.image {
-  border-radius: 5px;
-  height: 140px;
-  width: 140px;
-  min-height: 140px;
-  min-width: 140px;
-  border: 1px solid #ebebea;
-}
-
-.description {
-  font-size: 30px;
-  color: black;
-}
-
-@media only screen and (max-width: 1000px) {
-  .sectionContainer {
-    flex-direction: column;
-  }
-  .section {
-    width: 100%;
-    margin-bottom: 20px;
-  }
-  .image {
-    margin-right: 20px;
-  }
-}
diff --git a/src/components/Testimonials/Testimonial.tsx b/src/components/Testimonials/Testimonial.tsx
new file mode 100644
index 0000000..12f4f53
--- /dev/null
+++ b/src/components/Testimonials/Testimonial.tsx
@@ -0,0 +1,33 @@
+import React from "react";
+
+interface TestimonialProps {
+  name: string;
+  message: string;
+  project: string;
+  link: string;
+  image: string;
+}
+
+export function Testimonial({ name, message, project, link, image }: TestimonialProps) {
+  return (
+    <div>
+      <p style={{ fontStyle: "italic" }}>{message}</p>
+      <div style={{ display: "flex", gap: "10px" }}>
+        <h3>{name}</h3>
+        <img src={image} style={{ height: "24px" }} />
+      </div>
+      <div style={{ display: "flex", gap: "30px", marginTop: "20px" }}>
+        {link ? (
+          <a style={{ color: "white", fontVariant: "small-caps" }} href={link}>
+            read more →
+          </a>
+        ) : (
+          <></>
+        )}
+        <a style={{ color: "white", fontVariant: "small-caps" }} href={project}>
+          explore with zeno →
+        </a>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Testimonials/Testimonials.tsx b/src/components/Testimonials/Testimonials.tsx
new file mode 100644
index 0000000..629358e
--- /dev/null
+++ b/src/components/Testimonials/Testimonials.tsx
@@ -0,0 +1,44 @@
+import React from "react";
+
+import styles from "./styles.module.css";
+import { Testimonial } from "./Testimonial";
+
+export function Testimonials(props) {
+  let testimonials = [
+    {
+      name: "Clémentine, Research Scientist",
+      message:
+        "Thanks to the help of the Zeno team, our investigations of Open LLM Leaderboard evaluations were much faster.",
+      project: "https://hub.zenoml.com/report/1255/DROP%20Benchmark%20Exploration",
+      link: "https://huggingface.co/blog/leaderboard-drop-dive",
+      image: require("@site/static/img/hf.png").default,
+    },
+    {
+      name: "Hailey, Research Scientist",
+      message:
+        "Visualizing benchmarking results with Zeno makes it much easier to find systematic failures and differences between models.",
+      project: "https://hub.zenoml.com/project/c72065fa-9fea-4904-82f8-5e1fe4b5a685/MMLU/",
+      link: "https://github.com/EleutherAI/lm-evaluation-harness?tab=readme-ov-file#visualizing-results",
+      image: require("@site/static/img/eleuther.png").default,
+    },
+  ];
+
+  let testimonialComponents = testimonials.map((testimonial) => (
+    <Testimonial
+      name={testimonial.name}
+      message={testimonial.message}
+      project={testimonial.project}
+      link={testimonial.link}
+      image={testimonial.image}
+    />
+  ));
+
+  return (
+    <div className={styles.container}>
+      <div className={styles.innerContainer}>
+        <h2 style={{ fontSize: "40px" }}>Testimonials</h2>
+        <div className={styles.testimonials}>{testimonialComponents}</div>
+      </div>
+    </div>
+  );
+}
diff --git a/src/components/Testimonials/styles.module.css b/src/components/Testimonials/styles.module.css
new file mode 100644
index 0000000..1ac623b
--- /dev/null
+++ b/src/components/Testimonials/styles.module.css
@@ -0,0 +1,29 @@
+.container {
+  background-image: linear-gradient(140deg, hsl(277deg 70% 35%) 0%, hsl(277deg 43% 55%) 100%);
+  color: white;
+  display: flex;
+  flex-direction: column;
+  padding-top: 25px;
+  padding-bottom: 25px;
+}
+
+.testimonials {
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+  gap: 50px;
+}
+
+@media (max-width: 768px) {
+  .testimonials {
+    flex-direction: column;
+    align-items: center;
+  }
+}
+
+.innerContainer {
+  padding: 50px;
+  max-width: 1300px;
+  padding-top: 30px;
+  margin: auto;
+}
diff --git a/src/components/Trending/Trending.tsx b/src/components/Trending/Trending.tsx
index ea425d8..2fb7c9b 100644
--- a/src/components/Trending/Trending.tsx
+++ b/src/components/Trending/Trending.tsx
@@ -7,9 +7,10 @@ export function Trending(props) {
     <div className={styles.container}>
       <Header
         title="Trending"
-        summary="Trending"
-        description="Explore trending reports and projects on Zeno."
+        summary="Trending Projects and Reports"
+        description="Explore popular public projects and reports on Zeno Hub"
       ></Header>
+      <br />
       <div className={styles.iframe}>
         <iframe
           height="250"
diff --git a/src/pages/index.tsx b/src/pages/index.tsx
index fcd6660..7b467d7 100644
--- a/src/pages/index.tsx
+++ b/src/pages/index.tsx
@@ -2,12 +2,12 @@ import ChartSelect from "@site/src/components/ChartSelect";
 import DatatypeSelect from "@site/src/components/DatatypeSelect";
 import { HomepageHeader } from "@site/src/components/HomepageHeader/HomepageHeader";
 import ReportSelect from "@site/src/components/ReportSelect";
-import { Sections } from "@site/src/components/Sections/Sections";
 import { Sponsors } from "@site/src/components/Sponsors/Sponsors";
 import { Trending } from "@site/src/components/Trending/Trending";
 
 import Layout from "@theme/Layout";
 import React from "react";
+import DiscoverSelect from "../components/DiscoverSelect";
 
 export function Header({ title, summary, description }): JSX.Element {
   return (
@@ -24,12 +24,19 @@ export default function Home(): JSX.Element {
       <div id="homepage">
         <HomepageHeader />
         <div id="pageWrapper">
+          <br />
           <Trending />
-          <hr />
-          <Sections />
-          <hr />
+          {/* <br /> */}
+        </div>
+        <hr />
+        {/* <Testimonials />
+        <br />
+        <br /> */}
+        <div id="pageWrapper">
           <DatatypeSelect />
           <hr />
+          <DiscoverSelect />
+          <hr />
           <ChartSelect />
           <hr />
           <ReportSelect />
diff --git a/static/img/eleuther.png b/static/img/eleuther.png
new file mode 100644
index 0000000..3de831a
Binary files /dev/null and b/static/img/eleuther.png differ
diff --git a/static/img/hf.png b/static/img/hf.png
new file mode 100644
index 0000000..332145d
Binary files /dev/null and b/static/img/hf.png differ
diff --git a/static/img/slice-finder.jpg b/static/img/slice-finder.jpg
new file mode 100644
index 0000000..846b915
Binary files /dev/null and b/static/img/slice-finder.jpg differ
diff --git a/static/img/slice-finder.png b/static/img/slice-finder.png
new file mode 100644
index 0000000..846b915
Binary files /dev/null and b/static/img/slice-finder.png differ
diff --git a/static/img/teaser.m4v b/static/img/teaser.m4v
deleted file mode 100644
index 258e68d..0000000
Binary files a/static/img/teaser.m4v and /dev/null differ
diff --git a/static/img/teaser.mp4 b/static/img/teaser.mp4
new file mode 100644
index 0000000..ce60f31
Binary files /dev/null and b/static/img/teaser.mp4 differ