diff --git a/lib/pages/routines/widgets/condition_toggle.dart b/lib/pages/routines/widgets/condition_toggle.dart
index 99ea2f04..541ad431 100644
--- a/lib/pages/routines/widgets/condition_toggle.dart
+++ b/lib/pages/routines/widgets/condition_toggle.dart
@@ -12,22 +12,53 @@ class ConditionToggle extends StatelessWidget {
   });
 
   static const _conditions = ["<", "==", ">"];
+  static const _icons = [
+    Icons.chevron_left,
+    Icons.drag_handle,
+    Icons.chevron_right
+  ];
 
   @override
   Widget build(BuildContext context) {
-    return ToggleButtons(
-      onPressed: (index) => onChanged(_conditions[index]),
-      borderRadius: const BorderRadius.all(Radius.circular(8)),
-      selectedBorderColor: ColorsManager.primaryColorWithOpacity,
-      selectedColor: Colors.white,
-      fillColor: ColorsManager.primaryColorWithOpacity,
-      color: ColorsManager.primaryColorWithOpacity,
-      constraints: const BoxConstraints(
-        minHeight: 40.0,
-        minWidth: 40.0,
+    final selectedIndex = _conditions.indexOf(currentCondition ?? "==");
+
+    return Container(
+      height: 30,
+      width: MediaQuery.of(context).size.width * 0.1,
+      decoration: BoxDecoration(
+        color: ColorsManager.softGray.withOpacity(0.5),
+        borderRadius: BorderRadius.circular(50),
+      ),
+      clipBehavior: Clip.antiAlias,
+      child: Row(
+        mainAxisSize: MainAxisSize.min,
+        children: List.generate(_conditions.length, (index) {
+          final isSelected = index == selectedIndex;
+          return Expanded(
+            child: InkWell(
+              onTap: () => onChanged(_conditions[index]),
+              child: AnimatedContainer(
+                duration: const Duration(milliseconds: 180),
+                curve: Curves.ease,
+                decoration: BoxDecoration(
+                  color:
+                      isSelected ? ColorsManager.vividBlue : Colors.transparent,
+                ),
+                child: Center(
+                  child: Icon(
+                    _icons[index],
+                    size: 20,
+                    color: isSelected
+                        ? ColorsManager.whiteColors
+                        : ColorsManager.blackColor,
+                    weight: isSelected ? 700 : 500,
+                  ),
+                ),
+              ),
+            ),
+          );
+        }),
       ),
-      isSelected: _conditions.map((c) => c == (currentCondition ?? "==")).toList(),
-      children: _conditions.map((c) => Text(c)).toList(),
     );
   }
 }