diff --git a/css/details.css b/css/details.css
index 6108d5b..de920ac 100644
--- a/css/details.css
+++ b/css/details.css
@@ -61,7 +61,8 @@ body {
 
 .country-flag img {
   display: block;
-  max-width: 100%;
+  width: 100%;
+  height:100%
   object-fit: cover;
 }
 
@@ -86,6 +87,8 @@ body {
 .country-info li {
   text-transform: capitalize;
   color: #2b3945;
+  
+  
 }
 
 .country-info li button {
diff --git a/details.html b/details.html
index b584581..a147326 100644
--- a/details.html
+++ b/details.html
@@ -28,12 +28,7 @@
     <title>Details Page</title>
   </head>
   <body>
-    <!-- Loader -->
-    <div class="loader">
-      <div class="spinner">
-        <i class="fa-regular fa-circle-notch fa-spin icon"></i>
-      </div>
-    </div>
+    
     <!-- Scroll Top -->
     <button
       type="button"
@@ -71,10 +66,18 @@ <h1>Where in the world?</h1>
     </div>
     <main class="main">
       <div class="container">
-        <section class="country-details"></section>
+        <section class="country-details">
+          <div class="country-flag">
+            <img src="" alt="Country Flag" />
+          </div>
+          <div class="country-info">
+            <h2 class="country-title"></h2>
+            <ul class="country-brief"></ul>
+          </div>
+        </section>
       </div>
     </main>
-    <script src="./js/common.js"></script>
-    <script src="./js/details.js"></script>
+    <script src="index.js"></script>
+    <script src="details.js"></script>
   </body>
 </html>
diff --git a/details.js b/details.js
new file mode 100644
index 0000000..80553d2
--- /dev/null
+++ b/details.js
@@ -0,0 +1,24 @@
+function getCountry() {
+  document.addEventListener("DOMContentLoaded", () => {
+    const countryDetails = JSON.parse(localStorage.getItem("countryDetails"));
+
+    if (countryDetails) {
+      document.querySelector(".country-flag img").src = countryDetails.flag;
+      document.querySelector(".country-flag img").alt = `${countryDetails.name} Flag`;
+      document.querySelector(".country-title").textContent = countryDetails.name;
+
+      const countryBrief = document.querySelector(".country-brief");
+      countryBrief.innerHTML = `
+        <li><strong>Population:</strong> ${countryDetails.population}</li>
+        <li><strong>Region:</strong> ${countryDetails.region}</li>
+        <li><strong>Capital:</strong> ${countryDetails.capital}</li>
+      `;
+
+      console.log("Country details loaded:", countryDetails);
+    } else {
+      console.error("No country details found in localStorage.");
+    }
+  });
+}
+
+getCountry();
diff --git a/index.html b/index.html
index f4afbf5..3b15305 100644
--- a/index.html
+++ b/index.html
@@ -73,12 +73,30 @@ <h1>Where in the world?</h1>
           </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>
+                <input type="checkbox" id="all" value="all" onclick="filterCountries()" />
+                <label for="all">All</label>
+              </li>
+              <li>
+                <input type="checkbox" id="Africa" value="Africa" onclick="filterCountries()" />
+                <label for="Africa">Africa</label>
+              </li>
+              <li>
+                <input type="checkbox" id="Americas" value="Americas" onclick="filterCountries()" />
+                <label for="Americas">America</label>
+              </li>
+              <li>
+                <input type="checkbox" id="Asia" value="Asia" onclick="filterCountries()" />
+                <label for="Asia">Asia</label>
+              </li>
+              <li>
+                <input type="checkbox" id="Europe" value="Europe" onclick="filterCountries()" />
+                <label for="Europe">Europe</label>
+              </li>
+              <li>
+                <input type="checkbox" id="Oceania" value="Oceania" onclick="filterCountries()" />
+                <label for="Oceania">Oceania</label>
+              </li> 
             </ul>
           </div>
         </div>
@@ -88,71 +106,11 @@ <h1>Where in the world?</h1>
     <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>
     </main>
+
+    <script src="index.js"></script>
+    <script src="details.js"></script>
   </body>
 </html>
diff --git a/index.js b/index.js
new file mode 100644
index 0000000..c296ef6
--- /dev/null
+++ b/index.js
@@ -0,0 +1,102 @@
+let countriesData = [];  
+const countriesGrid= document.querySelector('.countries-grid');
+const searchInput= document.querySelector('.search-input');
+const dropdownWrapper = document.querySelector('.dropdown-wrapper');
+const dropdownHeader = document.querySelector('.dropdown-header');
+
+
+fetch('./CountriesData.json')
+  .then((response) => response.json())
+  .then((countries) => {
+    countriesData = countries;
+    renderCountreis(countries);
+  })
+  .catch((error) => console.error('Error fetching countries:', error));
+
+  //----------------render the countries function----------------
+
+function renderCountreis(countries){
+
+  countriesGrid.innerHTML = '';
+
+  countries.forEach((country) => {
+    const countryCard= document.createElement('div');
+    countryCard.classList.add('country');
+
+    countryCard.innerHTML = `
+             <a href ="details.html?country=${encodeURIComponent(country.name)}"
+             onclick="setCountry('${country.flag}','${country.name}','${country.population}','${country.region}','${country.capital}')"
+             class="country scale-effect countryDiv">
+               <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}</li>
+                 </ul>
+               </div>
+               </a>
+             `;
+
+         countriesGrid.appendChild(countryCard);
+  });
+
+}
+
+//----------------set country function- single country page (saves the data in local storage)-------------
+
+function setCountry(flag, name, population, region, capital){
+  const countryDetails = { flag, name, population, region, capital };
+    localStorage.setItem("countryDetails", JSON.stringify(countryDetails));
+    console.log("Country details saved:", countryDetails);
+}
+
+//----------------opens the filter by region----------------
+
+dropdownHeader.onclick = () => {
+  dropdownWrapper.classList.toggle('open');
+};
+
+//----------------filter the countries by the selected regions----------------
+
+function filterCountries(){
+  const checkBoxes= document.querySelectorAll('.dropdown-body input[type="checkbox"]');
+  const selectedRegions=[];
+
+  checkBoxes.forEach((checkbox)=>{
+    if (checkbox.checked && checkbox.value!== 'all'){
+      selectedRegions.push(checkbox.value.toLowerCase());
+    }
+  })
+
+  let filteredCountries= countriesData;
+
+  if (selectedRegions.length>0){
+    filteredCountries=countriesData.filter((country)=>
+      selectedRegions.includes(country.region.toLowerCase())
+    );
+  }
+
+  renderCountreis(filteredCountries);
+}
+
+//----------------find a country by name in search-line----------------
+
+searchInput.addEventListener("input",()=>{
+  const searchValue = searchInput.value.trim().toLowerCase();
+
+  const filteredCountries = countriesData.filter(country =>
+    country.name.toLowerCase().startsWith(searchValue) 
+  );
+  renderCountreis(filteredCountries); 
+})
+
+
+
+
