diff --git a/web/apps/photos/src/components/pages/gallery/PlanSelector/plans/FreePlanRow.tsx b/web/apps/photos/src/components/pages/gallery/PlanSelector/plans/FreePlanRow.tsx
deleted file mode 100644
index f3651e12d..000000000
--- a/web/apps/photos/src/components/pages/gallery/PlanSelector/plans/FreePlanRow.tsx
+++ /dev/null
@@ -1,28 +0,0 @@
-import { SpaceBetweenFlex } from "@ente/shared/components/Container";
-import ArrowForward from "@mui/icons-material/ArrowForward";
-import { Box, IconButton, styled, Typography } from "@mui/material";
-import { t } from "i18next";
-
-const RowContainer = styled(SpaceBetweenFlex)(({ theme }) => ({
-    gap: theme.spacing(1.5),
-    padding: theme.spacing(1.5, 1),
-    cursor: "pointer",
-    "&:hover .endIcon": {
-        backgroundColor: "rgba(255,255,255,0.08)",
-    },
-}));
-export function FreePlanRow({ closeModal }) {
-    return (
-        <RowContainer onClick={closeModal}>
-            <Box>
-                <Typography> {t("FREE_PLAN_OPTION_LABEL")}</Typography>
-                <Typography variant="small" color="text.muted">
-                    {t("FREE_PLAN_DESCRIPTION")}
-                </Typography>
-            </Box>
-            <IconButton className={"endIcon"}>
-                <ArrowForward />
-            </IconButton>
-        </RowContainer>
-    );
-}
diff --git a/web/apps/photos/src/components/pages/gallery/PlanSelector/plans/index.tsx b/web/apps/photos/src/components/pages/gallery/PlanSelector/plans/index.tsx
index ed1a666ed..a4f830b9d 100644
--- a/web/apps/photos/src/components/pages/gallery/PlanSelector/plans/index.tsx
+++ b/web/apps/photos/src/components/pages/gallery/PlanSelector/plans/index.tsx
@@ -1,5 +1,8 @@
-import { Stack } from "@mui/material";
+import { SpaceBetweenFlex } from "@ente/shared/components/Container";
+import ArrowForward from "@mui/icons-material/ArrowForward";
+import { Box, IconButton, Stack, Typography, styled } from "@mui/material";
 import { PLAN_PERIOD } from "constants/gallery";
+import { t } from "i18next";
 import { Plan, Subscription } from "types/billing";
 import { BonusData } from "types/user";
 import {
@@ -8,7 +11,6 @@ import {
     isPopularPlan,
     isUserSubscribedPlan,
 } from "utils/billing";
-import { FreePlanRow } from "./FreePlanRow";
 import { PlanRow } from "./planRow";
 
 interface Iprops {
@@ -48,3 +50,32 @@ const Plans = ({
 );
 
 export default Plans;
+
+interface FreePlanRowProps {
+    closeModal: () => void;
+}
+
+const FreePlanRow: React.FC<FreePlanRowProps> = ({ closeModal }) => {
+    return (
+        <FreePlanRow_ onClick={closeModal}>
+            <Box>
+                <Typography> {t("FREE_PLAN_OPTION_LABEL")}</Typography>
+                <Typography variant="small" color="text.muted">
+                    {t("FREE_PLAN_DESCRIPTION")}
+                </Typography>
+            </Box>
+            <IconButton className={"endIcon"}>
+                <ArrowForward />
+            </IconButton>
+        </FreePlanRow_>
+    );
+};
+
+const FreePlanRow_ = styled(SpaceBetweenFlex)(({ theme }) => ({
+    gap: theme.spacing(1.5),
+    padding: theme.spacing(1.5, 1),
+    cursor: "pointer",
+    "&:hover .endIcon": {
+        backgroundColor: "rgba(255,255,255,0.08)",
+    },
+}));