diff --git a/packages/ui/src/components/servers/ServerListing.vue b/packages/ui/src/components/servers/ServerListing.vue
index 11c8daf81f..16e21f7ace 100644
--- a/packages/ui/src/components/servers/ServerListing.vue
+++ b/packages/ui/src/components/servers/ServerListing.vue
@@ -239,7 +239,9 @@
 			<div>
 				Your server will {{ pendingChange.verb.toLowerCase() }} to the "{{
 					pendingChange.planSize
-				}}" plan on {{ formatDate(pendingChange.date) }}.
+				}}" plan on
+				<span class="font-medium text-contrast">{{ formatDate(pendingChange.date) }}</span
+				>.
 			</div>
 			<ServersSpecs
 				class="!font-normal !text-primary"
diff --git a/packages/ui/src/stories/servers/ServerListing.stories.ts b/packages/ui/src/stories/servers/ServerListing.stories.ts
index 15392dacda..1c428ce108 100644
--- a/packages/ui/src/stories/servers/ServerListing.stories.ts
+++ b/packages/ui/src/stories/servers/ServerListing.stories.ts
@@ -61,11 +61,18 @@ export const ConfiguringNewServer: Story = {
 	},
 }
 
-export const WithPendingChange: Story = {
+export const WithPendingDowngrade: Story = {
 	args: {
 		...baseServer,
 		name: 'Competitive UHC',
-		pendingChange,
+		pendingChange: {
+			...pendingChange,
+			planSize: 'Small',
+			ramGb: 4,
+			storageGb: 40,
+			cpuBurst: 4,
+			verb: 'Downgrade',
+		},
 	},
 }