diff --git a/src/App.css b/src/App.module.css
similarity index 100%
rename from src/App.css
rename to src/App.module.css
diff --git a/src/App.tsx b/src/App.tsx
index a111ff31..f6d2d9be 100644
--- a/src/App.tsx
+++ b/src/App.tsx
@@ -1,19 +1,13 @@
-import reactLogo from '@/assets/react.svg';
-
+import { AboutComponent } from './components/about/AboutComponent.tsx';
 import { HeaderComponent } from './components/header/Header.component.tsx';
 
-import './App.css';
+import './App.module.css';
 
 function App() {
     return (
         <>
             <HeaderComponent />
-            <main className="home">
-                <h1>
-                    <img src={reactLogo} alt="React logo" />
-                    Home page
-                </h1>
-            </main>
+            <AboutComponent />
         </>
     );
 }
diff --git a/src/assets/about .jpg b/src/assets/about .jpg
new file mode 100644
index 00000000..d8bf2c8b
Binary files /dev/null and b/src/assets/about .jpg differ
diff --git a/src/components/about/AboutComponent.tsx b/src/components/about/AboutComponent.tsx
new file mode 100644
index 00000000..98c6c8cc
--- /dev/null
+++ b/src/components/about/AboutComponent.tsx
@@ -0,0 +1,28 @@
+import aboutImg from '../../assets/about .jpg';
+
+import AboutCSS from './about.module.css';
+
+export const AboutComponent = () => (
+    <div className={AboutCSS.about}>
+        <img className={AboutCSS.img} src={aboutImg} alt="AboutIMG" />
+        <div className={AboutCSS.text}>
+            <h1 className={AboutCSS.title}>About me</h1>
+            <div className={AboutCSS.description}>
+                <p>
+                    Hi! My name is Oleh, and I&apos;m a Junior Frontend Developer. I am already familiar with main Web Technologies like
+                    React, HTML, CSS, JavaScript and Git version control system.
+                </p>
+                <p>
+                    This page was developed during the course &apos;
+                    <a href="https://www.mastersacademy.education/frontend-react-it">Intro to React</a>&apos; from Masters Academy in 2024.
+                </p>
+                <p>
+                    This is a social project from MOCG company where I got an opportunity to work with Frontend mentors and to create my own
+                    small project for the portfolio. <br /> <br />
+                    You can contact me via <a href="https://t.me/medushivskyi">Telegram</a> and check out my
+                    <a href="https://github.com/legogoUA">GitHub</a>.
+                </p>
+            </div>
+        </div>
+    </div>
+);
diff --git a/src/components/about/about.module.css b/src/components/about/about.module.css
new file mode 100644
index 00000000..e7d22ab6
--- /dev/null
+++ b/src/components/about/about.module.css
@@ -0,0 +1,47 @@
+
+@media (min-width: 390px) {
+
+  .about {
+    width: 390px;
+    display: flex;
+    flex-direction: column;
+    margin: 0 auto;
+    padding: 50px;
+  }
+
+  .img {
+    width: 330px;
+    height: 292px;
+    border-radius: 30px;
+    margin-bottom: 20px;
+  }
+
+  .title {
+    font-size: 2em;
+    margin-bottom: 10px;
+  }
+
+  .description {
+    line-height: 1.5;
+    width: 330px;
+  }
+}
+
+@media (min-width: 1280px) {
+
+  .about {
+    width: 1280px;
+    flex-direction: row-reverse;
+    gap: 75px;
+  }
+
+  .img {
+    width: 500px;
+    height: 489px;
+    margin-top: 70px;
+  }
+
+  .description {
+    width: 575px;
+  }
+}