diff --git a/src/components/card/CardGrid.tsx b/src/components/card/CardGrid.tsx
index ffcda1d..6b087da 100644
--- a/src/components/card/CardGrid.tsx
+++ b/src/components/card/CardGrid.tsx
@@ -1,6 +1,7 @@
 import { useState } from 'react';
 import type { Card, User } from '../../types';
-import { SKILL_ICONS, CARD_STATUS_COLORS } from '../../utils/constants';
+import { SKILL_ICONS } from '../../utils/constants';
+import '../../styles/card-effects.css';
 
 interface CardGridProps {
   cards: Card[];
@@ -87,7 +88,8 @@ export default function CardGrid({ cards }: CardGridProps) {
                       className="w-full rounded-lg"
                     />
                   </div>
-                  <div className={`card-status ${CARD_STATUS_COLORS[card.status]}`}></div>
+                  <div className={`card-status pattern-${card.status}`}></div>
+                  <div className={`card-status color-${card.status}`}></div>
                 </div>
               </div>
             ) : (
diff --git a/src/utils/constants.ts b/src/utils/constants.ts
index 2605bcb..5dcbecc 100644
--- a/src/utils/constants.ts
+++ b/src/utils/constants.ts
@@ -1,15 +1,3 @@
-export const CARD_STATUS_COLORS = {
-  yui: 'bg-gradient-to-br from-yellow-400 to-yellow-600',
-  first: 'bg-gradient-to-br from-cyan-400 to-blue-500',
-  second: 'bg-gradient-to-br from-gray-600 to-black',
-  third: 'bg-gradient-to-br from-pink-500 to-yellow-400',
-  fourth: 'bg-gradient-to-br from-blue-400 to-blue-600',
-  fifth: 'bg-gradient-to-br from-red-500 to-red-800',
-  sixth: 'bg-gradient-to-br from-gray-100 to-gray-800',
-  seven: 'bg-gradient-to-br from-yellow-400 to-yellow-700',
-  normal: 'bg-white'
-} as const;
-
 export const SKILL_ICONS = {
   critical: 'icon-sandar',
   post: 'icon-moon',