diff --git a/package.json b/package.json
index 36c2c99..47ddf88 100644
--- a/package.json
+++ b/package.json
@@ -1,7 +1,7 @@
 {
   "name": "fgo-ta-com-website",
   "type": "module",
-  "version": "0.2.2-pre.3",
+  "version": "0.2.2-pre.4",
   "scripts": {
     "dev": "astro dev",
     "start": "astro dev",
diff --git a/src/components/listings/eventListingLine.astro b/src/components/listings/eventListingLine.astro
index eab60df..8922b74 100644
--- a/src/components/listings/eventListingLine.astro
+++ b/src/components/listings/eventListingLine.astro
@@ -3,7 +3,8 @@ export interface Props {
   title: string
   releaseDate: Date
   shortdescription: string
-  link: string
+  link: string,
+  hlcolor: string,
 }
 
 const options_date: Intl.DateTimeFormatOptions = {
@@ -12,7 +13,7 @@ const options_date: Intl.DateTimeFormatOptions = {
   day: '2-digit',
 }
 
-const { shortdescription, releaseDate, title, link } = Astro.props
+const { shortdescription, releaseDate, title, link, hlcolor } = Astro.props
 const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
 ---
 
@@ -25,7 +26,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
   </article>
 </a>
 
-<style>
+<style define:vars={{ hlcolor }}>
   .circle {
     display: none;
   }
@@ -47,7 +48,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
   }
   article > h2 {
     margin: 0px 0.5rem;
-    color: var(--c-darkpurple);
+    color: var(--hlcolor);
     font-size: 1.2rem;
     line-height: normal;
     text-decoration: none;
@@ -67,7 +68,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
     align-items: center;
     align-content: center;
     justify-content: center;
-    background-color: var(--c-duskgray);
+    background: var(--c-duskgray); /* linear-gradient(175deg, var(--c-duskgray), var(--c-duskgray), var(--c-duskgray), var(--hlcolor)); */ 
     padding: 10px;
     text-align: center;
     transition: transform var(--speed) var(--ease);
@@ -104,7 +105,7 @@ const render_date = releaseDate.toLocaleDateString('en-GB', options_date)
     }
 
     a:hover article {
-      border-color: var(--c-darkpurple);
+      border-color: var(--hlcolor);
     }
 
     article {
diff --git a/src/content/changes/koyan.json b/src/content/changes/koyan.json
index c5db81d..2c93a5a 100644
--- a/src/content/changes/koyan.json
+++ b/src/content/changes/koyan.json
@@ -6,5 +6,6 @@
     "releaseNumber": 1,
     "type": "event"
   },
-  "link": "https://apps.atlasacademy.io/db/NA/servant/314/"
+  "link": "https://apps.atlasacademy.io/db/NA/servant/314/",
+  "color": "#f7281f"
 }
diff --git a/src/content/changes/skadi.json b/src/content/changes/skadi.json
index 21f57fd..7923425 100644
--- a/src/content/changes/skadi.json
+++ b/src/content/changes/skadi.json
@@ -6,5 +6,6 @@
     "releaseNumber": 1,
     "type": "event"
   },
-  "link": "https://apps.atlasacademy.io/db/NA/servant/215/"
+  "link": "https://apps.atlasacademy.io/db/NA/servant/215/",
+  "color": "#0eb31d"
 }
diff --git a/src/content/config.ts b/src/content/config.ts
index 66bf45d..267cd1f 100644
--- a/src/content/config.ts
+++ b/src/content/config.ts
@@ -44,7 +44,8 @@ const changes = defineCollection({
   type: 'data',
   schema: z.object({
     info: info,
-    link: z.string().url()
+    link: z.string().url(),
+    color: z.string(),
   }),
 })
 
diff --git a/src/pages/database/index.astro b/src/pages/database/index.astro
index 809ff2e..5b4516d 100644
--- a/src/pages/database/index.astro
+++ b/src/pages/database/index.astro
@@ -49,6 +49,7 @@ combined.sort(
             <EventListing
               {...{ ...quest.data.info, slug: quest.id }}
               link={(quest.data as any).link}
+              hlcolor={(quest.data as any).color}
             />
           )
         }