diff --git a/src/components/ServerCard.svelte b/src/components/ServerCard.svelte
index 111138d..c691eb4 100644
--- a/src/components/ServerCard.svelte
+++ b/src/components/ServerCard.svelte
@@ -1,6 +1,6 @@
 <script lang="ts">
 	import type { Server } from '$models/server';
-	import { getStatusColor, ServiceStatus } from '$lib/types/serviceStatus';
+	import { getStatusColor, ServiceStatus, serviceStatusToString } from '$lib/types/serviceStatus';
 
 	let { server }: { server: Server } = $props();
 </script>
@@ -14,7 +14,7 @@
 					<div class="mt-1 flex items-center">
 						<span class={`inline-block h-2 w-2 rounded-full ${getStatusColor(server.status)} mr-2`}
 						></span>
-						<span class="text-sm capitalize">{server.status}</span>
+						<span class="text-sm capitalize">{serviceStatusToString(server.status)}</span>
 					</div>
 				</div>
 				<button class="text-gray-400 hover:text-white">
diff --git a/src/lib/types/serviceStatus.ts b/src/lib/types/serviceStatus.ts
index a7d5a81..1c4a8db 100644
--- a/src/lib/types/serviceStatus.ts
+++ b/src/lib/types/serviceStatus.ts
@@ -44,33 +44,16 @@ export const parseServiceStatus = (status: string): ServiceStatus => {
 export const getStatusColor = (status: ServiceStatus): string => {
 	switch (status) {
 		case ServiceStatus.Running:
-			return 'text-green-500';
+			return 'bg-green-500';
 		case ServiceStatus.Stopped:
-			return 'text-red-500';
+			return 'bg-red-500';
 		case ServiceStatus.Starting:
-			return 'text-blue-500';
+			return 'bg-blue-500';
 		case ServiceStatus.Stopping:
-			return 'text-yellow-500';
+			return 'bg-yellow-500';
 		case ServiceStatus.Restarting:
-			return 'text-purple-500';
+			return 'bg-purple-500';
 		default:
-			return 'text-gray-500';
-	}
-};
-
-export const getStatusIcon = (status: ServiceStatus): string => {
-	switch (status) {
-		case ServiceStatus.Running:
-			return '🟢'; // or use an icon library like 'play-circle'
-		case ServiceStatus.Stopped:
-			return '🔴'; // or 'stop-circle'
-		case ServiceStatus.Starting:
-			return '🔵'; // or 'arrow-up-circle'
-		case ServiceStatus.Stopping:
-			return '🟡'; // or 'arrow-down-circle'
-		case ServiceStatus.Restarting:
-			return '🟣'; // or 'refresh-circle'
-		default:
-			return '⚪'; // or 'help-circle'
+			return 'bg-gray-500';
 	}
 };