diff --git a/app/components/TypeCards.tsx b/app/components/TypeCards.tsx
index 555d093..1311bfc 100644
--- a/app/components/TypeCards.tsx
+++ b/app/components/TypeCards.tsx
@@ -34,8 +34,8 @@ export default async function TypeCards() {
       {types.map((type) => (
         <div className="flex basis-1/3 mb-10" key={type.type}>
           <div className="w-4/5 h-40 border-solid border-1 rounded-md shadow-lg">
-            <div className="h-16 bg-accent3-100 rounded-t-md">
-              <div className="text-lg flex justify-center px-2 pt-1">
+            <div className="h-16 bg-accent5-600 rounded-t-md">
+              <div className="text-lg text-white flex justify-center px-2 pt-1">
                 {type.type}
               </div>
             </div>
diff --git a/tailwind.config.js b/tailwind.config.js
index faffc84..8e07a56 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -57,6 +57,9 @@ module.exports = {
           700: 'HSL(90, 60%, 50%)',
           900: 'HSL(90, 40%, 40%)',
         },
+        accent5: {
+          600: 'HSL(178, 93%, 21%)',
+        },
       },
       textShadow: {
         sm: '0 1px 2px var(--tw-shadow-color)',