diff --git a/web/apps/photos/src/components/pages/gallery/PlanSelector/card.tsx b/web/apps/photos/src/components/pages/gallery/PlanSelector/card.tsx
index 4fac1e131e..cd4016501b 100644
--- a/web/apps/photos/src/components/pages/gallery/PlanSelector/card.tsx
+++ b/web/apps/photos/src/components/pages/gallery/PlanSelector/card.tsx
@@ -13,6 +13,8 @@ import {
     Link,
     Stack,
     styled,
+    ToggleButton,
+    ToggleButtonGroup,
 } from "@mui/material";
 import Box from "@mui/material/Box";
 import Typography from "@mui/material/Typography";
@@ -45,7 +47,6 @@ import {
 } from "utils/billing";
 import { getLocalUserDetails } from "utils/user";
 import { getTotalFamilyUsage, isPartOfFamily } from "utils/user/family";
-import { PeriodToggler } from "./periodToggler";
 import Plans from "./plans";
 
 interface Props {
@@ -368,6 +369,48 @@ function PaidSubscriptionPlanSelectorCard({
     );
 }
 
+function PeriodToggler({ planPeriod, togglePeriod }) {
+    const handleChange = (_, newPlanPeriod: PLAN_PERIOD) => {
+        if (newPlanPeriod !== null && newPlanPeriod !== planPeriod) {
+            togglePeriod();
+        }
+    };
+
+    return (
+        <ToggleButtonGroup
+            value={planPeriod}
+            exclusive
+            onChange={handleChange}
+            color="primary"
+        >
+            <CustomToggleButton value={PLAN_PERIOD.MONTH}>
+                {t("MONTHLY")}
+            </CustomToggleButton>
+            <CustomToggleButton value={PLAN_PERIOD.YEAR}>
+                {t("YEARLY")}
+            </CustomToggleButton>
+        </ToggleButtonGroup>
+    );
+}
+
+const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
+    textTransform: "none",
+    padding: "12px 16px",
+    borderRadius: "4px",
+    backgroundColor: theme.colors.fill.faint,
+    border: `1px solid transparent`,
+    color: theme.colors.text.faint,
+    "&.Mui-selected": {
+        backgroundColor: theme.colors.accent.A500,
+        color: theme.colors.text.base,
+    },
+    "&.Mui-selected:hover": {
+        backgroundColor: theme.colors.accent.A500,
+        color: theme.colors.text.base,
+    },
+    width: "97.433px",
+}));
+
 function BFAddOnRow({ bonusData, closeModal }) {
     return (
         <>
diff --git a/web/apps/photos/src/components/pages/gallery/PlanSelector/periodToggler.tsx b/web/apps/photos/src/components/pages/gallery/PlanSelector/periodToggler.tsx
deleted file mode 100644
index 1faf74b343..0000000000
--- a/web/apps/photos/src/components/pages/gallery/PlanSelector/periodToggler.tsx
+++ /dev/null
@@ -1,45 +0,0 @@
-import { styled, ToggleButton, ToggleButtonGroup } from "@mui/material";
-import { PLAN_PERIOD } from "constants/gallery";
-import { t } from "i18next";
-
-const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
-    textTransform: "none",
-    padding: "12px 16px",
-    borderRadius: "4px",
-    backgroundColor: theme.colors.fill.faint,
-    border: `1px solid transparent`,
-    color: theme.colors.text.faint,
-    "&.Mui-selected": {
-        backgroundColor: theme.colors.accent.A500,
-        color: theme.colors.text.base,
-    },
-    "&.Mui-selected:hover": {
-        backgroundColor: theme.colors.accent.A500,
-        color: theme.colors.text.base,
-    },
-    width: "97.433px",
-}));
-
-export function PeriodToggler({ planPeriod, togglePeriod }) {
-    const handleChange = (_, newPlanPeriod: PLAN_PERIOD) => {
-        if (newPlanPeriod !== null && newPlanPeriod !== planPeriod) {
-            togglePeriod();
-        }
-    };
-
-    return (
-        <ToggleButtonGroup
-            value={planPeriod}
-            exclusive
-            onChange={handleChange}
-            color="primary"
-        >
-            <CustomToggleButton value={PLAN_PERIOD.MONTH}>
-                {t("MONTHLY")}
-            </CustomToggleButton>
-            <CustomToggleButton value={PLAN_PERIOD.YEAR}>
-                {t("YEARLY")}
-            </CustomToggleButton>
-        </ToggleButtonGroup>
-    );
-}