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 f08c782..d995ff9 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
@@ -61,10 +61,10 @@
         hx-get="/country"
         hx-target="body"
         hx-push-url="true"
-        class="md:w-1/4 md:min-w-max"
+        class="contents"
       >
         <div
-          class="flex flex-row items-center bg-white shadow-md h-14 md:h-16 rounded-lg md:w-full dark:bg-dark-blue"
+          class="md:w-1/4 md:min-w-max flex flex-row items-center bg-white shadow-md h-14 md:h-16 rounded-lg dark:bg-dark-blue"
         >
           <!-- <p class="w-16 grid place-content-center">IC</p> -->
           <svg
@@ -87,11 +87,9 @@
             name="countryName"
             list="country.nameViews-list"
             placeholder="Search for a country..."
-            th:hx-get="@{~/}"
-            hx-trigger="keyup changed delay:500ms"
-            hx-select="#countries-main-list"
+            hx-post="/countries-cards"
             hx-target="#countries-main-list"
-            hx-swap="outerHTML"
+            hx-trigger="keyup changed delay:500ms"
           />
         </div>
         <datalist id="country.nameViews-list">
@@ -101,12 +99,10 @@
             value=""
           ></option>
         </datalist>
-      </form>
-      <form>
         <select
           name="region"
           class="block w-62 mt-1 h-14 md:h-16 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7 dark:bg-dark-blue"
-          hx-get="/countries-cards"
+          hx-post="/countries-cards"
           hx-target="#countries-main-list"
         >
           <option
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 5edaa0b..58eaf41 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
@@ -64,6 +64,15 @@ case class Routes(countries: List[Country])(implicit
     )
   }
 
+  @cask.postForm("/countries-cards")
+  def postPageOfCountriesCards(
+    region: cask.FormValue,
+    countryName: cask.FormValue
+  ) = {
+    println(s"in get for countries cards with $region and $countryName")
+    getPageOfCountriesCards(Some(region.value), 0, Some(countryName.value))
+  }
+
   /** this method returns directly set of cards and new anchor for loading next
     * page of cards
     *
@@ -98,7 +107,7 @@ case class Routes(countries: List[Country])(implicit
       context
     )
     // this is to store switch to another region in the history
-    val newUrl = s"/?region=${region.getOrElse("")}"
+    val newUrl = s"/?region=${region.getOrElse("")}&countryName=${countryName.getOrElse("")}"
     // only save url when new region is requested, not on addtional card loads
     val urlHeaderOpt = if (page == 0) Seq("HX-Push" -> newUrl) else Seq.empty
     Response(
@@ -140,7 +149,7 @@ case class Routes(countries: List[Country])(implicit
   }
 
   @cask.get("/country")
-  def getCountryPage(countryName: String) = {
+  def getCountryPage(countryName: String, region: Option[String] = None) = {
     val context = new Context()
     countries.find(_.name.common == countryName) match {
       case Some(selectedCountry) =>