diff --git a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
index a42b7ca7..3dadc51b 100644
--- a/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
+++ b/rsconcept/frontend/src/app/Navigation/NavigationButton.tsx
@@ -31,7 +31,7 @@ function NavigationButton({
       className={clsx(
         'mr-1 h-full', // prettier: split lines
         'flex items-center gap-1',
-        'clr-btn-nav',
+        'clr-btn-nav cc-animate-color',
         'rounded-xl',
         'transition duration-500',
         'font-controls whitespace-nowrap',
diff --git a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
index a4d251db..3f22354d 100644
--- a/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
+++ b/rsconcept/frontend/src/app/Navigation/ToggleNavigation.tsx
@@ -21,7 +21,7 @@ function ToggleNavigation() {
       data-tooltip-id={globals.tooltip}
       data-tooltip-content={noNavigationAnimation ? 'Показать навигацию' : 'Скрыть навигацию'}
       style={{
-        transitionProperty: 'height, width',
+        transitionProperty: 'height, width, background-color',
         transitionDuration: `${PARAMETER.moveDuration}ms`,
         height: noNavigationAnimation ? '1.2rem' : '3rem',
         width: noNavigationAnimation ? '3rem' : '1.2rem'
diff --git a/rsconcept/frontend/src/components/select/SelectLocation.tsx b/rsconcept/frontend/src/components/select/SelectLocation.tsx
index f52ca3e1..1ef88716 100644
--- a/rsconcept/frontend/src/components/select/SelectLocation.tsx
+++ b/rsconcept/frontend/src/components/select/SelectLocation.tsx
@@ -59,7 +59,7 @@ function SelectLocation({ value, folderTree, dense, prefix, onClick, className,
               !dense && 'min-h-[2.0825rem] sm:min-h-[2.3125rem]',
               'pr-3 py-1 flex items-center gap-2',
               'cc-scroll-row',
-              'clr-hover',
+              'clr-hover cc-animate-color',
               'cursor-pointer',
               'leading-3 sm:leading-4',
               activeNode === item && 'clr-selected'
diff --git a/rsconcept/frontend/src/components/ui/Button.tsx b/rsconcept/frontend/src/components/ui/Button.tsx
index 7a018819..720e7d81 100644
--- a/rsconcept/frontend/src/components/ui/Button.tsx
+++ b/rsconcept/frontend/src/components/ui/Button.tsx
@@ -43,6 +43,7 @@ function Button({
       className={clsx(
         'inline-flex gap-2 items-center justify-center',
         'select-none disabled:cursor-auto',
+        'cc-animate-color',
         {
           'border rounded': !noBorder,
           'px-1': dense,
diff --git a/rsconcept/frontend/src/components/ui/Checkbox.tsx b/rsconcept/frontend/src/components/ui/Checkbox.tsx
index 291fb276..de74e8e7 100644
--- a/rsconcept/frontend/src/components/ui/Checkbox.tsx
+++ b/rsconcept/frontend/src/components/ui/Checkbox.tsx
@@ -65,9 +65,10 @@ function Checkbox({
       <div
         className={clsx(
           'max-w-[1rem] min-w-[1rem] h-4', // prettier: split lines
-          'border rounded-sm',
+          'border rounded-sm ',
+          'cc-animate-color',
           {
-            'clr-primary': value !== false,
+            'bg-sec-600 text-sec-0': value !== false,
             'bg-prim-100': value === false
           }
         )}
diff --git a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
index c7538deb..0416375d 100644
--- a/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
+++ b/rsconcept/frontend/src/components/ui/CheckboxTristate.tsx
@@ -67,8 +67,9 @@ function CheckboxTristate({
         className={clsx(
           'w-4 h-4', // prettier: split lines
           'border rounded-sm',
+          'cc-animate-color',
           {
-            'clr-primary': value !== false,
+            'bg-sec-600 text-sec-0': value !== false,
             'bg-prim-100': value === false
           }
         )}
diff --git a/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx b/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
index 5d8d1eac..454ed33c 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/PaginationTools.tsx
@@ -47,7 +47,7 @@ function PaginationTools<TData>({
       <div className='flex'>
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.setPageIndex(0)}
           disabled={!table.getCanPreviousPage()}
         >
@@ -55,7 +55,7 @@ function PaginationTools<TData>({
         </button>
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.previousPage()}
           disabled={!table.getCanPreviousPage()}
         >
@@ -75,7 +75,7 @@ function PaginationTools<TData>({
         />
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.nextPage()}
           disabled={!table.getCanNextPage()}
         >
@@ -83,7 +83,7 @@ function PaginationTools<TData>({
         </button>
         <button
           type='button'
-          className='clr-hover clr-text-controls'
+          className='clr-hover clr-text-controls cc-animate-color'
           onClick={() => table.setPageIndex(table.getPageCount() - 1)}
           disabled={!table.getCanNextPage()}
         >
diff --git a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
index 1e543e32..34938b30 100644
--- a/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
+++ b/rsconcept/frontend/src/components/ui/DataTable/TableBody.tsx
@@ -71,7 +71,8 @@ function TableBody<TData>({
         <tr
           key={row.id}
           className={clsx(
-            'cc-scroll-row clr-hover',
+            'cc-scroll-row',
+            'clr-hover cc-animate-color',
             !noHeader && 'scroll-mt-[calc(2px+2rem)]',
             row.getIsSelected() ? 'clr-selected' : index % 2 === 0 ? 'bg-prim-200' : 'bg-prim-100'
           )}
diff --git a/rsconcept/frontend/src/components/ui/DropdownButton.tsx b/rsconcept/frontend/src/components/ui/DropdownButton.tsx
index ad245501..9b011f22 100644
--- a/rsconcept/frontend/src/components/ui/DropdownButton.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownButton.tsx
@@ -39,6 +39,7 @@ function DropdownButton({
         'px-3 py-1 inline-flex items-center gap-2',
         'text-left text-sm overflow-ellipsis whitespace-nowrap',
         'disabled:clr-text-controls',
+        'cc-animate-color',
         {
           'clr-hover': onClick,
           'cursor-pointer disabled:cursor-auto': onClick,
diff --git a/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx b/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
index c32d3445..63b0dace 100644
--- a/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
+++ b/rsconcept/frontend/src/components/ui/DropdownCheckbox.tsx
@@ -9,7 +9,7 @@ function DropdownCheckbox({ setValue, disabled, ...restProps }: CheckboxProps) {
       className={clsx(
         'px-3 py-1',
         'text-left overflow-ellipsis whitespace-nowrap',
-        'disabled:clr-text-controls',
+        'disabled:clr-text-controls cc-animate-color',
         !!setValue && !disabled && 'clr-hover'
       )}
     >
diff --git a/rsconcept/frontend/src/components/ui/Indicator.tsx b/rsconcept/frontend/src/components/ui/Indicator.tsx
index a4c65980..01d52c82 100644
--- a/rsconcept/frontend/src/components/ui/Indicator.tsx
+++ b/rsconcept/frontend/src/components/ui/Indicator.tsx
@@ -19,7 +19,7 @@ function Indicator({ icon, title, titleHtml, hideTitle, noPadding, className, ..
   return (
     <div
       className={clsx(
-        'clr-btn-clear',
+        'clr-text-controls',
         'outline-none',
         {
           'px-1 py-1': !noPadding
diff --git a/rsconcept/frontend/src/components/ui/MiniButton.tsx b/rsconcept/frontend/src/components/ui/MiniButton.tsx
index fe55b217..19683ea9 100644
--- a/rsconcept/frontend/src/components/ui/MiniButton.tsx
+++ b/rsconcept/frontend/src/components/ui/MiniButton.tsx
@@ -35,7 +35,7 @@ function MiniButton({
       tabIndex={tabIndex ?? -1}
       className={clsx(
         'rounded-lg',
-        'clr-btn-clear',
+        'clr-text-controls cc-animate-color',
         'cursor-pointer disabled:cursor-auto',
         {
           'px-1 py-1': !noPadding,
diff --git a/rsconcept/frontend/src/components/ui/SelectTree.tsx b/rsconcept/frontend/src/components/ui/SelectTree.tsx
index b3348420..286cd4da 100644
--- a/rsconcept/frontend/src/components/ui/SelectTree.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectTree.tsx
@@ -89,7 +89,7 @@ function SelectTree<ItemType>({
             className={clsx(
               'pr-3 pl-6 border-b',
               'cc-scroll-row',
-              'bg-prim-200 clr-hover',
+              'bg-prim-200 clr-hover cc-animate-color',
               'cursor-pointer',
               value === item && 'clr-selected'
             )}
diff --git a/rsconcept/frontend/src/components/ui/SelectorButton.tsx b/rsconcept/frontend/src/components/ui/SelectorButton.tsx
index bef402f3..0880ff12 100644
--- a/rsconcept/frontend/src/components/ui/SelectorButton.tsx
+++ b/rsconcept/frontend/src/components/ui/SelectorButton.tsx
@@ -41,6 +41,7 @@ function SelectorButton({
         'text-sm font-controls select-none',
         'text-btn clr-text-controls',
         'disabled:cursor-auto cursor-pointer',
+        'cc-animate-color',
         {
           'clr-hover': transparent,
           'border': !transparent
diff --git a/rsconcept/frontend/src/components/ui/SubmitButton.tsx b/rsconcept/frontend/src/components/ui/SubmitButton.tsx
index 2306a0d6..815ba686 100644
--- a/rsconcept/frontend/src/components/ui/SubmitButton.tsx
+++ b/rsconcept/frontend/src/components/ui/SubmitButton.tsx
@@ -24,7 +24,7 @@ function SubmitButton({ text = 'ОК', icon, disabled, loading, className, ...re
         'px-3 py-1 flex gap-2 items-center justify-center',
         'border',
         'font-medium',
-        'clr-btn-primary',
+        'clr-btn-primary cc-animate-color',
         'select-none disabled:cursor-auto',
         loading && 'cursor-progress',
         className
diff --git a/rsconcept/frontend/src/components/ui/TabLabel.tsx b/rsconcept/frontend/src/components/ui/TabLabel.tsx
index f6422a9e..37d8ed93 100644
--- a/rsconcept/frontend/src/components/ui/TabLabel.tsx
+++ b/rsconcept/frontend/src/components/ui/TabLabel.tsx
@@ -20,7 +20,7 @@ function TabLabel({ label, title, titleHtml, hideTitle, className, ...otherProps
       className={clsx(
         'min-w-[5.5rem] h-full',
         'px-2 py-1 flex justify-center',
-        'clr-hover bg-prim-200',
+        'clr-hover bg-prim-200 cc-animate-color',
         'text-sm whitespace-nowrap font-controls',
         'select-none hover:cursor-pointer',
         'outline-none',
diff --git a/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx b/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx
index 513c5ba6..9a87c4f6 100644
--- a/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx
+++ b/rsconcept/frontend/src/dialogs/DlgEditReference/WordformButton.tsx
@@ -21,7 +21,7 @@ function WordformButton({ text, example, grams, onSelectGrams, isSelected, ...re
         'p-1',
         'border rounded-none',
         'cursor-pointer',
-        'clr-btn-clear clr-hover',
+        'clr-text-controls clr-hover cc-animate-color',
         isSelected && 'clr-selected'
       )}
       {...restProps}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
index aad4ded6..9ce07e23 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSLocalButton.tsx
@@ -33,7 +33,7 @@ function RSLocalButton({
         'w-[1.7rem] sm:w-[2rem] h-5 sm:h-6',
         'cursor-pointer disabled:cursor-default',
         'rounded-none',
-        'clr-hover clr-btn-clear',
+        'clr-hover clr-text-controls cc-animate-color',
         'font-math',
         className
       )}
diff --git a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx
index 979dbecd..bd7b229b 100644
--- a/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx
+++ b/rsconcept/frontend/src/pages/RSFormPage/EditorRSExpression/RSTokenButton.tsx
@@ -22,7 +22,7 @@ function RSTokenButton({ token, disabled, onInsert }: RSTokenButtonProps) {
         'h-5 sm:h-6',
         'px-1',
         'outline-none',
-        'clr-hover clr-btn-clear',
+        'clr-hover clr-text-controls cc-animate-color',
         'font-math',
         'cursor-pointer disabled:cursor-default',
         {
diff --git a/rsconcept/frontend/src/styling/styles.css b/rsconcept/frontend/src/styling/styles.css
index 263a0a42..e95531fe 100644
--- a/rsconcept/frontend/src/styling/styles.css
+++ b/rsconcept/frontend/src/styling/styles.css
@@ -34,51 +34,67 @@
   }
 
   .clr-btn-default {
+    color: var(--clr-prim-999);
     background-color: var(--clr-prim-200);
-  }
 
-  .clr-primary,
-  .clr-btn-primary:hover,
-  .clr-btn-primary:focus-visible {
-    @apply transition;
-    color: var(--clr-sec-0);
-    background-color: var(--clr-sec-600);
+    &:disabled {
+      color: var(--clr-prim-800);
+      background-color: var(--clr-prim-200);
+    }
+
+    &:hover:not(:disabled) {
+      color: var(--clr-prim-999);
+      background-color: var(--clr-sec-100);
+    }
   }
 
   .clr-btn-primary {
     color: var(--clr-prim-999);
     background-color: var(--clr-sec-200);
+
+    &:disabled {
+      color: var(--clr-prim-800);
+      background-color: var(--clr-prim-200);
+    }
+
+    &:hover:not(:disabled),
+    &:focus-visible {
+      color: var(--clr-sec-0);
+      background-color: var(--clr-sec-600);
+    }
+
+    &:focus-visible,
+    .focus-frame:has(:focus-visible) {
+      outline-width: 2px;
+      outline-style: solid;
+      outline-color: var(--clr-sec-600);
+    }
   }
 
-  :is(.clr-disabled, .clr-btn-default, .clr-btn-primary):disabled {
-    @apply transition;
+  .clr-btn-nav {
     color: var(--clr-prim-800);
-    background-color: var(--clr-prim-200);
+
+    &:hover:not(:disabled) {
+      background-color: var(--clr-sec-100);
+    }
+
+    &:disabled {
+      color: var(--clr-prim-600);
+    }
   }
 
-  :is(.clr-hover, .clr-btn-nav, .clr-btn-default):hover:not(:disabled) {
-    @apply transition;
+  .clr-hover:hover:not(:disabled) {
     color: var(--clr-prim-999);
     background-color: var(--clr-sec-100);
   }
 
-  :is(.clr-outline, .clr-btn-primary, .focus-frame):focus-visible,
+  :is(.clr-outline, .focus-frame):focus-visible,
   .focus-frame:has(:focus-visible) {
     outline-width: 2px;
     outline-style: solid;
     outline-color: var(--clr-sec-600);
   }
 
-  .clr-text-controls,
-  .clr-btn-nav,
-  .clr-btn-clear {
-    color: var(--clr-prim-800);
-    background-color: transparent;
-    &:disabled {
-      color: var(--clr-prim-600);
-    }
-  }
-
   .clr-text-default,
   input:disabled:not(::placeholder),
   textarea:disabled:not(::placeholder) {
@@ -87,6 +103,14 @@
     color: var(--clr-prim-999);
   }
 
+  .clr-text-controls {
+    color: var(--clr-prim-800);
+    background-color: transparent;
+    &:disabled {
+      color: var(--clr-prim-600);
+    }
+  }
+
   .icon-primary {
     :not([disabled]) > & {
       color: var(--clr-sec-800);
@@ -164,12 +188,6 @@
     box-shadow: 0 1px 2px 0 var(--clr-prim-400);
   }
 
-  .cc-animate-position {
-    transition-property: transform top left bottom right margin padding;
-    transition-timing-function: var(--transition-bezier);
-    transition-duration: var(--duration-move);
-  }
-
   .cc-fade-in {
     opacity: 1;
 
@@ -182,6 +200,12 @@
     }
   }
 
+  .cc-animate-position {
+    transition-property: transform top left bottom right margin padding;
+    transition-timing-function: var(--transition-bezier);
+    transition-duration: var(--duration-move);
+  }
+
   .cc-animate-modal {
     clip-path: inset(0% 0% 0% 0%);
     opacity: 1;
@@ -195,4 +219,10 @@
       opacity: 0;
     }
   }
+
+  .cc-animate-color {
+    transition-property: color, background-color;
+    transition-timing-function: var(--transition-bezier);
+    transition-duration: var(--duration-select);
+  }
 }