diff --git a/web/apps/photos/src/components/PhotoList/index.tsx b/web/apps/photos/src/components/PhotoList/index.tsx
index d0ca58b581..7c3de5ed43 100644
--- a/web/apps/photos/src/components/PhotoList/index.tsx
+++ b/web/apps/photos/src/components/PhotoList/index.tsx
@@ -607,10 +607,7 @@ export function PhotoList({
                                             <Typography
                                                 variant="small"
                                                 component="span"
-                                                sx={(theme) => ({
-                                                    color: theme.colors.accent
-                                                        .A500,
-                                                })}
+                                                sx={{ color: "accent.main" }}
                                             />
                                         ),
                                     }}
diff --git a/web/apps/photos/src/pages/shared-albums.tsx b/web/apps/photos/src/pages/shared-albums.tsx
index f60f44fdd3..261f84b56b 100644
--- a/web/apps/photos/src/pages/shared-albums.tsx
+++ b/web/apps/photos/src/pages/shared-albums.tsx
@@ -594,9 +594,9 @@ const SharedAlbumNavbar: React.FC<SharedAlbumNavbarProps> = ({
 const EnteLogoLink = styled("a")(({ theme }) => ({
     // Remove the excess space at the top.
     svg: { verticalAlign: "middle" },
-    color: theme.colors.text.base,
+    color: theme.vars.palette.text.base,
     ":hover": {
-        color: theme.palette.accent.main,
+        color: theme.vars.palette.accent.main,
     },
 }));
 
diff --git a/web/packages/new/photos/components/PlanSelector.tsx b/web/packages/new/photos/components/PlanSelector.tsx
index 1735c9e220..ff544e1a8b 100644
--- a/web/packages/new/photos/components/PlanSelector.tsx
+++ b/web/packages/new/photos/components/PlanSelector.tsx
@@ -462,18 +462,18 @@ const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
     textTransform: "none",
     padding: "12px 16px",
     borderRadius: "4px",
-    backgroundColor: theme.colors.fill.faint,
+    width: "97.433px",
+    backgroundColor: theme.vars.palette.fill.faint,
     border: `1px solid transparent`,
-    color: theme.colors.text.faint,
+    color: theme.vars.palette.text.faint,
     "&.Mui-selected": {
-        backgroundColor: theme.colors.accent.A500,
-        color: theme.colors.text.base,
+        backgroundColor: theme.vars.palette.accent.main,
+        color: theme.vars.palette.text.base,
     },
     "&.Mui-selected:hover": {
-        backgroundColor: theme.colors.accent.A500,
-        color: theme.colors.text.base,
+        backgroundColor: theme.vars.palette.accent.main,
+        color: theme.vars.palette.text.base,
     },
-    width: "97.433px",
 }));
 
 interface PlansProps {