diff --git a/.gitignore b/.gitignore
new file mode 100644
index 0000000..468e58b
--- /dev/null
+++ b/.gitignore
@@ -0,0 +1 @@
+CountriesData.json
\ No newline at end of file
diff --git a/CountriesData.json b/CountriesData.json
index a6fc2a2..2c4a433 100644
--- a/CountriesData.json
+++ b/CountriesData.json
@@ -1,176 +1,379 @@
 [
     {
-        "name": "Åland Islands",
-        "population": 21225,
-        "region": "Europe",
-        "capital": "Mariehamn"
+      "name": "Åland Islands",
+      "nativeName": "Åland",
+      "population": 21225,
+      "region": "Europe",
+      "subregion": "Northern Europe",
+      "capital": "Mariehamn",
+      "alpha2Code": "AX",
+      "topLevelDomain": [".ax"],
+      "currencies": ["Euro"],
+      "languages": ["Swedish"],
+      "borders": []
     },
     {
-        "name": "Afghanistan",
-        "population": 27657145,
-        "region": "Asia",
-        "capital": "Kabul"
+      "name": "Afghanistan",
+      "nativeName": "افغانستان",
+      "population": 27657145,
+      "region": "Asia",
+      "subregion": "Southern Asia",
+      "capital": "Kabul",
+      "alpha2Code": "AF",
+      "topLevelDomain": [".af"],
+      "currencies": ["Afghani"],
+      "languages": ["Pashto", "Dari"],
+      "borders": ["Iran", "Pakistan", "Turkmenistan", "Uzbekistan", "Tajikistan", "China"]
     },
     {
-        "name": "Albania",
-        "population": 2886026,
-        "region": "Europe",
-        "capital": "Tirana"
+      "name": "Albania",
+      "nativeName": "Shqipëria",
+      "population": 2886026,
+      "region": "Europe",
+      "subregion": "Southern Europe",
+      "capital": "Tirana",
+      "alpha2Code": "AL",
+      "topLevelDomain": [".al"],
+      "currencies": ["Lek"],
+      "languages": ["Albanian"],
+      "borders": ["Montenegro", "Kosovo", "North Macedonia", "Greece"]
     },
     {
-        "name": "Algeria",
-        "population": 40400000,
-        "region": "Africa",
-        "capital": "Algiers"
+      "name": "Algeria",
+      "nativeName": "الجزائر",
+      "population": 40400000,
+      "region": "Africa",
+      "subregion": "Northern Africa",
+      "capital": "Algiers",
+      "alpha2Code": "DZ",
+      "topLevelDomain": [".dz"],
+      "currencies": ["Dinar"],
+      "languages": ["Arabic", "Tamazight"],
+      "borders": ["Tunisia", "Libya", "Niger", "Mali", "Mauritania", "Western Sahara", "Morocco"]
     },
     {
-        "name": "American Samoa",
-        "population": 57100,
-        "region": "Oceania",
-        "capital": "Pago Pago"
+      "name": "American Samoa",
+      "nativeName": "Amerika Sāmoa",
+      "population": 57100,
+      "region": "Oceania",
+      "subregion": "Polynesia",
+      "capital": "Pago Pago",
+      "alpha2Code": "AS",
+      "topLevelDomain": [".as"],
+      "currencies": ["US Dollar"],
+      "languages": ["English", "Samoan"],
+      "borders": []
     },
     {
-        "name": "Andorra",
-        "population": 78014,
-        "region": "Europe",
-        "capital": "Andorra la Vella"
+      "name": "Andorra",
+      "nativeName": "Andorra",
+      "population": 78014,
+      "region": "Europe",
+      "subregion": "Southern Europe",
+      "capital": "Andorra la Vella",
+      "alpha2Code": "AD",
+      "topLevelDomain": [".ad"],
+      "currencies": ["Euro"],
+      "languages": ["Catalan"],
+      "borders": ["France", "Spain"]
     },
     {
-        "name": "Angola",
-        "population": 25868000,
-        "region": "Africa",
-        "capital": "Luanda"
+      "name": "Angola",
+      "nativeName": "Angola",
+      "population": 25868000,
+      "region": "Africa",
+      "subregion": "Middle Africa",
+      "capital": "Luanda",
+      "alpha2Code": "AO",
+      "topLevelDomain": [".ao"],
+      "currencies": ["Kwanza"],
+      "languages": ["Portuguese"],
+      "borders": ["Namibia", "Democratic Republic of the Congo", "Zambia"]
     },
     {
-        "name": "Anguilla",
-        "population": 13452,
-        "region": "Americas",
-        "capital": "The Valley"
+      "name": "Anguilla",
+      "nativeName": "Anguilla",
+      "population": 13452,
+      "region": "Americas",
+      "subregion": "Caribbean",
+      "capital": "The Valley",
+      "alpha2Code": "AI",
+      "topLevelDomain": [".ai"],
+      "currencies": ["East Caribbean Dollar"],
+      "languages": ["English"],
+      "borders": []
     },
     {
-        "name": "Antarctica",
-        "population": 1000,
-        "region": "Polar",
-        "capital": ""
+      "name": "Antarctica",
+      "nativeName": "Antarctica",
+      "population": 1000,
+      "region": "Polar",
+      "subregion": "",
+      "capital": "",
+      "alpha2Code": "AQ",
+      "topLevelDomain": [".aq"],
+      "currencies": [],
+      "languages": [],
+      "borders": []
     },
     {
-        "name": "Israel",
-        "population": 8527400,
-        "region": "Asia",
-        "capital": "Jerusalem"
+      "name": "Israel",
+      "nativeName": "ישראל",
+      "population": 8527400,
+      "region": "Asia",
+      "subregion": "Western Asia",
+      "capital": "Jerusalem",
+      "alpha2Code": "IL",
+      "topLevelDomain": [".il"],
+      "currencies": ["Shekel"],
+      "languages": ["Hebrew", "Arabic"],
+      "borders": ["Lebanon", "Syria", "Jordan", "Egypt"]
     },
     {
-        "name": "Italy",
-        "population": 60665551,
-        "region": "Europe",
-        "capital": "Rome"
+      "name": "Italy",
+      "nativeName": "Italia",
+      "population": 60665551,
+      "region": "Europe",
+      "subregion": "Southern Europe",
+      "capital": "Rome",
+      "alpha2Code": "IT",
+      "topLevelDomain": [".it"],
+      "currencies": ["Euro"],
+      "languages": ["Italian"],
+      "borders": ["France", "Switzerland", "Austria", "Slovenia"]
     },
     {
-        "name": "Jamaica",
-        "population": 2723246,
-        "region": "Americas",
-        "capital": "Kingston"
+      "name": "Jamaica",
+      "nativeName": "Jamaica",
+      "population": 2723246,
+      "region": "Americas",
+      "subregion": "Caribbean",
+      "capital": "Kingston",
+      "alpha2Code": "JM",
+      "topLevelDomain": [".jm"],
+      "currencies": ["Jamaican Dollar"],
+      "languages": ["English"],
+      "borders": []
     },
     {
-        "name": "Japan",
-        "population": 126960000,
-        "region": "Asia",
-        "capital": "Tokyo"
+      "name": "Japan",
+      "nativeName": "日本",
+      "population": 126960000,
+      "region": "Asia",
+      "subregion": "Eastern Asia",
+      "capital": "Tokyo",
+      "alpha2Code": "JP",
+      "topLevelDomain": [".jp"],
+      "currencies": ["Japanese Yen"],
+      "languages": ["Japanese"],
+      "borders": []
     },
     {
-        "name": "Jersey",
-        "population": 100800,
-        "region": "Europe",
-        "capital": "Saint Helier"
+      "name": "Jersey",
+      "nativeName": "Jersey",
+      "population": 100800,
+      "region": "Europe",
+      "subregion": "Northern Europe",
+      "capital": "Saint Helier",
+      "alpha2Code": "JE",
+      "topLevelDomain": [".je"],
+      "currencies": ["British Pound", "Jersey Pound"],
+      "languages": ["English", "French"],
+      "borders": []
     },
     {
-        "name": "Jordan",
-        "population": 9531712,
-        "region": "Asia",
-        "capital": "Amman"
+      "name": "Jordan",
+      "nativeName": "الأردن",
+      "population": 9531712,
+      "region": "Asia",
+      "subregion": "Western Asia",
+      "capital": "Amman",
+      "alpha2Code": "JO",
+      "topLevelDomain": [".jo"],
+      "currencies": ["Jordanian Dinar"],
+      "languages": ["Arabic"],
+      "borders": ["Iraq","Israel","Saudi Arabia","Syria"]
     },
     {
-        "name": "Kazakhstan",
-        "population": 17753200,
-        "region": "Asia",
-        "capital": "Astana"
+      "name": "Kazakhstan",
+      "nativeName": "Қазақстан",
+      "population": 17753200,
+      "region": "Asia",
+      "subregion": "Central Asia",
+      "capital": "Astana",
+      "alpha2Code": "KZ",
+      "topLevelDomain": [".kz", ".қаз"],
+      "currencies": ["Tenge"],
+      "languages": ["Kazakh", "Russian"],
+      "borders": ["China", "Kyrgyzstan", "Uzbekistan", "Turkmenistan", "Russia"]
     },
     {
-        "name": "Kenya",
-        "population": 47251000,
-        "region": "Africa",
-        "capital": "Nairobi"
+      "name": "Kenya",
+      "nativeName": "Kenya",
+      "population": 47251000,
+      "region": "Africa",
+      "subregion": "Eastern Africa",
+      "capital": "Nairobi",
+      "alpha2Code": "KE",
+      "topLevelDomain": [".ke"],
+      "currencies": ["Kenyan Shilling"],
+      "languages": ["English", "Swahili"],
+      "borders": ["Ethiopia", "Somalia", "South Sudan", "Tanzania", "Uganda"]
     },
     {
-        "name": "Kiribati",
-        "population": 113400,
-        "region": "Oceania",
-        "capital": "South Tarawa"
+      "name": "Kiribati",
+      "nativeName": "Kiribati",
+      "population": 113400,
+      "region": "Oceania",
+      "subregion": "Micronesia",
+      "capital": "South Tarawa",
+      "alpha2Code": "KI",
+      "topLevelDomain": [".ki"],
+      "currencies": ["Australian Dollar"],
+      "languages": ["English"],
+      "borders": []
     },
     {
-        "name": "Kuwait",
-        "population": 4183658,
-        "region": "Asia",
-        "capital": "Kuwait City"
+      "name": "Kuwait",
+      "nativeName": "الكويت",
+      "population": 4183658,
+      "region": "Asia",
+      "subregion": "Western Asia",
+      "capital": "Kuwait City",
+      "alpha2Code": "KW",
+      "topLevelDomain": [".kw"],
+      "currencies": ["Kuwaiti Dinar"],
+      "languages": ["Arabic"],
+      "borders": ["Iraq", "Saudi Arabia"]
     },
     {
-        "name": "Kyrgyzstan",
-        "population": 6047800,
-        "region": "Asia",
-        "capital": "Bishkek"
+      "name": "Kyrgyzstan",
+      "nativeName": "Кыргызстан",
+      "population": 6047800,
+      "region": "Asia",
+      "subregion": "Central Asia",
+      "capital": "Bishkek",
+      "alpha2Code": "KG",
+      "topLevelDomain": [".kg"],
+      "currencies": ["Kyrgyzstani Som"],
+      "languages": ["Kyrgyz", "Russian"],
+      "borders": ["Kazakhstan", "Uzbekistan", "Tajikistan", "China"]
     },
     {
-        "name": "Laos",
-        "population": 6492400,
-        "region": "Asia",
-        "capital": "Vientiane"
+      "name": "Lao People's Democratic Republic",
+      "nativeName": "ສປປລາວ",
+      "population": 6492400,
+      "region": "Asia",
+      "subregion": "South-Eastern Asia",
+      "capital": "Vientiane",
+      "alpha2Code": "LA",
+      "topLevelDomain": [".la"],
+      "currencies": ["Lao Kip"],
+      "languages": ["Lao"],
+      "borders": ["Myanmar", "Cambodia", "China", "Thailand", "Vietnam"]
     },
     {
-        "name": "Latvia",
-        "population": 1961600,
-        "region": "Europe",
-        "capital": "Riga"
+      "name": "Latvia",
+      "nativeName": "Latvija",
+      "population": 1961600,
+      "region": "Europe",
+      "subregion": "Northern Europe",
+      "capital": "Riga",
+      "alpha2Code": "LV",
+      "topLevelDomain": [".lv"],
+      "currencies": ["Euro"],
+      "languages": ["Latvian"],
+      "borders": ["Estonia", "Lithuania", "Belarus", "Russia"]
     },
     {
-        "name": "Lebanon",
-        "population": 5988000,
-        "region": "Asia",
-        "capital": "Beirut"
+      "name": "Lebanon",
+      "nativeName": "لبنان",
+      "population": 5988000,
+      "region": "Asia",
+      "subregion": "Western Asia",
+      "capital": "Beirut",
+      "alpha2Code": "LB",
+      "topLevelDomain": [".lb"],
+      "currencies": ["Lebanese Pound"],
+      "languages": ["Arabic", "French"],
+      "borders": ["Israel", "Syria"]
     },
     {
-        "name": "Lesotho",
-        "population": 1894194,
-        "region": "Africa",
-        "capital": "Maseru"
+      "name": "Lesotho",
+      "nativeName": "Lesotho",
+      "population": 1894194,
+      "region": "Africa",
+      "subregion": "Southern Africa",
+      "capital": "Maseru",
+      "alpha2Code": "LS",
+      "topLevelDomain": [".ls"],
+      "currencies": ["Lesotho Loti", "South African Rand"],
+      "languages": ["English", "Southern Sotho"],
+      "borders": ["South Africa"]
     },
     {
-        "name": "Liberia",
-        "population": 4615000,
-        "region": "Africa",
-        "capital": "Monrovia"
+      "name": "Liberia",
+      "nativeName": "Liberia",
+      "population": 4615000,
+      "region": "Africa",
+      "subregion": "Western Africa",
+      "capital": "Monrovia",
+      "alpha2Code": "LR",
+      "topLevelDomain": [".lr"],
+      "currencies": ["Liberian Dollar"],
+      "languages": ["English"],
+      "borders": ["Guinea", "Ivory Coast", "Sierra Leone"]
     },
     {
-        "name": "Libya",
-        "population": 6385000,
-        "region": "Africa",
-        "capital": "Tripoli"
+      "name": "Libya",
+      "nativeName": "دولة ليبيا",
+      "population": 6385000,
+      "region": "Africa",
+      "subregion": "Northern Africa",
+      "capital": "Tripoli",
+      "alpha2Code": "LY",
+      "topLevelDomain": [".ly"],
+      "currencies": ["Libyan Dinar"],
+      "languages": ["Arabic"],
+      "borders": ["Algeria", "Chad", "Egypt", "Niger", "Sudan", "Tunisia"]
     },
     {
-        "name": "Liechtenstein",
-        "population": 37623,
-        "region": "Europe",
-        "capital": "Vaduz"
+      "name": "Liechtenstein",
+      "nativeName": "Liechtenstein",
+      "population": 37623,
+      "region": "Europe",
+      "subregion": "Western Europe",
+      "capital": "Vaduz",
+      "alpha2Code": "LI",
+      "topLevelDomain": [".li"],
+      "currencies": ["Swiss Franc"],
+      "languages": ["German"],
+      "borders": ["Austria", "Switzerland"]
     },
     {
-        "name": "Lithuania",
-        "population": 2872294,
-        "region": "Europe",
-        "capital": "Vilnius"
+      "name": "Lithuania",
+      "nativeName": "Lietuva",
+      "population": 2872294,
+      "region": "Europe",
+      "subregion": "Northern Europe",
+      "capital": "Vilnius",
+      "alpha2Code": "LT",
+      "topLevelDomain": [".lt"],
+      "currencies": ["Euro"],
+      "languages": ["Lithuanian"],
+      "borders": ["Belarus", "Latvia", "Poland", "Russia"]
     },
     {
-        "name": "Luxembourg",
-        "population": 576200,
-        "region": "Europe",
-        "capital": "Luxembourg"
+      "name": "Luxembourg",
+      "nativeName": "Luxembourg",
+      "population": 576200,
+      "region": "Europe",
+      "subregion": "Western Europe",
+      "capital": "Luxembourg",
+      "alpha2Code": "LU",
+      "topLevelDomain": [".lu"],
+      "currencies": ["Euro"],
+      "languages": ["French", "German", "Luxembourgish"],
+      "borders": ["Belgium", "France", "Germany"]
     }
-]
\ No newline at end of file
+]
diff --git a/css/details.css b/css/details.css
index 6108d5b..063bc4e 100644
--- a/css/details.css
+++ b/css/details.css
@@ -66,7 +66,7 @@ body {
 }
 
 .country-info {
-  padding: 40px 0;
+  padding: 0px 0;
 }
 
 .country-info h1 {
@@ -133,3 +133,22 @@ body {
   gap: 8px;
   flex-wrap: wrap;
 }
+
+.country-info {
+  display: flex;
+  flex-wrap: wrap;
+}
+
+.country-data-list {
+  gap: 25px;
+  display: flex;
+  flex-wrap: wrap;
+} 
+
+.border-countries {
+  display: flex;
+  gap: 10px;
+  flex-wrap: wrap;
+}
+
+
diff --git a/css/main.css b/css/main.css
index f51ac8b..dea5c14 100644
--- a/css/main.css
+++ b/css/main.css
@@ -223,3 +223,7 @@
   text-transform: capitalize;
   margin-bottom: 15px;
 }
+
+.hidden-country {
+  display: none;
+}
\ No newline at end of file
diff --git a/index.html b/index.html
index f4afbf5..0baddbc 100644
--- a/index.html
+++ b/index.html
@@ -67,18 +67,18 @@ <h1>Where in the world?</h1>
           />
         </div>
         <div class="dropdown-wrapper">
-          <div class="dropdown-header flex flex-jc-sb flex-ai-c">
-            <span>Filter by Region</span>
+          <div class="dropdown-header flex flex-jc-sb flex-ai-c" onclick="showFilterByRegion()">
+            <span id="region-filter" >Filter by Region</span>
             <i class="fa-regular fa-chevron-down icon"></i>
           </div>
           <div class="dropdown-body">
-            <ul>
-              <li data-region="all">All</li>
-              <li data-region="africa">Africa</li>
-              <li data-region="americas">America</li>
-              <li data-region="asia">Asia</li>
-              <li data-region="europe">Europe</li>
-              <li data-region="oceania">Oceania</li>
+            <ul id="list-by-region">
+              <li data-region="all" onclick="chosenRegion(this)">All</li>
+              <li data-region="africa" onclick="chosenRegion(this)">Africa</li>
+              <li data-region="americas" onclick="chosenRegion(this)">America</li>
+              <li data-region="asia" onclick="chosenRegion(this)">Asia</li>
+              <li data-region="europe" onclick="chosenRegion(this)">Europe</li>
+              <li data-region="oceania" onclick="chosenRegion(this)">Oceania</li>
             </ul>
           </div>
         </div>
@@ -87,72 +87,12 @@ <h1>Where in the world?</h1>
     <!-- Countries -->
     <main class="main">
       <div class="container">
-        <section class="countries-grid">
-          <a
-            href="#"
-            class="country scale-effect"
-            data-country-name="Afghanistan"
-          >
-            <div class="country-flag">
-              <img
-                src="https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_the_Taliban.svg"
-                alt="Afghanistan FLag"
-              />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Afghanistan</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>40218234</li>
-                <li><strong>Region: </strong>Asia</li>
-                <li><strong>capital: </strong>Kabul</li>
-              </ul>
-            </div>
-          </a>
-          <a
-            href="#"
-            class="country scale-effect"
-            data-country-name="Åland Islands"
-          >
-            <div class="country-flag">
-              <img src="https://flagcdn.com/ax.svg" alt="Åland Islands FLag" />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Åland Islands</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>28875</li>
-                <li><strong>Region: </strong>Europe</li>
-                <li><strong>capital: </strong>Mariehamn</li>
-              </ul>
-            </div>
-          </a>
-          <a href="#" class="country scale-effect" data-country-name="Aruba">
-            <div class="country-flag">
-              <img src="https://flagcdn.com/aw.svg" alt="Aruba FLag" />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Aruba</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>106766</li>
-                <li><strong>Region: </strong>Americas</li>
-                <li><strong>capital: </strong>Oranjestad</li>
-              </ul>
-            </div>
-          </a>
-          <a href="#" class="country scale-effect" data-country-name="Belize">
-            <div class="country-flag">
-              <img src="https://flagcdn.com/bz.svg" alt="Belize FLag" />
-            </div>
-            <div class="country-info">
-              <h2 class="country-title">Belize</h2>
-              <ul class="country-brief">
-                <li><strong>population: </strong>397621</li>
-                <li><strong>Region: </strong>Americas</li>
-                <li><strong>capital: </strong>Belmopan</li>
-              </ul>
-            </div>
-          </a>
+        <section>
+          <div class="countries-grid" id="countries-list"></div>
         </section>
       </div>
     </main>
+    <script src="./js/common.js"></script>
+    <script src="./js/index.js"></script>
   </body>
 </html>
diff --git a/js/common.js b/js/common.js
new file mode 100644
index 0000000..09a7858
--- /dev/null
+++ b/js/common.js
@@ -0,0 +1,7 @@
+const handleCountryClick = (country, event) => {
+    event.preventDefault();
+    
+    localStorage.setItem('selectedCountry', JSON.stringify(country));
+    window.location.href = './details.html';
+    
+  }
\ No newline at end of file
diff --git a/js/details.js b/js/details.js
new file mode 100644
index 0000000..a0d3c6e
--- /dev/null
+++ b/js/details.js
@@ -0,0 +1,78 @@
+document.querySelector('.loader').style.display = 'none';
+
+document.addEventListener('DOMContentLoaded', () => {
+    
+    const selectedCountry = JSON.parse(localStorage.getItem('selectedCountry'));
+
+    if (selectedCountry) {
+        
+        const countryDetails = document.querySelector('.country-details');
+        countryDetails.classList.add('country-details');
+
+        const countryInfo = document.createElement('div');
+        countryInfo.classList.add('country-info');
+
+        const countryName = document.createElement('h1');
+        countryName.textContent = selectedCountry.name;
+        countryName.classList.add('h1');
+
+        const countryDataList = document.createElement('ul');
+        countryDataList.classList.add('country-data-list');
+
+        const countryNativeName = document.createElement('li');
+        countryNativeName.innerHTML = `<strong>Native Name:</strong> ${selectedCountry.nativeName}`;
+
+        const countryPopulation = document.createElement('li');
+        countryPopulation.innerHTML = `<strong>Population:</strong> ${selectedCountry.population}`;
+
+        const countryRegion = document.createElement('li');
+        countryRegion.innerHTML = `<strong>Region:</strong> ${selectedCountry.region}`;
+
+        const countrySubRegion = document.createElement('li');
+        countrySubRegion.innerHTML = `<strong>Sub Region:</strong> ${selectedCountry.subregion}`;
+
+        const countryCapital = document.createElement('li');
+        countryCapital.innerHTML = `<strong>Capital:</strong> ${selectedCountry.capital}`;
+
+        const countryDomain = document.createElement('li');
+        countryDomain.innerHTML = `<strong>Top Level Domain:</strong> ${selectedCountry.topLevelDomain}`;
+
+        const countryCurrencies = document.createElement('li');
+        countryCurrencies.innerHTML = `<strong>Currencies:</strong> ${selectedCountry.currencies}`;
+
+        const countryLanguages = document.createElement('li');
+        countryLanguages.innerHTML = `<strong>Languages:</strong> ${selectedCountry.languages}`;
+
+        const countryBorders = document.createElement('li');
+        countryBorders.innerHTML = `<strong>Border Countries:</strong> `;
+        countryBorders.classList.add('border-countries');
+        
+        selectedCountry.borders.forEach(border => {
+            const borderButton = document.createElement('button');
+            borderButton.textContent = border;
+            borderButton.classList.add('btn'); 
+            countryBorders.appendChild(borderButton);
+        });
+
+        const countryFlag = document.createElement('img');
+        countryFlag.src = `https://flagcdn.com/${selectedCountry.alpha2Code.toLowerCase()}.svg`;
+        countryFlag.alt = `${selectedCountry.name} Flag`;
+        countryFlag.classList.add('country-flag');
+
+        countryDetails.appendChild(countryFlag);
+        countryDetails.appendChild(countryInfo);
+
+        countryInfo.appendChild(countryName);
+        countryInfo.appendChild(countryDataList);
+
+        countryDataList.appendChild(countryNativeName);
+        countryDataList.appendChild(countryPopulation);
+        countryDataList.appendChild(countryRegion);
+        countryDataList.appendChild(countrySubRegion);
+        countryDataList.appendChild(countryCapital);
+        countryDataList.appendChild(countryDomain);
+        countryDataList.appendChild(countryCurrencies);
+        countryDataList.appendChild(countryLanguages);
+        countryDataList.appendChild(countryBorders);
+    } 
+});
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..591a74f
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,99 @@
+fetch('./CountriesData.json')
+.then(response => {
+    if(!response.ok){
+        throw new Error('Network response was not ok');
+    }
+    return response.json();
+})
+.then(data => {
+    const countriesList = document.getElementById('countries-list');
+    data.forEach((country) => {
+        const countryCard = document.createElement('a');
+        countryCard.href = './details.html';
+        countryCard.classList.add('country', 'scale-effect');
+        countryCard.setAttribute('data-country-name', country.name);
+        
+        countryCard.onclick = (event) => {
+          handleCountryClick(country, event);
+      };
+            
+        const countryImg = document.createElement('div');
+        countryImg.classList.add('country-flag');
+        const countryFlag = document.createElement('img');
+        countryFlag.src = `https://flagcdn.com/${country.alpha2Code.toLowerCase()}.svg`;
+        countryFlag.alt = `${country.name} Flag`;
+        countryImg.appendChild(countryFlag);
+        
+        countryCard.appendChild(countryImg);
+      
+        const countryInfo = document.createElement('div');
+        countryInfo.classList.add('country-info');
+        const countryName = document.createElement('h2');
+        countryName.textContent = country.name;
+        countryName.classList.add('country-title');
+        countryInfo.appendChild(countryName);
+      
+        const countryDetails = document.createElement('ul');
+        countryDetails.classList.add('country-brief');
+      
+        const countryPopulation = document.createElement('li');
+        countryPopulation.innerHTML = `<strong>Population: </strong>${country.population}`;
+        countryDetails.appendChild(countryPopulation);
+      
+        const countryRegion = document.createElement('li');
+        countryRegion.innerHTML = `<strong>Region: </strong>${country.region}`;
+        countryDetails.appendChild(countryRegion);
+      
+        const countryCapital = document.createElement('li');
+        countryCapital.innerHTML = `<strong>Capital: </strong>${country.capital}`;
+        countryDetails.appendChild(countryCapital);
+      
+        countryInfo.appendChild(countryDetails);
+        countryCard.appendChild(countryInfo);
+
+        countryCard.setAttribute('countryregion', country.region);
+      
+        countriesList.appendChild(countryCard);
+      })
+      
+})
+
+const showFilterByRegion = () => {
+    const dropdownWrapper = document.querySelector('.dropdown-wrapper');
+  
+  if (dropdownWrapper.classList.contains('open')) { 
+    dropdownWrapper.classList.remove('open'); 
+  } else {
+    dropdownWrapper.classList.add('open'); 
+  }
+}
+
+const chosenRegion = (element) => {
+    
+    const dropdownWrapper = document.querySelector('.dropdown-wrapper');
+    const regionFilter = document.getElementById('region-filter');
+    const region = element.getAttribute('data-region').charAt(0).toUpperCase() + element.getAttribute('data-region').slice(1);
+    regionFilter.textContent = region;
+    dropdownWrapper.classList.remove('open');
+    filterByRegion(region);
+}
+
+const filterByRegion = (region) => { 
+  const countries = document.querySelectorAll('.country');
+  countries.forEach(country => {
+    const countryRegion = country.getAttribute('countryregion');
+    
+    if (!(region === 'All' || countryRegion === region)) {
+      country.classList.add('hidden-country');
+     } else {
+      country.classList.remove('hidden-country');
+     }
+  })
+}
+
+
+
+
+
+
+
diff --git a/scss/_countries-grid.scss b/scss/_countries-grid.scss
index 4ba284a..8e248e3 100644
--- a/scss/_countries-grid.scss
+++ b/scss/_countries-grid.scss
@@ -78,4 +78,5 @@
       margin-bottom: 15px;
     }
   }
+
 }
diff --git a/scss/_filters.scss b/scss/_filters.scss
index 465ed62..483bf05 100644
--- a/scss/_filters.scss
+++ b/scss/_filters.scss
@@ -132,3 +132,5 @@
     }
   }
 }
+
+
diff --git a/scss/_global.scss b/scss/_global.scss
index 9f4a1a1..d360cb0 100644
--- a/scss/_global.scss
+++ b/scss/_global.scss
@@ -107,3 +107,5 @@ button {
     font-size: 16px;
   }
 }
+
+