diff --git a/web/apps/photos/src/pages/index.tsx b/web/apps/photos/src/pages/index.tsx
index fc888af83..863af3a64 100644
--- a/web/apps/photos/src/pages/index.tsx
+++ b/web/apps/photos/src/pages/index.tsx
@@ -186,47 +186,7 @@ export default function LandingPage() {
                 <>
                     <SlideContainer>
                         <EnteLogo height={24} sx={{ mb: 8 }} />
-                        <Carousel controls={false}>
-                            <Carousel.Item>
-                                <Img
-                                    src="/images/onboarding-lock/1x.png"
-                                    srcSet="/images/onboarding-lock/2x.png 2x,
-                                        /images/onboarding-lock/3x.png 3x"
-                                />
-                                <FeatureText>
-                                    <Trans i18nKey={"HERO_SLIDE_1_TITLE"} />
-                                </FeatureText>
-                                <TextContainer>
-                                    {t("HERO_SLIDE_1")}
-                                </TextContainer>
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <Img
-                                    src="/images/onboarding-safe/1x.png"
-                                    srcSet="/images/onboarding-safe/2x.png 2x,
-                                        /images/onboarding-safe/3x.png 3x"
-                                />
-                                <FeatureText>
-                                    <Trans i18nKey={"HERO_SLIDE_2_TITLE"} />
-                                </FeatureText>
-                                <TextContainer>
-                                    {t("HERO_SLIDE_2")}
-                                </TextContainer>
-                            </Carousel.Item>
-                            <Carousel.Item>
-                                <Img
-                                    src="/images/onboarding-sync/1x.png"
-                                    srcSet="/images/onboarding-sync/2x.png 2x,
-                                        /images/onboarding-sync/3x.png 3x"
-                                />
-                                <FeatureText>
-                                    <Trans i18nKey={"HERO_SLIDE_3_TITLE"} />
-                                </FeatureText>
-                                <TextContainer>
-                                    {t("HERO_SLIDE_3")}
-                                </TextContainer>
-                            </Carousel.Item>
-                        </Carousel>
+                        <Slideshow />
                     </SlideContainer>
                     <MobileBox>
                         <Button
@@ -258,3 +218,43 @@ export default function LandingPage() {
         </Container>
     );
 }
+
+const Slideshow: React.FC = () => {
+    return (
+        <Carousel controls={false}>
+            <Carousel.Item>
+                <Img
+                    src="/images/onboarding-lock/1x.png"
+                    srcSet="/images/onboarding-lock/2x.png 2x,
+                /images/onboarding-lock/3x.png 3x"
+                />
+                <FeatureText>
+                    <Trans i18nKey={"HERO_SLIDE_1_TITLE"} />
+                </FeatureText>
+                <TextContainer>{t("HERO_SLIDE_1")}</TextContainer>
+            </Carousel.Item>
+            <Carousel.Item>
+                <Img
+                    src="/images/onboarding-safe/1x.png"
+                    srcSet="/images/onboarding-safe/2x.png 2x,
+                /images/onboarding-safe/3x.png 3x"
+                />
+                <FeatureText>
+                    <Trans i18nKey={"HERO_SLIDE_2_TITLE"} />
+                </FeatureText>
+                <TextContainer>{t("HERO_SLIDE_2")}</TextContainer>
+            </Carousel.Item>
+            <Carousel.Item>
+                <Img
+                    src="/images/onboarding-sync/1x.png"
+                    srcSet="/images/onboarding-sync/2x.png 2x,
+                /images/onboarding-sync/3x.png 3x"
+                />
+                <FeatureText>
+                    <Trans i18nKey={"HERO_SLIDE_3_TITLE"} />
+                </FeatureText>
+                <TextContainer>{t("HERO_SLIDE_3")}</TextContainer>
+            </Carousel.Item>
+        </Carousel>
+    );
+};