diff --git a/src/shared/ui/colors/Color.mdx b/src/shared/ui/colors/Color.mdx
index 5cefe06..95b0f70 100644
--- a/src/shared/ui/colors/Color.mdx
+++ b/src/shared/ui/colors/Color.mdx
@@ -14,6 +14,7 @@ import { colors } from './colors.ts';
       100: colors.primary[100],
       200: colors.primary[200],
       300: colors.primary[300],
+      400: colors.primary[400],
     }}
   />
   <ColorItem
@@ -36,6 +37,7 @@ import { colors } from './colors.ts';
       50: colors.red[50],
       100: colors.red[100],
       200: colors.red[200],
+      300: colors.red[300],
     }}
   />
   <ColorItem
@@ -44,6 +46,8 @@ import { colors } from './colors.ts';
     colors={{
       50: colors.green[50],
       100: colors.green[100],
+      200: colors.green[200],
+      300: colors.green[300],
     }}
   />
 
diff --git a/src/shared/ui/colors/colors.ts b/src/shared/ui/colors/colors.ts
index ab135af..61143bd 100644
--- a/src/shared/ui/colors/colors.ts
+++ b/src/shared/ui/colors/colors.ts
@@ -1,9 +1,10 @@
 export const colors = {
   primary: {
     50: '#EFF6FF',
-    100: '#dbeafe',
-    200: '#3b82f6',
-    300: '#2563eb',
+    100: '#DBEAFE',
+    200: '#BFDBFE',
+    300: '#3b82f6',
+    400: '#2563eb',
   },
   gray: {
     50: '#F9FAFB',
@@ -15,13 +16,16 @@ export const colors = {
     600: '#1f2937',
   },
   red: {
-    50: '#fef2f2',
-    100: '#f87171',
-    200: '#EF4444',
+    50: '#FEF2F2',
+    100: '#FEE2E2',
+    200: '#F87171',
+    300: '#EF4444',
   },
   green: {
     50: '#dcfce7',
-    100: '#22c55e',
+    100: '#BBF7D0',
+    200: '#22c55e',
+    300: '#16A34A',
   },
   emerald: '#10b981',
   orange: '#f97316',