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 a0dc0c7..a8d3863 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
@@ -584,10 +584,6 @@ video {
   height: 1.25rem;
 }
 
-.h-60 {
-  height: 15rem;
-}
-
 .h-9 {
   height: 2.25rem;
 }
@@ -596,17 +592,45 @@ video {
   height: 350px;
 }
 
-.h-full {
-  height: 100%;
+.h-fit {
+  height: -moz-fit-content;
+  height: fit-content;
 }
 
 .h-screen {
   height: 100vh;
 }
 
-.h-fit {
-  height: -moz-fit-content;
-  height: fit-content;
+.h-6 {
+  height: 1.5rem;
+}
+
+.h-8 {
+  height: 2rem;
+}
+
+.h-full {
+  height: 100%;
+}
+
+.h-10 {
+  height: 2.5rem;
+}
+
+.h-3 {
+  height: 0.75rem;
+}
+
+.h-4 {
+  height: 1rem;
+}
+
+.h-7 {
+  height: 1.75rem;
+}
+
+.h-16 {
+  height: 4rem;
 }
 
 .max-h-60 {
@@ -637,12 +661,20 @@ video {
   width: 275px;
 }
 
+.w-full {
+  width: 100%;
+}
+
 .w-screen {
   width: 100vw;
 }
 
-.w-full {
-  width: 100%;
+.w-8 {
+  width: 2rem;
+}
+
+.w-12 {
+  width: 3rem;
 }
 
 .max-w-screen-xl {
@@ -687,18 +719,10 @@ video {
   place-content: center;
 }
 
-.content-center {
-  align-content: center;
-}
-
 .items-center {
   align-items: center;
 }
 
-.justify-center {
-  justify-content: center;
-}
-
 .justify-between {
   justify-content: space-between;
 }
@@ -772,6 +796,11 @@ video {
   border-width: 1px;
 }
 
+.border-yellow-400 {
+  --tw-border-opacity: 1;
+  border-color: rgb(250 204 21 / var(--tw-border-opacity));
+}
+
 .bg-very-light-gray {
   --tw-bg-opacity: 1;
   background-color: hsl(0 0% 98% / var(--tw-bg-opacity));
@@ -782,11 +811,6 @@ video {
   background-color: rgb(255 255 255 / var(--tw-bg-opacity));
 }
 
-.bg-red-200 {
-  --tw-bg-opacity: 1;
-  background-color: rgb(254 202 202 / var(--tw-bg-opacity));
-}
-
 .p-8 {
   padding: 2rem;
 }
@@ -826,6 +850,11 @@ video {
   padding-bottom: 0.5rem;
 }
 
+.px-12 {
+  padding-left: 3rem;
+  padding-right: 3rem;
+}
+
 .pb-10 {
   padding-bottom: 2.5rem;
 }
@@ -856,6 +885,21 @@ video {
   font-weight: 700;
 }
 
+.text-white {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+.text-gray-500 {
+  --tw-text-opacity: 1;
+  color: rgb(107 114 128 / var(--tw-text-opacity));
+}
+
+.text-black {
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .shadow-lg {
   --tw-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1), 0 4px 6px -4px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 10px 15px -3px var(--tw-shadow-color), 0 4px 6px -4px var(--tw-shadow-color);
@@ -929,23 +973,46 @@ html {
   outline-offset: 2px;
 }
 
+:is(.dark .dark\:border-dark-blue) {
+  --tw-border-opacity: 1;
+  border-color: hsl(209 23% 22% / var(--tw-border-opacity));
+}
+
+:is(.dark .dark\:bg-dark-blue) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(209 23% 22% / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-dark-gray) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(0 0% 52% / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:bg-very-dark-blue) {
+  --tw-bg-opacity: 1;
+  background-color: hsl(207 26% 17% / var(--tw-bg-opacity));
+}
+
+:is(.dark .dark\:text-white) {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:placeholder\:text-white)::-moz-placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
+:is(.dark .dark\:placeholder\:text-white)::placeholder {
+  --tw-text-opacity: 1;
+  color: rgb(255 255 255 / var(--tw-text-opacity));
+}
+
 @media (min-width: 768px) {
   .md\:col-span-full {
     grid-column: 1 / -1;
   }
 
-  .md\:row-span-full {
-    grid-row: 1 / -1;
-  }
-
-  .md\:row-end-\[-1\] {
-    grid-row-end: -1;
-  }
-
-  .md\:row-end-3 {
-    grid-row-end: 3;
-  }
-
   .md\:flex {
     display: flex;
   }
@@ -958,12 +1025,8 @@ html {
     height: 8rem;
   }
 
-  .md\:h-full {
-    height: 100%;
-  }
-
-  .md\:h-screen {
-    height: 100vh;
+  .md\:h-48 {
+    height: 12rem;
   }
 
   .md\:h-max {
@@ -971,99 +1034,55 @@ html {
     height: max-content;
   }
 
-  .md\:h-3\/5 {
-    height: 60%;
-  }
-
-  .md\:h-\[375px\] {
-    height: 375px;
-  }
-
-  .md\:h-60 {
-    height: 15rem;
-  }
-
-  .md\:h-48 {
-    height: 12rem;
-  }
-
-  .md\:h-\[400px\] {
-    height: 400px;
+  .md\:h-16 {
+    height: 4rem;
   }
 
   .md\:w-1\/4 {
     width: 25%;
   }
 
-  .md\:w-full {
-    width: 100%;
-  }
-
-  .md\:w-\[375px\] {
-    width: 375px;
-  }
-
-  .md\:w-\[450px\] {
-    width: 450px;
-  }
-
-  .md\:w-\[455px\] {
-    width: 455px;
-  }
-
-  .md\:w-9\/12 {
-    width: 75%;
-  }
-
   .md\:w-10\/12 {
     width: 83.333333%;
   }
 
-  .md\:w-11\/12 {
-    width: 91.666667%;
-  }
-
   .md\:w-32 {
     width: 8rem;
   }
 
-  .md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
-    grid-template-columns: repeat(auto-fill, 275px);
+  .md\:w-full {
+    width: 100%;
   }
 
   .md\:grid-cols-2 {
     grid-template-columns: repeat(2, minmax(0, 1fr));
   }
 
-  .md\:flex-row {
-    flex-direction: row;
+  .md\:grid-cols-\[repeat\(auto-fill\2c _275px\)\] {
+    grid-template-columns: repeat(auto-fill, 275px);
   }
 
-  .md\:flex-col {
-    flex-direction: column;
+  .md\:flex-row {
+    flex-direction: row;
   }
 
   .md\:items-center {
     align-items: center;
   }
 
-  .md\:justify-center {
-    justify-content: center;
-  }
-
   .md\:justify-around {
     justify-content: space-around;
   }
 
-  .md\:gap-y-10 {
-    row-gap: 2.5rem;
-  }
-
   .md\:gap-x-2 {
     -moz-column-gap: 0.5rem;
          column-gap: 0.5rem;
   }
 
+  .md\:gap-y-10 {
+    row-gap: 2.5rem;
+  }
+
   .md\:place-self-center {
     place-self: center;
   }
@@ -1073,18 +1092,14 @@ html {
     padding-right: 5rem;
   }
 
-  .md\:py-10 {
-    padding-top: 2.5rem;
-    padding-bottom: 2.5rem;
-  }
-
   .md\:py-1 {
     padding-top: 0.25rem;
     padding-bottom: 0.25rem;
   }
 
-  .md\:pr-1 {
-    padding-right: 0.25rem;
+  .md\:py-10 {
+    padding-top: 2.5rem;
+    padding-bottom: 2.5rem;
   }
 
   .md\:pr-2 {
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 dea49bb..065b3dd 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
@@ -13,7 +13,10 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
   </head>
-  <body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
+  <body
+    class="bg-very-light-gray h-screen flex flex-col dark:bg-very-dark-blue dark:text-white"
+    hx-boost="true"
+  >
     <!--[if lt IE 8]>
       <p class="browserupgrade">
         You are using an <strong>outdated</strong> browser. Please
@@ -21,24 +24,37 @@
         your experience.
       </p>
     <![endif]-->
-    <header
-      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center"
-      th:replace="~{index :: header}"
-    >
+    <header th:replace="~{index :: header}">
       <div
         class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
       >
         <a th:href="@{~/}" href="index.html"
           ><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
         </a>
-        <div class="flex flex-row gap-x-2">
-          <img
-            src="../public/icons/half-moon-shape-svgrepo-com.svg"
-            class="w-4"
-            alt=""
-          />
+        <button class="flex flex-row gap-x-2">
+          <svg
+            class="text-black dark:text-white h-6"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
           <p>Dark Mode</p>
-        </div>
+        </button>
+        <script type="text/javascript">
+          document
+            .getElementById("toggleDarkMode")
+            .addEventListener("click", function () {
+              document.documentElement.classList.toggle("dark");
+            });
+        </script>
       </div>
     </header>
     <nav
@@ -46,13 +62,30 @@
     >
       <a href="index.html" th:href="@{~/}" class="h-fit">
         <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"
+          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 dark:bg-dark-blue"
         >
-          <img
-            src="../public/icons/back-svgrepo-com.svg"
-            class="w-4 h-5"
-            alt=""
-          />
+          <!-- Back icon -->
+          <svg
+            class="text-black dark:text-white h-full"
+            width="24"
+            height="24"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
+          <!-- <img
+     src="../public/icons/back-svgrepo-com.svg"
+     class="w-4 h-5"
+     alt=""
+     /> -->
           <p>Back</p>
         </div>
       </a>
@@ -131,7 +164,7 @@
           <div class="grid grid-cols-3 gap-2">
             <a
               href="/"
-              class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1"
+              class="text-center min-h-9 bg-white drop-shadow text-md rounded px-5 py-2 md:w-32 md:py-1 dark:bg-dark-blue"
               th:each="border : ${borderCountries}"
               th:text="${border}"
               th:href="@{~/country(countryName=${border})}"
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 51f309d..fb17bcb 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
@@ -12,7 +12,10 @@
     <link rel="apple-touch-icon" href="/apple-touch-icon.png" />
     <!-- Place favicon.ico in the root directory -->
   </head>
-  <body class="bg-very-light-gray h-screen flex flex-col" hx-boost="true">
+  <body
+    class="bg-very-light-gray h-screen flex flex-col dark:bg-very-dark-blue dark:text-white"
+    hx-boost="true"
+  >
     <!--[if lt IE 8]>
       <p class="browserupgrade">
         You are using an <strong>outdated</strong> browser. Please
@@ -21,7 +24,7 @@
       </p>
     <![endif]-->
     <header
-      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none"
+      class="w-screen bg-white h-20 flex flex-row shadow-md place-content-center flex-none dark:bg-dark-blue"
     >
       <div
         class="flex-1 max-w-screen-xl h-20 flex flex-row justify-between items-center px-4"
@@ -29,14 +32,30 @@
         <a th:href="@{~/}" href="index.html"
           ><h1 class="grow font-bold md:text-2xl">Where in the world?</h1>
         </a>
-        <div class="flex flex-row gap-x-2">
-          <img
-            src="../public/icons/half-moon-shape-svgrepo-com.svg"
-            class="w-4"
-            alt=""
-          />
+        <button id="toggleDarkMode" class="flex flex-row gap-x-2">
+          <svg
+            class="text-black dark:text-white h-6"
+            viewBox="0 0 24 24"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              d="M21.7519 15.0019C20.597 15.4839 19.3296 15.75 18 15.75C12.6152 15.75 8.25 11.3848 8.25 5.99999C8.25 4.67039 8.51614 3.40296 8.99806 2.24805C5.47566 3.71785 3 7.19481 3 11.25C3 16.6348 7.36522 21 12.75 21C16.8052 21 20.2821 18.5243 21.7519 15.0019Z"
+              stroke="currentColor"
+              stroke-width="1.5"
+              stroke-linecap="round"
+              stroke-linejoin="round"
+            />
+          </svg>
           <p>Dark Mode</p>
-        </div>
+        </button>
+        <script type="text/javascript">
+          document
+            .getElementById("toggleDarkMode")
+            .addEventListener("click", function () {
+              document.documentElement.classList.toggle("dark");
+            });
+        </script>
       </div>
     </header>
     <nav
@@ -51,16 +70,25 @@
         hx-push-url="true"
         class="md:w-1/4"
       >
-        <div class="flex flex-row bg-white shadow-md h-14 rounded-lg md:w-full">
+        <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"
+        >
           <!-- <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=""
-          />
+          <svg
+            class="text-black dark:text-white h-6 px-7"
+            viewBox="0 0 20 20"
+            fill="none"
+            xmlns="http://www.w3.org/2000/svg"
+          >
+            <path
+              fill-rule="evenodd"
+              clip-rule="evenodd"
+              d="M9 3.5C5.96243 3.5 3.5 5.96243 3.5 9C3.5 12.0376 5.96243 14.5 9 14.5C10.519 14.5 11.893 13.8852 12.8891 12.8891C13.8852 11.893 14.5 10.519 14.5 9C14.5 5.96243 12.0376 3.5 9 3.5ZM2 9C2 5.13401 5.13401 2 9 2C12.866 2 16 5.13401 16 9C16 10.6625 15.4197 12.1906 14.4517 13.3911L17.7803 16.7197C18.0732 17.0126 18.0732 17.4874 17.7803 17.7803C17.4874 18.0732 17.0126 18.0732 16.7197 17.7803L13.3911 14.4517C12.1906 15.4197 10.6625 16 9 16C5.13401 16 2 12.866 2 9Z"
+              fill="currentColor"
+            />
+          </svg>
           <input
-            class="appearance-none flex-grow focus:outline-none mr-2"
+            class="appearance-none flex-grow focus:outline-none mr-2 dark:bg-dark-blue dark:placeholder:text-white"
             type="text"
             id="country-name-input"
             name="countryName"
@@ -79,7 +107,7 @@
       <form>
         <select
           name="region"
-          class="block w-62 mt-1 h-12 w-64 bg-white shadow-lg rounded-md shadow-sm focus:outline-none px-7"
+          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-target="#countries-main-list"
         >
@@ -116,7 +144,7 @@
         th:each="country : ${countriesList}"
         id="germany"
         th:id="${country.alpha3Code}"
-        class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
+        class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
       >
         <a
           href="country.html"
@@ -165,7 +193,7 @@
 
       <article
         id="usa"
-        class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
+        class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
         th:remove="all"
       >
         <img
@@ -194,7 +222,7 @@
 
       <article
         id="Brazil"
-        class="bg-white h-[350px] w-[275px] border flex flex-col rounded-lg shadow-lg"
+        class="bg-white h-[350px] w-[275px] flex flex-col rounded-lg shadow-lg dark:bg-dark-blue"
         th:remove="all"
       >
         <img
diff --git a/16-countries-page-from-api/tailwind.config.js b/16-countries-page-from-api/tailwind.config.js
index 5577f10..64a792d 100644
--- a/16-countries-page-from-api/tailwind.config.js
+++ b/16-countries-page-from-api/tailwind.config.js
@@ -1,11 +1,14 @@
 /** @type {import('tailwindcss').Config} */
 module.exports = {
   content: ["./src/main/resources/**/*.html"],
+  darkMode: 'class',
   theme: {
     extend: {
       colors: {
-        'dark-gray': 'hsl(0, 0%, 52%)',
-        'very-light-gray': 'hsl(0, 0%, 98%)',
+        'dark-gray': 'hsl(0, 0%, 52%)', // light mode input
+        'very-light-gray': 'hsl(0, 0%, 98%)', // light mode bg
+        'dark-blue': 'hsl(209, 23%, 22%)', // dark mode elements
+        'very-dark-blue': 'hsl(207, 26%, 17%)', // dark mode bg
       },
       fontFamily: {
         'sans': ['NunitoSans', 'sans-serif'],