diff --git a/web/apps/cast/src/components/LargeType.tsx b/web/apps/cast/src/components/PairingCode.tsx
similarity index 76%
rename from web/apps/cast/src/components/LargeType.tsx
rename to web/apps/cast/src/components/PairingCode.tsx
index 42ccb65e9..7649e4dea 100644
--- a/web/apps/cast/src/components/LargeType.tsx
+++ b/web/apps/cast/src/components/PairingCode.tsx
@@ -1,6 +1,6 @@
 import { styled } from "@mui/material";
 
-const colourPool = [
+const colors = [
     "#87CEFA", // Light Blue
     "#90EE90", // Light Green
     "#F08080", // Light Coral
@@ -23,27 +23,31 @@ const colourPool = [
     "#808000", // Light Olive
 ];
 
-export const LargeType = ({ chars }: { chars: string[] }) => {
+interface PairingCodeProps {
+    code: string;
+}
+
+export const PairingCode: React.FC<PairingCodeProps> = ({ code }) => {
     return (
-        <Container style={{}}>
-            {chars.map((char, i) => (
+        <PairingCode_>
+            {code.split("").map((char, i) => (
                 <span
                     key={i}
                     style={{
-                        // alternating background
+                        // Alternating background.
                         backgroundColor: i % 2 === 0 ? "#2e2e2e" : "#5e5e5e",
-                        // varying colors
-                        color: colourPool[i % colourPool.length],
+                        // Varying colors.
+                        color: colors[i % colors.length],
                     }}
                 >
                     {char}
                 </span>
             ))}
-        </Container>
+        </PairingCode_>
     );
 };
 
-const Container = styled("div")`
+const PairingCode_ = styled("div")`
     font-size: 4rem;
     font-weight: bold;
     font-family: monospace;
diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index 175d75bbc..abd963150 100644
--- a/web/apps/cast/src/pages/index.tsx
+++ b/web/apps/cast/src/pages/index.tsx
@@ -1,6 +1,6 @@
 import log from "@/next/log";
 import EnteSpinner from "@ente/shared/components/EnteSpinner";
-import { LargeType } from "components/LargeType";
+import { PairingCode } from "components/PairingCode";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { storeCastData } from "services/cast";
@@ -98,7 +98,7 @@ export default function Index() {
                         }}
                     >
                         {pairingCode ? (
-                            <LargeType chars={pairingCode.split("")} />
+                            <PairingCode code={pairingCode} />
                         ) : (
                             <EnteSpinner />
                         )}
diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index 25cc792bb..d117f6da7 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -29,7 +29,7 @@ export default function Slideshow() {
                         // No items in this callection can be shown.
                         setIsEmpty(true);
                         // Go back to pairing screen after 3 seconds.
-                        setTimeout(pair, 3000);
+                        setTimeout(pair, 5000);
                         return;
                     }