diff --git a/apps/frontend/src/assets/styles/global.scss b/apps/frontend/src/assets/styles/global.scss
index cefb9460c..c4e6d113f 100644
--- a/apps/frontend/src/assets/styles/global.scss
+++ b/apps/frontend/src/assets/styles/global.scss
@@ -165,6 +165,9 @@ html {
 
   --landing-raw-bg: #fff;
 
+  --medal-promotion-bg: #fff;
+  --medal-promotion-orange: #a86f35;
+
   --banner-error-bg: #fee2e2;
   --banner-error-text: #991b1b;
   --banner-error-border: #ef4444;
@@ -301,6 +304,9 @@ html {
 
   --landing-raw-bg: #000;
 
+  --medal-promotion-bg: #000;
+  --medal-promotion-orange: #b3600c54;
+
   --hover-filter: brightness(120%);
   --active-filter: brightness(140%);
 
diff --git a/apps/frontend/src/components/ui/servers/MedalServerListing.vue b/apps/frontend/src/components/ui/servers/MedalServerListing.vue
index 4f265d239..6525f360a 100644
--- a/apps/frontend/src/components/ui/servers/MedalServerListing.vue
+++ b/apps/frontend/src/components/ui/servers/MedalServerListing.vue
@@ -140,7 +140,7 @@ const timeLeftCountdown = computed(() => {
 <style scoped lang="scss">
 .medal-promotion {
   position: relative;
-  border: 1px solid var(--color-orange);
+  border: 1px solid var(--medal-promotion-orange);
   background: inherit; // allows overlay + pattern to take over
 }
 .overlay {
@@ -149,7 +149,12 @@ const timeLeftCountdown = computed(() => {
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent 50%, var(--landing-raw-bg) 100%);
+  background: linear-gradient(
+    90deg,
+    var(--medal-promotion-bg) 10%,
+    transparent 30%,
+    var(--medal-promotion-bg) 100%
+  );
   z-index: 1;
   border-radius: inherit;
 }
@@ -160,7 +165,7 @@ const timeLeftCountdown = computed(() => {
   width: 100%;
   height: 100%;
   z-index: 0;
-  background-color: var(--landing-raw-bg);
+  background-color: var(--medal-promotion-bg);
   border-radius: inherit;
   color: var(--color-orange);
 }
diff --git a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
index f83710a0f..c07e88426 100644
--- a/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
+++ b/apps/frontend/src/components/ui/servers/marketing/MedalPlanPromotion.vue
@@ -9,7 +9,7 @@
       <div class="flex items-center gap-2 text-2xl font-semibold text-contrast">
         <ClockIcon class="clock-glow size-6 text-orange" /><span>
           Try a free
-          <span class="text-orange">3GB Server</span> for 5 days powered by
+          <span class="text-orange">3GB server</span> for 5 days powered by
           <span class="text-orange">Medal</span>
         </span>
       </div>
@@ -34,7 +34,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
 <style scoped lang="scss">
 .medal-promotion {
   position: relative;
-  border: 1px solid var(--color-orange);
+  border: 1px solid var(--medal-promotion-orange);
 }
 
 .overlay {
@@ -43,7 +43,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
   left: 0;
   width: 100%;
   height: 100%;
-  background: linear-gradient(90deg, transparent 50%, var(--landing-raw-bg) 100%);
+  background: linear-gradient(90deg, #45311470 50%, var(--medal-promotion-bg) 100%);
   z-index: 1;
   border-radius: inherit;
 }
@@ -55,7 +55,7 @@ import MedalPromoBackground from "~/assets/images/illustrations/medal_promo_back
   width: 100%;
   height: 100%;
   z-index: 0;
-  background-color: var(--landing-raw-bg);
+  background-color: var(--medal-promotion-bg);
   border-radius: inherit;
   color: var(--color-orange);
 }