diff --git a/site/CountriesIndexPage.tsx b/site/CountriesIndexPage.tsx
index 1e2d40f09a1..7be14987236 100644
--- a/site/CountriesIndexPage.tsx
+++ b/site/CountriesIndexPage.tsx
@@ -2,12 +2,7 @@ import React from "react"
 import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
-
-interface Country {
-    name: string
-    slug: string
-    code: string
-}
+import { Country, sortBy } from "@ourworldindata/utils"
 
 export const CountriesIndexPage = (props: {
     countries: Country[]
@@ -15,6 +10,8 @@ export const CountriesIndexPage = (props: {
 }) => {
     const { countries, baseUrl } = props
 
+    const sortedCountries = sortBy(countries, (country) => country.name)
+
     return (
         <html>
             <Head
@@ -28,7 +25,7 @@ export const CountriesIndexPage = (props: {
                 <main className="wrapper">
                     <h1>Data by country</h1>
                     <ul>
-                        {countries.map((country) => (
+                        {sortedCountries.map((country) => (
                             <li key={country.code}>
                                 <a href={`/country/${country.slug}`}>
                                     <img
diff --git a/site/CountryProfilePage.tsx b/site/CountryProfilePage.tsx
index bf17d818862..ccd6b6b7877 100644
--- a/site/CountryProfilePage.tsx
+++ b/site/CountryProfilePage.tsx
@@ -3,6 +3,7 @@ import { Head } from "./Head.js"
 import { SiteHeader } from "./SiteHeader.js"
 import { SiteFooter } from "./SiteFooter.js"
 import urljoin from "url-join"
+import { Country } from "@ourworldindata/utils"
 
 export interface CountryProfileIndicator {
     name: string
@@ -21,11 +22,7 @@ export interface CountryProfileKeyStats {
 }
 
 export interface CountryProfilePageProps {
-    country: {
-        name: string
-        slug: string
-        code: string
-    }
+    country: Country
     indicators: CountryProfileIndicator[]
     baseUrl: string
 }
