diff --git a/packages/paste-website/package.json b/packages/paste-website/package.json
index ba6ff56969..0d8f7c3fa1 100644
--- a/packages/paste-website/package.json
+++ b/packages/paste-website/package.json
@@ -151,6 +151,8 @@
     "deepmerge": "4.2.2",
     "dogapi": "^2.8.4",
     "dotenv": "^16.0.0",
+    "embla-carousel-autoplay": "^8.0.0",
+    "embla-carousel-react": "^8.0.0",
     "github-slugger": "^2.0.0",
     "globby-esm": "npm:globby@^13.1.3",
     "gpt3-tokenizer": "^1.1.5",
diff --git a/packages/paste-website/src/components/color-swatch/ColorGradient.tsx b/packages/paste-website/src/components/color-swatch/ColorGradient.tsx
index 99d1304c76..b4ebcfc5a4 100644
--- a/packages/paste-website/src/components/color-swatch/ColorGradient.tsx
+++ b/packages/paste-website/src/components/color-swatch/ColorGradient.tsx
@@ -48,25 +48,50 @@ const StyledGradientSwatch = styled.div<{ backgroundColor: string }>`
   height: ${themeGet("space.space60")};
 `;
 
-const StyledGradientSwatchTall = styled.div<{ backgroundColor: string }>`
-background-color: ${(props: any) => props.backgroundColor};
-height: ${themeGet("space.space120")};
-`;
-
-export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: string; makeTall?: boolean }>> = ({
-  aliasPrefix,
-  makeTall = "false",
-}) => {
+const StyledGradientSwatchTall = styled.div<{ backgroundColor: string; rounded: boolean }>((props) => {
+  return {
+    backgroundColor: props.backgroundColor,
+    // @ts-expect-error this works fine
+    height: props.theme.space.space120,
+    // @ts-expect-error this works fine
+    borderBottomLeftRadius: props.rounded ? props.theme.radii.borderRadius20 : 0,
+    // @ts-expect-error this works fine
+    borderBottomRightRadius: props.rounded ? props.theme.radii.borderRadius20 : 0,
+  };
+});
+
+export const ColorGradient: React.FC<
+  React.PropsWithChildren<{ aliasPrefix: string; makeTall?: boolean; index?: number }>
+> = ({ aliasPrefix, makeTall = "false", index = 0 }) => {
+  const [show, setShow] = React.useState(false);
   const { theme } = useDarkModeContext();
   const aliasValues = getAliasValuesFromPrefix(aliasPrefix, theme);
+  const count = aliasValues.length - 1;
+
+  function handleVisibilityChange(isVisible: boolean): void {
+    if (!show) {
+      setTimeout(() => {
+        setShow(isVisible);
+      }, index * 50);
+    }
+  }
+
+  const styles = useSpring({
+    opacity: show ? 1 : 0.1,
+    config: {
+      duration: 500,
+    },
+  });
 
   if (makeTall) {
     return (
-      <Box borderRadius="borderRadius20" overflow="hidden">
-        {aliasValues.map((aliasValue) => (
-          <StyledGradientSwatchTall backgroundColor={aliasValue} key={useUID()} />
-        ))}
-      </Box>
+      <VisibilitySensor onChange={handleVisibilityChange} partialVisibility offset={{ bottom: 100 }}>
+        <AnimatedBox borderRadius="borderRadius20" overflow="hidden" style={styles}>
+          {aliasValues.map((aliasValue, _index) => (
+            <StyledGradientSwatchTall backgroundColor={aliasValue} key={useUID()} rounded={_index === count} />
+          ))}
+        </AnimatedBox>
+      </VisibilitySensor>
     );
   }
   return (
@@ -79,36 +104,21 @@ export const ColorGradient: React.FC<React.PropsWithChildren<{ aliasPrefix: stri
 };
 
 export const ColorGradientRainbow: React.FC<{ omitGrays?: boolean }> = ({ omitGrays = false }): JSX.Element => {
-  const [show, setShow] = React.useState(false);
-
-  function handleVisibilityChange(isVisible: boolean): void {
-    if (!show) {
-      setShow(isVisible);
-    }
-  }
-
-  const styles = useSpring({
-    opacity: show ? 1 : 0.1,
-  });
-
   if (omitGrays)
     return (
-      <VisibilitySensor onChange={handleVisibilityChange} partialVisibility offset={{ bottom: 150 }}>
-        <AnimatedBox
-          display="grid"
-          columnGap="space40"
-          marginBottom="space70"
-          gridTemplateColumns="repeat(6, 1fr)"
-          gridTemplateRows="max-content"
-          style={styles}
-        >
-          {aliasPrefixes
-            .filter((prefix) => prefix !== "palette-gray")
-            .map((prefix) => (
-              <ColorGradient makeTall aliasPrefix={prefix} key={useUID()} />
-            ))}
-        </AnimatedBox>
-      </VisibilitySensor>
+      <Box
+        display="grid"
+        columnGap="space40"
+        marginBottom="space70"
+        gridTemplateColumns="repeat(6, 1fr)"
+        gridTemplateRows="max-content"
+      >
+        {aliasPrefixes
+          .filter((prefix) => prefix !== "palette-gray")
+          .map((prefix, index) => (
+            <ColorGradient makeTall aliasPrefix={prefix} key={useUID()} index={index} />
+          ))}
+      </Box>
     );
   return (
     <Box display="grid" columnGap="space40" marginBottom="space70" gridTemplateColumns="repeat(7, 1fr)">
diff --git a/packages/paste-website/src/components/homepage/Accessibility.tsx b/packages/paste-website/src/components/homepage/Accessibility.tsx
index 9a1acce6a4..0f68d362fc 100644
--- a/packages/paste-website/src/components/homepage/Accessibility.tsx
+++ b/packages/paste-website/src/components/homepage/Accessibility.tsx
@@ -53,48 +53,50 @@ const Accessibility: React.FC = (): React.ReactElement => {
               <BouncyAnchor text="Learn more in our Inclusive Design Guide" href="/inclusive-design" />
             </Box>
           </Box>
-          <Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
-            <TabList aria-label="Horizontal product tabs">
-              <Tab id={selectedTabId}>Focus management</Tab>
-              <Tab>Screen reader support</Tab>
-              <Tab>Keyboard support</Tab>
-            </TabList>
-            <TabPanels>
-              <TabPanel>
-                <AspectRatio ratio="16:9">
-                  <iframe
-                    title="Remix silent demo video"
-                    src="https://www.loom.com/embed/4c584f749e414326b83fed3321132186?sid=42b642cb-3377-4a76-b926-fe0f9f274df7"
-                    frameBorder="0"
-                    allowFullScreen
-                    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-                  />
-                </AspectRatio>
-              </TabPanel>
-              <TabPanel>
-                <AspectRatio ratio="16:9">
-                  <iframe
-                    title="Remix silent demo video"
-                    src="https://www.loom.com/embed/5328cf9bec074512917180df829250e9?sid=a0a3a1a1-e521-4a86-8ccc-02b45344d97d"
-                    frameBorder="0"
-                    allowFullScreen
-                    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-                  />
-                </AspectRatio>
-              </TabPanel>
-              <TabPanel>
-                <AspectRatio ratio="16:9">
-                  <iframe
-                    title="Remix silent demo video"
-                    src="https://www.loom.com/embed/7a98f9ded7b24371bd6888fa80f52b19?sid=e9b9fd19-4bbd-4692-aa67-6e8ec72eb617"
-                    frameBorder="0"
-                    allowFullScreen
-                    style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
-                  />
-                </AspectRatio>
-              </TabPanel>
-            </TabPanels>
-          </Tabs>
+          <Box flexShrink={0} minWidth="570px">
+            <Tabs selectedId={selectedTabId} baseId="horizontal-tabs-example" variant="fitted">
+              <TabList aria-label="Horizontal product tabs">
+                <Tab id={selectedTabId}>Focus management</Tab>
+                <Tab>Screen reader support</Tab>
+                <Tab>Keyboard support</Tab>
+              </TabList>
+              <TabPanels>
+                <TabPanel>
+                  <AspectRatio ratio="16:9">
+                    <iframe
+                      title="Remix silent demo video"
+                      src="https://www.loom.com/embed/4c584f749e414326b83fed3321132186?sid=42b642cb-3377-4a76-b926-fe0f9f274df7"
+                      frameBorder="0"
+                      allowFullScreen
+                      style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+                    />
+                  </AspectRatio>
+                </TabPanel>
+                <TabPanel>
+                  <AspectRatio ratio="16:9">
+                    <iframe
+                      title="Remix silent demo video"
+                      src="https://www.loom.com/embed/5328cf9bec074512917180df829250e9?sid=a0a3a1a1-e521-4a86-8ccc-02b45344d97d"
+                      frameBorder="0"
+                      allowFullScreen
+                      style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+                    />
+                  </AspectRatio>
+                </TabPanel>
+                <TabPanel>
+                  <AspectRatio ratio="16:9">
+                    <iframe
+                      title="Remix silent demo video"
+                      src="https://www.loom.com/embed/7a98f9ded7b24371bd6888fa80f52b19?sid=e9b9fd19-4bbd-4692-aa67-6e8ec72eb617"
+                      frameBorder="0"
+                      allowFullScreen
+                      style={{ position: "absolute", top: 0, left: 0, width: "100%", height: "100%" }}
+                    />
+                  </AspectRatio>
+                </TabPanel>
+              </TabPanels>
+            </Tabs>
+          </Box>
         </Box>
       </Box>
 
diff --git a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
index d9e9075dc4..4c51be8414 100644
--- a/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
+++ b/packages/paste-website/src/components/homepage/CommunityOfBuilders.tsx
@@ -60,8 +60,7 @@ const CommunityOfBuilders: React.FC = (): React.ReactElement => {
             <StatBox stat="30" description="Monthly Github Discussions" />
           </Box>
         </Box>
-
-        <Box width="size20" height="size10" position="absolute" bottom={-50} right={250}>
+        <Box width="size20" height="size10" position="absolute" bottom={-50} right={[50, 75, 250]}>
           <Image src={DesignTool} aria-hidden="true" role="img" alt="token colors illustration" />
         </Box>
       </Box>
diff --git a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx
index 9994b5177c..a0ab74dfc7 100644
--- a/packages/paste-website/src/components/homepage/DesignEfficiency.tsx
+++ b/packages/paste-website/src/components/homepage/DesignEfficiency.tsx
@@ -48,10 +48,7 @@ const DesignEfficiency: React.FC = (): React.ReactElement => {
             efficient design and engineering collaboration.
           </Text>
           <Box fontWeight="fontWeightSemibold" fontSize="fontSize40" lineHeight="lineHeight40">
-            <BouncyAnchor
-              text="Find us on Figma Community"
-              href="https://www.figma.com/community/file/1207476064127503112/twilio-paste-components"
-            />
+            <BouncyAnchor text="Find us on Figma Community" href="https://www.figma.com/@twilio" />
           </Box>
           <Box
             marginTop="space170"
@@ -65,9 +62,16 @@ const DesignEfficiency: React.FC = (): React.ReactElement => {
             top={300}
             position="absolute"
           >
-            {someIcons.map((Icon) => (
-              <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />
-            ))}
+            {someIcons.map((Icon, index) => {
+              if (index >= 22 && index < 44) {
+                return (
+                  <Box marginLeft="spaceNegative180">
+                    <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />
+                  </Box>
+                );
+              }
+              return <Icon decorative key={useUID()} size="sizeIcon70" color="colorTextWeaker" />;
+            })}
           </Box>
         </Box>
         <Box
diff --git a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx
index 346f0301d5..b49180def0 100644
--- a/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx
+++ b/packages/paste-website/src/components/homepage/ForTwilioCustomers.tsx
@@ -35,6 +35,7 @@ const ForTwilioCustomers: React.FC = (): React.ReactElement => {
           textAlign="left"
           zIndex="zIndex10"
           marginY={["space0", "space0", "space0", "space200"]}
+          maxWidth={["100%", "100%", "100%", "size60"]}
         >
           <Text
             as="h3"
@@ -46,17 +47,29 @@ const ForTwilioCustomers: React.FC = (): React.ReactElement => {
           >
             For Twilions and Twilio customers alike
           </Text>
-          <Text as="p" color="colorTextInverse" marginBottom="space70">
+          <Text as="p" fontSize="fontSize40" lineHeight="lineHeight40" color="colorTextInverse" marginBottom="space70">
             Rapidly build enterprise-grade, inclusive, and extensible experiences that look and feel like your brand.
             Paste works great with Flex plugins, CodeExchange apps, and more.
           </Text>
-          <Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
+          <Box color="colorTextInverse" fontSize="fontSize40" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
             <BouncyAnchor href="/introduction/for-engineers/quickstart" text="Eng quick start" inverse />
           </Box>
-          <Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
+          <Box
+            color="colorTextInverse"
+            fontSize="fontSize40"
+            fontWeight="fontWeightSemibold"
+            lineHeight="lineHeight40"
+            marginTop="space20"
+          >
             <BouncyAnchor href="/customization" text="Customization overview" inverse />
           </Box>
-          <Box color="colorTextInverse" fontWeight="fontWeightSemibold" lineHeight="lineHeight40">
+          <Box
+            color="colorTextInverse"
+            fontSize="fontSize40"
+            fontWeight="fontWeightSemibold"
+            lineHeight="lineHeight40"
+            marginTop="space20"
+          >
             <BouncyAnchor
               href="https://www.figma.com/community/file/1207476064127503112/twilio-paste-components"
               text="Figma Community file"
diff --git a/packages/paste-website/src/components/homepage/HomeHero.tsx b/packages/paste-website/src/components/homepage/HomeHero.tsx
index 3eb169648b..20616584f4 100644
--- a/packages/paste-website/src/components/homepage/HomeHero.tsx
+++ b/packages/paste-website/src/components/homepage/HomeHero.tsx
@@ -1,16 +1,13 @@
 import { Box } from "@twilio-paste/box";
 import { DisplayHeading } from "@twilio-paste/display-heading";
 import { Text } from "@twilio-paste/text";
-import { useTheme } from "@twilio-paste/theme";
 
-import CircleIcon from "../icons/CircleIcon";
 import { BouncyAnchor } from "./BouncyAnchor";
 import { SearchBox } from "./SearchBox";
 import { SectionContainer } from "./SectionContainer";
 import { ComponentShowcase } from "./component-showcase";
 
 const HomeHero = (): JSX.Element => {
-  const theme = useTheme();
   return (
     <SectionContainer marginY="space0">
       <Box element="HOME_HERO" display="flex" columnGap="space100">
@@ -59,13 +56,6 @@ const HomeHero = (): JSX.Element => {
           <ComponentShowcase />
         </Box>
       </Box>
-      <Box zIndex="zIndex0" position="absolute" top="45rem" left="42%" element="CIRCLE">
-        <CircleIcon
-          css={{ height: theme.heights.size30, width: theme.widths.size30 }}
-          color={theme.backgroundColors.colorBackgroundBrandHighlight}
-          decorative
-        />
-      </Box>
     </SectionContainer>
   );
 };
diff --git a/packages/paste-website/src/components/homepage/Popular.tsx b/packages/paste-website/src/components/homepage/Popular.tsx
deleted file mode 100644
index aac0a51788..0000000000
--- a/packages/paste-website/src/components/homepage/Popular.tsx
+++ /dev/null
@@ -1,84 +0,0 @@
-import { Box } from "@twilio-paste/box";
-import { Column, Grid } from "@twilio-paste/grid";
-
-import { DoodleCurve } from "../../assets/illustrations/DoodleCurve";
-import { DoodleLoopSmall } from "../../assets/illustrations/DoodleLoopSmall";
-import { HOMEPAGE_SECTION_OVERFLOW_OFFSET, SITE_CONTENT_MAX_WIDTH } from "../../constants";
-import { useSlantedSkew } from "../SlantedBackgroundGradient";
-import { PopularComponents } from "./PopularComponents";
-import { PopularPatterns } from "./PopularPatterns";
-import { PopularSectionHeader } from "./PopularSectionHeader";
-
-const PopularComponentsTopAngle = (): JSX.Element => {
-  const [skewOffset] = useSlantedSkew();
-
-  return (
-    <Box
-      backgroundColor="colorBackground"
-      borderRadius="borderRadius20"
-      height="75%"
-      position="absolute"
-      top={skewOffset - HOMEPAGE_SECTION_OVERFLOW_OFFSET}
-      right={0}
-      bottom={0}
-      left={0}
-      transform="skewY(-9deg)"
-      transformOrigin="100% 0"
-    />
-  );
-};
-
-const PopularComponentsBottomAngle = (): JSX.Element => {
-  const [skewOffset] = useSlantedSkew();
-
-  return (
-    <Box
-      backgroundColor="colorBackground"
-      borderRadius="borderRadius20"
-      height="85%"
-      position="absolute"
-      top={0}
-      bottom={skewOffset}
-      right={0}
-      left={0}
-      transform="skewY(-9deg)"
-      transformOrigin="100% 0"
-      zIndex="zIndex10"
-    />
-  );
-};
-
-const PopularComponentsAndPatterns = (): JSX.Element => {
-  return (
-    <Box margin="space70" marginTop="space110" padding={["space90", "space180"]} position="relative">
-      <PopularComponentsTopAngle />
-      <PopularComponentsBottomAngle />
-      <Box
-        maxWidth={SITE_CONTENT_MAX_WIDTH}
-        position="relative"
-        marginTop="spaceNegative90"
-        marginLeft="auto"
-        marginRight="auto"
-        zIndex="zIndex10"
-      >
-        <Box position="absolute" top={140} right={-22}>
-          <DoodleCurve />
-        </Box>
-        <Box position="absolute" bottom={[25, 5, 5]} left={-40}>
-          <DoodleLoopSmall />
-        </Box>
-        <PopularSectionHeader />
-        <Grid gutter="space60">
-          <Column span={[12, 6]}>
-            <PopularComponents />
-          </Column>
-          <Column span={[12, 6]}>
-            <PopularPatterns />
-          </Column>
-        </Grid>
-      </Box>
-    </Box>
-  );
-};
-
-export { PopularComponentsAndPatterns };
diff --git a/packages/paste-website/src/components/homepage/PopularComponentCard.tsx b/packages/paste-website/src/components/homepage/PopularComponentCard.tsx
deleted file mode 100644
index d1434e0f77..0000000000
--- a/packages/paste-website/src/components/homepage/PopularComponentCard.tsx
+++ /dev/null
@@ -1,66 +0,0 @@
-import { animated, useSpring } from "@twilio-paste/animation-library";
-import { Box } from "@twilio-paste/box";
-import { Card } from "@twilio-paste/card";
-import { Heading } from "@twilio-paste/heading";
-import { Text } from "@twilio-paste/text";
-import * as React from "react";
-import VisibilitySensor from "react-visibility-sensor";
-
-const ComponentCardHeader: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return (
-    <Heading as="h3" variant="heading40">
-      {children}
-    </Heading>
-  );
-};
-
-const ComponentCardIllustration: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return (
-    <Box marginLeft="auto" marginRight="auto" maxWidth="size20">
-      {children}
-    </Box>
-  );
-};
-
-const ComponentCardFooter: React.FC<React.PropsWithChildren> = ({ children }) => {
-  return (
-    <Text as="span" display="inline-block" fontWeight="fontWeightSemibold" marginTop="space30">
-      {children}
-    </Text>
-  );
-};
-
-const AnimatedCard = animated(Card);
-
-const ComponentCard: React.FC<React.PropsWithChildren> = ({ children }) => {
-  const [show, setShow] = React.useState(false);
-
-  const handleVisibilityChange = (isVisible: boolean): void => {
-    if (!show) {
-      setShow(isVisible);
-    }
-  };
-
-  const props = useSpring({
-    opacity: show ? 1 : 0,
-    transform: show ? "translateY(0px)" : "translateY(25px)",
-    config: { mass: 1, tension: 280, friction: 80 },
-  });
-
-  // Destructuring this to bypass TS warning that is incorrect
-  const cardProps = { opacity: 0 };
-
-  return (
-    <Box marginBottom="space60">
-      <VisibilitySensor onChange={handleVisibilityChange} partialVisibility minTopValue={100}>
-        <AnimatedCard style={props} {...cardProps} padding="space70">
-          <Text as="div" textAlign="center">
-            {children}
-          </Text>
-        </AnimatedCard>
-      </VisibilitySensor>
-    </Box>
-  );
-};
-
-export { ComponentCard, ComponentCardHeader, ComponentCardIllustration, ComponentCardFooter };
diff --git a/packages/paste-website/src/components/homepage/PopularComponents.tsx b/packages/paste-website/src/components/homepage/PopularComponents.tsx
deleted file mode 100644
index 348f45ba21..0000000000
--- a/packages/paste-website/src/components/homepage/PopularComponents.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Box } from "@twilio-paste/box";
-import { Column, Grid } from "@twilio-paste/grid";
-import { Heading } from "@twilio-paste/heading";
-import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
-import { Text } from "@twilio-paste/text";
-import { useTheme } from "@twilio-paste/theme";
-import Image from "next/image";
-
-import HomeButtonIllustration from "../../assets/illustrations/home_button_illustration.svg";
-import HomeComboboxIllustration from "../../assets/illustrations/home_combobox_illustration.svg";
-import { event } from "../../lib/gtag";
-import { SiteLink } from "../SiteLink";
-import ComponentsIcon from "../icons/ComponentsIcon";
-import {
-  ComponentCard,
-  ComponentCardFooter,
-  ComponentCardHeader,
-  ComponentCardIllustration,
-} from "./PopularComponentCard";
-
-const PopularComponents = (): JSX.Element => {
-  const theme = useTheme();
-
-  return (
-    <Box marginBottom={["space130", "space0"]}>
-      <Box textAlign="center">
-        <Box
-          alignItems="center"
-          backgroundColor="colorBackgroundBody"
-          borderRadius="borderRadiusCircle"
-          display="flex"
-          height="sizeSquare150"
-          justifyContent="center"
-          marginBottom="space40"
-          marginLeft="auto"
-          marginRight="auto"
-          width="sizeSquare150"
-        >
-          <ComponentsIcon
-            css={{ height: theme.heights.sizeIcon40, width: theme.widths.sizeIcon40 }}
-            color={theme.textColors.colorTextErrorStrong}
-            decorative
-          />
-        </Box>
-        <Heading as="h2" variant="heading20">
-          <ScreenReaderOnly>Popular</ScreenReaderOnly> Components
-        </Heading>
-      </Box>
-      <Grid gutter="space30">
-        <Column span={[12, 6]}>
-          <ComponentCard>
-            <ComponentCardHeader>Button</ComponentCardHeader>
-            <ComponentCardIllustration>
-              <Image src={HomeButtonIllustration} aria-hidden="true" alt="" />
-            </ComponentCardIllustration>
-            <ComponentCardFooter>
-              <SiteLink href="/components/button">See Button</SiteLink>
-            </ComponentCardFooter>
-          </ComponentCard>
-        </Column>
-        <Column span={[12, 6]}>
-          <ComponentCard>
-            <ComponentCardHeader>Combobox</ComponentCardHeader>
-            <ComponentCardIllustration>
-              <Image src={HomeComboboxIllustration} aria-hidden="true" alt="" />
-            </ComponentCardIllustration>
-            <ComponentCardFooter>
-              <SiteLink href="/components/combobox">See Combobox</SiteLink>
-            </ComponentCardFooter>
-          </ComponentCard>
-        </Column>
-      </Grid>
-      <Box textAlign="center" marginTop="space20" marginBottom="space60">
-        <Text as="span" fontWeight="fontWeightSemibold">
-          Explore{" "}
-          <SiteLink
-            href="/components"
-            onClick={() =>
-              event({
-                category: "Popular",
-                action: "click-all-components",
-                label: "Explore all components",
-              })
-            }
-          >
-            all Components
-          </SiteLink>
-        </Text>
-      </Box>
-    </Box>
-  );
-};
-
-export { PopularComponents };
diff --git a/packages/paste-website/src/components/homepage/PopularPatterns.tsx b/packages/paste-website/src/components/homepage/PopularPatterns.tsx
deleted file mode 100644
index 8f68ee4b99..0000000000
--- a/packages/paste-website/src/components/homepage/PopularPatterns.tsx
+++ /dev/null
@@ -1,94 +0,0 @@
-import { Box } from "@twilio-paste/box";
-import { Column, Grid } from "@twilio-paste/grid";
-import { Heading } from "@twilio-paste/heading";
-import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
-import { Text } from "@twilio-paste/text";
-import { useTheme } from "@twilio-paste/theme";
-import Image from "next/image";
-
-import HomeCreateIllustration from "../../assets/illustrations/home_create_illustration.svg";
-import HomeDeleteIllustration from "../../assets/illustrations/home_delete_illustration.svg";
-import { event } from "../../lib/gtag";
-import { SiteLink } from "../SiteLink";
-import PatternsIcon from "../icons/PatternsIcon";
-import {
-  ComponentCard,
-  ComponentCardFooter,
-  ComponentCardHeader,
-  ComponentCardIllustration,
-} from "./PopularComponentCard";
-
-const PopularPatterns = (): JSX.Element => {
-  const theme = useTheme();
-
-  return (
-    <Box marginBottom={["space130", "space0"]}>
-      <Box textAlign="center">
-        <Box
-          alignItems="center"
-          backgroundColor="colorBackgroundBody"
-          borderRadius="borderRadiusCircle"
-          display="flex"
-          height="sizeSquare150"
-          justifyContent="center"
-          marginBottom="space40"
-          marginLeft="auto"
-          marginRight="auto"
-          width="sizeSquare150"
-        >
-          <PatternsIcon
-            css={{ height: theme.heights.sizeIcon40, width: theme.widths.sizeIcon40 }}
-            color={theme.textColors.colorTextErrorStrong}
-            decorative
-          />
-        </Box>
-        <Heading as="h2" variant="heading20">
-          <ScreenReaderOnly>Popular</ScreenReaderOnly> Patterns
-        </Heading>
-      </Box>
-      <Grid gutter="space30">
-        <Column span={[12, 6]}>
-          <ComponentCard>
-            <ComponentCardHeader>Create</ComponentCardHeader>
-            <ComponentCardIllustration>
-              <Image src={HomeCreateIllustration} aria-hidden="true" alt="" />
-            </ComponentCardIllustration>
-            <ComponentCardFooter>
-              <SiteLink href="/patterns/create">See Create</SiteLink>
-            </ComponentCardFooter>
-          </ComponentCard>
-        </Column>
-        <Column span={[12, 6]}>
-          <ComponentCard>
-            <ComponentCardHeader>Delete</ComponentCardHeader>
-            <ComponentCardIllustration>
-              <Image src={HomeDeleteIllustration} aria-hidden="true" alt="" />
-            </ComponentCardIllustration>
-            <ComponentCardFooter>
-              <SiteLink href="/patterns/delete">See Delete</SiteLink>
-            </ComponentCardFooter>
-          </ComponentCard>
-        </Column>
-      </Grid>
-      <Box textAlign="center" marginTop="space20" marginBottom="space60">
-        <Text as="span" fontWeight="fontWeightSemibold">
-          Explore{" "}
-          <SiteLink
-            href="/patterns"
-            onClick={() =>
-              event({
-                category: "Popular",
-                action: "click-all-patterns",
-                label: "Explore all patterns",
-              })
-            }
-          >
-            all Patterns
-          </SiteLink>
-        </Text>
-      </Box>
-    </Box>
-  );
-};
-
-export { PopularPatterns };
diff --git a/packages/paste-website/src/components/homepage/PopularSectionHeader.tsx b/packages/paste-website/src/components/homepage/PopularSectionHeader.tsx
deleted file mode 100644
index 8268b44598..0000000000
--- a/packages/paste-website/src/components/homepage/PopularSectionHeader.tsx
+++ /dev/null
@@ -1,32 +0,0 @@
-import { Box } from "@twilio-paste/box";
-import { useTheme } from "@twilio-paste/theme";
-
-const PopularSectionHeader = (): JSX.Element => {
-  const theme = useTheme();
-  return (
-    <Box
-      aria-hidden
-      color="colorTextWeak"
-      fontWeight="fontWeightBold"
-      marginBottom="space110"
-      marginTop="space0"
-      position="relative"
-      _after={{
-        borderTopColor: "colorBorderWeak",
-        borderTopStyle: "solid",
-        borderTopWidth: "borderWidth10",
-        content: `""`,
-        display: "block",
-        height: "1px",
-        marginLeft: "space160",
-        position: "absolute",
-        top: "50%",
-        width: `calc(100% - ${theme.space.space160})`,
-      }}
-    >
-      Popular
-    </Box>
-  );
-};
-
-export { PopularSectionHeader };
diff --git a/packages/paste-website/src/components/homepage/SearchBox.tsx b/packages/paste-website/src/components/homepage/SearchBox.tsx
index fbf5975631..93b807d420 100644
--- a/packages/paste-website/src/components/homepage/SearchBox.tsx
+++ b/packages/paste-website/src/components/homepage/SearchBox.tsx
@@ -75,7 +75,7 @@ const SearchBox: React.FC = () => {
           >
             <SearchIcon decorative={false} title="search the docs site" color="colorTextIcon" size="sizeIcon30" />
           </Box>
-          <Text as="div" fontStyle="italic" color="colorTextWeak">
+          <Text as="div" fontStyle="italic" color="colorTextWeak" marginLeft="space40">
             Search
           </Text>
         </Button>
diff --git a/packages/paste-website/src/components/homepage/Templates.tsx b/packages/paste-website/src/components/homepage/Templates.tsx
index 915fa72617..4c09745a18 100644
--- a/packages/paste-website/src/components/homepage/Templates.tsx
+++ b/packages/paste-website/src/components/homepage/Templates.tsx
@@ -1,9 +1,10 @@
 import { Box } from "@twilio-paste/box";
 import { Button } from "@twilio-paste/button";
 import { Heading } from "@twilio-paste/heading";
-import { TabPrimitive, TabPrimitiveList, TabPrimitivePanel, useTabPrimitiveState } from "@twilio-paste/tabs-primitive";
 import { Text } from "@twilio-paste/text";
 import { useTheme } from "@twilio-paste/theme";
+import Autoplay from "embla-carousel-autoplay";
+import useEmblaCarousel from "embla-carousel-react";
 import Image from "next/image";
 import * as React from "react";
 
@@ -16,34 +17,65 @@ import CircleIcon from "../icons/CircleIcon";
 import { BouncyAnchor } from "./BouncyAnchor";
 import { SectionContainer } from "./SectionContainer";
 
-const CarouselButton: React.FC<{ "aria-label": string }> = (props): React.ReactElement => {
-  return (
-    <Button
-      variant="reset"
-      size="reset"
-      height="14px"
-      width="14px"
-      borderStyle="solid"
-      borderWidth="borderWidth10"
-      borderColor="colorBorderWeak"
-      borderRadius="borderRadiusCircle"
-      name={props["aria-label"]}
-      _hover={{
-        borderColor: "colorBorderPrimary",
-      }}
-      _selected={{
-        borderColor: "colorBorderPrimaryStrong",
-        backgroundColor: "colorBackgroundPrimaryWeaker",
-      }}
-      {...props}
-    >
-      &nbsp;
-    </Button>
-  );
-};
+const CarouselButton = React.forwardRef<HTMLButtonElement, { "aria-label": string; onClick: () => void }>(
+  (props, ref) => {
+    return (
+      <Button
+        role="tab"
+        aria-busy="false"
+        ref={ref}
+        variant="reset"
+        size="reset"
+        height="14px"
+        width="14px"
+        borderStyle="solid"
+        borderWidth="borderWidth10"
+        borderColor="colorBorderWeak"
+        borderRadius="borderRadiusCircle"
+        name={props["aria-label"]}
+        _hover={{
+          borderColor: "colorBorderPrimary",
+        }}
+        _selected={{
+          borderColor: "colorBorderPrimaryStrong",
+          backgroundColor: "colorBackgroundPrimaryWeaker",
+        }}
+        {...props}
+      >
+        &nbsp;
+      </Button>
+    );
+  },
+);
 
 const TemplatesCarousel: React.FC = (): React.ReactElement => {
-  const tab = useTabPrimitiveState();
+  const [selectedIndex, setSelectedIndex] = React.useState(0);
+
+  const [emblaRef, emblaApi] = useEmblaCarousel({ loop: false }, [Autoplay()]);
+
+  const onSelect = React.useCallback(() => {
+    if (emblaApi) {
+      setSelectedIndex(emblaApi.selectedScrollSnap());
+    }
+  }, [emblaApi]);
+
+  React.useEffect(() => {
+    if (!emblaApi) return;
+
+    onSelect();
+    emblaApi.on("reInit", onSelect);
+    emblaApi.on("select", onSelect);
+  }, [onSelect, emblaApi]);
+
+  const onDotButtonClick = React.useCallback(
+    (index: number) => {
+      if (!emblaApi) return;
+      emblaApi.scrollTo(index);
+      setSelectedIndex(index);
+    },
+    [emblaApi],
+  );
+
   return (
     <Box
       width="min-content"
@@ -54,6 +86,8 @@ const TemplatesCarousel: React.FC = (): React.ReactElement => {
       rowGap="space70"
     >
       <Box
+        ref={emblaRef}
+        width="100%"
         paddingY="space130"
         paddingX="space100"
         borderStyle="solid"
@@ -67,8 +101,10 @@ const TemplatesCarousel: React.FC = (): React.ReactElement => {
         rowGap="space80"
         overflow="hidden"
       >
-        <TabPrimitivePanel {...tab}>
+        <Box display="flex" width="100%" maxWidth="500px" columnGap="space80">
           <Box
+            flex="0 0 100%"
+            minWidth={0}
             height="354px"
             width="499px"
             flexShrink={0}
@@ -76,11 +112,11 @@ const TemplatesCarousel: React.FC = (): React.ReactElement => {
             borderRadius="borderRadius30"
             overflow="hidden"
           >
-            <Image src={Settings} alt="" width="499" />
+            <Image src={Overview} alt="" width="499" />
           </Box>
-        </TabPrimitivePanel>
-        <TabPrimitivePanel {...tab}>
           <Box
+            flex="0 0 100%"
+            minWidth={0}
             height="354px"
             width="499px"
             flexShrink={0}
@@ -88,11 +124,11 @@ const TemplatesCarousel: React.FC = (): React.ReactElement => {
             borderRadius="borderRadius30"
             overflow="hidden"
           >
-            <Image src={ObjectsList} alt="" width="499" />
+            <Image src={Settings} alt="" width="499" />
           </Box>
-        </TabPrimitivePanel>
-        <TabPrimitivePanel {...tab}>
           <Box
+            flex="0 0 100%"
+            minWidth={0}
             height="354px"
             width="499px"
             flexShrink={0}
@@ -100,11 +136,11 @@ const TemplatesCarousel: React.FC = (): React.ReactElement => {
             borderRadius="borderRadius30"
             overflow="hidden"
           >
-            <Image src={Overview} alt="" width="499" />
-          </Box>
-        </TabPrimitivePanel>
-        <TabPrimitivePanel {...tab}>
+            <Image src={Wizard} alt="" height="354" width="499" />
+          </Box>{" "}
           <Box
+            flex="0 0 100%"
+            minWidth={0}
             height="354px"
             width="499px"
             flexShrink={0}
@@ -112,17 +148,32 @@ const TemplatesCarousel: React.FC = (): React.ReactElement => {
             borderRadius="borderRadius30"
             overflow="hidden"
           >
-            <Image src={Wizard} alt="" height="354" width="499" />
-          </Box>
-        </TabPrimitivePanel>
-        <TabPrimitiveList {...tab} aria-label="page templates carousel">
-          <Box display="flex" columnGap="space30" maxHeight="28px">
-            <TabPrimitive {...tab} as={CarouselButton} aria-label="objects list page template" />
-            <TabPrimitive {...tab} as={CarouselButton} aria-label="overview page template" />
-            <TabPrimitive {...tab} as={CarouselButton} aria-label="settings page template" />
-            <TabPrimitive {...tab} as={CarouselButton} aria-label="wizard page template" />
+            <Image src={ObjectsList} alt="" width="499" />
           </Box>
-        </TabPrimitiveList>
+        </Box>
+
+        <Box role="tablist" aria-label="page templates carousel" display="flex" columnGap="space30" maxHeight="28px">
+          <CarouselButton
+            aria-label="objects list page template"
+            aria-selected={selectedIndex === 0}
+            onClick={() => onDotButtonClick(0)}
+          />
+          <CarouselButton
+            aria-label="overview page template"
+            aria-selected={selectedIndex === 1}
+            onClick={() => onDotButtonClick(1)}
+          />
+          <CarouselButton
+            aria-label="settings page template"
+            aria-selected={selectedIndex === 2}
+            onClick={() => onDotButtonClick(2)}
+          />
+          <CarouselButton
+            aria-label="wizard page template"
+            aria-selected={selectedIndex === 3}
+            onClick={() => onDotButtonClick(3)}
+          />
+        </Box>
       </Box>
     </Box>
   );
@@ -134,15 +185,15 @@ const Templates: React.FC = (): React.ReactElement => {
     <SectionContainer position="relative">
       <Box
         display="flex"
-        flexDirection={["column", "column", "row"]}
-        justifyContent="center"
+        flexDirection={["column", "column", "column", "row"]}
+        justifyContent={["center", "center", "space-between"]}
         columnGap="space100"
         rowGap="space100"
         position="relative"
         maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
         overflow="visible"
       >
-        <Box paddingTop="space190" display="flex" flexDirection="column">
+        <Box paddingTop="space190" display="flex" flexDirection="column" maxWidth={["100%", "100%", "100%", "size40"]}>
           <Heading as="h3" variant="heading20">
             Explore our templates
           </Heading>
diff --git a/packages/paste-website/src/components/homepage/Themeable.tsx b/packages/paste-website/src/components/homepage/Themeable.tsx
index d9b820d335..21d749dc99 100644
--- a/packages/paste-website/src/components/homepage/Themeable.tsx
+++ b/packages/paste-website/src/components/homepage/Themeable.tsx
@@ -1,6 +1,7 @@
 // eslint-disable-next-line eslint-comments/disable-enable-pair
 /* eslint-disable react/jsx-max-depth */
 import { Anchor } from "@twilio-paste/anchor";
+import { type UseSpringProps, animated, useSpring } from "@twilio-paste/animation-library";
 import { Box } from "@twilio-paste/box";
 import { Heading } from "@twilio-paste/heading";
 import { Text } from "@twilio-paste/text";
@@ -16,6 +17,67 @@ import { SectionContainer } from "./SectionContainer";
 import { SectionSeparator } from "./SectionSeparator";
 import { ThemeableBuilder } from "./ThemeableBuilder";
 
+interface BoopProps {
+  x?: number;
+  y?: number;
+  rotation?: number;
+  scale?: number;
+  timing?: number;
+  config?: UseSpringProps["config"];
+  children?: React.ReactNode;
+}
+
+const Boop: React.FC<BoopProps> = ({
+  x = 0,
+  y = 0,
+  rotation = 0,
+  scale = 1,
+  timing = 150,
+  config = {
+    tension: 300,
+    friction: 10,
+  },
+  children,
+}) => {
+  const [isBooped, setIsBooped] = React.useState(false);
+  const trigger = React.useCallback(() => {
+    setIsBooped(true);
+  }, []);
+
+  const style = useSpring({
+    display: "inline-block",
+    transform: isBooped
+      ? `translate(${x}px, ${y}px)
+         rotate(${rotation}deg)
+         scale(${scale})`
+      : `translate(0px, 0px)
+         rotate(0deg)
+         scale(1)`,
+    config,
+  });
+
+  React.useEffect(() => {
+    if (!isBooped) {
+      return;
+    }
+
+    const timeoutId = window.setTimeout(() => {
+      setIsBooped(false);
+    }, timing);
+
+    // eslint-disable-next-line consistent-return
+    return () => {
+      window.clearTimeout(timeoutId);
+    };
+  }, [isBooped, timing]);
+
+  return (
+    <animated.span onMouseEnter={trigger} style={style}>
+      {children}
+    </animated.span>
+  );
+};
+
 const Themeable: React.FC = (): React.ReactElement => {
   return (
     <SectionContainer>
@@ -39,10 +101,10 @@ const Themeable: React.FC = (): React.ReactElement => {
           display="flex"
           flexDirection={["column", "column", "column", "row"]}
           justifyContent="space-between"
-          columnGap="space100"
+          columnGap="space200"
           rowGap="space200"
         >
-          <Box display="flex" flexDirection="column">
+          <Box display="flex" flexDirection="column" maxWidth={["100%", "100%", "100%", "size40"]}>
             <Heading as="h3" variant="heading20">
               Start from anywhere
             </Heading>
@@ -67,10 +129,23 @@ const Themeable: React.FC = (): React.ReactElement => {
           <Heading as="h3" variant="heading30">
             Built with your favorite technologies, Typescript + React + Figma
           </Heading>
-          <Box display="flex" flexDirection="row" columnGap="space200" justifyContent="center" marginTop="space90">
-            <Image src={TypescriptLogo} aria-hidden="true" role="img" alt="typescript logo" />
-            <Image src={ReactLogo} aria-hidden="true" role="img" alt="react logo" />
-            <Image src={FigmaLogo} aria-hidden="true" role="img" alt="figma logo" />
+          <Box
+            display="flex"
+            flexDirection="row"
+            columnGap="space200"
+            justifyContent="center"
+            marginTop="space90"
+            aria-hidden="true"
+          >
+            <Boop rotation={6} y={-1} scale={1.05}>
+              <Image src={TypescriptLogo} aria-hidden="true" role="img" alt="typescript logo" />
+            </Boop>
+            <Boop rotation={6} y={-1} scale={1.05}>
+              <Image src={ReactLogo} aria-hidden="true" role="img" alt="react logo" />
+            </Boop>
+            <Boop rotation={6} y={-1} scale={1.05}>
+              <Image src={FigmaLogo} aria-hidden="true" role="img" alt="figma logo" />
+            </Boop>
           </Box>
         </Box>
       </Box>
diff --git a/packages/paste-website/src/components/homepage/ThemeableBuilder.tsx b/packages/paste-website/src/components/homepage/ThemeableBuilder.tsx
index cad1ddde62..c363a4b561 100644
--- a/packages/paste-website/src/components/homepage/ThemeableBuilder.tsx
+++ b/packages/paste-website/src/components/homepage/ThemeableBuilder.tsx
@@ -18,13 +18,12 @@ import { Separator } from "@twilio-paste/separator";
 import { Tab, TabList, TabPanel, TabPanels, Tabs } from "@twilio-paste/tabs";
 import { Text } from "@twilio-paste/text";
 import { Theme, useTheme } from "@twilio-paste/theme";
-import { useUID, useUIDSeed } from "@twilio-paste/uid-library";
+import { useUID } from "@twilio-paste/uid-library";
 import Image from "next/image";
 import * as React from "react";
 import { LiveEditor, LiveProvider } from "react-live";
 
 import Acme from "../../assets/images/acme.png";
-import { usePreviewThemeContext } from "../../context/PreviewThemeContext";
 import { CopyButton } from "../CopyButton";
 import { CodeBlockOverlayShadow } from "../shortcodes/live-preview/CodeBlockOverlayShadow";
 import { CodeblockTheme } from "../shortcodes/live-preview/theme";
@@ -93,8 +92,8 @@ const CodeEditor: React.FC<{ children: string }> = ({ children }): React.ReactEl
       backgroundColor="colorBackgroundBodyInverse"
       paddingY="space110"
       paddingX="space70"
-      borderBottomLeftRadius="borderRadius20"
-      borderBottomRightRadius="borderRadius20"
+      borderBottomLeftRadius="borderRadius30"
+      borderBottomRightRadius="borderRadius30"
       borderColor="colorBorderWeak"
       borderStyle="solid"
       borderWidth="borderWidth20"
@@ -146,10 +145,30 @@ const CodeEditor: React.FC<{ children: string }> = ({ children }): React.ReactEl
   );
 };
 
+const Themes = ["default", "dark", "twilio", "custom"];
+type ThemeType = "default" | "dark" | "twilio" | "custom";
+
 const ComponentsTab: React.FC = (): React.ReactElement => {
-  const { theme, selectTheme } = usePreviewThemeContext();
-  const nameSeed = useUIDSeed();
-  const { theme: previewTheme } = usePreviewThemeContext();
+  const [hasManuallyChangedtheme, setHasManuallyChangedTheme] = React.useState(false);
+  const intervalRef = React.useRef<NodeJS.Timeout | undefined>();
+  const [theme, selectTheme] = React.useState<ThemeType>("default");
+
+  React.useEffect(() => {
+    if (hasManuallyChangedtheme) {
+      return () => {
+        clearInterval(intervalRef.current);
+      };
+    }
+
+    intervalRef.current = setInterval(() => {
+      const nextThemeIndex = Themes.indexOf(theme) + 1;
+      selectTheme((Themes[nextThemeIndex] || Themes[0]) as ThemeType);
+    }, 1500);
+
+    return () => {
+      clearInterval(intervalRef.current);
+    };
+  }, [hasManuallyChangedtheme, theme, selectTheme]);
 
   return (
     <>
@@ -169,18 +188,14 @@ const ComponentsTab: React.FC = (): React.ReactElement => {
           width="100%"
           element="CARD_AND_BUTTONS"
         >
-          {["twilio", "default", "dark"].includes(previewTheme) ? (
-            <Theme.Provider theme={previewTheme}>
-              <StyledComponentsCard />
-            </Theme.Provider>
-          ) : (
+          {theme === "custom" ? (
             <CustomizationProvider
               baseTheme="default"
               elements={{
                 CARD: {
                   backgroundColor: "colorBackgroundDecorative10Weakest",
                   borderRadius: "borderRadius0",
-                  borderWidth: "borderWidth20",
+                  borderWidth: "borderWidth10",
                   borderColor: "colorBorderPrimaryStrong",
                 },
                 SEPARATOR: {
@@ -206,37 +221,38 @@ const ComponentsTab: React.FC = (): React.ReactElement => {
             >
               <StyledComponentsCard />
             </CustomizationProvider>
+          ) : (
+            <Theme.Provider theme={theme}>
+              <StyledComponentsCard />
+            </Theme.Provider>
           )}
           <RadioButtonGroup
             attached
-            name="theme"
+            name="themeable-builder"
             value={theme}
             legend={<ScreenReaderOnly>Component preview theme</ScreenReaderOnly>}
             onChange={(newValue) => {
-              selectTheme(newValue);
+              setHasManuallyChangedTheme(true);
+              selectTheme(newValue as ThemeType);
             }}
             orientation="horizontal"
           >
-            <RadioButton id={useUID()} value="default" name={nameSeed("theme")}>
+            <RadioButton id={useUID()} value="default">
               Default
             </RadioButton>
-            <RadioButton id={useUID()} value="dark" name={nameSeed("theme")}>
+            <RadioButton id={useUID()} value="dark">
               Dark
             </RadioButton>
-            <RadioButton id={useUID()} value="twilio" name={nameSeed("theme")}>
+            <RadioButton id={useUID()} value="twilio">
               Twilio
             </RadioButton>
-            <RadioButton id={useUID()} value="custom" name={nameSeed("theme")}>
+            <RadioButton id={useUID()} value="custom">
               Custom
             </RadioButton>
           </RadioButtonGroup>
         </Box>
       </Box>
-      {["twilio", "default", "dark"].includes(previewTheme) ? (
-        <CodeEditor>{DefaultSnippet}</CodeEditor>
-      ) : (
-        <CodeEditor>{CustomSnippet}</CodeEditor>
-      )}
+      {theme === "custom" ? <CodeEditor>{CustomSnippet}</CodeEditor> : <CodeEditor>{DefaultSnippet}</CodeEditor>}
     </>
   );
 };
diff --git a/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx
index 76f4e7bedf..75b083067c 100644
--- a/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx
+++ b/packages/paste-website/src/components/homepage/WeDoTheThinking.tsx
@@ -2,7 +2,6 @@ import { animated, useSpring } from "@twilio-paste/animation-library";
 import { Box } from "@twilio-paste/box";
 import { Heading } from "@twilio-paste/heading";
 import { CheckboxCheckIcon } from "@twilio-paste/icons/esm/CheckboxCheckIcon";
-import { Paragraph } from "@twilio-paste/paragraph";
 import { Text } from "@twilio-paste/text";
 import * as React from "react";
 import VisibilitySensor from "react-visibility-sensor";
@@ -11,21 +10,29 @@ import { SectionContainer } from "./SectionContainer";
 
 const AnimatedBox = animated(Box);
 
-const ThinkingLine: React.FC<{ children: React.ReactNode }> = ({ children }): React.ReactElement => {
+const ThinkingLine: React.FC<{ children: React.ReactNode; index: number }> = ({
+  children,
+  index,
+}): React.ReactElement => {
   const [show, setShow] = React.useState(false);
 
   function handleVisibilityChange(isVisible: boolean): void {
     if (!show) {
-      setShow(isVisible);
+      setTimeout(() => {
+        setShow(isVisible);
+      }, index * 50);
     }
   }
 
   const styles = useSpring({
     opacity: show ? 1 : 0.1,
+    config: {
+      duration: 500,
+    },
   });
 
   return (
-    <VisibilitySensor onChange={handleVisibilityChange} offset={{ bottom: 120 }}>
+    <VisibilitySensor onChange={handleVisibilityChange} offset={{ bottom: 100 }}>
       <Box display="flex" columnGap="space50" alignItems="center">
         <AnimatedBox
           borderRadius="borderRadiusCircle"
@@ -56,13 +63,13 @@ const WeDoTheThinking: React.FC = (): React.ReactElement => {
           </Box>
           <span>so you don&apos;t have to</span>
         </Heading>
-        <Paragraph>
+        <Text as="p" fontSize="fontSize40" lineHeight="lineHeight40" marginBottom="space90">
           Creating seamless and accessible user experiences can be a tough task. But we help you simplify the journey.
-        </Paragraph>
-        <Paragraph marginBottom="space0">
+        </Text>
+        <Text as="p" fontSize="fontSize40" lineHeight="lineHeight40">
           Paste handles the research, design, testing, and engineering of the core building blocks. This frees up your
           energy to tackle customer challenges instead of UI issues.
-        </Paragraph>
+        </Text>
         <Box display="flex" justifyContent="center">
           <Box
             display="flex"
@@ -72,15 +79,15 @@ const WeDoTheThinking: React.FC = (): React.ReactElement => {
             maxWidth="size30"
             marginTop="space130"
           >
-            <ThinkingLine>Accessibility standards</ThinkingLine>
-            <ThinkingLine>User research</ThinkingLine>
-            <ThinkingLine>Competitive analysis</ThinkingLine>
-            <ThinkingLine>Product requirements</ThinkingLine>
-            <ThinkingLine>Design & API review</ThinkingLine>
-            <ThinkingLine>Usage guidelines</ThinkingLine>
-            <ThinkingLine>Built-in constraints</ThinkingLine>
-            <ThinkingLine>Dos and Dont&apos;s</ThinkingLine>
-            <ThinkingLine>Performance</ThinkingLine>
+            <ThinkingLine index={0}>Accessibility standards</ThinkingLine>
+            <ThinkingLine index={1}>User research</ThinkingLine>
+            <ThinkingLine index={2}>Competitive analysis</ThinkingLine>
+            <ThinkingLine index={3}>Product requirements</ThinkingLine>
+            <ThinkingLine index={4}>Design & API review</ThinkingLine>
+            <ThinkingLine index={5}>Usage guidelines</ThinkingLine>
+            <ThinkingLine index={6}>Built-in constraints</ThinkingLine>
+            <ThinkingLine index={7}>Dos and Dont&apos;s</ThinkingLine>
+            <ThinkingLine index={8}>Performance</ThinkingLine>
           </Box>
         </Box>
       </Box>
diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx
index f3a6ee5985..f7bb3de56a 100644
--- a/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx
+++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnOneShowcase.tsx
@@ -99,7 +99,7 @@ export const ColumnOneShowcase: React.FC = () => {
       display="flex"
       flexDirection="column"
       rowGap="space70"
-      maxWidth="527px"
+      maxWidth="519px"
     >
       <Box
         backgroundColor="colorBackgroundBody"
@@ -248,69 +248,75 @@ export const ColumnOneShowcase: React.FC = () => {
         <Label htmlFor={sliderId}>Volume</Label>
         <Slider id={sliderId} value={sliderValue} onChange={(newValue) => setSliderValue(newValue)} hideRangeLabels />
       </Box>
-      <Disclosure state={customDisclosureState}>
-        <DisclosureHeading as="h3" variant="heading30">
-          Helpful links
-        </DisclosureHeading>
-        <DisclosureContent>
-          <Box display="flex" columnGap="space90">
-            <Box display="flex" flexDirection="column" rowGap="space50" marginLeft="space60" marginBottom="space30">
-              <Anchor href="/components/icon">Icons list</Anchor>
-              <Box display="flex" flexDirection="column" rowGap="space20" flexWrap="wrap">
-                <Box display="flex" flexDirection="row" columnGap="space30">
-                  <EditIcon decorative={false} title="edit icon" size="sizeIcon40" color="colorTextIcon" />
-                  <ShowIcon decorative={false} title="show icon" size="sizeIcon40" color="colorTextIcon" />
-                  <BuildIcon decorative={false} title="build icon" size="sizeIcon40" color="colorTextIcon" />
-                  <CustomIcon decorative={false} title="custom icon" size="sizeIcon40" color="colorTextIcon" />
-                </Box>
-                <Box display="flex" flexDirection="row" columnGap="space30">
-                  <ExpandIcon decorative={false} title="expand icon" size="sizeIcon40" color="colorTextIcon" />
-                  <FeedIcon decorative={false} title="feed icon" size="sizeIcon40" color="colorTextIcon" />
-                  <FileImageIcon decorative={false} title="file image icon" size="sizeIcon40" color="colorTextIcon" />
-                  <TranslationIcon
-                    decorative={false}
-                    title="translation icon"
-                    size="sizeIcon40"
-                    color="colorTextIcon"
-                  />
-                </Box>
-                <Box display="flex" flexDirection="row" columnGap="space30">
-                  <ShareIcon decorative={false} title="share icon" size="sizeIcon40" color="colorTextIcon" />
-                  <TipIcon decorative={false} title="tip icon" size="sizeIcon40" color="colorTextIcon" />
-                  <TimeIcon decorative={false} title="time icon" size="sizeIcon40" color="colorTextIcon" />
-                  <DataLineChartIcon
-                    decorative={false}
-                    title="data line chart icon"
-                    size="sizeIcon40"
-                    color="colorTextIcon"
-                  />
+      <Box
+        backgroundColor="colorBackgroundBody"
+        borderTopLeftRadius="borderRadius30"
+        borderTopRightRadius="borderRadius30"
+      >
+        <Disclosure state={customDisclosureState}>
+          <DisclosureHeading as="h3" variant="heading30">
+            Helpful links
+          </DisclosureHeading>
+          <DisclosureContent>
+            <Box display="flex" columnGap="space90" paddingBottom="space40">
+              <Box display="flex" flexDirection="column" rowGap="space50" marginLeft="space60" marginBottom="space30">
+                <Anchor href="/components/icon">Icons list</Anchor>
+                <Box display="flex" flexDirection="column" rowGap="space20" flexWrap="wrap">
+                  <Box display="flex" flexDirection="row" columnGap="space30">
+                    <EditIcon decorative={false} title="edit icon" size="sizeIcon40" color="colorTextIcon" />
+                    <ShowIcon decorative={false} title="show icon" size="sizeIcon40" color="colorTextIcon" />
+                    <BuildIcon decorative={false} title="build icon" size="sizeIcon40" color="colorTextIcon" />
+                    <CustomIcon decorative={false} title="custom icon" size="sizeIcon40" color="colorTextIcon" />
+                  </Box>
+                  <Box display="flex" flexDirection="row" columnGap="space30">
+                    <ExpandIcon decorative={false} title="expand icon" size="sizeIcon40" color="colorTextIcon" />
+                    <FeedIcon decorative={false} title="feed icon" size="sizeIcon40" color="colorTextIcon" />
+                    <FileImageIcon decorative={false} title="file image icon" size="sizeIcon40" color="colorTextIcon" />
+                    <TranslationIcon
+                      decorative={false}
+                      title="translation icon"
+                      size="sizeIcon40"
+                      color="colorTextIcon"
+                    />
+                  </Box>
+                  <Box display="flex" flexDirection="row" columnGap="space30">
+                    <ShareIcon decorative={false} title="share icon" size="sizeIcon40" color="colorTextIcon" />
+                    <TipIcon decorative={false} title="tip icon" size="sizeIcon40" color="colorTextIcon" />
+                    <TimeIcon decorative={false} title="time icon" size="sizeIcon40" color="colorTextIcon" />
+                    <DataLineChartIcon
+                      decorative={false}
+                      title="data line chart icon"
+                      size="sizeIcon40"
+                      color="colorTextIcon"
+                    />
+                  </Box>
                 </Box>
               </Box>
+              <Box display="flex" flexDirection="column" rowGap="space50">
+                <Anchor href="/tokens/list">Tokens list</Anchor>
+                <DisplayPillGroup aria-label="design tokens">
+                  <DisplayPill>
+                    <Avatar name="color-text-success" src="/images/avatars/token1.png" size="sizeIcon10" />
+                    $color-text-success
+                  </DisplayPill>
+                  <DisplayPill>
+                    <Avatar name="color-text" src="/images/avatars/token2.png" size="sizeIcon10" />
+                    $color-text
+                  </DisplayPill>
+                  <DisplayPill>
+                    <Avatar name="color-data-visualization" src="/images/avatars/token3.png" size="sizeIcon10" />
+                    $color-data-visualization-10
+                  </DisplayPill>
+                  <DisplayPill>
+                    <Avatar name="color-background-primary" src="/images/avatars/token4.png" size="sizeIcon10" />
+                    $color-background-primary
+                  </DisplayPill>
+                </DisplayPillGroup>
+              </Box>
             </Box>
-            <Box display="flex" flexDirection="column" rowGap="space50">
-              <Anchor href="/tokens/list">Tokens list</Anchor>
-              <DisplayPillGroup aria-label="design tokens">
-                <DisplayPill>
-                  <Avatar name="color-text-success" src="/images/avatars/token1.png" size="sizeIcon10" />
-                  $color-text-success
-                </DisplayPill>
-                <DisplayPill>
-                  <Avatar name="color-text" src="/images/avatars/token2.png" size="sizeIcon10" />
-                  $color-text
-                </DisplayPill>
-                <DisplayPill>
-                  <Avatar name="color-data-visualization" src="/images/avatars/token3.png" size="sizeIcon10" />
-                  $color-data-visualization-10
-                </DisplayPill>
-                <DisplayPill>
-                  <Avatar name="color-background-primary" src="/images/avatars/token4.png" size="sizeIcon10" />
-                  $color-background-primary
-                </DisplayPill>
-              </DisplayPillGroup>
-            </Box>
-          </Box>
-        </DisclosureContent>
-      </Disclosure>
+          </DisclosureContent>
+        </Disclosure>
+      </Box>
     </Box>
   );
 };
diff --git a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx
index 373cc6d988..28ed3ef2d6 100644
--- a/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx
+++ b/packages/paste-website/src/components/homepage/component-showcase/ColumnTwoShowcase.tsx
@@ -36,11 +36,11 @@ export const ColumnTwoShowcase: React.FC = () => {
         <CalloutText>We recommend enabling auto recharge to keep your account active.</CalloutText>
       </Callout>
       <Box display="flex" flexDirection="row" justifyContent="space-between">
-        <Button variant="secondary" pressed={followPressed} onClick={() => setFollowPressed(!followPressed)}>
+        <Button variant="primary" pressed={followPressed} onClick={() => setFollowPressed(!followPressed)}>
           {followPressed ? <CheckboxCheckIcon decorative /> : <PlusIcon decorative />}Follow
         </Button>
-        <Button variant="destructive_secondary">Remove user</Button>
-        <Button variant="destructive_secondary">
+        <Button variant="destructive">Remove user</Button>
+        <Button variant="destructive">
           <FilterIcon decorative />
           Apply filters
         </Button>
@@ -72,16 +72,18 @@ export const ColumnTwoShowcase: React.FC = () => {
             </ChatMessageMeta>
           </ChatMessage>
         </ChatLog>
-        <ChatComposer
-          config={{
-            namespace: "customer-chat",
-            onError: (e) => {
-              throw e;
-            },
-          }}
-          placeholder="Contact Owl Corp"
-          ariaLabel="A basic chat composer"
-        />
+        <Box paddingX="space40" paddingY="space30">
+          <ChatComposer
+            config={{
+              namespace: "customer-chat",
+              onError: (e) => {
+                throw e;
+              },
+            }}
+            placeholder="Contact Owl Corp"
+            ariaLabel="A basic chat composer"
+          />
+        </Box>
       </Box>
     </Box>
   );
diff --git a/packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx b/packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx
index e317e272e7..51a67e7de7 100644
--- a/packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx
+++ b/packages/paste-website/src/components/homepage/component-showcase/ComboboxShowcase.tsx
@@ -25,6 +25,8 @@ export const ComboboxShowcase: React.FC = () => {
   const filteredItems = React.useMemo(() => getFilteredItems(inputValue), [inputValue]);
   return (
     <MultiselectCombobox
+      autoFocus={false}
+      tabIndex={-1}
       labelText="Code sample languages"
       selectedItemsLabelText="Selected code sample languages"
       items={filteredItems}
diff --git a/packages/paste-website/src/components/shortcodes/live-preview/ThemeSwitcher.tsx b/packages/paste-website/src/components/shortcodes/live-preview/ThemeSwitcher.tsx
index 43dbed5486..6601c70217 100644
--- a/packages/paste-website/src/components/shortcodes/live-preview/ThemeSwitcher.tsx
+++ b/packages/paste-website/src/components/shortcodes/live-preview/ThemeSwitcher.tsx
@@ -1,19 +1,19 @@
 import { Box } from "@twilio-paste/box";
 import { RadioButton, RadioButtonGroup } from "@twilio-paste/radio-button-group";
 import { ScreenReaderOnly } from "@twilio-paste/screen-reader-only";
-import { useUID, useUIDSeed } from "@twilio-paste/uid-library";
+import { useUID } from "@twilio-paste/uid-library";
 import * as React from "react";
 
 import { usePreviewThemeContext } from "../../../context/PreviewThemeContext";
 
 export const ThemeSwitcher: React.FC<React.PropsWithChildren> = () => {
   const { theme, selectTheme } = usePreviewThemeContext();
-  const nameSeed = useUIDSeed();
+
   return (
     <Box padding="space40">
       <RadioButtonGroup
         attached
-        name="theme"
+        name="site-theme-switcher"
         value={theme}
         legend={<ScreenReaderOnly>Component preview theme</ScreenReaderOnly>}
         onChange={(newValue) => {
@@ -21,19 +21,19 @@ export const ThemeSwitcher: React.FC<React.PropsWithChildren> = () => {
         }}
         orientation="horizontal"
       >
-        <RadioButton id={useUID()} value="default" name={nameSeed("theme")}>
+        <RadioButton id={useUID()} value="default">
           Default
         </RadioButton>
-        <RadioButton id={useUID()} value="dark" name={nameSeed("theme")}>
+        <RadioButton id={useUID()} value="dark">
           Dark
         </RadioButton>
-        <RadioButton id={useUID()} value="twilio" name={nameSeed("theme")}>
+        <RadioButton id={useUID()} value="twilio">
           Twilio
         </RadioButton>
-        <RadioButton id={useUID()} value="twilio-dark" name={nameSeed("theme")}>
+        <RadioButton id={useUID()} value="twilio-dark">
           Twilio Dark
         </RadioButton>
-        <RadioButton id={useUID()} value="evergreen" name={nameSeed("theme")}>
+        <RadioButton id={useUID()} value="evergreen">
           Evergreen
         </RadioButton>
       </RadioButtonGroup>
diff --git a/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx b/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx
index dfbe8daeda..52ebfd515e 100644
--- a/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx
+++ b/packages/paste-website/src/components/site-wrapper/site-footer/index.tsx
@@ -6,24 +6,25 @@ import { SiteFooterNav } from "./SiteFooterNav";
 
 const SiteFooter: React.FC = () => {
   return (
-    <Box
-      as="footer"
-      margin={["space0", "space80", "space140"]}
-      display="flex"
-      justifyContent="center"
-      borderRadius={["borderRadius0", "borderRadius30"]}
-      backgroundColor="colorBackgroundBodyInverse"
-    >
+    <Box as="footer" padding={["space0", "space80", "space140"]} display="flex" backgroundColor="colorBackgroundBody">
       <Box
         width="100%"
-        maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
-        padding={["space90", "space90", "space180"]}
-        paddingTop={["space130", "space130", "space130"]}
         display="flex"
-        justifyContent={["center", "center", "center", "space-between"]}
+        justifyContent="center"
+        borderRadius={["borderRadius0", "borderRadius30"]}
+        backgroundColor="colorBackgroundBodyInverse"
       >
-        <SiteFooterNav />
-        <SiteFooterIllustration />
+        <Box
+          width="100%"
+          maxWidth={HOMEPAGE_SITE_CONTENT_MAX_WIDTH}
+          padding={["space90", "space90", "space180"]}
+          paddingTop={["space130", "space130", "space130"]}
+          display="flex"
+          justifyContent={["center", "center", "center", "space-between"]}
+        >
+          <SiteFooterNav />
+          <SiteFooterIllustration />
+        </Box>
       </Box>
     </Box>
   );
diff --git a/yarn.lock b/yarn.lock
index feafaa16ee..db1c9dcbf7 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -15861,6 +15861,8 @@ __metadata:
     deepmerge: 4.2.2
     dogapi: ^2.8.4
     dotenv: ^16.0.0
+    embla-carousel-autoplay: ^8.0.0
+    embla-carousel-react: ^8.0.0
     github-slugger: ^2.0.0
     globby-esm: "npm:globby@^13.1.3"
     gpt3-tokenizer: ^1.1.5
@@ -23859,6 +23861,43 @@ __metadata:
   languageName: node
   linkType: hard
 
+"embla-carousel-autoplay@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "embla-carousel-autoplay@npm:8.0.0"
+  peerDependencies:
+    embla-carousel: 8.0.0
+  checksum: 18a2e85cbac0bc6203db5bf62d8cd75df64dc3cfaa052208a495205e16c7b75c1ac6eb5515d9b6b104f13e1f27fbd10df510f34851c81af3e5d668655fcd6e3b
+  languageName: node
+  linkType: hard
+
+"embla-carousel-react@npm:^8.0.0":
+  version: 8.0.0
+  resolution: "embla-carousel-react@npm:8.0.0"
+  dependencies:
+    embla-carousel: 8.0.0
+    embla-carousel-reactive-utils: 8.0.0
+  peerDependencies:
+    react: ^16.8.0 || ^17.0.1 || ^18.0.0
+  checksum: 7e4acbb45a1c225222400156427e59dba14312032492e38d862a8ba8dc6c0c55aa9d4bd041aff04faa6bd51cf571fddf718f6f2c72a2ed1a400cd4310c835024
+  languageName: node
+  linkType: hard
+
+"embla-carousel-reactive-utils@npm:8.0.0":
+  version: 8.0.0
+  resolution: "embla-carousel-reactive-utils@npm:8.0.0"
+  peerDependencies:
+    embla-carousel: 8.0.0
+  checksum: 5f0ea60fc84d06f4c15481ca56ae67736d27ac802d7b36ed5b03af55425b1dc69c38737446284de7e85b0a6bef4f267a4d985888390630e39bc842b0b2b48d7e
+  languageName: node
+  linkType: hard
+
+"embla-carousel@npm:8.0.0":
+  version: 8.0.0
+  resolution: "embla-carousel@npm:8.0.0"
+  checksum: 0fef615c0fbd8a8f972f55d8ea8780347394a19453248e5260a7ffb74401a84683b21d7c3e473a9bf4e96cf123756c7735906014ada13c8ba79e311b87bf458c
+  languageName: node
+  linkType: hard
+
 "emittery@npm:^0.10.2":
   version: 0.10.2
   resolution: "emittery@npm:0.10.2"