diff --git a/package-lock.json b/package-lock.json
index 2558216..3ab6d56 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,7 @@
       "dependencies": {
         "antd": "^5.16.4",
         "bootstrap": "^5.3.3",
+        "emailjs-com": "^3.2.0",
         "leaflet": "^1.9.4",
         "react": "^18.2.0",
         "react-bootstrap": "^2.10.2",
@@ -7275,6 +7276,15 @@
       "integrity": "sha512-/if4Ueg0GUQlhCrW2ZlXwDAm40ipuKo+OgeHInlL8sbjt+hzISxZK949fZeJaVsheamrzANXvw1zQTvbxTvSHw==",
       "license": "ISC"
     },
+    "node_modules/emailjs-com": {
+      "version": "3.2.0",
+      "resolved": "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz",
+      "integrity": "sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==",
+      "deprecated": "The SDK name changed to @emailjs/browser",
+      "engines": {
+        "node": ">=12.0.0"
+      }
+    },
     "node_modules/emittery": {
       "version": "0.8.1",
       "resolved": "https://registry.npmjs.org/emittery/-/emittery-0.8.1.tgz",
diff --git a/package.json b/package.json
index faa082e..92dc915 100644
--- a/package.json
+++ b/package.json
@@ -7,6 +7,7 @@
   "dependencies": {
     "antd": "^5.16.4",
     "bootstrap": "^5.3.3",
+    "emailjs-com": "^3.2.0",
     "leaflet": "^1.9.4",
     "react": "^18.2.0",
     "react-bootstrap": "^2.10.2",
diff --git a/public/Screenshot 2024-04-24 09.53.01.png b/public/Screenshot 2024-04-24 09.53.01.png
new file mode 100644
index 0000000..8f4ddc6
Binary files /dev/null and b/public/Screenshot 2024-04-24 09.53.01.png differ
diff --git a/public/Screenshot 2024-04-24 09.55.52.png b/public/Screenshot 2024-04-24 09.55.52.png
new file mode 100644
index 0000000..b7b6a4b
Binary files /dev/null and b/public/Screenshot 2024-04-24 09.55.52.png differ
diff --git a/public/Screenshot 2024-04-24 10.10.25.png b/public/Screenshot 2024-04-24 10.10.25.png
new file mode 100644
index 0000000..78ad57b
Binary files /dev/null and b/public/Screenshot 2024-04-24 10.10.25.png differ
diff --git a/public/Screenshot 2024-04-24 10.14.29.png b/public/Screenshot 2024-04-24 10.14.29.png
new file mode 100644
index 0000000..af28de9
Binary files /dev/null and b/public/Screenshot 2024-04-24 10.14.29.png differ
diff --git a/public/Screenshot 2024-04-24 10.18.14.png b/public/Screenshot 2024-04-24 10.18.14.png
new file mode 100644
index 0000000..8c50de5
Binary files /dev/null and b/public/Screenshot 2024-04-24 10.18.14.png differ
diff --git a/src/App.js b/src/App.js
index a92ee58..9d7c779 100644
--- a/src/App.js
+++ b/src/App.js
@@ -2,6 +2,7 @@ import React, { useState } from "react";
 import AppEn from "./components/AppEn";
 import AppDe from "./components/AppDe";
 import AppUkr from "./components/AppUkr";
+import 'bootstrap/dist/css/bootstrap.min.css';
 
 import "./styles.css";
 
diff --git a/src/components/Address.jsx b/src/components/Address.jsx
index 089a945..e480027 100644
--- a/src/components/Address.jsx
+++ b/src/components/Address.jsx
@@ -1,7 +1,7 @@
 export default function Address() {
   return (
     <div>
-      <h2>Postal adress</h2>
+      <h2 className="itemtitle">Postal adress</h2>
       <p>
         Oleksandr Lazurenko
         <br />
diff --git a/src/components/AppDe.js b/src/components/AppDe.js
index cbf9010..ec3a4e9 100644
--- a/src/components/AppDe.js
+++ b/src/components/AppDe.js
@@ -1,4 +1,4 @@
-import MyTabs from "./MyTabs";
+import MyTabsDe from "./MyTabsDe"
 import Header from "./Header";
 
 export default function AppDe() {
@@ -6,8 +6,7 @@ export default function AppDe() {
     <div>
       <div className="maincontainer">
         <Header />
-        <MyTabs />
-        <h1>Hallo. WIe geht es?</h1>
+        <MyTabsDe />
       </div>
     </div>
   );
diff --git a/src/components/Footer.jsx b/src/components/Footer.jsx
index 95f72cc..415e6a3 100644
--- a/src/components/Footer.jsx
+++ b/src/components/Footer.jsx
@@ -1,6 +1,6 @@
 export default function Footer() {
     return (
-        <footer>
+        <footer className="footer">
         <p>© 2024 AlexProf | Oleksandr Lazurenko</p>
         </footer>
     );
diff --git a/src/components/MyTabs.jsx b/src/components/MyTabs.jsx
index c9362cf..b7bc723 100644
--- a/src/components/MyTabs.jsx
+++ b/src/components/MyTabs.jsx
@@ -3,9 +3,10 @@ import "react-tabs/style/react-tabs.css";
 import Address from "./Address";
 import Certificates from "./certificates/Certificates";
 import Currentposition from "./Currentposition";
-import Social from "./Social";
+import Table from 'react-bootstrap/Table';
 import Footer from "./Footer";
 import { Card } from 'antd';
+import { IoLogoGithub } from "react-icons/io";
 const { Meta } = Card;
 
 const MyTabs = () => {
@@ -26,6 +27,7 @@ const MyTabs = () => {
         </Card>
         <Card hoverable title="Welcome to AlexProf!" bordered={false} className="homecard" >
           <p>Dear Ladies and Gentlemen,</p>
+          <br />
           <p>welcome to the personal portfolio webpage of Oleksandr Lazurenko, a fullstack web developer. I can build a website for you from the scratch, starting with the design and ending with the backend. My main stack is MERN (MongoDB, Express, React, Node.js). Here are my strengths:</p>
           <ol>
             <li>Punctual</li>
@@ -34,20 +36,93 @@ const MyTabs = () => {
             <li>Diligent</li>
           </ol>
             <p>If you would like to learn more, please do not hesitate to contact me.</p>
+            <p>With the best wishes,</p>
+            <br />
+            <p>Oleksandr Lazurenko</p>
             <hr />
             <Footer />
           </Card>
         </div>
       </TabPanel>
       <TabPanel>
-        <Social />
+        <h1 className="itemtitle">Oleksandr Lazurenko</h1>
+        <h2 className="itemtitle">Fullstack Web Developer</h2>
+        <p>If you are interessted about my CV and other credentials, please feel free to contact me using the contact form or write directly to my email: <a href="mailto: alex_prof@web.de">alex_prof@web.de</a></p>
+        <h3 className="itemtitle">Languages spoken:</h3>
+        <Table striped responsive>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Language</th>
+              <th>Level</th>
+              <th>European classification</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Ukrainian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Russian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>English</td>
+              <td>Advanced</td>
+              <td>C1</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>German</td>
+              <td>Upper-intermediate</td>
+              <td>B2</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>Chinese</td>
+              <td>Beginner's level</td>
+              <td>A2</td>
+            </tr>
+          </tbody>
+        </Table>
+        <p> My main stack is MERN (MongoDB, Express, React, Node.js):</p>
+        <ul>
+          <li>MongoDB</li>
+          <li>ExpressJS</li>
+          <li>React</li>
+          <li>Node.js</li>
+          <li>Vercel</li>
+          <li>Netlify</li>
+        </ul>
+        <p>I am always eager to learn, and learning some new skills is always fascinating to me.</p>
+        <hr />
+        <Footer />
       </TabPanel>
       <TabPanel>
-        <h2>Our Location</h2>
+        <h2 className="itemtitle">Our Location</h2>
         <Currentposition />
         <Address />
+        <h2 className="itemtitle">Contact me:</h2>
+        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBsAmK4Yo2B6t73BOQstj1dcvFHVT586PCFjQf3zlRn7NE_A/viewform?embedded=true" width="100%" height="676" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
+      </TabPanel>
+      <TabPanel>
+        <h2 className="itemtitle"><a href="https://github.com/alex090890"><IoLogoGithub /></a>Portfolio Repositories</h2>
+        <div className="imagecontainer">
+          <img src="/Screenshot 2024-04-24 09.53.01.png" alt="portfolio sample 1" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 09.55.52.png" ale="portfolio sample 2" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.10.25.png" alt="portfolio sample 3" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.14.29.png" alt="portfolio sample 4" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.18.14.png" alt="portfolio sample 5" className="imagecard" />
+        </div>
+        <hr />
+        <Footer />
       </TabPanel>
-      <TabPanel></TabPanel>
       <TabPanel>
         <Certificates />
       </TabPanel>
diff --git a/src/components/MyTabsDe.jsx b/src/components/MyTabsDe.jsx
new file mode 100644
index 0000000..715e1aa
--- /dev/null
+++ b/src/components/MyTabsDe.jsx
@@ -0,0 +1,133 @@
+import { Tab, Tabs, TabList, TabPanel } from "react-tabs";
+import "react-tabs/style/react-tabs.css";
+import Address from "./Address";
+import Certificates from "./certificates/Certificates";
+import Currentposition from "./Currentposition";
+import Table from 'react-bootstrap/Table';
+import Footer from "./Footer";
+import { Card } from 'antd';
+import { IoLogoGithub } from "react-icons/io";
+const { Meta } = Card;
+
+const MyTabsDe = () => {
+  return (
+    <Tabs>
+      <TabList>
+        <Tab>Startseite</Tab>
+        <Tab>Über mich</Tab>
+        <Tab>Kontakt</Tab>
+        <Tab>Portfolio-Repositorys</Tab>
+        <Tab>Zeugnisse</Tab>
+      </TabList>
+
+      <TabPanel>
+        <div className="homecontainer">
+          <Card hoverable className="homeimage" cover={<img alt="example" src="/Bewerbungsbild.jpg" />}>
+          <Meta title="Oleksandr Lazurenko" description="alex_prof@web.de" />
+        </Card>
+        <Card hoverable title="Welcome to AlexProf!" bordered={false} className="homecard" >
+          <p>Sehr geehrte Damen und Herren,</p>
+          <br />
+          <p>willkommen auf der persönlichen Portfolio-Webseite von Oleksandr Lazurenko, einem Fullstack-Webentwickler. Ich kann für Sie eine Website von Grund auf erstellen, angefangen beim Design bis hin zum Backend. Mein Hauptstack ist MERN (MongoDB, Express, React, Node.js). Hier sind meine Stärken:</p>
+          <ol>
+            <li>Punctual</li>
+            <li>Responsible</li>
+            <li>Reliable</li>
+            <li>Diligent</li>
+          </ol>
+            <p>If you would like to learn more, please do not hesitate to contact me.</p>
+            <p>With the best wishes,</p>
+            <br />
+            <p>Oleksandr Lazurenko</p>
+            <hr />
+            <Footer />
+          </Card>
+        </div>
+      </TabPanel>
+      <TabPanel>
+        <h1 className="itemtitle">Oleksandr Lazurenko</h1>
+        <h2 className="itemtitle">Fullstack Web Developer</h2>
+        <p>If you are interessted about my CV and other credentials, please feel free to contact me using the contact form or write directly to my email: <a href="mailto: alex_prof@web.de">alex_prof@web.de</a></p>
+        <h3 className="itemtitle">Languages spoken:</h3>
+        <Table striped responsive>
+          <thead>
+            <tr>
+              <th>#</th>
+              <th>Language</th>
+              <th>Level</th>
+              <th>European classification</th>
+            </tr>
+          </thead>
+          <tbody>
+            <tr>
+              <td>1</td>
+              <td>Ukrainian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>2</td>
+              <td>Russian</td>
+              <td>Mothertongue</td>
+              <td>C2</td>
+            </tr>
+            <tr>
+              <td>3</td>
+              <td>English</td>
+              <td>Advanced</td>
+              <td>C1</td>
+            </tr>
+            <tr>
+              <td>4</td>
+              <td>German</td>
+              <td>Upper-intermediate</td>
+              <td>B2</td>
+            </tr>
+            <tr>
+              <td>5</td>
+              <td>Chinese</td>
+              <td>Beginner's level</td>
+              <td>A2</td>
+            </tr>
+          </tbody>
+        </Table>
+        <p> My main stack is MERN (MongoDB, Express, React, Node.js):</p>
+        <ul>
+          <li>MongoDB</li>
+          <li>ExpressJS</li>
+          <li>React</li>
+          <li>Node.js</li>
+          <li>Vercel</li>
+          <li>Netlify</li>
+        </ul>
+        <p>I am always eager to learn, and learning some new skills is always fascinating to me.</p>
+        <hr />
+        <Footer />
+      </TabPanel>
+      <TabPanel>
+        <h2 className="itemtitle">Our Location</h2>
+        <Currentposition />
+        <Address />
+        <h2 className="itemtitle">Contact me:</h2>
+        <iframe src="https://docs.google.com/forms/d/e/1FAIpQLSfBsAmK4Yo2B6t73BOQstj1dcvFHVT586PCFjQf3zlRn7NE_A/viewform?embedded=true" width="100%" height="676" frameborder="0" marginheight="0" marginwidth="0">Loading...</iframe>
+      </TabPanel>
+      <TabPanel>
+        <h2 className="itemtitle"><a href="https://github.com/alex090890"><IoLogoGithub /></a>Portfolio Repositories</h2>
+        <div className="imagecontainer">
+          <img src="/Screenshot 2024-04-24 09.53.01.png" alt="portfolio sample 1" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 09.55.52.png" ale="portfolio sample 2" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.10.25.png" alt="portfolio sample 3" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.14.29.png" alt="portfolio sample 4" className="imagecard" />
+          <img src="/Screenshot 2024-04-24 10.18.14.png" alt="portfolio sample 5" className="imagecard" />
+        </div>
+        <hr />
+        <Footer />
+      </TabPanel>
+      <TabPanel>
+        <Certificates />
+      </TabPanel>
+    </Tabs>
+  );
+};
+
+export default MyTabsDe;
diff --git a/src/components/certificates/Certificates.jsx b/src/components/certificates/Certificates.jsx
index a11907e..4b327ec 100644
--- a/src/components/certificates/Certificates.jsx
+++ b/src/components/certificates/Certificates.jsx
@@ -1,12 +1,70 @@
 import React from "react";
 import englishscore from "./Englishscore.jpg";
+import goethe from "./Goethe.jpg";
+import chinese from "./Chinese HSK.jpg";
+import mongodb from "./Mongodb.png";
+import codecademy from "./Codecademy.png";
+import freecodecamp from "./Freecodecamp.png";
+import linkedin from "./Linkedin.png";
+import Carousel from 'react-bootstrap/Carousel';
 
 const Certificates = () => {
   return (
+    <>
     <div>
-      <h2>Language certificates</h2>
-      <img src={englishscore} alt="Englishscore" className="englishscore" />
+      <h2 className="itemtitle">Language certificates</h2>
+      <Carousel fade>
+        <Carousel.Item>
+          <img src={englishscore} alt="Englishscore" className="englishscore" />
+          <Carousel.Caption>
+            <h3>EnglischScore Certificate</h3>
+          </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={goethe} alt="Goethe" className="englishscore" />
+          <Carousel.Caption>
+            <h3>Goethe</h3>
+          </Carousel.Caption>
+        </Carousel.Item>
+        <Carousel.Item>
+          <img src={chinese} alt="Chinese" className="englishscore" />
+          <Carousel.Caption>
+            <h3>Chinese</h3>
+          </Carousel.Caption>
+        </Carousel.Item>
+      </Carousel>
     </div>
+    <div>
+        <h2 className="itemtitle">IT certificates</h2>
+        <Carousel>
+          <Carousel.Item>
+            <img src={codecademy} alt="Codecademy" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Codecademy</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+          <Carousel.Item>
+            <img src={freecodecamp} alt="Freecodecamp" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Freecodecamp</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+          <Carousel.Item>
+            <img src={mongodb} alt="Mongodb" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Mongodb</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+          <Carousel.Item>
+            <img src={linkedin} alt="Linkedin" className="englishscore" />
+            <Carousel.Caption>
+              <h3>Linkedin</h3>
+            </Carousel.Caption>
+          </Carousel.Item>
+        </Carousel>
+      </div>
+      
+    </>
   );
 };
 
diff --git a/src/components/certificates/Chinese HSK.jpg b/src/components/certificates/Chinese HSK.jpg
new file mode 100755
index 0000000..f3319bd
Binary files /dev/null and b/src/components/certificates/Chinese HSK.jpg differ
diff --git a/src/components/certificates/Codecademy.png b/src/components/certificates/Codecademy.png
new file mode 100644
index 0000000..3290276
Binary files /dev/null and b/src/components/certificates/Codecademy.png differ
diff --git a/src/components/certificates/Freecodecamp.png b/src/components/certificates/Freecodecamp.png
new file mode 100644
index 0000000..06ce26a
Binary files /dev/null and b/src/components/certificates/Freecodecamp.png differ
diff --git a/src/components/certificates/Goethe.jpg b/src/components/certificates/Goethe.jpg
new file mode 100755
index 0000000..3dafcb4
Binary files /dev/null and b/src/components/certificates/Goethe.jpg differ
diff --git a/src/components/certificates/Linkedin.png b/src/components/certificates/Linkedin.png
new file mode 100644
index 0000000..e97c688
Binary files /dev/null and b/src/components/certificates/Linkedin.png differ
diff --git a/src/components/certificates/Mongodb.png b/src/components/certificates/Mongodb.png
new file mode 100644
index 0000000..e2cda7f
Binary files /dev/null and b/src/components/certificates/Mongodb.png differ
diff --git a/src/styles.css b/src/styles.css
index ec013ca..0ada668 100644
--- a/src/styles.css
+++ b/src/styles.css
@@ -66,7 +66,8 @@ html {
 }
 
 .englishscore {
-  width: 300px;
+  width: 70%;
+  margin: 10px 15%;
 }
 
 .langSwitch {
@@ -101,6 +102,26 @@ html {
   cursor: pointer!important;;
 }
 
+.footer {
+  text-align: center;
+}
+
+.imagecontainer {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  grid-gap: 20px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  .imagecard {
+    width: 100%;
+    margin: 10px;
+  }
+}
+
+.itemtitle {
+  text-align: center;
+}
+
 @media screen and (max-width: 600px) {
   .homecontainer {
     grid-template-columns: 1fr;
@@ -109,6 +130,10 @@ html {
   .homecard {
     width: 100%;
   }
+
+  .imagecontainer {
+    display: inline-block;
+  }
 }
 
 @media screen and (max-width: 1024px) {
diff --git a/yarn.lock b/yarn.lock
index ba13dc5..d52bd82 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -4168,6 +4168,11 @@ electron-to-chromium@^1.4.668:
   resolved "https://registry.npmjs.org/electron-to-chromium/-/electron-to-chromium-1.4.693.tgz"
   integrity sha512-/if4Ueg0GUQlhCrW2ZlXwDAm40ipuKo+OgeHInlL8sbjt+hzISxZK949fZeJaVsheamrzANXvw1zQTvbxTvSHw==
 
+emailjs-com@^3.2.0:
+  version "3.2.0"
+  resolved "https://registry.npmjs.org/emailjs-com/-/emailjs-com-3.2.0.tgz"
+  integrity sha512-Prbz3E1usiAwGjMNYRv6EsJ5c373cX7/AGnZQwOfrpNJrygQJ15+E9OOq4pU8yC977Z5xMetRfc3WmDX6RcjAA==
+
 emittery@^0.10.2:
   version "0.10.2"
   resolved "https://registry.npmjs.org/emittery/-/emittery-0.10.2.tgz"