diff --git a/components/ContentBox.js b/components/ContentBox.js
index a2c8e8e..1692ebd 100644
--- a/components/ContentBox.js
+++ b/components/ContentBox.js
@@ -1,7 +1,7 @@
 import styles from "./ContentBox.module.css";
 
 const ContentBox = ({ children }) => {
-  return <div className={styles.statsWrapper}>{children}</div>;
+  return <div className={styles.wrapper}>{children}</div>;
 };
 
 export default ContentBox;
diff --git a/components/ContentBox.module.css b/components/ContentBox.module.css
index 31dc882..6729738 100644
--- a/components/ContentBox.module.css
+++ b/components/ContentBox.module.css
@@ -1,4 +1,4 @@
-.statsWrapper {
+.wrapper {
   background-color: rgb(247, 247, 247);
   padding: 30px;
   text-align: right;
@@ -6,7 +6,7 @@
 }
 
 @media only screen and (max-width: 950px) {
-  .statsWrapper {
+  .wrapper {
     border-radius: 0;
   }
 }
diff --git a/components/Header.js b/components/Header.js
index 22612fd..499e126 100644
--- a/components/Header.js
+++ b/components/Header.js
@@ -1,7 +1,7 @@
 import styles from "./Header.module.css";
 
 const Header = ({ children }) => {
-  return <div className={styles.titleAndSearch}>{children}</div>;
+  return <div className={styles.wrapper}>{children}</div>;
 };
 
 export default Header;
diff --git a/components/Header.module.css b/components/Header.module.css
index 23bec5c..4d2463c 100644
--- a/components/Header.module.css
+++ b/components/Header.module.css
@@ -1,11 +1,11 @@
-.titleAndSearch {
+.wrapper {
   display: grid;
   grid-template-columns: 2fr 1fr;
   gap: 20px;
 }
 
 @media only screen and (max-width: 520px) {
-  .titleAndSearch {
+  .wrapper {
     grid-template-columns: 1fr;
     place-items: center;
   }
diff --git a/components/MainCard.js b/components/MainCard.js
index 4450df6..8c5cda0 100644
--- a/components/MainCard.js
+++ b/components/MainCard.js
@@ -13,12 +13,12 @@ const MainCard = ({
   weatherData,
 }) => {
   return (
-    <div className={styles.weatherWrapper}>
-      <h1 className={styles.locationTitle}>
+    <div className={styles.wrapper}>
+      <h1 className={styles.location}>
         {city}, {country}
       </h1>
 
-      <p className={styles.weatherDescription}>{description}</p>
+      <p className={styles.description}>{description}</p>
 
       <Image
         alt="weatherIcon"
diff --git a/components/MainCard.module.css b/components/MainCard.module.css
index e13d112..82f4148 100644
--- a/components/MainCard.module.css
+++ b/components/MainCard.module.css
@@ -1,13 +1,13 @@
-.weatherWrapper {
+.wrapper {
   padding: 30px;
 }
 
-.locationTitle {
+.location {
   font-size: 38px;
   margin-bottom: 10px;
 }
 
-.weatherDescription {
+.description {
   font-size: 24px;
   margin-bottom: 20px;
 }
diff --git a/components/Search.js b/components/Search.js
index 03e9dfc..e1f525e 100644
--- a/components/Search.js
+++ b/components/Search.js
@@ -3,7 +3,7 @@ import styles from "./Search.module.css";
 const Search = ({ placeHolder, value, onFocus, onChange, onKeyDown }) => {
   return (
     <input
-      className={styles.searchInput}
+      className={styles.input}
       type="text"
       placeholder={placeHolder}
       value={value}
diff --git a/components/Search.module.css b/components/Search.module.css
index f4d3e88..618fb9b 100644
--- a/components/Search.module.css
+++ b/components/Search.module.css
@@ -1,4 +1,4 @@
-.searchInput {
+.input {
   margin-bottom: 20px;
   height: 40px;
   border: none;
@@ -12,7 +12,7 @@
 }
 
 @media only screen and (max-width: 520px) {
-  .searchInput {
+  .input {
     width: 100%;
   }
 }