diff --git a/backend/server/worldtravel/serializers.py b/backend/server/worldtravel/serializers.py
index f8e35c9..6472125 100644
--- a/backend/server/worldtravel/serializers.py
+++ b/backend/server/worldtravel/serializers.py
@@ -34,10 +34,11 @@ class CountrySerializer(serializers.ModelSerializer):
 
 class RegionSerializer(serializers.ModelSerializer):
     num_cities = serializers.SerializerMethodField()
+    country_name = serializers.CharField(source='country.name', read_only=True)
     class Meta:
         model = Region
         fields = '__all__'
-        read_only_fields = ['id', 'name', 'country', 'longitude', 'latitude', 'num_cities']
+        read_only_fields = ['id', 'name', 'country', 'longitude', 'latitude', 'num_cities', 'country_name']
 
     def get_num_cities(self, obj):
         return City.objects.filter(region=obj).count()
diff --git a/frontend/src/lib/components/CityCard.svelte b/frontend/src/lib/components/CityCard.svelte
index 3273d45..6be3b9e 100644
--- a/frontend/src/lib/components/CityCard.svelte
+++ b/frontend/src/lib/components/CityCard.svelte
@@ -46,7 +46,7 @@
 	<div class="card-body">
 		<h2 class="card-title overflow-ellipsis">{city.name}</h2>
 		<div class="flex flex-wrap gap-2">
-			<div class="badge badge-neutral-300">
+			<div class="badge badge-primary">
 				{city.region_name}, {city.country_name}
 			</div>
 			<div class="badge badge-neutral-300">{city.region}</div>
diff --git a/frontend/src/lib/components/RegionCard.svelte b/frontend/src/lib/components/RegionCard.svelte
index a5fc538..9d14133 100644
--- a/frontend/src/lib/components/RegionCard.svelte
+++ b/frontend/src/lib/components/RegionCard.svelte
@@ -56,11 +56,14 @@
 		<h2 class="card-title overflow-ellipsis">{region.name}</h2>
 		<div>
 			<div class="badge badge-primary">
-				<p>{region.id}</p>
+				<p>{region.country_name}</p>
 			</div>
 			<div class="badge badge-neutral-300">
 				<p>{region.num_cities} {$t('worldtravel.cities')}</p>
 			</div>
+			<div class="badge badge-neutral-300">
+				<p>{region.id}</p>
+			</div>
 		</div>
 		<div class="card-actions justify-end">
 			<!-- <button class="btn btn-info" on:click={moreInfo}>More Info</button> -->
diff --git a/frontend/src/lib/types.ts b/frontend/src/lib/types.ts
index aeebe13..fd0eadb 100644
--- a/frontend/src/lib/types.ts
+++ b/frontend/src/lib/types.ts
@@ -64,6 +64,7 @@ export type Region = {
 	latitude: number;
 	longitude: number;
 	num_cities: number;
+	country_name: string;
 };
 
 export type City = {