diff --git a/src/assets/image/encourages/dog2.png b/src/assets/image/encourages/dog2.png
new file mode 100644
index 0000000..f64db5e
Binary files /dev/null and b/src/assets/image/encourages/dog2.png differ
diff --git a/src/components/Navbar/navbar.module.scss b/src/components/Navbar/navbar.module.scss
index 95f348b..d61b175 100644
--- a/src/components/Navbar/navbar.module.scss
+++ b/src/components/Navbar/navbar.module.scss
@@ -151,6 +151,7 @@
     backdrop-filter: blur(8px);
     display: flex;
     height: 120px;
+    z-index: 1;
 
     &__logo {
       margin: 10px 20px;
diff --git a/src/components/Section/Section.jsx b/src/components/Section/Section.jsx
new file mode 100644
index 0000000..9405336
--- /dev/null
+++ b/src/components/Section/Section.jsx
@@ -0,0 +1,10 @@
+import PropTypes from "prop-types";
+import styles from "./section.module.scss";
+
+export const Section = ({ children }) => {
+  return <div className={styles.wrapper}>{children}</div>;
+};
+
+Section.propTypes = {
+  children: PropTypes.node.isRequired,
+};
diff --git a/src/components/Section/section.module.scss b/src/components/Section/section.module.scss
new file mode 100644
index 0000000..ed3414f
--- /dev/null
+++ b/src/components/Section/section.module.scss
@@ -0,0 +1,11 @@
+.wrapper {
+  display: flex;
+  flex-direction: row;
+}
+
+@media (max-width: 768px) {
+  .wrapper {
+    align-items: center;
+    justify-content: center;
+  }
+}
diff --git a/src/components/index.js b/src/components/index.js
index b72d7a8..37dfa58 100644
--- a/src/components/index.js
+++ b/src/components/index.js
@@ -8,3 +8,4 @@ export { Logo } from "./Logo/Logo";
 export { Navbar } from "./Navbar/Navbar";
 export { SearchForm } from "./SearchForm/SearchForm";
 export { Select } from "./Select/Select";
+export { Section } from "./Section/Section";
diff --git a/src/modules/main/components/EncourageSection/EncourageSection.jsx b/src/modules/main/components/EncourageSection/EncourageSection.jsx
new file mode 100644
index 0000000..95d96dd
--- /dev/null
+++ b/src/modules/main/components/EncourageSection/EncourageSection.jsx
@@ -0,0 +1,21 @@
+import styles from "./encourage_section.module.scss";
+import dog from "../../../../assets/image/encourages/dog.png";
+import { Section } from "../../../../components";
+
+export const EncourageSection = () => {
+  return (
+    <Section>
+      <div className={styles.section__description}>
+        <h3 className={styles.description__title}>
+          W trosce o potrzeby Twojego zwierzaka
+        </h3>
+        <p className={styles.description__text}>
+          Kompleksowa wyszukiwarka usług dla zwierząt, która powstała z myślą o
+          czworonogach i ich właścicielach, ułatwiając im dostęp do szerokiego
+          grona specjalistów.
+        </p>
+      </div>
+      <img className={styles.section__image} src={dog} alt="" />
+    </Section>
+  );
+};
diff --git a/src/modules/main/components/EncourageSection/Section.jsx b/src/modules/main/components/EncourageSection/Section.jsx
deleted file mode 100644
index 08c1265..0000000
--- a/src/modules/main/components/EncourageSection/Section.jsx
+++ /dev/null
@@ -1,20 +0,0 @@
-import PropTypes from "prop-types";
-import styles from "./section.module.scss";
-
-export const Section = ({ imageSrc, title, description }) => {
-  return (
-    <section className={styles.section}>
-      <img className={styles.section__image} src={imageSrc} alt="" />
-      <div className={styles.description}>
-        <h3 className={styles.description__title}>{title}</h3>
-        <p className={styles.description__text}>{description}</p>
-      </div>
-    </section>
-  );
-};
-
-Section.propTypes = {
-  imageSrc: PropTypes.string.isRequired,
-  title: PropTypes.string.isRequired,
-  description: PropTypes.string.isRequired,
-};
diff --git a/src/modules/main/components/EncourageSection/encourage_section.module.scss b/src/modules/main/components/EncourageSection/encourage_section.module.scss
new file mode 100644
index 0000000..f9d5edb
--- /dev/null
+++ b/src/modules/main/components/EncourageSection/encourage_section.module.scss
@@ -0,0 +1,60 @@
+.section__description {
+  display: flex;
+  height: 600px;
+  flex-direction: column;
+  margin-left: 90px;
+}
+
+.description__title {
+  margin-top: 150px;
+  font-size: 36px;
+  color: #243b70;
+}
+
+.description__text {
+  margin-top: 0;
+  font-size: 25px;
+  color: #385cb0;
+  width: 650px;
+}
+
+.section__image {
+  width: 55%;
+  height: 650px;
+  position: absolute;
+  top: 0;
+  right: 0;
+  z-index: -1;
+}
+
+@media (max-width: 786px) {
+  .section__description {
+    display: flex;
+    justify-content: flex-start;
+    width: 100%;
+    margin: 0;
+    padding: 0 10px;
+    height: 500px;
+  }
+
+  .description__text {
+    width: 100%;
+    text-align: end;
+    text-shadow: 1px 3px 1px #000;
+    color: #fff;
+    margin-top: 20px;
+  }
+
+  .description__title {
+    text-shadow: 1px 2px 1px #000;
+    text-align: center;
+    margin: 25px 0;
+    color: #fff;
+    font-size: 30px;
+  }
+
+  .section__image {
+    width: 195%;
+    height: 75%;
+  }
+}
diff --git a/src/modules/main/components/EncourageSection/section.module.scss b/src/modules/main/components/EncourageSection/section.module.scss
deleted file mode 100644
index 4495ea6..0000000
--- a/src/modules/main/components/EncourageSection/section.module.scss
+++ /dev/null
@@ -1,27 +0,0 @@
-.section {
-  display: flex;
-  flex-direction: row-reverse;
-  justify-content: space-around;
-}
-
-.description {
-  width: 600px;
-  margin-top: 140px;
-
-  &__title {
-    margin-bottom: 50px;
-    font-size: 30px;
-  }
-}
-
-.description__text {
-  font-size: 20px;
-}
-
-.section__image {
-  width: 600px;
-  position: absolute;
-  top: 0;
-  right: 0;
-  z-index: -1;
-}
diff --git a/src/modules/main/pages/Main.jsx b/src/modules/main/pages/Main.jsx
index 6ad3484..6ef2287 100644
--- a/src/modules/main/pages/Main.jsx
+++ b/src/modules/main/pages/Main.jsx
@@ -1,20 +1,13 @@
-import { Section } from "../components/EncourageSection/Section";
-import dog from "../../../assets/image/encourages/dog.png";
-import { SearchForm } from "../../../components/SearchForm/SearchForm";
+import { EncourageSection } from "../components/EncourageSection/EncourageSection";
 import { DividerSection } from "../../../components/DividerSection/DividerSection";
-import { OpinionsSection } from "../../../components/OpinionsSection/OpinionsSection";
 import { ServicesList } from "../../../components/ServicesList/ServicesList";
+import { OpinionsSection, SearchForm } from "../../../components";
 
 export const Main = () => {
   return (
     <div>
+      <EncourageSection />
       <SearchForm />
-      <Section
-        imageSrc={dog}
-        title="W trosce o potrzeby Twojego zwierzaka"
-        description="Kompleksowa wyszukiwarka usług dla zwięrząt, która powstała z myślą 
-        o czworonogach i ich właścicielach ułatwiając im dostęp do szerokiego pasma specjalistów."
-      />
       <ServicesList />
       <OpinionsSection />
       <DividerSection />