diff --git a/16-countries-page-from-api/src/main/resources/templates/index.html b/16-countries-page-from-api/src/main/resources/templates/index.html
index 66b19ed..6f9e5bc 100644
--- a/16-countries-page-from-api/src/main/resources/templates/index.html
+++ b/16-countries-page-from-api/src/main/resources/templates/index.html
@@ -8,6 +8,7 @@
     <meta name="viewport" content="width=device-width, initial-scale=1" />
     <link href="../public/output.css" th:href=@{~/public/output.css}
     rel="stylesheet" />
+    <script src="https://unpkg.com/htmx.org@1.9.6"></script>
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
   </head>
@@ -41,8 +42,12 @@
         <select
           class="block w-62 mt-1 h-12 w-64 bg-white shadow-md rounded-md shadow-sm focus:outline-none"
         >
-          <option value="" selected disabled>Filter by Region</option>
-          <option th:each="region: ${regionsSet}" th:value="${region}" th:text="${region}" value="Africa">Africa</option>
+          <option value="" selected disabled
+                  th:selected=${#strings.isEmpty(selectedRegion)}
+          >Filter by Region</option>
+          <option th:each="region: ${regionsSet}" th:value="${region}" th:text="${region}"
+                  th:selected="${selectedRegion == region}"
+                  value="Africa">Africa</option>
           <option th:remove="all" value="Americas">Americas</option>
           <option th:remove="all" value="Asia">Asia</option>
           <option th:remove="all" value="Europe">Europe</option>
@@ -52,6 +57,7 @@
     </nav>
     <main class="flex flex-col items-center gap-10 pb-8"
           th:remove="all-but-first"
+          th:fragment="countries-main (countriesList)"
     >
       <article
         th:each="country : ${countriesList}"
diff --git a/16-countries-page-from-api/src/main/scala/example/Routes.scala b/16-countries-page-from-api/src/main/scala/example/Routes.scala
index 7cc1880..744d25e 100644
--- a/16-countries-page-from-api/src/main/scala/example/Routes.scala
+++ b/16-countries-page-from-api/src/main/scala/example/Routes.scala
@@ -6,6 +6,7 @@ import org.thymeleaf.TemplateEngine
 import org.thymeleaf.context.Context
 import org.thymeleaf.templatemode.TemplateMode
 import scala.jdk.CollectionConverters._
+import cask.model.Request
 
 case class Routes(countries: List[Country])(implicit
     cc: castor.Context,
@@ -27,12 +28,18 @@ case class Routes(countries: List[Country])(implicit
   val engine: TemplateEngine = buildTemplateEngine()
 
   @cask.get("/")
-  def hello() = {
+  def indexPage(region: Option[String] = None) = {
     val context = new Context()
 
     val regions = countries.map(_.region).distinct.sorted.asJava
+    val selectedCountries = region match {
+      case None => countries
+      case Some(selectedRegion) => countries.filter(_.region == selectedRegion)
+    }
+
     context.setVariable("regionsSet", regions)
-    context.setVariable("countriesList", countries.asJava)
+    context.setVariable("countriesList", selectedCountries.asJava)
+    context.setVariable("selectedRegion", region.getOrElse(""))
 
     val indexPage = engine.process("index", context)
     Response(