diff --git a/src/components/pages/gallery/PlanSelector/periodToggler.tsx b/src/components/pages/gallery/PlanSelector/periodToggler.tsx
index beeca3336..5ed276cc4 100644
--- a/src/components/pages/gallery/PlanSelector/periodToggler.tsx
+++ b/src/components/pages/gallery/PlanSelector/periodToggler.tsx
@@ -5,14 +5,16 @@ import { PLAN_PERIOD } from '.';
 export function PeriodToggler({ planPeriod, togglePeriod }) {
     const CustomToggleButton = styled(ToggleButton)(({ theme }) => ({
         textTransform: 'none',
-        padding: '14px 42px',
-        borderRadius: '12px',
+        padding: '12px 16px',
+        borderRadius: '4px',
+        backgroundColor: theme.palette.fill.dark,
+        color: theme.palette.text.disabled,
         '&.Mui-selected': {
-            backgroundColor: theme.palette.primary.main,
+            backgroundColor: theme.palette.accent.main,
             color: theme.palette.primary.contrastText,
         },
         '&.Mui-selected:hover': {
-            backgroundColor: theme.palette.primary.main,
+            backgroundColor: theme.palette.accent.main,
             color: theme.palette.primary.contrastText,
         },
     }));