diff --git a/README.md b/README.md
index c1e21d3..0a13510 100644
--- a/README.md
+++ b/README.md
@@ -1,2 +1,3 @@
 # chemistry
-Проект создан для практики HTML, CSS, JS. Думаю прогресс уже чувствуется)
+
+Проект создан для практики HTML, CSS, JS.
diff --git a/arrow.svg b/arrow.svg
new file mode 100644
index 0000000..640e82c
--- /dev/null
+++ b/arrow.svg
@@ -0,0 +1,3 @@
+<svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
+</svg>
\ No newline at end of file
diff --git a/images/og_image.png b/images/og_image.png
new file mode 100644
index 0000000..8e3ff38
Binary files /dev/null and b/images/og_image.png differ
diff --git a/index.html b/index.html
index 4eb4e51..cf29804 100644
--- a/index.html
+++ b/index.html
@@ -1,35 +1,39 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
-    <title>Мельчиков Иван | Минеральные фосфорные удобрения</title>
+    <title>Минеральные фосфорные удобрения | Мельчиков Иван | Школьный проект</title>
     <link rel="stylesheet" href="style.css">
-    
+    <meta property="og:title" content="Минеральные фосфорные удобрения">
+    <meta property="og:type" content="article">
+    <meta property="og:image" content="images/og_image.png">
+
 </head>
+
 <body>
     <div class="substrat_title">
         <h1>Минеральные фосфорные удобрения:</h1>
     </div>
 
     <div class="substrat">
-        
+
         <div class="dropdown">
             <button onclick="myFunction1()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
 
             </button>
-              <div id="myDropdown1" class="dropdown-content">
+            <div id="myDropdown1" class="dropdown-content">
                 <p>
                     <strong>Фосфор</strong> является важным элементом для развития растений.
                 </p>
                 <p>
-                    Он контролирует обменные процессы, способствуют росту корневой системы и повышают урожайность. 
-                    Избыток <strong>фосфора</strong> в почве не причиняет вреда растениям, так как они усваивают его в необходимом количестве.
+                    Он контролирует обменные процессы, способствуют росту корневой системы и повышают урожайность.
+                    Избыток <strong>фосфора</strong> в почве не причиняет вреда растениям, так как они усваивают его в
+                    необходимом количестве.
                 </p>
                 <p>
                     Признаки недостатка <strong>фосфора</strong>:
@@ -44,11 +48,11 @@ <h1>Минеральные фосфорные удобрения:</h1>
                     • Деформация листьев.
                 </p>
                 <p>
-                    <strong>Фосфорные</strong> удобрения рекомендуется вносить осенью под перекопку. 
+                    <strong>Фосфорные</strong> удобрения рекомендуется вносить осенью под перекопку.
                 </p>
                 <img src="images/image_1.jpg" alt="Фосфорные удобрения, красивая фотография">
-              </div>
             </div>
+        </div>
         <h3 id="myDropdown-text1">Свойства</h3>
     </div>
 
@@ -56,12 +60,10 @@ <h3 id="myDropdown-text1">Свойства</h3>
         <div class="dropdown">
             <button onclick="myFunction2()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
             </button>
-              <div id="myDropdown2" class="dropdown-content">
+            <div id="myDropdown2" class="dropdown-content">
                 <p>
                     <strong>1. Суперфосфат простой</strong>
                 </p>
@@ -84,7 +86,7 @@ <h3 id="myDropdown-text1">Свойства</h3>
                 </p>
                 <img src="images/image_3.jpg" alt="Фосфорные удобрения, красивая фотография">
             </div>
-            </div>
+        </div>
         <h3 id="myDropdown-text2">Водорастворимые фосфаты</h3>
     </div>
 
@@ -92,12 +94,10 @@ <h3 id="myDropdown-text2">Водорастворимые фосфаты</h3>
         <div class="dropdown">
             <button onclick="myFunction3()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
             </button>
-              <div id="myDropdown3" class="dropdown-content">
+            <div id="myDropdown3" class="dropdown-content">
                 <p>
                     <strong>1. Преципитат</strong>
                 </p>
@@ -126,11 +126,11 @@ <h3 id="myDropdown-text2">Водорастворимые фосфаты</h3>
                     <strong>5. Плавленный фосфат магния</strong>
                 </p>
                 <p>
-                20% P₂O₅, 12% MgO
+                    20% P₂O₅, 12% MgO
                 </p>
                 <img src="images/image_2.jpg" alt="Фосфорные удобрения, красивая фотография">
             </div>
-            </div>
+        </div>
         <h3 id="myDropdown-text3">Фосфаты нерастворимые в воде</h3>
     </div>
 
@@ -138,12 +138,10 @@ <h3 id="myDropdown-text3">Фосфаты нерастворимые в воде<
         <div class="dropdown">
             <button onclick="myFunction4()" class="dropbtn">
                 <div class="hide">
-                    <svg width="35" height="" viewBox="0 0 3117 1851" fill="none" xmlns="http://www.w3.org/2000/svg">
-                        <path d="M225.5 225.5L1564.5 1625.5L2892 225.5" stroke="white" stroke-width="450" stroke-linecap="round" stroke-linejoin="round"/>
-                    </svg>                
+                    <img alt="🠷" src="arrow.svg">
                 </div>
             </button>
-              <div id="myDropdown4" class="dropdown-content">
+            <div id="myDropdown4" class="dropdown-content">
                 <p>
                     <strong>1. Фосфорная мука</strong>
                 </p>
@@ -166,12 +164,13 @@ <h3 id="myDropdown-text3">Фосфаты нерастворимые в воде<
                     Fe₃(PO₄)₂8H₂O - 28% P₂O₅
                 </p>
                 <img src="images/image_4.jpg" alt="Фосфорные удобрения, красивая фотография">
-              </div>
             </div>
+        </div>
         <h3 id="myDropdown-text4">Фосфаты нерастворимые в воде и слабых кислотах</h3>
     </div>
     <p>Разработчик - Мельчиков Иван, тестовая версия</p>
 
     <script src="script.js"></script>
 </body>
-</html>
\ No newline at end of file
+
+</html>
diff --git a/style.css b/style.css
index 52f11c6..680a7dc 100644
--- a/style.css
+++ b/style.css
@@ -2,19 +2,23 @@ body {
     background-color: rgb(31, 31, 31);
 
 }
+
 img {
     width: 100%;
     border-radius: 10px;
 }
+
 p {
     font-family: Arial, Helvetica, sans-serif;
     color: rgb(255, 255, 255);
 }
+
 h1 {
     padding-left: 4%;
     font-family: 'Franklin Gothic Medium', 'Arial Narrow', Arial, sans-serif;
     color: white;
 }
+
 h3 {
     padding-left: 3%;
     padding-right: 20%;
@@ -22,6 +26,7 @@ h3 {
     color: white;
     display: flex;
 }
+
 .substrat {
     background-color: rgb(50, 50, 50);
     padding: 5px;
@@ -29,20 +34,24 @@ h3 {
     border-radius: 10px;
     display: flex;
 }
+
 .hide {
     background-color: rgb(31, 31, 31);
     padding: 5px;
     border-radius: 10px;
 }
+
 button {
     background: transparent;
     border: none !important;
     font-size:0;
 }
+
 .dropdown {
     position: relative;
     display: flex;
 }
+
 .dropdown-content {
     display: none;
     padding-left: 3%;
@@ -54,6 +63,7 @@ button {
     color: white;
     border-radius: 10px;
 }
+
 .show {display: block;}
 
 @media (min-width: 0px) {
@@ -65,7 +75,6 @@ button {
     }
 }
 
-
 @media (min-width: 900px) {
     .show-text {display: block;}
     .dropdown-content {
