diff --git a/apps/web/components/shared/order-card.tsx b/apps/web/components/shared/order-card.tsx
index b7e407d..a3e36b3 100644
--- a/apps/web/components/shared/order-card.tsx
+++ b/apps/web/components/shared/order-card.tsx
@@ -1,21 +1,16 @@
-/* eslint-disable canonical/id-match */
 'use client';
 
 import { ReadonlyTimeRange } from './time-range/readonly';
-import { Enum_Order_State } from '@repo/graphql/types';
+import { type Enum_Order_State } from '@repo/graphql/types';
 import type * as GQL from '@repo/graphql/types';
 import { Avatar, AvatarFallback, AvatarImage } from '@repo/ui/components/ui/avatar';
 import { Badge } from '@repo/ui/components/ui/badge';
-import { cn } from '@repo/ui/lib/utils';
 import Link from 'next/link';
 
 type OrderClient = NonNullable<OrderComponentProps>['client'];
 type OrderComponentProps = GQL.OrderFieldsFragment;
 
 export function OrderCard({ documentId, ...order }: Readonly<OrderComponentProps>) {
-  const isCompleted = order?.state === Enum_Order_State.Completed;
-  const isCancelled = order?.state === Enum_Order_State.Cancelled;
-
   const services = order?.services.map((service) => service?.name).join(', ');
 
   return (
@@ -32,16 +27,7 @@ export function OrderCard({ documentId, ...order }: Readonly<OrderComponentProps
           </div>
         </div>
         {order?.state && (
-          <Badge
-            className={cn(
-              isCompleted
-                ? 'bg-green-100 text-green-500 dark:bg-green-700 dark:text-green-100'
-                : '',
-              isCancelled ? 'bg-red-100 text-red-500 dark:bg-red-700 dark:text-red-100' : '',
-            )}
-          >
-            {getBadgeText(order?.state)}
-          </Badge>
+          <Badge className={getBadgeStyles(order.state)}>{getBadgeText(order.state)}</Badge>
         )}
       </div>
     </Link>
@@ -62,13 +48,27 @@ function ClientAvatar({ client }: { readonly client: OrderClient }) {
 const MAP_BADGE_TEXT: Record<Enum_Order_State, string> = {
   approved: 'Подтверждено',
   cancelled: 'Отменено',
+  cancelling: 'Отменяется',
   completed: 'Завершено',
   created: 'Создано',
   scheduled: 'Запланировано',
 };
 
+const MAP_BADGE_STYLES: Record<Enum_Order_State, string> = {
+  approved: 'bg-blue-100 text-blue-700 dark:bg-blue-900 dark:text-blue-100',
+  cancelled: 'bg-red-100 text-red-700 dark:bg-red-900 dark:text-red-100',
+  cancelling: 'bg-orange-100 text-orange-700 dark:bg-orange-900 dark:text-orange-100',
+  completed: 'bg-green-100 text-green-700 dark:bg-green-900 dark:text-green-100',
+  created: '',
+  scheduled: 'bg-purple-100 text-purple-700 dark:bg-purple-900 dark:text-purple-100',
+};
+
+function getBadgeStyles(state: Enum_Order_State) {
+  if (!state) return '';
+  return MAP_BADGE_STYLES[state];
+}
+
 function getBadgeText(state: Enum_Order_State) {
   if (!state) return '';
-
   return MAP_BADGE_TEXT[state];
 }