diff --git a/src/components/CountryCard/CountryCard.tsx b/src/components/CountryCard/CountryCard.tsx
index 79974c5..da0980d 100644
--- a/src/components/CountryCard/CountryCard.tsx
+++ b/src/components/CountryCard/CountryCard.tsx
@@ -8,14 +8,14 @@ const CountryCard: React.FC<Country> = ({
   population,
   region,
   capital,
-  flags,
+  flag,
   alpha3Code,
 }) => {
   return (
     <Container as="li" data-testid="country">
       <Link to={`/${alpha3Code}`} style={{ textDecoration: 'none' }}>
         <FlagWrapper>
-          <img src={flags[0]} alt="" aria-hidden="true" />
+          <img src={flag} alt="" aria-hidden="true" />
         </FlagWrapper>
         <CountryInfo>
           <h2>{name}</h2>
diff --git a/src/models/Country.ts b/src/models/Country.ts
index 427dd34..086aa40 100644
--- a/src/models/Country.ts
+++ b/src/models/Country.ts
@@ -6,6 +6,7 @@ type Country = {
   name: string;
   nativeName: string;
   flags: string[];
+  flag: string;
   population: number;
   region: string;
   continent: string;
diff --git a/src/pages/CountryDetails/CountryDetails.tsx b/src/pages/CountryDetails/CountryDetails.tsx
index b402b8e..d5c31ea 100644
--- a/src/pages/CountryDetails/CountryDetails.tsx
+++ b/src/pages/CountryDetails/CountryDetails.tsx
@@ -30,7 +30,7 @@ const CountryDetails: React.FC = () => {
       </Button>
       <CountryWrapper as="article">
         <Flag>
-          <img src={country?.flags[0]} alt={`flag of ${country?.name}`} />
+          <img src={country?.flag} alt={`flag of ${country?.name}`} />
         </Flag>
         <StyledCountryDetails>
           <h1>{country?.name}</h1>