diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 97f7083..5f4acb0 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -22,12 +22,12 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node.js and Yarn
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           registry-url: https://registry.yarnpkg.com
 
       - name: Cache Yarn dependencies
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             node_modules
@@ -41,9 +41,9 @@ jobs:
       - name: Yarn Lint
         run: yarn lint
 
-      - uses: actions/checkout@v3
+      - uses: actions/checkout@v4
       - name: Set up Python
-        uses: actions/setup-python@v4
+        uses: actions/setup-python@v5
         with:
           python-version: 3.8
           cache: 'pip'
diff --git a/.github/workflows/deploy-db.yml b/.github/workflows/deploy-db.yml
index f2253b7..a3b43d3 100644
--- a/.github/workflows/deploy-db.yml
+++ b/.github/workflows/deploy-db.yml
@@ -13,12 +13,12 @@ jobs:
         uses: actions/checkout@v4
 
       - name: Setup Node.js and Yarn
-        uses: actions/setup-node@v3
+        uses: actions/setup-node@v4
         with:
           registry-url: https://registry.yarnpkg.com
 
       - name: Cache Yarn dependencies
-        uses: actions/cache@v3
+        uses: actions/cache@v4
         with:
           path: |
             node_modules
diff --git a/CHANGELOG.md b/CHANGELOG.md
index 0e454d5..d92450b 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -19,6 +19,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
 ### Changes
 
 -   Reusable `Marquee` Component
+-   Adjust heroes' card color for improved logo visibility
 
 ### Fixes
 
diff --git a/src/components/HeroesElements/card.tsx b/src/components/HeroesElements/card.tsx
index d284d21..de60932 100644
--- a/src/components/HeroesElements/card.tsx
+++ b/src/components/HeroesElements/card.tsx
@@ -20,7 +20,7 @@ export const HeroesCard: React.FC<Props> = (props) => {
         {props.special && (
           <div className='absolute blur-sm sm:blur-md scale-105 opacity-50 w-52 sm:w-72 h-5/6 translate-y-1 rounded-3xl bg-[linear-gradient(to_right,theme(colors.blue.600),theme(colors.orange.600),theme(colors.pink.600),theme(colors.blue.600))] bg-[length:200%_auto] animate-gradient' />
         )}
-        <div className='w-52 sm:w-72 bg-black rounded-3xl overflow-hidden text-center drop-shadow-lg border border-white/[.1] '>
+        <div className='w-52 sm:w-72 bg-zinc-800 rounded-3xl overflow-hidden text-center drop-shadow-lg border border-white/[.1] '>
           <img
             alt={props.name}
             className={`saturate-150 brightness-105 ${props.classes || ''} `}
diff --git a/src/components/HeroesElements/index.tsx b/src/components/HeroesElements/index.tsx
index 7711735..82146be 100644
--- a/src/components/HeroesElements/index.tsx
+++ b/src/components/HeroesElements/index.tsx
@@ -23,7 +23,6 @@ export const HeroesElements: React.FC<Props> = (_props) => {
         link='https://github.com/github'
         name='GitHub'
         role='One-time Sponsor'
-        classes='p-5'
       />
       <Card
         imgUrl='https://avatars.githubusercontent.com/u/107184?v=4'