diff --git a/index.html b/index.html
index f4afbf5..c263563 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="showRegions()">
+            <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>
@@ -154,5 +154,6 @@ <h2 class="country-title">Belize</h2>
         </section>
       </div>
     </main>
+    <script src="./js/index.js"></script>
   </body>
 </html>
diff --git a/js/common.js b/js/common.js
new file mode 100644
index 0000000..e69de29
diff --git a/js/details.js b/js/details.js
new file mode 100644
index 0000000..fd8f2f1
--- /dev/null
+++ b/js/details.js
@@ -0,0 +1,44 @@
+document.addEventListener("DOMContentLoaded", () => {
+  const countryName = new URLSearchParams(window.location.search).get('country');
+  if (countryName) {
+    fetchCountryData(countryName);
+  }
+  else {
+    console.error('Country name not found');
+  }
+});
+
+const fetchCountryData = (countryName) => {
+  fetch('./CountriesData.json')
+    .then(response => response.json())
+    .then(countries => {
+      const country = countries.find((c) => c.name.toLowerCase() === countryName.toLowerCase());
+      if (country) {
+        displayCountryDetails(country);
+      }
+      else {
+        console.error('Country not found');
+      }
+    })
+    .catch(error => {
+      console.error('Error fetching country data:', error);
+    });
+};
+
+const displayCountryDetails = (country) => {
+  const detailsContainer = document.querySelector('.country-details');
+  const loader = document.querySelector('.loader');
+  loader.style.display = 'none';
+  
+  detailsContainer.innerHTML = `
+    <h2>${country.name}</h2>
+    <div class="country-flag">
+      <img src="${country.flag}" alt="${country.name} Flag">
+    </div>
+    <ul>
+      <li><strong>Capital:</strong> ${country.capital || 'N/A'}</li>
+      <li><strong>Population:</strong> ${country.population.toLocaleString()}</li>
+      <li><strong>Region:</strong> ${country.region}</li>
+    </ul>
+  `;
+};
diff --git a/js/index.js b/js/index.js
new file mode 100644
index 0000000..7cde8bf
--- /dev/null
+++ b/js/index.js
@@ -0,0 +1,76 @@
+fetch('./CountriesData.json')
+    .then((response) => {
+        if (!response.ok) {
+            throw new Error('Network response - not ok');
+        }
+        return response.json();
+    })
+    .then((data) => {
+        displayCountries(data);
+    })
+    .catch((error) => {
+        console.error('Error fetching countries data:', error);
+    });
+
+const displayCountries = (countries) => {
+    const countriesGrid = document.querySelector('.countries-grid');
+    countriesGrid.innerHTML = '';
+
+    // Loop through each country and generate its card
+    countries.forEach((country) => {
+        const countryCard = `
+      <a href="details.html?country=${encodeURIComponent(country.name)}" class="country scale-effect">
+        <div class="country-flag">
+          <img src="${country.flag}" alt="${country.name} Flag">
+        </div>
+        <div class="country-info">
+          <h2 class="country-title">${country.name}</h2>
+          <ul class="country-brief">
+            <li><strong>Population:</strong> ${country.population.toLocaleString()}</li>
+            <li><strong>Region:</strong> ${country.region}</li>
+            <li><strong>Capital:</strong> ${country.capital || 'N/A'}</li>
+          </ul>
+        </div>
+      </a>
+    `;
+        countriesGrid.innerHTML += countryCard;
+    });
+}
+const showRegions = () => {
+    const dropdownWrapper = document.querySelector('.dropdown-wrapper');
+
+    if (dropdownWrapper.classList.contains('open')) {
+        dropdownWrapper.classList.remove('open');
+    } 
+    else {
+        dropdownWrapper.classList.add('open');
+    }
+}
+
+const chosenRegion = (element) => {
+    const region = element.getAttribute('data-region');
+    filterByRegion(region);
+    const dropdownWrapper = document.querySelector('.dropdown-wrapper');
+    dropdownWrapper.classList.remove('open');
+}
+
+const filterByRegion = (region) => {
+    let filteredCountries;
+    fetch('./CountriesData.json')
+        .then((response) => response.json())
+        .then((countries) => {
+            if (region === 'all') {
+                filteredCountries = countries;
+            }
+            else {
+                filteredCountries = countries.filter((country) => country.region.toLowerCase() === region);
+            }
+            displayCountries(filteredCountries);
+        })
+        .catch((error) => {
+            console.error('Error filtering countries:', error);
+        });
+}
+
+
+