diff --git a/16-countries-page-from-api/src/main/resources/public/icons/back-svgrepo-com.svg b/16-countries-page-from-api/src/main/resources/public/icons/back-svgrepo-com.svg
new file mode 100644
index 0000000..020e0b2
--- /dev/null
+++ b/16-countries-page-from-api/src/main/resources/public/icons/back-svgrepo-com.svg
@@ -0,0 +1,23 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg fill="#000000" height="800px" width="800px" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 viewBox="0 0 386.242 386.242" xml:space="preserve">
+<g>
+	<path id="Arrow_Back" d="M374.212,182.3H39.432l100.152-99.767c4.704-4.704,4.704-12.319,0-17.011
+		c-4.704-4.704-12.319-4.704-17.011,0L3.474,184.61c-4.632,4.632-4.632,12.379,0,17.011l119.1,119.1
+		c4.704,4.704,12.319,4.704,17.011,0c4.704-4.704,4.704-12.319,0-17.011L39.432,206.36h334.779c6.641,0,12.03-5.39,12.03-12.03
+		S380.852,182.3,374.212,182.3z"/>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+	<g>
+	</g>
+</g>
+</svg>
\ No newline at end of file
diff --git a/16-countries-page-from-api/src/main/resources/public/icons/half-moon-shape-svgrepo-com.svg b/16-countries-page-from-api/src/main/resources/public/icons/half-moon-shape-svgrepo-com.svg
new file mode 100644
index 0000000..a1aade9
--- /dev/null
+++ b/16-countries-page-from-api/src/main/resources/public/icons/half-moon-shape-svgrepo-com.svg
@@ -0,0 +1,15 @@
+<?xml version="1.0" encoding="iso-8859-1"?>
+<!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
+<svg fill="#000000" version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" 
+	 width="800px" height="800px" viewBox="0 0 81.289 81.289"
+	 xml:space="preserve">
+<g>
+	<path d="M79.248,38.668c-1.246-0.464-2.669-0.088-3.518,0.95c-4.791,5.84-11.858,9.192-19.403,9.192
+		c-13.833,0-25.083-11.255-25.083-25.083c0-6.963,2.808-13.441,7.908-18.242c0.977-0.918,1.26-2.357,0.705-3.579
+		c-0.552-1.222-1.818-1.959-3.157-1.826C15.778,2.112,0,19.511,0,40.555c0,22.424,18.245,40.669,40.672,40.669
+		c22.16,0,40.002-17.363,40.616-39.528C81.324,40.355,80.508,39.136,79.248,38.668z M40.671,74.953
+		c-18.971,0-34.402-15.43-34.402-34.4c0-14.93,9.389-27.69,22.859-32.43c-2.714,4.689-4.156,10.022-4.156,15.605
+		c0,17.292,14.065,31.355,31.357,31.355c6.317,0,12.373-1.882,17.479-5.322C69.82,64.399,56.557,74.953,40.671,74.953z"/>
+</g>
+</svg>
\ No newline at end of file
diff --git a/16-countries-page-from-api/src/main/resources/public/icons/search-svgrepo-com.svg b/16-countries-page-from-api/src/main/resources/public/icons/search-svgrepo-com.svg
new file mode 100644
index 0000000..648171e
--- /dev/null
+++ b/16-countries-page-from-api/src/main/resources/public/icons/search-svgrepo-com.svg
@@ -0,0 +1,4 @@
+<?xml version="1.0" encoding="utf-8"?><!-- Uploaded to: SVG Repo, www.svgrepo.com, Generator: SVG Repo Mixer Tools -->
+<svg width="800px" height="800px" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.7955 15.8111L21 21M18 10.5C18 14.6421 14.6421 18 10.5 18C6.35786 18 3 14.6421 3 10.5C3 6.35786 6.35786 3 10.5 3C14.6421 3 18 6.35786 18 10.5Z" stroke="#000000" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/16-countries-page-from-api/src/main/resources/public/output.css b/16-countries-page-from-api/src/main/resources/public/output.css
index 43a843e..0f74e03 100644
--- a/16-countries-page-from-api/src/main/resources/public/output.css
+++ b/16-countries-page-from-api/src/main/resources/public/output.css
@@ -532,6 +532,21 @@ video {
   margin-bottom: 1rem;
 }
 
+.mx-4 {
+  margin-left: 1rem;
+  margin-right: 1rem;
+}
+
+.mx-5 {
+  margin-left: 1.25rem;
+  margin-right: 1.25rem;
+}
+
+.mx-2 {
+  margin-left: 0.5rem;
+  margin-right: 0.5rem;
+}
+
 .mr-2 {
   margin-right: 0.5rem;
 }
@@ -616,6 +631,10 @@ video {
   height: 2.25rem;
 }
 
+.h-5 {
+  height: 1.25rem;
+}
+
 .w-16 {
   width: 4rem;
 }
@@ -636,6 +655,38 @@ video {
   width: 5rem;
 }
 
+.w-4 {
+  width: 1rem;
+}
+
+.w-6 {
+  width: 1.5rem;
+}
+
+.w-9 {
+  width: 2.25rem;
+}
+
+.w-10 {
+  width: 2.5rem;
+}
+
+.w-8 {
+  width: 2rem;
+}
+
+.w-36 {
+  width: 9rem;
+}
+
+.w-32 {
+  width: 8rem;
+}
+
+.w-28 {
+  width: 7rem;
+}
+
 .flex-grow {
   flex-grow: 1;
 }
@@ -698,6 +749,29 @@ video {
   row-gap: 2.5rem;
 }
 
+.gap-x-2 {
+  -moz-column-gap: 0.5rem;
+       column-gap: 0.5rem;
+}
+
+.gap-y-2 {
+  row-gap: 0.5rem;
+}
+
+.gap-y-6 {
+  row-gap: 1.5rem;
+}
+
+.gap-x-6 {
+  -moz-column-gap: 1.5rem;
+       column-gap: 1.5rem;
+}
+
+.gap-x-3 {
+  -moz-column-gap: 0.75rem;
+       column-gap: 0.75rem;
+}
+
 .space-y-1 > :not([hidden]) ~ :not([hidden]) {
   --tw-space-y-reverse: 0;
   margin-top: calc(0.25rem * calc(1 - var(--tw-space-y-reverse)));
diff --git a/16-countries-page-from-api/src/main/resources/templates/country.html b/16-countries-page-from-api/src/main/resources/templates/country.html
index eaca234..ed0a45e 100644
--- a/16-countries-page-from-api/src/main/resources/templates/country.html
+++ b/16-countries-page-from-api/src/main/resources/templates/country.html
@@ -30,8 +30,16 @@
     <nav class="h-32 px-8 py-10">
       <a
         href="/"
-        class="w-20 h-12 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2"
-        >arr Back</a
+        >
+          <div
+              class="h-9 w-28 bg-white drop-shadow-[0_0_3px_rgba(0,0,0,0.5)] text-md rounded px-5 py-2 flex flex-row gap-x-3 place-content-center"
+          >
+              <img src="../public/icons/back-svgrepo-com.svg"
+                   class="w-4 h-5"
+                   alt="" />
+              <p> Back </p>
+          </div>
+      </a
       >
     </nav>
 
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 fdeb2a7..dda44e6 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
@@ -24,7 +24,12 @@
       class="bg-white h-20 flex flex-row justify-between items-center px-4 shadow-md"
     >
       <h1 class="font-bold">Where in the world?</h1>
-      <p>Dark Mode</p>
+      <div class="flex flex-row gap-x-2">
+        <img src="../public/icons/half-moon-shape-svgrepo-com.svg"
+             class="w-4"
+             alt="" />
+        <p>Dark Mode</p>
+      </div>
     </header>
     <nav class="flex flex-col px-6 my-4 justify-around h-48">
       <form
@@ -36,7 +41,11 @@
         hx-push-url="true"
       >
         <div class="flex flex-row bg-white shadow-md h-14 rounded-lg">
-          <p class="w-16 grid place-content-center">IC</p>
+          <!-- <p class="w-16 grid place-content-center">IC</p> -->
+          <img src="../public/icons/search-svgrepo-com.svg"
+               th:src="@{~/public/icons/search-svgrepo-com.svg}"
+               class="w-6 mx-5"
+               alt="" />
           <input
             class="appearance-none flex-grow focus:outline-none mr-2"
             type="text"