diff --git a/CountriesData.json b/CountriesData.json
index a6fc2a2..60756d7 100644
--- a/CountriesData.json
+++ b/CountriesData.json
@@ -1,176 +1,206 @@
 [
     {
-        "name": "Åland Islands",
-        "population": 21225,
-        "region": "Europe",
-        "capital": "Mariehamn"
+      "name": "Åland Islands",
+      "population": 21225,
+      "region": "Europe",
+      "capital": "Mariehamn",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/5/52/Flag_of_%C3%85land.svg"
     },
     {
-        "name": "Afghanistan",
-        "population": 27657145,
-        "region": "Asia",
-        "capital": "Kabul"
+      "name": "Afghanistan",
+      "population": 27657145,
+      "region": "Asia",
+      "capital": "Kabul",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/5/5c/Flag_of_the_Taliban.svg"
     },
     {
-        "name": "Albania",
-        "population": 2886026,
-        "region": "Europe",
-        "capital": "Tirana"
+      "name": "Albania",
+      "population": 2886026,
+      "region": "Europe",
+      "capital": "Tirana",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/3/36/Flag_of_Albania.svg"
     },
     {
-        "name": "Algeria",
-        "population": 40400000,
-        "region": "Africa",
-        "capital": "Algiers"
+      "name": "Algeria",
+      "population": 40400000,
+      "region": "Africa",
+      "capital": "Algiers",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/7/77/Flag_of_Algeria.svg"
     },
     {
-        "name": "American Samoa",
-        "population": 57100,
-        "region": "Oceania",
-        "capital": "Pago Pago"
+      "name": "American Samoa",
+      "population": 57100,
+      "region": "Oceania",
+      "capital": "Pago Pago",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/8/87/Flag_of_American_Samoa.svg"
     },
     {
-        "name": "Andorra",
-        "population": 78014,
-        "region": "Europe",
-        "capital": "Andorra la Vella"
+      "name": "Andorra",
+      "population": 78014,
+      "region": "Europe",
+      "capital": "Andorra la Vella",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/1/19/Flag_of_Andorra.svg"
     },
     {
-        "name": "Angola",
-        "population": 25868000,
-        "region": "Africa",
-        "capital": "Luanda"
+      "name": "Angola",
+      "population": 25868000,
+      "region": "Africa",
+      "capital": "Luanda",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/9/9d/Flag_of_Angola.svg"
     },
     {
-        "name": "Anguilla",
-        "population": 13452,
-        "region": "Americas",
-        "capital": "The Valley"
+      "name": "Anguilla",
+      "population": 13452,
+      "region": "Americas",
+      "capital": "The Valley",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/b/b4/Flag_of_Anguilla.svg"
     },
     {
-        "name": "Antarctica",
-        "population": 1000,
-        "region": "Polar",
-        "capital": ""
+      "name": "Antarctica",
+      "population": 1000,
+      "region": "Polar",
+      "capital": "",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/thumb/f/f8/True_South_Antarctic_Flag.svg/510px-True_South_Antarctic_Flag.svg.png"
     },
     {
-        "name": "Israel",
-        "population": 8527400,
-        "region": "Asia",
-        "capital": "Jerusalem"
+      "name": "Israel",
+      "population": 8527400,
+      "region": "Asia",
+      "capital": "Jerusalem",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/d/d4/Flag_of_Israel.svg"
     },
     {
-        "name": "Italy",
-        "population": 60665551,
-        "region": "Europe",
-        "capital": "Rome"
+      "name": "Italy",
+      "population": 60665551,
+      "region": "Europe",
+      "capital": "Rome",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/0/03/Flag_of_Italy.svg"
     },
     {
-        "name": "Jamaica",
-        "population": 2723246,
-        "region": "Americas",
-        "capital": "Kingston"
+      "name": "Jamaica",
+      "population": 2723246,
+      "region": "Americas",
+      "capital": "Kingston",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/0/0a/Flag_of_Jamaica.svg"
     },
     {
-        "name": "Japan",
-        "population": 126960000,
-        "region": "Asia",
-        "capital": "Tokyo"
+      "name": "Japan",
+      "population": 126960000,
+      "region": "Asia",
+      "capital": "Tokyo",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/9/9e/Flag_of_Japan.svg"
     },
     {
-        "name": "Jersey",
-        "population": 100800,
-        "region": "Europe",
-        "capital": "Saint Helier"
+      "name": "Jersey",
+      "population": 100800,
+      "region": "Europe",
+      "capital": "Saint Helier",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/1/1c/Flag_of_Jersey.svg"
     },
     {
-        "name": "Jordan",
-        "population": 9531712,
-        "region": "Asia",
-        "capital": "Amman"
+      "name": "Jordan",
+      "population": 9531712,
+      "region": "Asia",
+      "capital": "Amman",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/c/c0/Flag_of_Jordan.svg"
     },
     {
-        "name": "Kazakhstan",
-        "population": 17753200,
-        "region": "Asia",
-        "capital": "Astana"
+      "name": "Kazakhstan",
+      "population": 17753200,
+      "region": "Asia",
+      "capital": "Astana",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/d/d3/Flag_of_Kazakhstan.svg"
     },
     {
-        "name": "Kenya",
-        "population": 47251000,
-        "region": "Africa",
-        "capital": "Nairobi"
+      "name": "Kenya",
+      "population": 47251000,
+      "region": "Africa",
+      "capital": "Nairobi",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/4/49/Flag_of_Kenya.svg"
     },
     {
-        "name": "Kiribati",
-        "population": 113400,
-        "region": "Oceania",
-        "capital": "South Tarawa"
+      "name": "Kiribati",
+      "population": 113400,
+      "region": "Oceania",
+      "capital": "South Tarawa",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/d/d3/Flag_of_Kiribati.svg"
     },
     {
-        "name": "Kuwait",
-        "population": 4183658,
-        "region": "Asia",
-        "capital": "Kuwait City"
+      "name": "Kuwait",
+      "population": 4183658,
+      "region": "Asia",
+      "capital": "Kuwait City",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/a/aa/Flag_of_Kuwait.svg"
     },
     {
-        "name": "Kyrgyzstan",
-        "population": 6047800,
-        "region": "Asia",
-        "capital": "Bishkek"
+      "name": "Kyrgyzstan",
+      "population": 6047800,
+      "region": "Asia",
+      "capital": "Bishkek",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/c/c7/Flag_of_Kyrgyzstan.svg"
     },
     {
-        "name": "Laos",
-        "population": 6492400,
-        "region": "Asia",
-        "capital": "Vientiane"
+      "name": "Laos",
+      "population": 6492400,
+      "region": "Asia",
+      "capital": "Vientiane",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/5/56/Flag_of_Laos.svg"
     },
     {
-        "name": "Latvia",
-        "population": 1961600,
-        "region": "Europe",
-        "capital": "Riga"
+      "name": "Latvia",
+      "population": 1961600,
+      "region": "Europe",
+      "capital": "Riga",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/8/84/Flag_of_Latvia.svg"
     },
     {
-        "name": "Lebanon",
-        "population": 5988000,
-        "region": "Asia",
-        "capital": "Beirut"
+      "name": "Lebanon",
+      "population": 5988000,
+      "region": "Asia",
+      "capital": "Beirut",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/5/59/Flag_of_Lebanon.svg"
     },
     {
-        "name": "Lesotho",
-        "population": 1894194,
-        "region": "Africa",
-        "capital": "Maseru"
+      "name": "Lesotho",
+      "population": 1894194,
+      "region": "Africa",
+      "capital": "Maseru",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/4/4a/Flag_of_Lesotho.svg"
     },
     {
-        "name": "Liberia",
-        "population": 4615000,
-        "region": "Africa",
-        "capital": "Monrovia"
+      "name": "Liberia",
+      "population": 4615000,
+      "region": "Africa",
+      "capital": "Monrovia",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/b/b8/Flag_of_Liberia.svg"
     },
     {
-        "name": "Libya",
-        "population": 6385000,
-        "region": "Africa",
-        "capital": "Tripoli"
+      "name": "Libya",
+      "population": 6385000,
+      "region": "Africa",
+      "capital": "Tripoli",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/0/05/Flag_of_Libya.svg"
     },
     {
-        "name": "Liechtenstein",
-        "population": 37623,
-        "region": "Europe",
-        "capital": "Vaduz"
+      "name": "Liechtenstein",
+      "population": 37623,
+      "region": "Europe",
+      "capital": "Vaduz",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/4/47/Flag_of_Liechtenstein.svg"
     },
     {
-        "name": "Lithuania",
-        "population": 2872294,
-        "region": "Europe",
-        "capital": "Vilnius"
+      "name": "Lithuania",
+      "population": 2872294,
+      "region": "Europe",
+      "capital": "Vilnius",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/1/11/Flag_of_Lithuania.svg"
     },
     {
-        "name": "Luxembourg",
-        "population": 576200,
-        "region": "Europe",
-        "capital": "Luxembourg"
+      "name": "Luxembourg",
+      "population": 576200,
+      "region": "Europe",
+      "capital": "Luxembourg",
+      "flag": "https://upload.wikimedia.org/wikipedia/commons/d/da/Flag_of_Luxembourg.svg"
     }
-]
\ No newline at end of file
+  ]
+  
\ No newline at end of file
diff --git a/details.html b/details.html
index b584581..f18db21 100644
--- a/details.html
+++ b/details.html
@@ -71,10 +71,13 @@ <h1>Where in the world?</h1>
     </div>
     <main class="main">
       <div class="container">
-        <section class="country-details"></section>
+        <section class="country-details">
+          <h1 id="country-name">Name</h1>
+        </section>
       </div>
     </main>
-    <script src="./js/common.js"></script>
-    <script src="./js/details.js"></script>
+    <!-- <script src="./js/common.js"></script>
+    <script src="./js/details.js"></script> -->
+    <script src="details.js"></script>
   </body>
 </html>
diff --git a/details.js b/details.js
new file mode 100644
index 0000000..93ba708
--- /dev/null
+++ b/details.js
@@ -0,0 +1,32 @@
+const urlParams = new URLSearchParams(window.location.search);
+let selectedCountry;
+
+const getCountry = async () => {
+  const countryName = urlParams.get("country");
+  try {
+    const res = await fetch("CountriesData.json");
+    if (!res.ok) {
+      throw new Error("Error Fetching Countries");
+    }
+    const countries = await res.json();
+    selectedCountry = countries.find(
+      (country) => country.name.toLowerCase() === countryName.toLowerCase()
+    );
+
+    if (selectedCountry) {
+      console.log(selectedCountry);
+      updateUi();
+    } else {
+      throw new Error("Country Not Found");
+    }
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+const updateUi = () => {
+  document.querySelector("#country-name").textContent = selectedCountry.name;
+  document.querySelector(".loader").style.display = "none";
+};
+
+getCountry();
diff --git a/index.html b/index.html
index f4afbf5..592fb7c 100644
--- a/index.html
+++ b/index.html
@@ -66,19 +66,32 @@ <h1>Where in the world?</h1>
             placeholder="Search for a country..."
           />
         </div>
-        <div class="dropdown-wrapper">
+        <div class="dropdown-wrapper" onclick="onRegionFilterWrapperClick()">
           <div class="dropdown-header flex flex-jc-sb flex-ai-c">
             <span>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>
+              <li data-region="all" onclick="onRegionFIlterChange(event)">
+                All
+              </li>
+              <li data-region="africa" onclick="onRegionFIlterChange(event)">
+                Africa
+              </li>
+              <li data-region="americas" onclick="onRegionFIlterChange(event)">
+                America
+              </li>
+              <li data-region="asia" onclick="onRegionFIlterChange(event)">
+                Asia
+              </li>
+              <li data-region="europe" onclick="onRegionFIlterChange(event)">
+                Europe
+              </li>
+              <li data-region="oceania" onclick="onRegionFIlterChange(event)">
+                Oceania
+              </li>
             </ul>
           </div>
         </div>
@@ -87,72 +100,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>
+        <section
+          class="countries-grid"
+          onclick="onCountryItemClick(event)"
+        ></section>
       </div>
     </main>
+    <script src="index.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..793677f
--- /dev/null
+++ b/index.js
@@ -0,0 +1,89 @@
+let regionFilter = "All";
+let countries = [];
+
+// fetch countries from CountriesData
+const fetchCountries = async () => {
+  try {
+    const res = await fetch("CountriesData.json");
+    if (!res.ok) {
+      throw new Error("Error Fetching Countries");
+    }
+    countries = await res.json();
+    renderCountries(countries);
+  } catch (e) {
+    console.error(e);
+  }
+};
+
+// Region Filter Handlers
+
+// Open/close the filter selection
+const onRegionFilterWrapperClick = () => {
+  document.querySelector(".dropdown-wrapper").classList.toggle("open");
+};
+
+// Choose region to filter
+const onRegionFIlterChange = (e) => {
+  regionFilter = e.target.getAttribute("data-region");
+  updateUi();
+};
+
+// Update UI
+const updateUi = () => {
+  // Filter Dropdown Label
+  document.querySelector(".dropdown-header span").textContent =
+    capitalizeFirstLetter(regionFilter);
+  // Render Countries
+  if (regionFilter.trim().toLowerCase() === "all") {
+    renderCountries(countries);
+  } else {
+    if (regionFilter !== "All") {
+      console.log("countries", countries);
+      const filteredCountries = countries.filter(
+        (country) =>
+          country.region.toLowerCase() === regionFilter.trim().toLowerCase()
+      );
+      renderCountries(filteredCountries);
+    }
+  }
+};
+
+// Render countries - after fetch and filters
+const renderCountries = (countriesList) => {
+  const countriesGrid = document.querySelector(".countries-grid");
+  countriesGrid.innerHTML = "";
+  countriesList.forEach((country) => {
+    countriesGrid.innerHTML += `
+        <div class="country scale-effect" data-country-name="${country.name}">
+            <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}</li>
+              <li><strong>Region: </strong>${country.region}</li>
+              <li><strong>Capital: </strong>${country.capital}</li>
+            </ul>
+          </div>
+        </div>
+        `;
+  });
+};
+
+const onCountryItemClick = (e) => {
+  const countryElement = e.target.closest(".country");
+  if (countryElement) {
+    const countryName = countryElement.dataset.countryName;
+    const url = `details.html?country=${countryName}`;
+    window.location.assign(url);
+  }
+};
+
+// Capitalize first letter in the filter selection
+const capitalizeFirstLetter = (string) => {
+  return string.charAt(0).toUpperCase() + string.slice(1);
+};
+
+// Start at run time
+fetchCountries();
diff --git a/scss/_filters.scss b/scss/_filters.scss
index 465ed62..8c5e4e7 100644
--- a/scss/_filters.scss
+++ b/scss/_filters.scss
@@ -116,7 +116,7 @@
     z-index: 1;
     padding: 15px 0;
     transform: translateY(-20px);
-
+    
     li {
       padding: 8px 25px;
       text-transform: capitalize;