diff --git a/web/apps/cast/src/components/FilledCircleCheck.tsx b/web/apps/cast/src/components/FilledCircleCheck.tsx
index c0635f138a..ba2292922e 100644
--- a/web/apps/cast/src/components/FilledCircleCheck.tsx
+++ b/web/apps/cast/src/components/FilledCircleCheck.tsx
@@ -1,6 +1,6 @@
 import { styled } from "@mui/material";
 
-const FilledCircleCheck = () => {
+export const FilledCircleCheck: React.FC = () => {
     return (
         <Container>
             <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 52 52">
@@ -11,8 +11,6 @@ const FilledCircleCheck = () => {
     );
 };
 
-export default FilledCircleCheck;
-
 const Container = styled("div")`
     width: 100px;
     height: 100px;
diff --git a/web/apps/cast/src/components/LargeType.tsx b/web/apps/cast/src/components/LargeType.tsx
index ecf7a201bb..42ccb65e9f 100644
--- a/web/apps/cast/src/components/LargeType.tsx
+++ b/web/apps/cast/src/components/LargeType.tsx
@@ -23,7 +23,7 @@ const colourPool = [
     "#808000", // Light Olive
 ];
 
-export default function LargeType({ chars }: { chars: string[] }) {
+export const LargeType = ({ chars }: { chars: string[] }) => {
     return (
         <Container style={{}}>
             {chars.map((char, i) => (
@@ -41,7 +41,7 @@ export default function LargeType({ chars }: { chars: string[] }) {
             ))}
         </Container>
     );
-}
+};
 
 const Container = styled("div")`
     font-size: 4rem;
diff --git a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx b/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
index 845416fedc..88f4d7c1fc 100644
--- a/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
+++ b/web/apps/cast/src/components/PairedSuccessfullyOverlay.tsx
@@ -1,6 +1,6 @@
-import FilledCircleCheck from "./FilledCircleCheck";
+import { FilledCircleCheck } from "./FilledCircleCheck";
 
-export default function PairedSuccessfullyOverlay() {
+export const PairedSuccessfullyOverlay: React.FC = () => {
     return (
         <div
             style={{
@@ -43,4 +43,4 @@ export default function PairedSuccessfullyOverlay() {
             </div>
         </div>
     );
-}
+};
diff --git a/web/apps/cast/src/pages/index.tsx b/web/apps/cast/src/pages/index.tsx
index 204ff2d04f..f1ec1a7468 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 { LargeType } from "components/LargeType";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";
 import { storeCastData } from "services/cast";
diff --git a/web/apps/cast/src/pages/slideshow.tsx b/web/apps/cast/src/pages/slideshow.tsx
index 85cf7ad236..f14a3f40e6 100644
--- a/web/apps/cast/src/pages/slideshow.tsx
+++ b/web/apps/cast/src/pages/slideshow.tsx
@@ -1,5 +1,5 @@
 import log from "@/next/log";
-import PairedSuccessfullyOverlay from "components/PairedSuccessfullyOverlay";
+import { PairedSuccessfullyOverlay } from "components/PairedSuccessfullyOverlay";
 import { SlideView } from "components/Slide";
 import { useRouter } from "next/router";
 import { useEffect, useState } from "react";