diff --git a/src/App.js b/src/App.js
index 850ebd6..c46de2e 100644
--- a/src/App.js
+++ b/src/App.js
@@ -308,7 +308,8 @@ function App() {
                 placeholder={active ? '' : 'Explore cities weather'}
                 onChange={(e) => searchCountries(e.target.value)}
                 required
-                className='input_search'
+                className={isDark ? 'input_search_dark' : 'input_search'}
+
               />
               <div className='list-dropdown'>
                 {countryMatch &&
diff --git a/src/index.css b/src/index.css
index 256b798..277a266 100644
--- a/src/index.css
+++ b/src/index.css
@@ -57,7 +57,7 @@ body {
 
 .container {
   width: 100%;
-  height: 100vh;
+  height: 100%;
   background-image: linear-gradient(
     45deg,
     var(--bgColor1) 0%,
@@ -141,9 +141,17 @@ body {
   border-radius: 0.75rem;
 }
 
+.input_search::-webkit-input-placeholder {
+  color: rgb(26, 24, 24);
+}
+
+.input_search_dark::-webkit-input-placeholder {
+  color: rgb(232, 219, 219);
+}
+
 .selected-language {
   padding: 8px;
-  background-color:#7c7979;
+  background-color: #7c7979;
   border: none;
   border-radius: 0.75rem;
   margin-bottom: 15px;
@@ -248,21 +256,20 @@ body {
   margin-top: 3rem;
 }
 
-.list-dropdown{
+.list-dropdown {
   flex-wrap: wrap;
   /* margin-top:2px; */
-  height:62px;
+  height: 62px;
   color: #ffffff;
 }
 
 @media only screen and (max-width: 1024px) {
-
-  .label{
+  .label {
     width: 54px !important;
     height: 31px !important;
   }
 
-  .ball{
+  .ball {
     width: 23px !important;
     height: 23px !important;
     border-radius: 43% !important;
@@ -295,7 +302,7 @@ body {
   .search h2 {
     font-size: 1.75rem;
   }
-  .input_search{
+  .input_search {
     height: 2000px;
   }
   .search-bar {
@@ -382,7 +389,6 @@ body {
   }
   .search h2 {
     font-size: 1rem;
-
   }
   .search-bar {
     display: flex;
@@ -460,7 +466,6 @@ body {
   color: blue;
 }
 
-
 .label {
   width: 50px;
   height: 26px;