diff --git a/public/motocross.png b/public/motocross.png
index 67c82b1..7045b7d 100644
Binary files a/public/motocross.png and b/public/motocross.png differ
diff --git a/src/components/reusable/footer.tsx b/src/components/reusable/footer.tsx
index 21478d4..0b15a00 100644
--- a/src/components/reusable/footer.tsx
+++ b/src/components/reusable/footer.tsx
@@ -8,7 +8,7 @@ import {Img} from "react-image";
 
 const Footer = () => {
     return (
-        <footer className={"bg-black-2 pt-4"}>
+        <footer className={"bg-black-4 pt-4"}>
             <div className="wrapper text-white grid grid-cols-12">
                 <div className="logo col-span-12 xl:col-span-3">
                     <Link href={"/"} className={"transition-none pt-8 pb-2 block"}>
@@ -32,12 +32,12 @@ const Footer = () => {
                 <div className="col-span-12 xl:col-span-3 xl:col-start-5 mt-5">
                     <h2 className={"text-2xl hover:text-primary transition-colors"}>Бренд</h2>
                     <ul className={"text-gray-3 text-sm font-semibold my-2"}>
-                        <li className={"hover:text-primary transition-colors"}>Персонализация</li>
-                        <li className={"hover:text-primary transition-colors"}>Технологии</li>
-                        <li className={"hover:text-primary transition-colors"}>Производство</li>
+                        <li className={"hover:text-primary transition-colors"}><Link href={"/personalization"}>Персонализация</Link></li>
+                        <li className={"hover:text-primary transition-colors"}><Link href={"/technology"}>Технологии</Link></li>
+                        <li className={"hover:text-primary transition-colors"}><Link href={"/production"}>Производство</Link></li>
                         <li className={"hover:text-primary transition-colors"}><Link href={"/news"}>Новости</Link></li>
                         <li className={"hover:text-primary transition-colors"}>Карьера</li>
-                        <li className={"hover:text-primary transition-colors"}>Миссия</li>
+                        <li className={"hover:text-primary transition-colors"}><Link href={"/mission"}>Миссия</Link></li>
                     </ul>
                 </div>
                 <div className="col-span-12 xl:col-span-3 mt-5">
diff --git a/src/components/reusable/wrapper.tsx b/src/components/reusable/wrapper.tsx
index 14f2e0d..e4a1637 100644
--- a/src/components/reusable/wrapper.tsx
+++ b/src/components/reusable/wrapper.tsx
@@ -49,7 +49,7 @@ const Wrapper = (props: WrapperProps) => {
 
 export const WrapperDark =(props: WrapperProps) => {
     return <>
-        <section className={"bg-black-2 text-white py-7"}>
+        <section className={"bg-black-4 text-white py-7"}>
             <div className="wrapper">
                 {
                     props.breadcrumbs &&
diff --git a/src/pages/articles/index.tsx b/src/pages/articles/index.tsx
index cd791b7..8c7e3e0 100644
--- a/src/pages/articles/index.tsx
+++ b/src/pages/articles/index.tsx
@@ -1,6 +1,7 @@
 import {Img} from "react-image";
 import {useQuery} from "@tanstack/react-query";
 import LocalAPI from "@/service/localAPI";
+// @ts-ignore
 import {News} from "@/service/types/local";
 import {WrapperDark} from "@/components/reusable/wrapper";
 import {Skeleton} from "@nextui-org/react";
diff --git a/src/pages/catalog/[code].tsx b/src/pages/catalog/[code].tsx
index 1ae3b73..b5929c8 100644
--- a/src/pages/catalog/[code].tsx
+++ b/src/pages/catalog/[code].tsx
@@ -56,7 +56,7 @@ const OilCard = ({product}: InferGetStaticPropsType<typeof getStaticProps>) => {
                         <BreadcrumbItem>{product.name}</BreadcrumbItem>
                     </Breadcrumbs>
                 </div>
-                <div className="wrapper mt-12 grid grid-cols-1 lg:grid-cols-2 gap-4 items-center">
+                <div className="wrapper mt-12 mb-12 grid grid-cols-1 lg:grid-cols-2 gap-4 items-center">
                     {isClient && product.properties.main_image && <Img src={"https://relynolli.ru/upload/" + product.properties.main_image[0]} alt={product.name} className={"object-center max-w-[300px] mx-auto"} loader={<Spinner />}/>}
                     <div className="right-block mt-4">
                         <span
diff --git a/src/pages/mission.tsx b/src/pages/mission.tsx
index 53ea3f6..82aee5e 100644
--- a/src/pages/mission.tsx
+++ b/src/pages/mission.tsx
@@ -6,32 +6,31 @@ const Mission = () => {
     return (<Wrapper title="Миссия Relynolli ®"
         breadcrumbs={[{ name: "Миссия Relynolli ®", link: "/mission" }]}>
 
-            <div className="content text-base [&_h2]:text-2xl [&_section]:mb-10 [&_h2]:xl:text-4xl [&_h2]:mb-6 [&_h2]:font-bold [&_p]:xl:text-xl [&_p]:mb-9 [&_ul>li]:xl:text-xl [&_ul]:list-disc [&_li]:mb-2">
-        <section>
-            <h2><i>Моторное масло является полноправным элементом конструкции, важнейшей «деталью» двигателя и во многом определяет надёжность его работы.</i></h2>
-            <p>Высокие температуры, высокие сдвиговые нагрузки, взаимодействие с агрессивной средой – всё это усложняет работу моторного масла в двигателе.</p>
-            <p>Создавая моторное масло марки Relynolli ®, мы исходили из передовых мировых разработок в области многофункциональных пакетов присадок. При производстве моторных масел и других смазочных материалов мы используем высококачественные базовые масла, самые современные пакеты присадок.</p>
-        </section>
+        <div className="content text-base [&_h2]:text-2xl [&_section]:mb-10 [&_h2]:xl:text-4xl [&_h2]:mb-6 [&_h2]:font-bold [&_p]:xl:text-xl [&_p]:mb-9 [&_ul>li]:xl:text-xl [&_ul]:list-disc [&_li]:mb-2">
+            <section>
+                <h2><i>Моторное масло является полноправным элементом конструкции, важнейшей «деталью» двигателя и во многом определяет надёжность его работы.</i></h2>
+                <p>Высокие температуры, высокие сдвиговые нагрузки, взаимодействие с агрессивной средой – всё это усложняет работу моторного масла в двигателе.</p>
+                <p>Создавая моторное масло марки Relynolli ®, мы исходили из передовых мировых разработок в области многофункциональных пакетов присадок. При производстве моторных масел и других смазочных материалов мы используем высококачественные базовые масла, самые современные пакеты присадок.</p>
+            </section>
 
-        <section>
-            <h2><i>Каждый образец масла, созданный по собственной рецептуре, проходит серию лабораторных исследований 
-и эксплуатационных испытаний.</i></h2>
-            <p>Мы особое внимание уделяем смазочной способности наших масел, то есть способности снижать износ и силу трения в сопряжениях деталей двигателя, не зависящей от вязкости масла.</p>
-            <p>Даже сейчас, когда Вы читаете этот текст, образцы моторных масел Relynolli ® проходят очередную серию испытаний и скоро «заступят» на защиту двигателей наших клиентов от износа.</p>
-<p>Энергосбережение и энергосберегающие свойства – ещё один важный аспект, которому мы отводим особую роль при разработке масел Relynolli ®. Главным элементом, позволяющим в тяжёлых условиях работы снизить механические потери в двигателе и, соответственно, расход топлива, является наш усиленный антифрикционный беззольный пакет присадок. Применение собственных антифрикционных технологий в моторных маслах Relynolli ® позволяет обеспечить снижение расхода топлива автомобилем до от 2% до 8%, в зависимости от условий эксплуатации.</p>
-<p>Мы постоянно совершенствуем наши смазочные материалы и открыто рассказываем о результатах лабораторных и эксплуатационных испытаний.</p>
-        </section>
+            <section>
+                <h2><i>Каждый образец масла, созданный по собственной рецептуре, проходит серию лабораторных исследований и эксплуатационных испытаний.</i></h2>
+                <p>Мы особое внимание уделяем смазочной способности наших масел, то есть способности снижать износ и силу трения в сопряжениях деталей двигателя, не зависящей от вязкости масла.</p>
+                <p>Даже сейчас, когда Вы читаете этот текст, образцы моторных масел Relynolli ® проходят очередную серию испытаний и скоро «заступят» на защиту двигателей наших клиентов от износа.</p>
+                <p>Энергосбережение и энергосберегающие свойства – ещё один важный аспект, которому мы отводим особую роль при разработке масел Relynolli ®. Главным элементом, позволяющим в тяжёлых условиях работы снизить механические потери в двигателе и, соответственно, расход топлива, является наш усиленный антифрикционный беззольный пакет присадок. Применение собственных антифрикционных технологий в моторных маслах Relynolli ® позволяет обеспечить снижение расхода топлива автомобилем до от 2% до 8%, в зависимости от условий эксплуатации.</p>
+                <p>Мы постоянно совершенствуем наши смазочные материалы и открыто рассказываем о результатах лабораторных и эксплуатационных испытаний.</p>
+            </section>
 
-        <section className="bg-[#E2E2E5] py-16 px-14 rounded-[20px]">
-            <div className="w-1/2 [&_svg]:mb-4">
-                <Logo />
-                <p>Зарегистрированная международная торговая марка.</p>
+            <section className="bg-[#E2E2E5] py-16 px-14 rounded-[20px]">
+                <div className="w-1/2 [&_svg]:mb-4">
+                    <Logo />
+                    <p>Зарегистрированная международная торговая марка.</p>
 
-            </div>
+                </div>
 
-        </section>
-        <p>Если у вас остались вопросы, позвоните на номер <Link className="" href="tel:74951919720">8 (495) 191 97 20</Link></p>
-            </div>
+            </section>
+            <p>Если у вас остались вопросы, позвоните на номер <Link className="" href="tel:74951919720">8 (495) 191 97 20</Link></p>
+        </div>
 
 
     </Wrapper>
diff --git a/src/pages/news/index.tsx b/src/pages/news/index.tsx
index 43150c0..342a8fd 100644
--- a/src/pages/news/index.tsx
+++ b/src/pages/news/index.tsx
@@ -1,6 +1,7 @@
 import {Img} from "react-image";
 import {useQuery} from "@tanstack/react-query";
 import LocalAPI from "@/service/localAPI";
+// @ts-ignore
 import {News} from "@/service/types/local";
 import {WrapperDark} from "@/components/reusable/wrapper";
 import {Skeleton} from "@nextui-org/react";
diff --git a/src/pages/personalization.tsx b/src/pages/personalization.tsx
index 4ef6ec1..5dcdc7a 100644
--- a/src/pages/personalization.tsx
+++ b/src/pages/personalization.tsx
@@ -1,31 +1,35 @@
 import Wrapper from "@/components/reusable/wrapper"
-
+import { Button, Checkbox } from "@nextui-org/react";
 import { Img } from "react-image"
+import {Input} from "@nextui-org/input";
+import Link from "next/link";
+import FormPersonalization from "@/components/reusable/formPersonalization";
+
 
 const Mission = () => {
     return (<Wrapper title="Персонализация от Relynolli ®"
         breadcrumbs={[{ name: "Персонализация от Relynolli ®", link: "/personalization" }]}>
 
-            <div className="content text-base [&_h2]:text-2xl [&_section]:mb-10 [&_h2]:xl:text-4xl [&_h2]:mb-6 [&_h2]:font-bold [&_p]:xl:text-xl [&_p]:mb-9 [&_ul>li]:xl:text-xl [&_ul]:list-disc [&_li]:mb-2">
-        <section>
-            <p>На базе собственного Научно-технического центра (НТЦ ООО «ТД Технохим Групп) наша компания готова доработать линейку продукции или услуги под запросы конкретного клиента.</p>
+        <div className="content text-base [&_h2]:text-2xl [&_section]:mb-10 [&_h2]:xl:text-4xl [&_h2]:mb-6 [&_h2]:font-bold [&_p]:xl:text-xl [&_p]:mb-9 [&_ul>li]:xl:text-xl [&_ul]:list-disc [&_li]:mb-2">
+            <section>
+                <p>На базе собственного Научно-технического центра (НТЦ ООО «ТД Технохим Групп) наша компания готова доработать линейку продукции или услуги под запросы конкретного клиента.</p>
 
-            <div className="img-block relative">
-                <Img src={"/motocross.png"} alt="motocross"></Img>
-                <h2 className="absolute top-[10%] right-[5%] w-1/2">Мы поддерживаем индивидуальность и помогаем в достижении цели. Искренне радуемся вашим победам и желанию быть лучше!</h2>
-            </div>
-        </section>
+                <div className="img-block relative">
+                    <Img src={"/motocross.png"} alt="motocross"></Img>
+                </div>
+            </section>
 
-        <section>
-            <h2>Приборостроение, НИОКР</h2>
-            <Img src={"/niokr.png"} alt="niokr"></Img> 
-        </section>
-        
-
-        <section>
-            <h2>Кастомизация</h2>
-            <p>(от англ. to customize — «настроить») — это индивидуализация продукции под заказ конкретного потребителя при помощи конструктивных доработок или настроек.</p>
-        </section>
+            <section>
+                <h2>Приборостроение, НИОКР</h2>
+                <Img src={"/niokr.png"} alt="niokr"></Img>
+            </section>
+            <section>
+                <FormPersonalization/>
+            </section>
+            <section>
+                <h2>Кастомизация</h2>
+                <p>(от англ. to customize — «настроить») — это индивидуализация продукции под заказ конкретного потребителя при помощи конструктивных доработок или настроек.</p>
+            </section>
 
         </div>
 
diff --git a/src/pages/production.tsx b/src/pages/production.tsx
index c775363..971196b 100644
--- a/src/pages/production.tsx
+++ b/src/pages/production.tsx
@@ -1,35 +1,43 @@
-import Wrapper from "@/components/reusable/wrapper"
+import { WrapperDark } from "@/components/reusable/wrapper"
+import { Card, CardHeader, Image } from "@nextui-org/react";
 
 import { Img } from "react-image"
 
 const Production = () => {
-    return (<Wrapper title=""
-        breadcrumbs={[{ name: "Персонализация от Relynolli ®", link: "/personalization" }]}>
+    return (<WrapperDark title="Производство"
+        breadcrumbs={[{ name: "Производство", link: "/production" }]}>
 
-            <div className="content text-base [&_h2]:text-2xl [&_section]:mb-10 [&_h2]:xl:text-4xl [&_h2]:mb-6 [&_h2]:font-bold [&_p]:xl:text-xl [&_p]:mb-9 [&_ul>li]:xl:text-xl [&_ul]:list-disc [&_li]:mb-2">
-        <section>
-            <p>На базе собственного Научно-технического центра (НТЦ ООО «ТД Технохим Групп) наша компания готова доработать линейку продукции или услуги под запросы конкретного клиента.</p>
+        <div className="content text-base [&_h2]:text-2xl [&_section]:mb-10 [&_h2]:xl:text-4xl [&_h2]:mb-6 [&_h2]:font-bold [&_p]:xl:text-xl [&_p]:mb-9 [&_ul>li]:xl:text-xl [&_ul]:list-disc [&_li]:mb-2">
+            <section>
+                <h2><i>Смазочные материалы Relynolli ® производятся в России. Мы стремимся к полной открытости для наших клиентов.</i></h2>
+                <p>При производстве смазочных материалов, в частности, моторных масел мы используем высококачественные базовые масла II, III и IV группы по классификации API, а также самые современные пакеты многофункциональных присадок, обеспечивающие нашим маслам высокий уровень вязкостно-температурных, моюще-диспергирующих, антиокислительных, противоизносных, антифрикционных и других свойств</p>
 
-            <div className="img-block relative">
-                <Img src={"/motocross.png"} alt="motocross"></Img>
-                <h2 className="absolute top-[10%] right-[5%] w-1/2">Мы поддерживаем индивидуальность и помогаем в достижении цели. Искренне радуемся вашим победам и желанию быть лучше!</h2>
-            </div>
-        </section>
+                <div className="img-block relative rounded-[40px]">
+                    <Img src={"/production.png"} alt="Производство"></Img>
+                </div>
+            </section>
+            {/* <section>
+                <h2 className="">Каталог масел</h2>
+            </section> */}
+            <section className="grid grid-cols-1 lg:grid-cols-1 gap-4 mb-6 [&>*]:h-[800px] [&>*]:md:h-[700px]">
+                <Card className="rounded-[40px]">
+                    <Image removeWrapper className={"w-full h-full object-cover brightness-100 relative z-15 rounded-[40px]"}
+                        src={"/chemicals.png"} alt="Химия"></Image>
 
-        <section>
-            <h2>Приборостроение, НИОКР</h2>
-            <Img src={"/niokr.png"} alt="niokr"></Img> 
-        </section>
-        
+                    <CardHeader className="absolute z-10 top-10 left-10 bottom-5 flex-col !items-start w-1/2 justify-between text-white">
+                        <div className="block">
+                            <h2 className={"text-2xl md:text-3xl leading-[35px] mb-6 "}><i>Сертификация продукции проводится при помощи испытаний НТЦ ООО «ТД Технохим Групп».</i></h2>
+                            <p className={"text-base md:text-xl text-white opacity-50"}>Каждая партия выпускаемого масла проходит комплекс лабораторных испытаний в научно-техническом центре нашей компании, а также в ведущих аккредитованных лабораториях страны.</p>
+                            <p className={"text-base md:text-xl text-white opacity-50"}>Мы активно занимаемся научно-исследовательскими работами в области создания собственных антифрикционных и противоизносных компонентов к смазочным маслам и пластичным смазками.</p>
+                        </div>
 
-        <section>
-            <h2>Кастомизация</h2>
-            <p>(от англ. to customize — «настроить») — это индивидуализация продукции под заказ конкретного потребителя при помощи конструктивных доработок или настроек.</p>
-        </section>
+                    </CardHeader>
+                </Card>
+            </section>
 
         </div>
 
-    </Wrapper>
+    </WrapperDark>
     )
 }
 
diff --git a/src/service/localAPI.ts b/src/service/localAPI.ts
index 2a1cdde..3c0589f 100644
--- a/src/service/localAPI.ts
+++ b/src/service/localAPI.ts
@@ -16,7 +16,8 @@ class LocalAPI {
 
     constructor() {
         this.instance = axios.create({
-            baseURL: process.env.NODE_ENV === "development" ? "http://localhost:8000" : "https://relynolli.ru"
+            // process.env.NODE_ENV === "development" ? "http://localhost:8000" : 
+            baseURL: "https://relynolli.ru"
         })
     }
 
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 39dbd40..0b556bf 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -23,7 +23,6 @@ const config: Config = {
         "yellow-1": "#FFD235",
         "gray-1": "#ccc",
         "gray-2": "#cacaca",
-        "gray-3": "#787878",
         "black-1": "#000",
         "black-2": "#262626",
       },
@@ -61,6 +60,7 @@ const config: Config = {
               "gray-1": "#ccc",
               "gray-2": "#cacaca",
               "gray-3": "#787878",
+              "gray-4": "rgb(74 74 74)",
               "black-1": "#000",
               "black-2": "#262626",
               "black-3": "#151515",