diff --git a/pages/index.js b/pages/index.js
index 789cc3c..858e677 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -339,14 +339,16 @@ export default function Home() {
     </div>
   ) : weatherData && weatherData.message ? (
     <div className={styles.errScr}>
-      <h1 style={{ marginBottom: "30px" }}>City not found, try again!</h1>
-      <input
-        type="text"
-        className={styles.searchInput}
-        onFocus={(e) => (e.target.value = "")}
-        onChange={(e) => setInput(e.target.value)}
-        onKeyDown={(e) => enterKeydown(e)}
-      />
+      <div>
+        <h1 style={{ marginBottom: "30px" }}>City not found, try again!</h1>
+        <input
+          type="text"
+          className={styles.searchInput}
+          onFocus={(e) => (e.target.value = "")}
+          onChange={(e) => setInput(e.target.value)}
+          onKeyDown={(e) => enterKeydown(e)}
+        />
+      </div>
     </div>
   ) : (
     <h1>Loading data...</h1>
diff --git a/styles/Home.module.css b/styles/Home.module.css
index cf66f5c..81095ca 100644
--- a/styles/Home.module.css
+++ b/styles/Home.module.css
@@ -74,7 +74,6 @@
   font-size: 20px;
   text-align: right;
   border-radius: 10px;
-  /* border: 2px solid black; */
   font-family: "Varela Round", sans-serif;
   font-size: 18px;
 }
@@ -91,6 +90,16 @@
 
 .errScr {
   text-align: center;
+  height: 100vh;
+  max-width: 300px;
+  display: grid;
+  place-items: center;
+  padding: 20px;
+  margin: 0 auto;
+}
+
+.errSearchInput {
+  max-width: 100%;
 }
 
 @media only screen and (max-width: 950px) {