diff --git a/packages/default-icons/src/figma-icons/FavAdded16.tsx b/packages/default-icons/src/figma-icons/FavAdded16.tsx
new file mode 100644
index 00000000..25304d26
--- /dev/null
+++ b/packages/default-icons/src/figma-icons/FavAdded16.tsx
@@ -0,0 +1,16 @@
+import { SVGProps, memo } from 'react';
+
+const FavAdded16 = (props: SVGProps<SVGSVGElement>) => (
+  <svg width={16} height={16} viewBox="0 0 16 16" fill="none" {...props}>
+    <path
+      fillRule="evenodd"
+      clipRule="evenodd"
+      d="M14.5044 5.8292C14.9445 5.86715 15.1228 6.41542 14.7892 6.70497L11.5859 9.48502C11.53 9.53357 11.5055 9.60907 11.5222 9.68124L12.4799 13.8117C12.5797 14.2423 12.1128 14.5811 11.7345 14.3527L8.00001 12.0988L4.26747 14.3516C3.88881 14.5801 3.42169 14.2406 3.52217 13.8099L4.5127 9.56394L1.21441 6.70663C0.880106 6.41702 1.05881 5.86789 1.49952 5.8305L5.54113 5.48761C5.72592 5.47194 5.88685 5.35527 5.95922 5.18452L7.54 1.45479C7.71224 1.04839 8.28815 1.04824 8.46061 1.45454L10.0409 5.1775C10.1132 5.3479 10.2738 5.46439 10.4582 5.48029L14.5044 5.8292Z"
+      fill="currentColor"
+    />
+  </svg>
+);
+
+FavAdded16.displayName = 'FavAdded16';
+const Memo = memo(FavAdded16);
+export default Memo;
diff --git a/packages/default-icons/src/figma-icons/index.ts b/packages/default-icons/src/figma-icons/index.ts
index ee24c799..664623fb 100644
--- a/packages/default-icons/src/figma-icons/index.ts
+++ b/packages/default-icons/src/figma-icons/index.ts
@@ -180,3 +180,4 @@ export { default as Reference16 } from './Reference16';
 export { default as Rubber16 } from './Rubber16';
 export { default as Rubber24 } from './Rubber24';
 export { default as Diamond24 } from './Diamond24';
+export { default as FavAdded16 } from './FavAdded16';
diff --git a/packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css b/packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css
new file mode 100644
index 00000000..e2651546
--- /dev/null
+++ b/packages/ui-kit/src/Toggler/Toggler.fixture.style.module.css
@@ -0,0 +1,10 @@
+.label {
+  font-weight: 600;
+  font-size: 16px;
+  line-height: 20px;
+  color: var(--faint-strong-up);
+
+  &.active {
+    color: var(--base-strong);
+  }
+}
diff --git a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
index 2d756b70..a931703c 100644
--- a/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
+++ b/packages/ui-kit/src/Toggler/Toggler.fixture.tsx
@@ -1,4 +1,5 @@
 import { useCallback, useState } from 'react';
+import s from './Toggler.fixture.style.module.css';
 import { Toggler } from '.';
 
 export default {
@@ -16,10 +17,15 @@ export default {
       foo: false,
       bar: true,
       baz: false,
+      isAnnualPayment: false,
     });
 
     const onChange = useCallback((e: React.ChangeEvent<HTMLInputElement>) => {
-      setState((state) => ((state[e.target.id] = e.target.checked), { ...state }));
+      const { id, checked } = e.target;
+      setState((prevState) => ({
+        ...prevState,
+        [id]: checked,
+      }));
     }, []);
 
     return (
@@ -27,6 +33,17 @@ export default {
         <Toggler id="foo" label="Foo" on={state['foo']} onChange={onChange} />
         <Toggler id="bar" label="Bar" on={state['bar']} onChange={onChange} />
         <Toggler id="baz" label="Baz" on={state['baz']} onChange={onChange} />
+        <Toggler
+          id="isAnnualPayment"
+          label="Annually"
+          offValueLabel="Monthly"
+          on={state['isAnnualPayment']}
+          onChange={onChange}
+          classes={{
+            label: s.label,
+            activeLabel: s.active,
+          }}
+        />
         <code style={{ whiteSpace: 'pre', marginTop: '1em' }}>{JSON.stringify(state, null, 2)}</code>
       </div>
     );
diff --git a/packages/ui-kit/src/Toggler/index.tsx b/packages/ui-kit/src/Toggler/index.tsx
index 6a93d219..9c75bd2a 100644
--- a/packages/ui-kit/src/Toggler/index.tsx
+++ b/packages/ui-kit/src/Toggler/index.tsx
@@ -5,7 +5,12 @@ import type { ChangeEvent } from 'react';
 interface Toggler {
   id: string;
   name?: string;
-  label?: React.ReactChild | React.ReactChild[];
+  label?: React.ReactNode;
+  offValueLabel?: React.ReactNode;
+  classes?: {
+    label?: string;
+    activeLabel?: string;
+  };
   className?: string;
   onChange?: (e: ChangeEvent<HTMLInputElement>) => void;
   on?: boolean;
@@ -14,17 +19,28 @@ interface Toggler {
 export function Toggler({
   name,
   label,
+  offValueLabel,
   className = '',
+  classes,
   id,
   on = false,
   ...native
 }: Toggler &
   React.DetailedHTMLProps<React.InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>): React.ReactElement {
   return (
-    <label className={cn(s.root, { [s.checked]: on, [s.disabled]: native.disabled }, className)}>
+    <label
+      className={cn(
+        s.root,
+        { [s.checked]: on, [s.disabled]: native.disabled, [s.twoDirectional]: offValueLabel },
+        className,
+      )}
+    >
       <input id={id} className={s.hidden} type="checkbox" {...native} checked={on} />
+      {offValueLabel && (
+        <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: !on })}>{offValueLabel}</div>
+      )}
       <div className={s.toggle}></div>
-      <div className={s.label}>{label}</div>
+      <div className={cn(s.label, classes?.label, { [classes?.activeLabel || '']: on })}>{label}</div>
     </label>
   );
 }
diff --git a/packages/ui-kit/src/Toggler/style.module.css b/packages/ui-kit/src/Toggler/style.module.css
index d8bc76f0..4456afda 100644
--- a/packages/ui-kit/src/Toggler/style.module.css
+++ b/packages/ui-kit/src/Toggler/style.module.css
@@ -57,6 +57,13 @@
   }
 }
 
+.twoDirectional {
+  .toggle {
+    background-color: var(--base-strong);
+    margin-left: 0.5em;
+  }
+}
+
 /* I am not use hidden true since it's broke auto focus in firefox */
 .hidden {
   position: absolute;