diff --git a/FrontEnd/public/svg/arrow-down.svg b/FrontEnd/public/svg/arrow-down.svg
new file mode 100644
index 000000000..96d156440
--- /dev/null
+++ b/FrontEnd/public/svg/arrow-down.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1.90859 0.545653L7 5.63706L12.0914 0.545654L14 2.45425L7 9.45425L-1.66855e-07 2.45425L1.90859 0.545653Z" fill="black"/>
+</svg>
diff --git a/FrontEnd/public/svg/arrow-up.svg b/FrontEnd/public/svg/arrow-up.svg
new file mode 100644
index 000000000..224c57140
--- /dev/null
+++ b/FrontEnd/public/svg/arrow-up.svg
@@ -0,0 +1,3 @@
+<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M12.0914 9.45429L7 4.36288L1.90859 9.45429L3.33709e-07 7.54569L7 0.545693L14 7.54569L12.0914 9.45429Z" fill="black"/>
+</svg>
diff --git a/FrontEnd/src/App.css b/FrontEnd/src/App.css
index e5d392976..4066ac164 100644
--- a/FrontEnd/src/App.css
+++ b/FrontEnd/src/App.css
@@ -7,4 +7,4 @@
 
 body {
   width: 100vw;
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
index 51ecc41ff..0cb137dfd 100644
--- a/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
+++ b/FrontEnd/src/components/CompanyCard/CompanyCard.module.css
@@ -2,11 +2,11 @@
   width: 345px;
   height: 365px;
   display: block;
-  align-items: center;
-  border-radius: 6px;
+  border-radius: 11px;
   position: relative;
   margin: auto;
   background: var(--company-card-color);
+  box-shadow: 0px 0px 2px 0px #41404533;
 }
 
 .company-card:hover {
@@ -46,8 +46,8 @@
 .company-card__image {
   width: 345px;
   height: 188px;
-  border-top-left-radius: 6px;
-  border-top-right-radius: 6px;
+  border-top-left-radius: 11px;
+  border-top-right-radius: 11px;
   flex-shrink: 0;
   object-fit: cover;
 }
@@ -80,7 +80,8 @@
   text-align: left;
   padding-left: 16px;
   padding-top: 6px;
-  max-width: 300px;
+  max-width: 262px;
+  height: 35px;
 }
 
 .company-card__name-text {
@@ -115,7 +116,7 @@
   display: flex;
   flex-direction: row;
   justify-content: space-between;
-  width: 345px;
+  width: 302px;
   padding-left: 13px;
   padding-bottom: 2px;
 }
@@ -140,24 +141,24 @@
 }
 
 .company-card__logo {
-  width: 42.2px;
-  height: 42.2px;
+  width: 50px;
+  height: 50px;
   position: absolute;
-  right: 16px;
-  bottom: 153.9px;
+  right: 20px;
+  bottom: 152px;
 }
 
 .company-card__logo-ellipse {
-  width: 42.2px;
-  height: 42.2px;
+  width: 50px;
+  height: 50px;
   background: var(--company-card-color);
   border-radius: 9999px;
-  border: 1px solid #232424;
+  border: 1px solid var(--grey-border-color);
 }
 
 .company-card__logo-image {
-  width: 42.2px;
-  height: 42.2px;
+  width: 50px;
+  height: 50px;
   border-radius: 9999px;
   background: var(--company-card-color);
   object-fit: cover;
@@ -165,30 +166,10 @@
 
 .company-card__star {
   position: absolute;
-  left: 292px;
+  left: 296px;
   bottom: 13px;
 }
 
-@media only screen and (min-width: 768px) {
-
-  .company-card,
-  .company-card__image-frame,
-  .company-card__image,
-  .company-card__text-block {
-    width: 344px;
-  }
-
-  .company-card__star {
-    left: 296px;
-  }
-
-  .company-card__category-text {
-    max-width: 250px;
-  }
-
-}
-
-
 @media only screen and (min-width: 1512px) {
 
   .company-card,
@@ -203,6 +184,6 @@
   }
 
   .company-card__category-text {
-    max-width: 250px;
+    max-width: 220px;
   }
-}
\ No newline at end of file
+}
diff --git a/FrontEnd/src/components/Header/Navbar/BurgerMenu.jsx b/FrontEnd/src/components/Header/Navbar/BurgerMenu.jsx
index 01c6938ac..57efaa299 100644
--- a/FrontEnd/src/components/Header/Navbar/BurgerMenu.jsx
+++ b/FrontEnd/src/components/Header/Navbar/BurgerMenu.jsx
@@ -1,26 +1,24 @@
-import React, { useState } from 'react';
+import React from 'react';
 import Hamburger from 'hamburger-react';
 import Menu from './Menu';
 import SearchBox from './SearchBox';
+import { useBurgerMenu } from '../../../context/BurgerMenuContext';
 import css from './BurgerMenu.module.css';
 
 const BurgerMenu = () => {
-  const [isOpen, setOpen] = useState(false);
+  const { isOpen, toggleMenu } = useBurgerMenu();
 
   return (
     <div className={css.burgerMenuContainer}>
-      <Hamburger
-          toggled={isOpen}
-          toggle={setOpen}
-          size={30}
-          className={css.hamburgerIcon}
-      />
-      {isOpen && (
-        <div className={css.menu}>
-          <SearchBox className={css.searchBar} />
-          <Menu />
-        </div>
-      )}
+      <Hamburger toggled={isOpen} toggle={toggleMenu} size={30} className={css.hamburgerIcon} />
+      <div className={`${css.menu} ${isOpen ? css.open : ''}`}>
+        {isOpen && (
+          <>
+            <SearchBox className={css.searchBar} />
+            <Menu />
+          </>
+        )}
+      </div>
     </div>
   );
 };
diff --git a/FrontEnd/src/components/Header/Navbar/BurgerMenu.module.css b/FrontEnd/src/components/Header/Navbar/BurgerMenu.module.css
index 1dd3bf522..1af406e9d 100644
--- a/FrontEnd/src/components/Header/Navbar/BurgerMenu.module.css
+++ b/FrontEnd/src/components/Header/Navbar/BurgerMenu.module.css
@@ -1,17 +1,23 @@
-.burgerMenuContainer {
-    position: relative;
-    top: -4px;
+.menu {
+  position: absolute;
+  top: 61px;
+  left: -100vw;
+  width: 100vw;
+  background-color: white;
+  overflow: hidden;
+  max-height: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  transition: max-height 0.3s ease, left 0.3s ease, padding 0.3s ease;
 }
 
-.menu {
-    position: absolute;
-    top: 61px;
-    left: calc(-100vw + 80px);
-    width: calc(100vw - 40px);
-    background-color: white;
-    padding: 30px 20px;
-    display: flex;
-    flex-direction: column;
-    gap: 20px;
-    z-index: 1000;
+.menu.open {
+  left: 0;
+  max-height: 180px;
+  padding: 20px;
 }
+
+
+
+
diff --git a/FrontEnd/src/components/Header/Navbar/Navbar.module.css b/FrontEnd/src/components/Header/Navbar/Navbar.module.css
index a613b5d3d..ca5d02389 100644
--- a/FrontEnd/src/components/Header/Navbar/Navbar.module.css
+++ b/FrontEnd/src/components/Header/Navbar/Navbar.module.css
@@ -8,7 +8,7 @@
   display: flex;
   max-width: calc(1512px - 208px);
   width: 100%;
-  padding: 16px 104px;
+  padding: 16px 23px;
   align-items: center;
   justify-content: space-between;
   height: var(--navbar-content-height);
@@ -17,12 +17,13 @@
 
 .navbar-logo__text {
   display: flex;
+  align-items: center;
+  flex-shrink: 0;
 }
 
 .navbar-main-logo {
   display: flex;
   align-items: center;
-  justify-content: space-between;
   gap: 10px;
   color: var(--header-bunner-text-color);
   width: 208px;
@@ -34,9 +35,11 @@
 .navbar-utility-bar {
   display: flex;
   gap: 24px;
-  height: 40px;
+  align-items: center;
 }
 
+
+
 .burger-menu-wrapper {
   display: none;
 }
@@ -53,15 +56,58 @@
 
   .burger-menu-wrapper {
     display: block;
+    margin-left: auto;
   }
 }
 
 @media (max-width: 630px) {
+  .navbar-content {
+    padding: 8px 16px;
+    justify-content: space-between;
+  }
+
   .navbar-main-logo {
-    width: 30px;
+    order: 2;
+    margin: 0 auto;
+    width: auto;
+    font-size: 20px;
+  }
+
+  .burger-menu-wrapper {
+    order: 1;
+    margin: 0;
+  }
+
+  .navbar-utility-bar {
+    order: 3;
+    gap: 12px;
   }
 
   .navbar-main-logo span {
     display: none;
   }
 }
+
+@media (max-width: 380px) {
+  .navbar-content {
+    padding: 8px 12px;
+  }
+
+  .navbar-utility-bar {
+    gap: 8px;
+    justify-content: flex-end;
+  }
+
+  .navbar-utility-bar button {
+    padding: 6px 12px;
+    font-size: 12px;
+  }
+
+  .navbar-main-logo {
+    margin: 0 auto;
+  }
+
+  .burger-menu-wrapper {
+    margin-right: 0;
+  }
+}
diff --git a/FrontEnd/src/components/Header/Navbar/Profile.jsx b/FrontEnd/src/components/Header/Navbar/Profile.jsx
index a2fd3369a..97c9b35fc 100644
--- a/FrontEnd/src/components/Header/Navbar/Profile.jsx
+++ b/FrontEnd/src/components/Header/Navbar/Profile.jsx
@@ -35,7 +35,7 @@ function Profile() {
         />
       </div>
       <div className={css['dropdown-section']}>
-        <DropdownMenu toggleText={isStaff ? 'Адміністратор' : 'Профіль'}>
+        <DropdownMenu toggleText={isStaff ? 'Адміністратор' : 'Мій профіль'}>
           <Link to={isStaff ? '/customadmin/admin-profile/admin-info' : '/profile/user-info'}>Мій профіль</Link>
           {!isStaff && <Link to="/profiles/companies">Мої збережені</Link>}
           <button onClick={performLogout}>Вихід</button>
diff --git a/FrontEnd/src/components/Header/Navbar/SearchBox.jsx b/FrontEnd/src/components/Header/Navbar/SearchBox.jsx
index 7d32f6c23..6dee898e3 100644
--- a/FrontEnd/src/components/Header/Navbar/SearchBox.jsx
+++ b/FrontEnd/src/components/Header/Navbar/SearchBox.jsx
@@ -1,8 +1,6 @@
 import { useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import {Button, Input} from 'antd';
-import {CloseOutlined, SearchOutlined} from '@ant-design/icons';
-import css from './SearchBox.module.scss';
+import css from './SearchBox.module.css';
 
 function SearchBox() {
   const navigate = useNavigate();
@@ -10,47 +8,50 @@ function SearchBox() {
   const [searchTerm, setSearchTerm] = useState('');
   const searchPage = 'search';
 
-  const handleSearch = () => {
+  const handleSearch = (searchTerm, searchPage) => {
     if (searchTerm.trim() !== '') {
       navigate(`/${searchPage}/?name=${searchTerm}`);
       setSearchTerm('');
     }
   };
 
-  const keyDownFunction = (e) => {
-      if (e.key === 'Enter' ) {
-        handleSearch();
-      }
-  };
-
   const handleClear = () => {
     setSearchTerm('');
   };
+
   return (
-      <div className={css['headerSearchBox']}>
-          <div className={css['headerSearchForm']}>
-            <Input
-                className={css['headerSearchFormInput']}
-                placeholder="Пошук"
-                value={searchTerm}
-                onChange={(e) => setSearchTerm(e.target.value)}
-                onKeyDown={keyDownFunction}
-            />
-            {searchTerm && (
-               <Button
-                icon={<CloseOutlined/>}
-                onClick={handleClear}
-                className={css['headerSearchFormAddon']}
-            />
-            )}
-            <Button
-                icon={<SearchOutlined/>}
-                onClick={handleSearch}
-                className={css['headerSearchFormAddon']}
-            />
-          </div>
+    <div className={css['header-search-box']}>
+      <div className={css['header-search-form']}>
+        <input
+          className={css['header-search-form__input']}
+          id="search_box"
+          value={searchTerm}
+          type="text"
+          placeholder="Пошук"
+          onChange={(e) => setSearchTerm(e.target.value)}
+          onKeyDown={(e) => {
+            if (e.key === 'Enter') {
+              handleSearch(searchTerm, searchPage);
+            }
+          }}
+        />
+        {searchTerm && (
+          <button
+            className={css['clear-button']}
+            onClick={handleClear}
+          >
+            &times;
+          </button>
+        )}
       </div>
-
+      <button
+        onClick={() => handleSearch(searchTerm, searchPage)}
+        className={css['header-search-form__addon']}
+        disabled={!searchTerm.trim()}
+      >
+        <img src={`${process.env.REACT_APP_PUBLIC_URL}/svg/search-icon.svg`} alt="Search" />
+      </button>
+    </div>
   );
 }
 
diff --git a/FrontEnd/src/components/Header/Navbar/SearchBox.module.css b/FrontEnd/src/components/Header/Navbar/SearchBox.module.css
new file mode 100644
index 000000000..59f6bc32d
--- /dev/null
+++ b/FrontEnd/src/components/Header/Navbar/SearchBox.module.css
@@ -0,0 +1,77 @@
+.header-search-box {
+  display: flex;
+  align-items: center;
+  flex-shrink: 0;
+  width: 264px;
+
+  border-radius: 4px;
+  border: 1px solid #d9d9d9;
+  background: #fff;
+}
+
+.header-search-form {
+  display: flex;
+  padding: 4px 12px;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1 0 0;
+  position: relative;
+}
+
+.header-search-form::after {
+  content: "";
+  position: absolute;
+  border-right: 1px solid #d9d9d9;
+  height: 32px;
+  top: -3.5px;
+  right: 0;
+}
+
+.header-search-form__input {
+  display: flex;
+  padding: 1px 0px;
+  align-items: flex-start;
+  gap: 10px;
+  flex: 1 0 0;
+  border: none;
+}
+
+.header-search-form__addon {
+  display: flex;
+  padding: 6px;
+  justify-content: center;
+  align-items: center;
+  gap: 8px;
+  align-self: stretch;
+  background-color: transparent;
+  cursor: pointer;
+  border: none;
+}
+
+.header-search-form__addon img {
+  width: 20px;
+  height: 20px;
+}
+
+.header-search-form__input::placeholder {
+  color: rgba(0, 0, 0, 0.25);
+  font-feature-settings: 'calt' off;
+  font-family: var(--font-main);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  letter-spacing: -0.14px;
+}
+
+textarea:focus,
+.header-search-form__input:focus {
+  border: none;
+  outline: none;
+}
+
+@media (max-width: 1200px) {
+  .header-search-box {
+    width: 90%;
+  }
+}
diff --git a/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx b/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx
index eacb7298b..be2cc7805 100644
--- a/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx
+++ b/FrontEnd/src/components/MiniComponents/CategoryBadges.jsx
@@ -8,6 +8,7 @@ export default function CategoryBadges({ categories }) {
     fontFamily: 'Geologica',
     fontSize: 10,
     margin: 5,
+    boxShadow: 'none',
   };
   return (
     <div>
diff --git a/FrontEnd/src/components/PageWrapper/PageWrapper.jsx b/FrontEnd/src/components/PageWrapper/PageWrapper.jsx
new file mode 100644
index 000000000..88b052d23
--- /dev/null
+++ b/FrontEnd/src/components/PageWrapper/PageWrapper.jsx
@@ -0,0 +1,20 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import { useBurgerMenu } from '../../context/BurgerMenuContext';
+import css from './PageWrapper.module.css';
+
+const PageWrapper = ({ children }) => {
+  const { isOpen } = useBurgerMenu();
+
+  return (
+    <div className={`${css.pageContent} ${isOpen ? css.menuOpen : ''}`}>
+      {children}
+    </div>
+  );
+};
+
+PageWrapper.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export default PageWrapper;
diff --git a/FrontEnd/src/components/PageWrapper/PageWrapper.module.css b/FrontEnd/src/components/PageWrapper/PageWrapper.module.css
new file mode 100644
index 000000000..b91cb49f1
--- /dev/null
+++ b/FrontEnd/src/components/PageWrapper/PageWrapper.module.css
@@ -0,0 +1,9 @@
+.pageContent {
+    transition: margin-top 0.3s ease;
+    margin-top: 0;
+  }
+  
+  .pageContent.menuOpen {
+    margin-top: 180px;
+  }
+  
\ No newline at end of file
diff --git a/FrontEnd/src/context/BurgerMenuContext.js b/FrontEnd/src/context/BurgerMenuContext.js
new file mode 100644
index 000000000..06041132a
--- /dev/null
+++ b/FrontEnd/src/context/BurgerMenuContext.js
@@ -0,0 +1,22 @@
+import React, { createContext, useState, useContext } from 'react';
+import PropTypes from 'prop-types';
+
+const BurgerMenuContext = createContext();
+
+export const BurgerMenuProvider = ({ children }) => {
+  const [isOpen, setIsOpen] = useState(false);
+
+  const toggleMenu = () => setIsOpen((prev) => !prev);
+
+  return (
+    <BurgerMenuContext.Provider value={{ isOpen, toggleMenu }}>
+      {children}
+    </BurgerMenuContext.Provider>
+  );
+};
+
+BurgerMenuProvider.propTypes = {
+  children: PropTypes.node.isRequired,
+};
+
+export const useBurgerMenu = () => useContext(BurgerMenuContext);
diff --git a/FrontEnd/src/global.css b/FrontEnd/src/global.css
index f22b52ed6..f230199c4 100644
--- a/FrontEnd/src/global.css
+++ b/FrontEnd/src/global.css
@@ -28,6 +28,7 @@
 
   /*border color*/
   --border-color: #EEEFF1;
+  --grey-border-color: #AAAAAA;
 
   /* background color*/
   --main-header-color: #1F9A7C;
@@ -52,6 +53,8 @@
   --error-text-color: #F15831;
   --hint-text-color: #25292C;
   --placeholder-text-color: #ADB3B9;
+  --edit-page-head-color: #000000D9;
+  --input-text-color: #000000D9;
 
 
 
@@ -59,11 +62,13 @@
   --main-button-color: #000000;
   --button-color-hover: #0b6c61;
   --light-button-color: #FFFFFF;
+  --dark-border-button: #232424;
+  --disabled-link: #8D959C;
 
   /* fonts */
   --font-main: 'Geologica', sans-serif;
   --font-messages: 'Roboto', sans-serif;
-  --font-error: 'Roboto', sans-serif;
+  --font-error: 'Geologica', sans-serif;
   --font-logo: 'Geologica', sans-serif;
 
   --toastify-color-error: #FFF1F0;
diff --git a/FrontEnd/src/pages/CustomThemes/customTheme.js b/FrontEnd/src/pages/CustomThemes/customTheme.js
index dd1a1c416..66f10d9f5 100644
--- a/FrontEnd/src/pages/CustomThemes/customTheme.js
+++ b/FrontEnd/src/pages/CustomThemes/customTheme.js
@@ -42,8 +42,8 @@ const customTheme = {
         multipleItemBg: '#F8F8F8',
       },
       Checkbox: {
-        colorPrimary: '#1f9a7c',
-        colorPrimaryHover: '#1f9a7c',
+        colorPrimary: '#000000',
+        colorPrimaryHover: '#000000',
       },
       Spin: {
         colorPrimary: '#ffffff',
diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
index f9d28c1c9..f1bb1b94e 100644
--- a/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
+++ b/FrontEnd/src/pages/LandingPage/Companies/Companies.jsx
@@ -59,7 +59,7 @@ const MainCompanies = ({ isAuthorized }) => {
         </div>
       </div>
       <div className={styles['new-companies-block']}>
-        <Row justify={'start'} gutter={[32, 24]}>
+        <Row justify={'start'} gutter={[0, 24]}>
           {companyDataList.map((result, resultIndex) => (
             <Col key={resultIndex} xs={24} md={12} xl={6}>
               <CompanyCard
diff --git a/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css b/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css
index 025776651..9eb52cdf1 100644
--- a/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css
+++ b/FrontEnd/src/pages/LandingPage/Companies/Companies.module.css
@@ -25,8 +25,8 @@
 
 .new-companies-link-to-all {
   position: absolute;
-  right: 35px;
-  top: 8px
+  right: 41px;
+  top: 6px
 }
 
 .new-companies-link-to-all a {
@@ -44,7 +44,7 @@
 
 .new-companies-block {
   width: 375px;
-  padding: 18px 8px 38px 8px;
+  padding: 18px 0px 38px 0px;
 }
 
 
@@ -57,10 +57,12 @@
 
   .new-companies-main__title {
     font-size: 40px;
+    padding-left: 18px;
   }
 
   .new-companies-link-to-all {
-    top: 23px
+    top: 23px;
+    right: 46px;
   }
 }
 
@@ -76,12 +78,12 @@
   }
 
   .new-companies-main__title {
-    padding-left: 103px;
+    padding-left: 113px;
   }
 
   .new-companies-link-to-all {
-    top: 38px;
-    right: 126px;
+    top: 26px;
+    right: 142px;
   }
 
 }
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx
index cc0f0fd14..593b45b7c 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/AdditionalInfo.jsx
@@ -8,6 +8,7 @@ import defineChanges from '../../../utils/defineChanges';
 import { useAuth, useProfile } from '../../../hooks';
 import HalfFormField from './FormFields/HalfFormField';
 import Loader from '../../../components/Loader/Loader';
+import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 import css from './FormComponents.module.css';
 
 const LABELS = {
@@ -32,10 +33,6 @@ const AdditionalInfo = (props) => {
     setFormIsDirty(isDirty);
   }, [mainProfile, profile]);
 
-  useEffect(() => {
-    props.currentFormNameHandler(props.curForm);
-  }, []);
-
   const onUpdateFoundationYearField = (e) => {
     const currentYear = new Date().getFullYear();
     const year = Number(e.target.value);
@@ -92,6 +89,8 @@ const AdditionalInfo = (props) => {
 
   return (
     <div className={css['form__container']}>
+      <h3 className={css['form__head']}>Додаткова інформація</h3>
+      <div className={css['divider']}></div>
       {user && profile && mainProfile ? (
         <form
           id="AdditionalInfo"
@@ -104,6 +103,7 @@ const AdditionalInfo = (props) => {
               <HalfFormField
                 inputType="number"
                 name="founded"
+                fieldPlaceholder="Введіть рік заснування"
                 label={LABELS.founded}
                 updateHandler={onUpdateFoundationYearField}
                 requiredField={false}
@@ -112,6 +112,8 @@ const AdditionalInfo = (props) => {
               />
             </div>
           </div>
+          <div className={css['bottom-divider']}></div>
+          <ProfileFormButton />
         </form>
       ) : (
         <Loader />
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/BanerModeration.css b/FrontEnd/src/pages/ProfilePage/FormComponents/BanerModeration.css
index 5f437e077..a360d26c1 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/BanerModeration.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/BanerModeration.css
@@ -2,7 +2,7 @@
   display: flex;
   align-items: flex-start;
   color: black;
-  margin-bottom: 20px;
+  padding: 16px
   }
   
   .warning-icon {
@@ -19,7 +19,7 @@
   }
   
   .moderation-text {
-  font-family: 'Inter', sans-serif;
+  font-family: var(--font-main), sans-serif;
   font-weight: 400;
   font-size: 14px;
   line-height: 22px;
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx
index d466d07bf..94aaedf30 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.jsx
@@ -11,7 +11,6 @@ import css from './ChangePassword.module.css';
 
 export default function ChangePassword(props) {
   const { setFormIsDirty } = useContext(DirtyFormContext);
-  const { currentFormNameHandler, curForm } = props;
   const {
     register,
     handleSubmit,
@@ -28,9 +27,6 @@ export default function ChangePassword(props) {
     },
   });
 
-  useEffect(() => {
-    currentFormNameHandler(curForm);
-  }, [currentFormNameHandler, curForm]);
 
   useEffect(() => {
     setFormIsDirty(isDirty);
@@ -63,6 +59,8 @@ export default function ChangePassword(props) {
 
   return (
     <div className={css['form__container']}>
+      <h3 className={css['form__head']}>Змінити пароль</h3>
+      <div className={css['divider']}></div>
       {props.user ? (
         <form id="ChangePassword" onSubmit={handleSubmit(handleFormSubmit)}>
           <PasswordField
@@ -104,6 +102,15 @@ export default function ChangePassword(props) {
               checkWith: 'newPassword',
             }}
           />
+          <div className={css['bottom-divider']}></div>
+          <div className={css['submit-button__conteiner']}>
+            <button
+              className={css['submit-button']}
+              type="submit"
+            >
+              Зберегти новий пароль
+            </button>
+          </div>
         </form>
       ) : (
         <Loader />
@@ -121,6 +128,4 @@ ChangePassword.propTypes = {
     profile_id: PropTypes.number.isRequired,
     is_staff: PropTypes.bool.isRequired,
   }).isRequired,
-  currentFormNameHandler: PropTypes.func.isRequired,
-  curForm: PropTypes.string.isRequired,
 };
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css
index 776533af1..a718e2476 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ChangePassword.module.css
@@ -1,5 +1,83 @@
 .form__container {
   word-wrap: break-word;
-  width: 530px;
-  margin-left: 10px;
+  background-color: var(--main-white);
+  border-radius: 6px;
+  height: fit-content;
+
+}
+
+.form__container form {
+  display: flex;
+  flex-direction: column;
+  gap: 20px;
+  margin-top: 20px;
+}
+
+.form__head {
+  display: none;
+}
+
+.divider {
+  display: none;
+}
+
+.bottom-divider {
+  width: 100%;
+  height: 1px;
+  background-color: var(--light-seashell-background);
+}
+
+.submit-button__conteiner {
+  display: flex;
+  align-items: flex-start;
+  padding: 11px 17px;
+  background-color: var(--main-white);
+}
+
+.submit-button {
+  border-radius: 4px;
+  background: var(--main-button-color);
+  color: var(--main-white);
+  padding: 10px 16px;
+  font-family: var(--font-main);
+  font-size: 16px;
+  font-weight: 600;
+  line-height: 20px;
+  cursor: pointer;
+}
+
+@media only screen and (min-width: 768px) {
+  .form__container {
+      width: 474px;
+  }
+
+  .form__head {
+    font-family: var(--font-main);
+    font-size: 16px;
+    font-weight: 600;
+    height: 52px;
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    padding-left: 24px;
+  }
+  
+  .divider {
+    width: 100%;
+    height: 1px;
+    background-color: var(--light-seashell-background);
+    display: inherit;
+  }
+
+  .submit-button__conteiner {
+    padding: 11px 24px;
+}
+  
+}
+
+@media only screen and (min-width: 1200px) {
+  .form__container {
+      width: 636px;
+      margin-left: 180px;
+  }
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx
index 6d5f9fe88..f01887bc6 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ContactsInfo.jsx
@@ -6,9 +6,9 @@ import { useAuth, useProfile } from '../../../hooks';
 import checkFormIsDirty from '../../../utils/checkFormIsDirty';
 import defineChanges from '../../../utils/defineChanges';
 import { formatPhoneNumber } from '../../../utils/formatPhoneNumber';
-import FullField from './FormFields/FullField';
 import HalfFormField from './FormFields/HalfFormField';
 import Loader from '../../../components/Loader/Loader';
+import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 import css from './FormComponents.module.css';
 import { useMask } from '@react-input/mask';
 
@@ -26,7 +26,7 @@ const ContactsInfo = (props) => {
   const { setFormIsDirty } = useContext(DirtyFormContext);
 
   const fields = {
-    phone: { defaultValue: mainProfile?.phone ?? null, type: 'phone'},
+    phone: { defaultValue: mainProfile?.phone ?? null, type: 'phone' },
     address: { defaultValue: mainProfile?.address ?? null },
   };
 
@@ -37,10 +37,6 @@ const ContactsInfo = (props) => {
 
   const inputRef = useMask({ mask: '+380XX XXX XX XX', replacement: { X: /\d/ } });
 
-  useEffect(() => {
-    props.currentFormNameHandler(props.curForm);
-  }, []);
-
   useEffect(() => {
     if (mainProfile?.phone) {
       setProfile((prevState) => ({
@@ -116,6 +112,8 @@ const ContactsInfo = (props) => {
 
   return (
     <div className={css['form__container']}>
+      <h3 className={css['form__head']}>Контакти</h3>
+      <div className={css['divider']}></div>
       {user && profile && mainProfile ? (
         <form
           id="ContactsInfo"
@@ -136,15 +134,18 @@ const ContactsInfo = (props) => {
                 value={phone ?? ''}
                 error={phoneNumberError}
               />
+              <HalfFormField
+                name="address"
+                fieldPlaceholder="Введіть поштову адресу"
+                label={LABELS.address}
+                updateHandler={onUpdateField}
+                requiredField={false}
+                value={profile.address ?? ''}
+              />
             </div>
-            <FullField
-              name="address"
-              label={LABELS.address}
-              updateHandler={onUpdateField}
-              requiredField={false}
-              value={profile.address ?? ''}
-            />
           </div>
+          <div className={css['bottom-divider']}></div>
+          <ProfileFormButton />
         </form>
       ) : (
         <Loader />
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx
index 6f3cf8658..21b71f27e 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.jsx
@@ -3,10 +3,13 @@ import css from './DeleteProfileModal.module.css';
 import { useAuth } from '../../../../hooks';
 import { useState } from 'react';
 import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
+import classNames from 'classnames';
+import EyeVisible from '../../../Authorization/EyeVisible';
+import EyeInvisible from '../../../Authorization/EyeInvisible';
 
 const DeleteProfileModal = (props) => {
   const { logout, user } = useAuth();
-  const [typePassword, setTypePassword] = useState('password');
+  const [passwordIsVisible, setPasswordIsVisible] = useState(false);
   const [inputEmail, setInputEmail] = useState('');
   const [inputPassword, setInputPassword] = useState('');
   const [isCorrectEmail, setIsCorrectEmail] = useState(true);
@@ -43,73 +46,67 @@ const DeleteProfileModal = (props) => {
   };
 
   const passwordVisisbilityHandler = () => {
-    if (typePassword === 'password') {
-      setTypePassword('text');
-    } else setTypePassword('password');
+    setPasswordIsVisible(!passwordIsVisible);
   };
 
   return (
     <div>
       <div className={css['delete-header']}>
-        Ви впевнені, що хочете видалити профіль?
-        <img
-          src={`${process.env.REACT_APP_PUBLIC_URL}/profilepage/Vectorcancel.png`}
-          className={css['delete__cancelButton']}
-          alt=""
-          onClick={props.onCancel}
-        />
+        <h4>Ви впевнені, що хочете видалити профіль?</h4>
       </div>
-      <div>
-        <div className={css['delete__description']}>
-          Цей профіль буде видалено. Для того, щоб підтвердити видалення,
-          будь-ласка, введіть вашу почту та пароль
-        </div>
+      <div className={css['delete__description']}>
+        <p>Це призведе до остаточного видалення всіх ваших даних про компанію чи стартап й також включно з списком сподобаних профілів.</p>
+        <p>Для видалення вашого профілю введіть вашу електронну пошту та пароль.</p>
+        <strong>Ця дія не може бути відміненою!</strong>
       </div>
       <form onSubmit={submitHandler}>
         <div className={css['form__body']}>
-          <div className={css['fields__label--text']}>
-            <label>Електронна пошта</label>
-          </div>
-          <div className={css['fields__field']}>
-            <input
-              type="text"
-              className={css['fields__field--input']}
-              name="email"
-              placeholder="Електронна пошта"
-              onChange={emailChangeHandler}
-              onKeyDown={preventEnterSubmit}
-            />
-          </div>
-          {!isCorrectEmail && (
-            <div className={css['error-message']}>Некоректна пошта</div>
-          )}
-          <div className={css['fields__label--text']}>
-            <label>Пароль</label>
+          <div>
+            <div className={css['fields__label--text']}>
+              <label htmlFor="email_for_delete">Електронна пошта</label>
+            </div>
+            <div className={css['fields__field']}>
+              <input
+                id="email_for_delete"
+                type="text"
+                className={css['fields__field--input']}
+                name="email"
+                onChange={emailChangeHandler}
+                onKeyDown={preventEnterSubmit}
+                autoComplete="off"
+              />
+            </div>
+            {!isCorrectEmail && (
+              <div className={css['error-message']}>Некоректна пошта</div>
+            )}
           </div>
-          <div className={css['fields__field']}>
-            <input
-              id="companyPassword"
-              type={typePassword}
-              className={css['fields__field--input']}
-              name="password"
-              placeholder="Пароль"
-              onChange={passwordChangeHandler}
-              onKeyDown={preventEnterSubmit}
-            />
-            <span onClick={passwordVisisbilityHandler}>
-              <img
-                src={
-                  typePassword === 'password'
-                    ? `${process.env.REACT_APP_PUBLIC_URL}/profilepage/hidden_eye_icon.png`
-                    : `${process.env.REACT_APP_PUBLIC_URL}/profilepage/eye_icon.png`
-                }
-                alt=""
-                className={css['password__eye']}
+          <div>
+            <div className={css['fields__label--text']}>
+              <label htmlFor="companyPassword">Пароль</label>
+            </div>
+            <div className={classNames(
+                    {[css['fields__field']]: !passwordIsVisible},
+                    {[css['password-visible-field']]: passwordIsVisible})}>
+              <input
+                id="companyPassword"
+                type={passwordIsVisible ? 'text' : 'password'}
+                className={css['fields__field--input']}
+                name="password"
+                onChange={passwordChangeHandler}
+                onKeyDown={preventEnterSubmit}
+                autoComplete="off"
               />
-            </span>
+              <span className={css['password-visibility-button']}
+                    onClick={passwordVisisbilityHandler}>
+                {!passwordIsVisible ? <EyeInvisible /> : <EyeVisible />}
+              </span>
+            </div>
           </div>
         </div>
         <div className={css['buttons__section']}>
+          <button type="submit" className={css['button__delete']}>
+            Видалити профіль
+          </button>
           <button
             type="button"
             className={css['button__cancel']}
@@ -117,12 +114,9 @@ const DeleteProfileModal = (props) => {
           >
             Скасувати
           </button>
-          <button type="submit" className={css['button__delete']}>
-            Видалити
-          </button>
         </div>
       </form>
-    </div>
+    </div >
   );
 };
 
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css
index 8d59d822d..869f3ec36 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.module.css
@@ -6,18 +6,21 @@
     font-weight: 400;
     line-height: 20px;
     letter-spacing: -0.01em;
-    margin: 24px 24px 8px 24px;
+    margin: 14px 24px 0px 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 13px;
 }
 
 .buttons__section {
     display: flex;
-    justify-content: flex-end;
+    justify-content: flex-start;
     align-items: flex-start;
     gap: 12px;
     border-top: 1px #E2E5EB solid;
     padding-bottom: 10px;
     padding-top: 10px;
-    padding-right: 16px;
+    padding-left: 25px;
 }
 
 .button__cancel {
@@ -82,7 +85,6 @@
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
-    background: var(--main-white, #FFF);
     box-shadow: 0px -1px 0px 0px #F0F0F0 inset;
     color: var(--character-title-85, rgba(0, 0, 0, 0.85));
     font-feature-settings: 'calt' off;
@@ -95,14 +97,16 @@
 }
 
 .form__body {
-    margin: 8px 24px 24px 24px;
+    margin: 24px;
+    display: flex;
+    flex-direction: column;
+    gap: 20px;
 }
 
 .fields__label--text {
     display: flex;
-    padding-bottom: 8px;
+    padding-bottom: 6px;
     align-items: center;
-    gap: 4px;
     font-family: var(--font-main);
     font-size: 14px;
     font-weight: 400;
@@ -123,29 +127,42 @@
 
 .fields__field--input {
     display: flex;
-    height: 22px;
+    height: 30px;
     padding: 5px 12px;
     align-items: center;
     gap: 4px;
     flex: 1 0 0;
     border-radius: 2px;
-    border: 1px solid var(--neutral-5, #D9D9D9);
+    border: none;
     background: var(--main-white, #FFF);
 }
 
-.fields__field--input:focus {
+.fields__field:focus-within {
     border-radius: 2px;
     border: 1px solid #1f9a7c;
     background: #fff;
     outline: none;
 }
 
-.password__eye {
-    width: 23px;
-    padding: 5px 3px 2px 3px;
+.password-visible-field {
+    display: flex;
+    align-items: center;
+    align-self: stretch;
+    border-radius: 2px;
+    background: var(--main-white, #FFF);
+    border: 1px solid #B4D27A;
+}
+
+.password-visibility-button {
+    width: 25px;
     cursor: pointer;
 }
 
+.fields__field--input:focus-visible {
+    outline: none;
+}
+
+
 .delete__cancelButton {
     cursor: pointer;
 }
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx
index eef063fa3..ff0680cfd 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.jsx
@@ -1,27 +1,26 @@
 import css from './DeleteProfilePage.module.css';
 import DeleteProfileModal from './DeleteProfileModal';
 import MyModal from '../../UI/MyModal/MyModal';
-import { useState, useEffect } from 'react';
+import { useState } from 'react';
 
-const DeleteProfilePage = (props) => {
+const DeleteProfilePage = () => {
   const [modal, setModal] = useState(false);
 
-  useEffect(() => {
-    props.currentFormNameHandler(props.curForm);
-  }, []);
-
   const cancelHandler = () => {
     setModal(false);
   };
   return (
-    <div className={css['button__delete-main']}>
-      <div className={css['text__for__delete']}>Видалити акаунт</div>
-      <button className={css['button__delete']} onClick={() => setModal(true)}>
-        Видалити
-      </button>
-      <MyModal visible={modal}>
-        <DeleteProfileModal onCancel={cancelHandler} />
-      </MyModal>
+    <div className={css['button__delete-container']}>
+      <h3 className={css['button__delete-head']}>Видалити профіль</h3>
+      <div className={css['divider']}></div>
+      <div className={css['button__delete-main']}>
+        <button className={css['button__delete']} onClick={() => setModal(true)}>
+          Видалити профіль
+        </button>
+        <MyModal visible={modal}>
+          <DeleteProfileModal onCancel={cancelHandler} />
+        </MyModal>
+      </div>
     </div>
   );
 };
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css
index 92ca3d4ba..786eb5a0e 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfilePage.module.css
@@ -1,33 +1,56 @@
 .button__delete-main {
-   height: calc(var(--profile-min-height-block) + 42px);
+   padding: 10px;
 }
 
 .button__delete {
-    color: #F15831;
-    cursor: pointer;
-    width: 109px;
-    height: 32px;
-    padding: 5px 15px 5px 15px;
-    margin-top: 8px;
-    margin-bottom: 10px;
     border-radius: 4px;
-    gap: 10px;
-    background: linear-gradient(0deg, #FFFFFF, #FFFFFF),
-        linear-gradient(0deg, #F15831, #F15831);
-    border: 1px solid #F15831;
+    background: var(--main-button-color);
+    color: var(--main-white);
+    padding: 10px 15px;
     font-family: var(--font-main);
     font-size: 16px;
     font-weight: 600;
     line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: center;
+    cursor: pointer;
 }
 
-.text__for__delete {
-    font-family: var(--font-main);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
+.button__delete-head {
+    display: none;
 }
+
+@media only screen and (min-width: 768px) {
+    .button__delete-container {
+        display: flex;
+        flex-direction: column;
+        background-color: var(--main-white);
+        width: 474px;
+        height: 112px;
+        border-radius: 6px;
+    }
+    .button__delete-head {
+        font-family: var(--font-main);
+        font-size: 16px;
+        font-weight: 600;
+        height: 52px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-left: 24px;
+    }
+    
+    .divider {
+        width: 100%;
+        height: 1px;
+        background-color: var(--light-seashell-background);
+    }
+    .button__delete {
+        margin-left: 14px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .button__delete-container {
+        width: 636px;
+        margin-left: 180px;
+    }
+}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormComponents.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormComponents.module.css
index 154cfd909..1bcaa4f7e 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormComponents.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormComponents.module.css
@@ -10,8 +10,19 @@
 
 .fields-groups {
     display: flex;
+    flex-direction: column;
     align-items: flex-start;
     gap: 16px;
+    padding-left: 9px;
+    padding-top: 7px;
+}
+
+.form__head {
+    display: none;
+}
+
+.divider {
+    display: none;
 }
 
 .fop-field {
@@ -23,5 +34,50 @@
 
 .form__container {
     word-wrap: break-word;
-    width: 530px;
+    background-color: var(--main-white);
+    border-radius: 6px;
+    height: fit-content;
+
+}
+
+.bottom-divider {
+    width: 100%;
+    height: 1px;
+    background-color: var(--light-seashell-background);
+}
+
+@media only screen and (min-width: 768px) {
+    .form__container {
+        width: 474px;
+    }
+
+    .fields-groups {
+        padding-left: 16px;
+    }
+
+    .form__head {
+        font-family: var(--font-main);
+        font-size: 16px;
+        font-weight: 600;
+        height: 52px;
+        display: flex;
+        flex-direction: row;
+        align-items: center;
+        padding-left: 24px;
+    }
+    
+    .divider {
+        width: 100%;
+        height: 1px;
+        background-color: var(--light-seashell-background);
+        display: inherit;
+    }
+    
+}
+
+@media only screen and (min-width: 1200px) {
+    .form__container {
+        width: 636px;
+        margin-left: 180px;
+    }
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.jsx
index 19a3960cb..58026bb69 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.jsx
@@ -8,9 +8,10 @@ const CheckBoxField = (props) => {
     <div className={css['representative']}>
       <div className={css['representative__label']}>
         {props.requiredField && (
-          <label className={css['representative__label--required']}>*</label>
+          <span className={css['representative__label--required']}>*</span>
         )}
         <label
+          htmlFor={props.nameRegister}
           className={`${css['representative__label--text']} ${
             !props.requiredField && css['fields__field--notrequired']
           }`}
@@ -22,6 +23,7 @@ const CheckBoxField = (props) => {
         <div className={css['representative__checkboxes--company-type']}>
           <label className={css['form-control']}>
             <Checkbox
+              id={props.nameRegister}
               name={props.nameRegister}
               onChange={props.updateHandler}
               onKeyDown={preventEnterSubmit}
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css
index cb9071606..460cc4c5e 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/CheckBoxField.module.css
@@ -4,6 +4,7 @@
     flex-direction: column;
     align-items: flex-start;
     gap: 8px;
+    padding-left: 15px;
 }
 
 .representative__label {
@@ -37,9 +38,9 @@
 }
 
 .representative__checkboxes {
-    flex-direction: row;
+    flex-direction: column;
     display: flex;
-    padding: 0px 11px;
+    padding-left: 20px;
     align-items: flex-start;
     flex: 1 0 0;
     gap: 8px;
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/FullField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/FullField.jsx
deleted file mode 100644
index 51dd152e4..000000000
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/FullField.jsx
+++ /dev/null
@@ -1,43 +0,0 @@
-import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
-import css from './FullField.module.css';
-
-const FullField = (props) => {
-  return (
-    <div className={css['fields__column']}>
-      <div className={css['fields__label']}>
-        {props.requiredField && (
-          <label className={css['fields__label--required']}>*</label>
-        )}
-        <label
-          className={`${css['fields__label--text']} ${
-            !props.requiredField && css['fields__field--notrequired']
-          }`}
-        >
-          {props.label}
-        </label>
-      </div>
-      <div className={css['fields__field']}>
-        <input
-          type={props.inputType ? props.inputType : 'text'}
-          className={css['fields__field--input']}
-          name={props.name}
-          value={props.value}
-          placeholder={
-            props.fieldPlaceholder ? props.fieldPlaceholder : 'Введіть текст'
-          }
-          onChange={props.updateHandler}
-          onBlur={props.onBlur}
-          onKeyDown={preventEnterSubmit}
-          required={props.requiredField ? 'required' : ''}
-          disabled={props.name === 'email' ? 'disabled' : ''}
-          maxLength={props.maxLength}
-        />
-      </div>
-      {(props.requiredField || props.error) && (
-        <div className={css['error-message']}>{props.error}</div>
-      )}
-    </div>
-  );
-};
-
-export default FullField;
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/FullField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/FullField.module.css
deleted file mode 100644
index c62043ba4..000000000
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/FullField.module.css
+++ /dev/null
@@ -1,97 +0,0 @@
-.fields__column {
-    display: flex;
-    width: 530px;
-    height: 84px;
-    padding-bottom: 5px;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.fields__label {
-    display: flex;
-    padding-bottom: 9px;
-    align-items: center;
-    gap: 4px;
-}
-
-.fields__label--required {
-    font-family: var(--font-main);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: 0em;
-    text-align: right;
-    color: #FF4D4F;
-}
-
-.fields__label--text {
-    flex: 1 0 0;
-    color: var(--main-black-90, #292E32);
-    font-feature-settings: 'calt' off;
-    font-style: normal;
-    font-family: var(--font-main);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    color: #292E32;
-}
-
-.fields__field--notrequired {
-    padding-top: 2px;
-}
-
-.fields__field {
-    display: flex;
-    align-items: center;
-    align-self: stretch;
-    border-radius: 2px;
-    background: var(--main-white, #FFF);
-    border: 1px solid #D9D9D9;
-}
-
-.fields__field--input {
-    display: flex;
-    height: 22px;
-    padding: 5px 12px;
-    align-items: center;
-    gap: 4px;
-    flex: 1 0 0;
-    border-radius: 2px;
-    border: none;
-    background: var(--main-white, #FFF);
-}
-
-.fields__field--input::placeholder {
-    font-style: normal;
-    font-family: var(--font-main);
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    color: #00000040;
-}
-
-.fields__field--input:focus {
-    border-radius: 2px;
-    border: 1px solid #1f9a7c;
-    background: #fff;
-    outline: none;
-}
-
-.error-message {
-    display: flex;
-    padding: 1px 0px;
-    align-items: flex-start;
-    gap: 10px;
-    align-self: stretch;
-    flex: 1 0 0;
-    color: var(--red-red-100, #F34444);
-    font-family: var(--font-error);
-    font-size: 12px;
-    font-style: normal;
-    font-weight: 400;
-    line-height: 16px;
-}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.jsx
index ff43be466..d7d602337 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.jsx
@@ -18,9 +18,10 @@ const HalfFormField = forwardRef(function HalfFormField(props, ref) {
     <div className={css['fields__column']}>
       <div className={css['fields__label']}>
         {props.requiredField && (
-          <label className={css['fields__label--required']}>*</label>
+          <span className={css['fields__label--required']}>*</span>
         )}
         <label
+          htmlFor={props.label ? props.label : props.name}
           className={`${css['fields__label--text']} ${
             !props.requiredField && css['fields__field--notrequired']
           }`}
@@ -39,6 +40,7 @@ const HalfFormField = forwardRef(function HalfFormField(props, ref) {
               props.name === 'email' && css['disabled__field']
             }`}
             name={props.name}
+            id={props.label ? props.label : props.name}
             value={fieldValue}
             placeholder={props.fieldPlaceholder || 'Введіть текст'}
             onBlur={props.onBlur}
@@ -48,6 +50,7 @@ const HalfFormField = forwardRef(function HalfFormField(props, ref) {
             required={props.requiredField ? 'required' : ''}
             disabled={props.name === 'email' ? 'disabled' : ''}
             maxLength={props.maxLength}
+            autoComplete="off"
           />
         </Tooltip>
       </div>
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.module.css
index 25aa791c4..aa982b78b 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/HalfFormField.module.css
@@ -1,10 +1,10 @@
 .fields__column {
     display: flex;
-    width: 257px;
+    width: 311px;
     height: 84px;
-    padding-bottom: 10px;
     flex-direction: column;
     align-items: flex-start;
+    padding-left: 7px;
 }
 
 .fields__label {
@@ -51,16 +51,24 @@
     border: 1px solid #D9D9D9;
 }
 
+.fields__field:focus-within {
+    border: 1px solid var(--primary-green-80);
+}
+
 .fields__field--input {
     display: flex;
-    height: 22px;
-    padding: 4px 12px;
+    height: 40px;
+    padding: 0px 10px;
     align-items: center;
     gap: 4px;
-    flex: 1 0 0;
+    flex: 1 0;
     border-radius: 2px;
     border: none;
     background: var(--main-white, #FFF);
+    font-family: var(--font-main);
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--input-text-color);
 }
 
 .fields__field--input::Placeholder {
@@ -71,12 +79,11 @@
     line-height: 22px;
     letter-spacing: -0.01em;
     text-align: left;
-    color: var(--main-text-color);
+    color: var(--placeholder-text-color);
 }
 
 .fields__field--input:focus {
     border-radius: 2px;
-    border: 1px solid #1f9a7c;
     background: #fff;
     outline: none;
 }
@@ -97,7 +104,7 @@
 }
 
 .disabled__field {
-    font-family: var(--font-messages);
+    font-family: var(--font-main);
     font-size: 14px;
     font-weight: 400;
     line-height: 22px;
@@ -106,4 +113,16 @@
     color: #00000040;
     background: linear-gradient(0deg, #F5F5F5, #F5F5F5),
         linear-gradient(0deg, #D9D9D9, #D9D9D9);
+}
+
+@media only screen and (min-width: 768px) {
+    .fields__column {
+        width: 426px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .fields__column {
+        width: 588px;
+    }
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx
index 84b8c86c0..8c465401d 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.jsx
@@ -66,6 +66,7 @@ const ImageField = ({
     >
       <div className={css['fields__label']}>
         <label
+          htmlFor={name}
           className={classNames(
             css['fields__label--text'],
             css['fields__field--notrequired']
@@ -75,7 +76,6 @@ const ImageField = ({
         </label>
         {name === 'banner' && value && (
           <>
-            {renderInput()}
             {renderUpdateImageLabel('змінити')}
             {renderDeleteButton('видалити')}
           </>
@@ -121,7 +121,6 @@ const ImageField = ({
             <PendingStatus profile={profile} elementType="logo" />
             <div className={css['upload-file__wrapper--logo']}>
               <div className={css['upload-file__logo']} style={backgroundImage} />
-              {renderInput()}
               {renderUpdateImageLabel('змінити')}
               {renderDeleteButton('видалити')}
             </div>
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.module.css
index 118ccd3ee..1104f80a3 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/ImageField.module.css
@@ -1,7 +1,7 @@
 .fields__column {
     display: flex;
-    width: 530px;
     padding-top: 10px;
+    padding-left: 16px;
     flex-direction: column;
     align-items: flex-start;
 }
@@ -58,11 +58,11 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    border: 1px solid #1F9A7C;
+    border: 1px solid var(--dark-border-button);
     border-radius: 4px;
     cursor: pointer;
-    width: 139px;
-    height: 30px;
+    width: 144px;
+    height: 40px;
 }
 
 .upload-file__text {
@@ -72,7 +72,7 @@
     line-height: 20px;
     letter-spacing: -0.01em;
     text-align: center;
-    color: #1F9A7C;
+    color: var(--main-button-color);
 }
 
 .upload-file__icon {
@@ -82,7 +82,6 @@
 
 .upload-file__wrapper--banner-page {
     display: flex;
-    width: 530px;
     padding-bottom: 24px;
     flex-direction: column;
     align-items: flex-start;
@@ -114,7 +113,7 @@
 }
 
 .upload-file__banner-image--page {
-    width: 420px;
+    width: 300px;
     height: 55.556px;
     border: 1px solid #C3C3C3;
 }
@@ -165,6 +164,7 @@ button {
 }
 
 .update-file__text {
+    font-family: var(--font-main);
     font-size: 14px;
     font-style: normal;
     font-weight: 400;
@@ -176,3 +176,9 @@ button {
 .fields__field--notrequired {
     padding-top: 2px;
 }
+
+@media only screen and (min-width: 768px) {
+    .fields__column {
+        padding-left: 23px;
+    }
+}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.jsx
index 36cac543f..0e29fd00e 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.jsx
@@ -8,9 +8,10 @@ export default function MultipleSelectChip(props) {
     <div className={css['fields__column']}>
       <div className={css['fields__label']}>
         {props.requiredField && (
-          <label className={css['fields__label--required']}>*</label>
+          <span className={css['fields__label--required']}>*</span>
         )}
         <label
+          htmlFor={props.name}
           className={`${css['fields__label--text']} ${
             !props.requiredField && css['fields__field--notrequired']
           }`}
@@ -22,6 +23,7 @@ export default function MultipleSelectChip(props) {
         <Select
           mode="multiple"
           name={props.name}
+          id={props.name}
           value={props.value}
           placeholder={props.placeholder || 'Оберіть'}
           variant="borderless"
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.module.css
index 483681a69..fb26c5ec2 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/MultipleSelectChip.module.css
@@ -1,6 +1,6 @@
 .fields__column {
     display: flex;
-    padding: 0px 0px 15px 0px;
+    padding: 0px 0px 15px 7px;
     flex-direction: column;
 }
 
@@ -59,12 +59,26 @@
 }
 
 .select-container {
-    width: 257px;
+    width: 311px;
+    min-height: 40px;
     border-radius: 2px;
     border: 1px solid #D9D9D9;
     background: #FFF;
+    padding-top: 4px;
 }
 
 .select-container:focus-within {
-    border: 1px solid var(--main-button-color);
+    border: 1px solid var(--primary-green-80);
+}
+
+@media only screen and (min-width: 768px) {
+    .select-container {
+        width: 426px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .select-container {
+        width: 588px;
+    }
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx
index 5f0060e1f..bf6354d9d 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.jsx
@@ -45,9 +45,9 @@ const PasswordField = (props) => {
         >
           {label}
         </label>
-        {label !== 'Поточний пароль' &&
+        {label === 'Новий пароль' &&
           <label className={css['password-field__label--hint']} htmlFor={inputId}>
-              (Повинен містити від 8 символів, A-Z, a-z, 0-9)
+              Пароль повинен мати 8+ символів, містити принаймні велику, малу літеру (A..Z, a..z) та цифру (0..9).
           </label>
         }
       </div>
@@ -57,7 +57,6 @@ const PasswordField = (props) => {
             onKeyDown={preventEnterSubmit}
             id={inputId}
             type={showPassword ? 'text' : 'password'}
-            placeholder={label}
             {...register(name, {
               required: errorMessages.requiredField,
               pattern: checkValid && {
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css
index 1d9636d5b..e09c3702d 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/PasswordField.module.css
@@ -1,9 +1,10 @@
 .password-field__item {
     display: flex;
-    width: 257px;
-    height: 89px;
+    width: 311px;
+    min-height: 66px;
     flex-direction: column;
     align-items: flex-start;
+    padding-left: 16px;
 }
 
 .password-field__label--content {
@@ -20,10 +21,6 @@
     line-height: 20px;
 }
 
-.password-field__label--gap {
-    padding-bottom: 10px;
-}
-
 .password-field__label-wrapper {
     display: flex;
     flex-direction: column;
@@ -31,11 +28,12 @@
 }
 
 .password-field__label--hint {
-    align-self: stretch;
-    font-size: 8px;
-    line-height: 16px;
-    position: relative;
-    top: 0px;
+    padding-bottom: 3px;
+    font-size: 10px;
+    line-height: 12.5px;
+    font-family: 'Geologica';
+    font-weight: 400;
+    letter-spacing: -0.01em;
 }
 
 .password-field__label-wrapper span {
@@ -45,6 +43,10 @@
 
 .password-field__item input {
     border: none;
+    font-family: 'Geologica';
+    font-size: 14px;
+    font-weight: 400;
+    line-height: 22px;
 }
 
 .password-field__item input:focus {
@@ -52,17 +54,6 @@
     outline: none;
 }
 
-.password-field__item input::placeholder {
-    font-style: normal;
-    font-family: "Inter", sans-serif;
-    font-size: 14px;
-    font-weight: 400;
-    line-height: 22px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    color: #00000040;
-}
-
 .password-field__password {
     display: flex;
     padding: 4px 12px;
@@ -72,6 +63,7 @@
     border-radius: 2px;
     border: 1px solid #d9d9d9;
     background: #fff;
+    height: 30.5px;
 }
 
 .password-field__password:focus {
@@ -104,16 +96,15 @@
     align-self: stretch;
     flex: 1 0 0;
     color: var(--red-red-100, #F34444);
-    font-family: Roboto;
-    font-size: 14px;
+    font-family: var(--font-error);
+    font-size: 12px;
     font-style: normal;
     font-weight: 400;
     line-height: 22px;
 }
 
 .error-dot::before {
-    position: absolute;
-    margin-left: -8px;
+    margin-left: -11px;
     content: "*";
     color: #ff4d4f;
     text-align: right;
@@ -123,3 +114,24 @@
     font-weight: 400;
     line-height: 22.001px;
 }
+
+@media only screen and (min-width: 768px) {
+    .password-field__item {
+        width: 426px;
+        padding-left: 23px;
+    }
+
+    .password-field__item input {
+        width: 380px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .password-field__item {
+        width: 588px;
+    }
+
+    .password-field__item input {
+        width: 542px;
+    }
+}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.jsx
index 7db973994..cac2e8b75 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.jsx
@@ -7,9 +7,10 @@ const TextField = (props) => {
     <div className={css['fields__column']}>
       <div className={css['fields__label']}>
         {props.requiredField && (
-          <label className={css['fields__label--required']}>*</label>
+          <span className={css['fields__label--required']}>*</span>
         )}
         <label
+          htmlFor={props.name}
           className={`${css['fields__label--text']} ${
             !props.requiredField && css['fields__field--notrequired']
           }`}
@@ -21,10 +22,8 @@ const TextField = (props) => {
         <textarea
           className={css['fields__field--textarea']}
           name={props.name}
+          id={props.name}
           value={props.value}
-          placeholder={
-            props.fieldPlaceholder ? props.fieldPlaceholder : 'Введіть текст'
-          }
           onChange={props.updateHandler}
           onKeyDown={preventEnterSubmit}
           required={props.requiredField ? 'required' : ''}
@@ -49,7 +48,6 @@ TextField.propTypes = {
   label: PropTypes.string.isRequired,
   name: PropTypes.string.isRequired,
   value: PropTypes.string,
-  fieldPlaceholder: PropTypes.string,
   maxLength: PropTypes.number,
   updateHandler: PropTypes.func,
   error: PropTypes.string,
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.module.css
index cd1936e3c..f4d6644f2 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/FormFields/TextField.module.css
@@ -1,7 +1,8 @@
 .fields__column {
     display: flex;
-    width: 530px;
+    width: 311px;
     padding-bottom: 5px;
+    padding-left: 16px;
     flex-direction: column;
 }
 
@@ -51,7 +52,6 @@
 
 .fields__field--textarea {
     display: flex;
-    height: 22px;
     padding: 5px 12px;
     align-items: center;
     gap: 4px;
@@ -61,6 +61,10 @@
     width: 530px;
     height: 98px;
     border: none;
+    font-family: var(--font-main);
+    font-size: 14px;
+    font-weight: 400;
+    color: var(--input-text-color);
 }
 
 .fields__field--textarea::placeholder {
@@ -107,4 +111,18 @@
     line-height: 22px;
     letter-spacing: -0.01em;
     color: #A3AAB0;
+}
+
+@media only screen and (min-width: 768px) {
+    .fields__column {
+        width: 426px;
+        padding-left: 24px;
+    }
+}
+
+@media only screen and (min-width: 1200px) {
+    .fields__column {
+        width: 588px;
+        padding-left: 24px;
+    }
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx
index 1de7f2ee7..e4a77284e 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/GeneralInfo.jsx
@@ -11,7 +11,6 @@ import css from './FormComponents.module.css';
 
 import { DirtyFormContext } from '../../../context/DirtyFormContext';
 import CheckBoxField from './FormFields/CheckBoxField';
-import FullField from './FormFields/FullField';
 import HalfFormField from './FormFields/HalfFormField';
 import ImageField from './FormFields/ImageField';
 import MultipleSelectChip from './FormFields/MultipleSelectChip';
@@ -20,6 +19,7 @@ import Loader from '../../../components/Loader/Loader';
 import validateEdrpou from '../../../utils/validateEdrpou';
 import validateRnokpp from '../../../utils/validateRnokpp';
 import BanerModeration from './BanerModeration';
+import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 
 const LABELS = {
   name: 'Назва компанії',
@@ -51,7 +51,7 @@ const ERRORS = {
   },
 };
 
-const TEXT_AREA_MAX_LENGTH = 2000;
+const TEXT_AREA_MAX_LENGTH = 1000;
 const BANNER_IMAGE_SIZE = 5 * 1024 * 1024;
 const LOGO_IMAGE_SIZE = 1 * 1024 * 1024;
 
@@ -62,8 +62,8 @@ const GeneralInfo = (props) => {
   const { profile: mainProfile, mutate: profileMutate } = useProfile();
   const [profile, setProfile] = useState(props.profile);
   const [formStateErr, setFormStateErr] = useState(ERRORS);
-  const [bannerImage, setBannerImage] = useState(props.profile.banner?.path);
-  const [logoImage, setLogoImage] = useState(props.profile.logo?.path);
+  const [bannerImage, setBannerImage] = useState(props.profile?.banner?.path);
+  const [logoImage, setLogoImage] = useState(props.profile?.logo?.path);
   const [bannerImageError, setBannerImageError] = useState(null);
   const [logoImageError, setLogoImageError] = useState(null);
   const [edrpouFieldError, setEdrpouFieldError] = useState(null);
@@ -105,10 +105,6 @@ const GeneralInfo = (props) => {
     setFormIsDirty(isDirty);
   }, [mainProfile, profile]);
 
-  useEffect(() => {
-    props.currentFormNameHandler(props.curForm);
-  }, []);
-
   const checkRequiredFields = () => {
     let isValid = true;
     const newFormState = {};
@@ -396,7 +392,7 @@ const GeneralInfo = (props) => {
       try {
         const response = await axios.patch(
           `${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`,
-            data.profileChanges
+        data.profileChanges
         );
         profileMutate(response.data);
         toast.success('Зміни успішно збережено');
@@ -409,6 +405,8 @@ const GeneralInfo = (props) => {
 
   return (
     <div className={css['form__container']}>
+      <h3 className={css['form__head']}>Загальна інформація</h3>
+      <div className={css['divider']}></div>
       {user && profile && mainProfile ? (
         <form
           id="GeneralInfo"
@@ -420,6 +418,7 @@ const GeneralInfo = (props) => {
             <div className={css['fields-groups']}>
               <HalfFormField
                 name="name"
+                fieldPlaceholder="Введіть назву компанії"
                 label={LABELS.name}
                 updateHandler={onUpdateField}
                 onBlur={onBlurHandler}
@@ -432,25 +431,27 @@ const GeneralInfo = (props) => {
                 value={profile.name}
                 maxLength={100}
               />
+              <HalfFormField
+                name="official_name"
+                fieldPlaceholder="Введіть юридичну назву компанії"
+                label={LABELS.official_name}
+                updateHandler={onUpdateField}
+                onBlur={onBlurHandler}
+                value={profile.official_name ?? ''}
+                error={
+                  formStateErr['official_name']?.['error']
+                    ? formStateErr['official_name']['message']
+                    : null
+                }
+                maxLength={200}
+              />
             </div>
-            <FullField
-              name="official_name"
-              label={LABELS.official_name}
-              updateHandler={onUpdateField}
-              onBlur={onBlurHandler}
-              value={profile.official_name ?? ''}
-              error={
-                formStateErr['official_name']?.['error']
-                  ? formStateErr['official_name']['message']
-                  : null
-              }
-              maxLength={200}
-            />
             <div className={css['fields-groups']}>
               {mainProfile?.is_fop ? (
                 <HalfFormField
                   inputType="text"
                   name="rnokpp"
+                  fieldPlaceholder="Введіть РНОКПП"
                   label={LABELS.rnokpp}
                   updateHandler={onUpdateIdentifierField}
                   value={profile.rnokpp ?? ''}
@@ -461,6 +462,7 @@ const GeneralInfo = (props) => {
                 <HalfFormField
                   inputType="text"
                   name="edrpou"
+                  fieldPlaceholder="Введіть ЄДРПОУ"
                   label={LABELS.edrpou}
                   updateHandler={onUpdateIdentifierField}
                   value={profile.edrpou ?? ''}
@@ -558,6 +560,8 @@ const GeneralInfo = (props) => {
               requiredField={true}
             />
           </div>
+          <div className={css['bottom-divider']}></div>
+          <ProfileFormButton />
         </form>
       ) : (
         <Loader />
@@ -590,6 +594,4 @@ GeneralInfo.propTypes = {
       path: PropTypes.string,
     }),
   }).isRequired,
-  currentFormNameHandler: PropTypes.func,
-  curForm: PropTypes.string,
 };
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx
index 54aade2c0..80fcafa29 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/ProductServiceInfo.jsx
@@ -8,6 +8,7 @@ import defineChanges from '../../../utils/defineChanges';
 import { useAuth, useProfile } from '../../../hooks';
 import TextField from './FormFields/TextField';
 import Loader from '../../../components/Loader/Loader';
+import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 import css from './FormComponents.module.css';
 
 const LABELS = {
@@ -33,10 +34,6 @@ const ProductServiceInfo = (props) => {
     setFormIsDirty(isDirty);
   }, [mainProfile, profile]);
 
-  useEffect(() => {
-    props.currentFormNameHandler(props.curForm);
-  }, []);
-
   const onUpdateTextAreaField = (e) => {
     if (e.target.value.length <= TEXT_AREA_MAX_LENGTH)
       setProfile((prevState) => {
@@ -69,6 +66,8 @@ const ProductServiceInfo = (props) => {
 
   return (
     <div className={css['form__container']}>
+      <h3 className={css['form__head']}>Інформація про товари/послуги</h3>
+      <div className={css['divider']}></div>
       {user && profile && mainProfile ? (
         <form
           id="ProductServiceInfo"
@@ -94,6 +93,8 @@ const ProductServiceInfo = (props) => {
               maxLength={TEXT_AREA_MAX_LENGTH}
             />
           </div>
+          <div className={css['bottom-divider']}></div>
+          <ProfileFormButton />
         </form>
       ) : (
         <Loader />
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx
index 376338db9..5b22b8d6a 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/StartupInfo.jsx
@@ -8,6 +8,7 @@ import defineChanges from '../../../utils/defineChanges';
 import { useAuth, useProfile } from '../../../hooks';
 import TextField from './FormFields/TextField';
 import Loader from '../../../components/Loader/Loader';
+import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 import css from './FormComponents.module.css';
 
 const LABELS = {
@@ -31,10 +32,6 @@ const StartupInfo = (props) => {
     setFormIsDirty(isDirty);
   }, [mainProfile, profile]);
 
-  useEffect(() => {
-    props.currentFormNameHandler(props.curForm);
-  }, []);
-
   const onUpdateTextAreaField = (e) => {
     if (e.target.value.length <= TEXT_AREA_MAX_LENGTH)
       setProfile((prevState) => {
@@ -67,6 +64,8 @@ const StartupInfo = (props) => {
 
   return (
     <div className={css['form__container']}>
+      <h3 className={css['form__head']}>Стартап</h3>
+      <div className={css['divider']}></div>
       {user && profile && mainProfile ? (
         <form
           id="StartupInfo"
@@ -80,10 +79,12 @@ const StartupInfo = (props) => {
               label={LABELS.startup_idea}
               updateHandler={onUpdateTextAreaField}
               requiredField={false}
-              value={profile.startup_idea ?? ''}
+              value={profile?.startup_idea ?? ''}
               maxLength={TEXT_AREA_MAX_LENGTH}
             />
           </div>
+          <div className={css['bottom-divider']}></div>
+          <ProfileFormButton />
         </form>
       ) : (
         <Loader />
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx
index 329f01315..43679bfdf 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/UserInfo.jsx
@@ -8,6 +8,7 @@ import checkFormIsDirty from '../../../utils/checkFormIsDirty';
 import defineChanges from '../../../utils/defineChanges';
 import HalfFormField from './FormFields/HalfFormField';
 import Loader from '../../../components/Loader/Loader';
+import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 import css from './FormComponents.module.css';
 
 const LABELS = {
@@ -51,9 +52,6 @@ const UserInfo = (props) => {
     setFormIsDirty(isDirty);
   }, [user, profile, updateUser, updateProfile]);
 
-  useEffect(() => {
-    props.currentFormNameHandler(props.curForm);
-  }, []);
 
   const errorMessageTemplates = {
     requiredField: 'Обов’язкове поле',
@@ -192,6 +190,8 @@ const UserInfo = (props) => {
 
   return (
     <div className={css['form__container']}>
+      <h3 className={css['form__head']}>Інформація про користувача</h3>
+      <div className={css['divider']}></div>
       {updateUser && user && profile && updateProfile ? (
         <form
           id="UserInfo"
@@ -200,14 +200,14 @@ const UserInfo = (props) => {
           noValidate
         >
           <div
-            className={`${css['fields']} ${
-              errorsInNameSurname ? css['user_form_fields'] : ''
-            }`}
+            className={`${css['fields']} ${errorsInNameSurname ? css['user_form_fields'] : ''
+              }`}
           >
             <div className={css['fields-groups']}>
               <HalfFormField
                 inputType="text"
                 name="surname"
+                fieldPlaceholder="Введіть ваше прізвище"
                 label={LABELS.surname}
                 updateHandler={onUpdateField}
                 onBlur={onBlurHandler}
@@ -223,6 +223,7 @@ const UserInfo = (props) => {
               <HalfFormField
                 inputType="text"
                 name="name"
+                fieldPlaceholder="Введіть ваше ім'я"
                 label={LABELS.name}
                 updateHandler={onUpdateField}
                 onBlur={onBlurHandler}
@@ -240,6 +241,7 @@ const UserInfo = (props) => {
               <HalfFormField
                 inputType="text"
                 name="person_position"
+                fieldPlaceholder="Введіть вашу посаду"
                 label={LABELS.person_position}
                 updateHandler={onUpdateField}
                 onBlur={onBlurHandler}
@@ -261,6 +263,8 @@ const UserInfo = (props) => {
               />
             </div>
           </div>
+          <div className={css['bottom-divider']}></div>
+          <ProfileFormButton />
         </form>
       ) : (
         <Loader />
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.jsx b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.jsx
index 93249ba0d..4cf591df0 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.jsx
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.jsx
@@ -19,12 +19,12 @@ const WarnUnsavedDataModal = ({ onCancel, onConfirm }) => {
             </div>
             <div className={classes['modal-footer']}>
                 <div className={classes['modal-footer--buttons-wrapper']}>
-                    <button onClick={onCancel} className={`${classes['modal-footer--button']} ${classes['modal-footer--button-cancel']}`}>
-                        Скасувати
-                    </button>
                     <button onClick={onConfirm} className={`${classes['modal-footer--button']} ${classes['modal-footer--button-continue']}`}>
                         Продовжити
                     </button>
+                    <button onClick={onCancel} className={`${classes['modal-footer--button']} ${classes['modal-footer--button-cancel']}`}>
+                        Скасувати
+                    </button>
                 </div>
             </div>
 
diff --git a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css
index a3585857b..b00c52de1 100644
--- a/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css
+++ b/FrontEnd/src/pages/ProfilePage/FormComponents/WarnUnsavedDataModal.module.css
@@ -1,9 +1,9 @@
 .modal {
     display: flex;
-    width: 572px;
+    width: 345px;
     flex-direction: column;
     align-items: flex-start;
-    border-radius: 2px;
+    border-radius: 6px;
     background: var(--Conditional-pop-over, #FFF);
     box-shadow: 0px 9px 28px 8px rgba(0, 0, 0, 0.05), 0px 6px 16px 0px rgba(0, 0, 0, 0.08), 0px 3px 6px -4px rgba(0, 0, 0, 0.12);
 }
@@ -14,7 +14,6 @@
     justify-content: space-between;
     align-items: center;
     align-self: stretch;
-    background: var(--main-white, #FFF);
     box-shadow: 0px -1px 0px 0px #F0F0F0 inset;
 }
 
@@ -50,7 +49,6 @@
 }
 
 .modal-content--text {
-    width: 524px;
     align-self: stretch;
     color: var(--Main-Black-90, #292E32);
     font-feature-settings: 'calt' off;
@@ -64,12 +62,11 @@
 
 .modal-footer {
     display: flex;
-    padding: 10px 16px;
-    justify-content: flex-end;
+    padding: 10px 16px 10px 24px;
+    justify-content: flex-start;
     align-items: center;
     gap: 8px;
     align-self: stretch;
-    background: var(--main-white, #FFF);
     box-shadow: 0px 1px 0px 0px #F0F0F0 inset;
 }
 
@@ -106,7 +103,17 @@
 }
 
 .modal-footer--button-continue {
-    border: 1px solid var(--Primary-Green-80, #1F9A7C);
-    background: var(--Primary-Green-80, #1F9A7C);
+    border: 1px solid var(--main-button-color, #000000);
+    background: var(--main-button-color, #000000);
     color: var(--main-white, #FFF);
+}
+
+@media only screen and (min-width: 768px) {
+    .modal {
+        width: 572px;
+    }
+
+    .modal-content {
+        height: 53px;
+    }
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.jsx b/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.jsx
new file mode 100644
index 000000000..24d88e974
--- /dev/null
+++ b/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.jsx
@@ -0,0 +1,41 @@
+import { useState, useContext } from 'react';
+import AccordionItem from './AccordionItem';
+import MyModal from '../UI/MyModal/MyModal';
+import WarnUnsavedDataModal from '../FormComponents/WarnUnsavedDataModal';
+import { DirtyFormContext } from '../../../context/DirtyFormContext';
+
+const Accordion = ({ sections }) => {
+  const [showWarningModal, setShowWarningModal] = useState(false);
+  const {  setFormIsDirty } = useContext(DirtyFormContext);
+
+  const onConfirmModal = () => {
+    setShowWarningModal(false);
+    setFormIsDirty(false);
+  };
+
+  const onCancelModal = () => {
+    setShowWarningModal(false);
+  };
+
+  return (
+    <>
+      <div className="accordion">
+        {sections.map((section) => (
+          <AccordionItem
+            key={section.title}
+            title={section.title}
+            content={section.content}
+            disabled={section.disabled}
+            warningHandler={() => setShowWarningModal(true)} />
+        ))}
+      </div>
+      <MyModal visible={showWarningModal}>
+        <WarnUnsavedDataModal
+          onCancel={onCancelModal}
+          onConfirm={onConfirmModal} />
+      </MyModal>
+    </>
+  );
+};
+
+export default Accordion;
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.module.css b/FrontEnd/src/pages/ProfilePage/Mobile/Accordion.module.css
new file mode 100644
index 000000000..e69de29bb
diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.jsx b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.jsx
new file mode 100644
index 000000000..624678ec1
--- /dev/null
+++ b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.jsx
@@ -0,0 +1,32 @@
+import { useState, useContext } from 'react';
+import css from './AccordionItem.module.css';
+import { DirtyFormContext } from '../../../context/DirtyFormContext';
+
+const AccordionItem = (props) => {
+    const [isOpen, setIsOpen] = useState(false);
+    const { formIsDirty } = useContext(DirtyFormContext);
+
+    const toggle = () => {
+        if (!props.disabled) {
+            formIsDirty ? props.warningHandler() : setIsOpen(!isOpen);
+        }
+    };
+
+    return (
+        <div className={css['accordion-item']}>
+            <button className={`${css['accordion-button']} ${props.disabled ? css['disabled'] : ''}`}
+                    onClick={toggle}>
+                <p className={props.title === 'Видалити профіль' ? css['danger'] : ''}>
+                    {props.title}
+                </p>
+               {!props.disabled && <img src={`${process.env.REACT_APP_PUBLIC_URL}/svg/arrow-${isOpen ? 'up' : 'down'}.svg`}></img>}
+            </button>
+            <div className={css['divider']}></div>
+            <div className={`${css['accordion-content']} ${isOpen ? '' : css['close']}`}>
+                {props.content}
+            </div>
+        </div>
+    );
+};
+
+export default AccordionItem;
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.module.css b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.module.css
new file mode 100644
index 000000000..5ca64ecdd
--- /dev/null
+++ b/FrontEnd/src/pages/ProfilePage/Mobile/AccordionItem.module.css
@@ -0,0 +1,54 @@
+.accordion-content {
+    max-height: 2500px;
+    transition: max-height 0.5s ease-in-out;
+    overflow: hidden;
+    border-radius: 6px;
+}
+
+.accordion-content.close {
+    max-height: 0;
+}
+
+.accordion-button {
+    display: flex;
+    background-color: var(--main-white);
+    font-family: var(--font-main);
+    font-size: 16px;
+    width: 335px;
+    margin-left: 3px;
+    text-align: left;
+    padding: 4px 6px;
+    position: relative;
+    border-radius: 10px;
+    padding-top: 13px;
+    height: 49px;
+    cursor: pointer;
+    color: var(--link-text-color);
+}
+
+.accordion-button img {
+    top: 20px;
+    position: absolute;
+    right: 5px;
+}
+
+.accordion-item {
+    border-radius: 6px;
+    width: 342px;
+    background-color: var(--main-white);
+    margin: 6px;
+}
+
+.divider {
+    width: 100%;
+    height: 1px;
+    background-color: var(--light-seashell-background);
+}
+
+.danger {
+    color: var(--delete-text-color);
+}
+
+.disabled {
+    color: var(--disabled-link);
+}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx
new file mode 100644
index 000000000..befa4f204
--- /dev/null
+++ b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.jsx
@@ -0,0 +1,70 @@
+import Accordion from './Accordion';
+import AdditionalInfo from '../FormComponents/AdditionalInfo';
+import ContactsInfo from '../FormComponents/ContactsInfo';
+import DeleteProfilePage from '../FormComponents/DeleteProfileComponent/DeleteProfilePage';
+import GeneralInfo from '../FormComponents/GeneralInfo';
+import ProductServiceInfo from '../FormComponents/ProductServiceInfo';
+import StartupInfo from '../FormComponents/StartupInfo';
+import UserInfo from '../FormComponents/UserInfo';
+import ChangePassword from '../FormComponents/ChangePassword';
+import Loader from '../../../components/Loader/Loader';
+import { useAuth, useProfile } from '../../../hooks';
+import css from './EditProfileMobile.module.css';
+
+
+
+
+const EditProfileMobile = () => {
+  const { user } = useAuth();
+  const { profile } = useProfile();
+  if (user && profile) {
+    const sections = [
+      {
+        title: 'Інформація про користувача',
+        content: <UserInfo user={user}
+          profile={profile} />
+      },
+      {
+        title: 'Загальна інформація',
+        content: <GeneralInfo profile={profile} />
+      },
+      {
+        title: 'Контакти',
+        content: <ContactsInfo profile={profile} />
+      },
+      {
+        title: 'Інформація про товари/послуги',
+        content: <ProductServiceInfo profile={profile} />,
+        disabled: !profile.is_registered
+      },
+      {
+        title: 'Додаткова інформація',
+        content: <AdditionalInfo profile={profile} />,
+        disabled: !profile.is_registered
+      },
+      {
+        title: 'Стартап',
+        content: <StartupInfo profile={profile} />,
+        disabled: !profile.is_startup
+      },
+      {
+        title: 'Змінити пароль',
+        content: <ChangePassword user={user} />
+      },
+      {
+        title: 'Видалити профіль',
+        content: <DeleteProfilePage />
+      },
+    ];
+    return (
+      <div className={css['container']}>
+        <h2 className={css['head']}>Профіль користувача</h2>
+        <Accordion sections={sections} />
+      </div>
+    );
+  } else {
+    return <Loader />;
+  }
+};
+
+export default EditProfileMobile;
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css
new file mode 100644
index 000000000..ddce67b96
--- /dev/null
+++ b/FrontEnd/src/pages/ProfilePage/Mobile/EditProfileMobile.module.css
@@ -0,0 +1,13 @@
+.container {
+    width: 343px;
+    padding: 20px 16px;
+    background-color: #F9F5EC;
+    margin: auto;
+}
+
+.head {
+    font-family: var(--font-main);
+    font-size: 20px;
+    font-weight: 700;
+    padding: 14px 8px;
+}
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx
index 7de127d7b..e36aff560 100644
--- a/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx
+++ b/FrontEnd/src/pages/ProfilePage/ProfilePage.jsx
@@ -1,41 +1,60 @@
 import css from './ProfilePage.module.css';
 import Description from './ProfilePageComponents/Description';
 import ProfileContent from './ProfilePageComponents/ProfileContent';
-import { useState } from 'react';
-import BreadCrumbs from '../../components/BreadCrumbs/BreadCrumbs';
+import { useState, useEffect } from 'react';
+import { DirtyFormContext } from '../../context/DirtyFormContext';
 import Loader from '../../components/Loader/Loader';
 import { useAuth, useProfile } from '../../hooks';
+import useWindowWidth from '../../hooks/useWindowWidth';
+import EditProfileMobile from './Mobile/EditProfileMobile';
 
 const ProfilePage = () => {
+  const [formIsDirty, setFormIsDirty] = useState(false);
   const { user } = useAuth();
   const { profile } = useProfile();
-  const [formName, setFormName] = useState('');
+  const windowWidth = useWindowWidth();
 
-  const currentFormNameHandler = (currentName) => {
-    setFormName(currentName);
-  };
+  useEffect(() => {
+    const onBeforeUnload = (e) => {
+      if (formIsDirty) {
+        e.preventDefault();
+        e.returnValue = '';
+      }
+    };
+    window.addEventListener('beforeunload', onBeforeUnload);
+    return () => {
+      window.removeEventListener('beforeunload', onBeforeUnload);
+    };
+  }, [formIsDirty]);
+
+
+  if (windowWidth < 768) {
+    return (
+      <DirtyFormContext.Provider value={{ formIsDirty, setFormIsDirty }}>
+        <EditProfileMobile/>
+      </DirtyFormContext.Provider>
+    );
+  }
 
   return (
     <div className={css['container']}>
-      <BreadCrumbs currentPage="Профіль" />
-      {!profile ? (
-        <Loader />
-      ) : (
-        <>
-          <Description
-            companyName={profile.name}
-            companyLogo={profile?.logo?.path}
-            formName={formName}
-          />
-          <ProfileContent
-            user={user}
-            profile={profile}
-            currentFormNameHandler={currentFormNameHandler}
-            formName={formName}
-          />
-        </>
-      )}
-    </div>
+      <DirtyFormContext.Provider value={{ formIsDirty, setFormIsDirty }}>
+        {!profile ? (
+          <Loader />
+        ) : (
+          <>
+            <Description
+              companyName={profile.name}
+              companyLogo={profile?.logo?.path}
+            />
+            <ProfileContent
+              user={user}
+              profile={profile}
+            />
+          </>
+        )}
+      </DirtyFormContext.Provider>
+    </div >
   );
 };
 
diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePage.module.css b/FrontEnd/src/pages/ProfilePage/ProfilePage.module.css
index 5fc31f3e5..cb8a02b61 100644
--- a/FrontEnd/src/pages/ProfilePage/ProfilePage.module.css
+++ b/FrontEnd/src/pages/ProfilePage/ProfilePage.module.css
@@ -2,5 +2,11 @@
     display: flex;
     flex-direction: column;
     padding-top: 32px;
-    left: 192px;
+    background-color: var(--light-seashell-background);
+}
+
+@media only screen and (min-width: 1200px) {
+    .container {
+        padding-left: 70px;
+    }
 }
diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx
index c1e2a89a9..ee9a03bde 100644
--- a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx
+++ b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.jsx
@@ -1,44 +1,12 @@
-import { PropTypes } from 'prop-types';
 import css from './Description.module.css';
 
-const DESCRIPTIONS = {
-  UserInfo: 'Інформація про користувача платформи',
-  GeneralInfo: 'Інформація про компанію',
-  ContactsInfo: 'Інформація про компанію',
-  ProductServiceInfo: 'Інформація про компанію',
-  AdditionalInfo: 'Інформація про компанію',
-  StartupInfo: 'Інформація про стартап',
-  Delete: 'Видалення профілю',
-  ChangePassword: 'Зміна паролю користувача',
-};
-
-const Description = (props) => {
+const Description = () => {
   return (
     <div className={css['description__section']}>
-      <img
-        className={css['description__avatar']}
-        src={
-          props.companyLogo ||
-          `${process.env.REACT_APP_PUBLIC_URL}/companies-logos/default_logo.png`
-        }
-        alt="Company logo"
-      />
-      <div className={css['description__content']}>
-        <div className={css['company__attributes']}>
-          <div className={css['companyName']}>{props.companyName}</div>
-        </div>
-        <div className={css['description__text']}>
-          {DESCRIPTIONS[props.formName]}
-        </div>
-      </div>
+      <h2 className={css['description-head']}>Профіль користувача</h2>
     </div>
   );
 };
 
 export default Description;
 
-Description.propTypes = {
-  companyName: PropTypes.string,
-  companyLogo: PropTypes.string,
-  formName: PropTypes.string,
-};
diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.module.css b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.module.css
index ade37f1e8..1804a7ef3 100644
--- a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.module.css
+++ b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/Description.module.css
@@ -4,57 +4,12 @@
     width: 400px;
     height: 40px;
     gap: 12px;
-    padding-left: 192px;
+    padding-left: 24px;
 }
 
-.description__avatar {
-    width: 40px;
-    height: 40px;
-    flex-shrink: 0;
-    border-radius: 26px;
-    box-shadow: 0px 0px 2px 0px rgba(65, 64, 69, 0.20);
-    object-fit: cover;
-}
-
-.description__content {
-    display: flex;
-    flex-direction: column;
-    align-items: flex-start;
-}
-
-.company__attributes {
-    display: flex;
-    align-items: flex-start;
-    gap: 16px;
-}
-
-.companyName {
+.description-head {
     font-family: var(--font-main);
-    font-size: 16px;
     font-weight: 700;
-    line-height: 20px;
-    letter-spacing: 0em;
-    text-align: left;
-    color: #25292C;
-    text-transform: uppercase;
-}
-
-.brend {
-    font-family: var(--font-main);
-    font-size: 16px;
-    font-weight: 600;
-    line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: left;
-    color: #25292C;
-}
-
-.description__text {
-    font-family: var(--font-main);
-    font-size: 11px;
-    font-weight: 400;
-    line-height: 16px;
-    letter-spacing: 0em;
-    text-align: left;
-    color: #292E32;
+    font-size: 32px;
+    color: var(--edit-page-head-color);
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx
index 0e4e89ee0..1a0cb1875 100644
--- a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx
+++ b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.jsx
@@ -1,7 +1,7 @@
 import { Tooltip } from 'antd';
 import { PropTypes } from 'prop-types';
 import { Link, NavLink, Route, Routes, useBlocker } from 'react-router-dom';
-import { useEffect, useState } from 'react';
+import { useEffect, useState,useContext } from 'react';
 import { DirtyFormContext } from '../../../context/DirtyFormContext';
 import AdditionalInfo from '../FormComponents/AdditionalInfo';
 import ContactsInfo from '../FormComponents/ContactsInfo';
@@ -10,19 +10,17 @@ import GeneralInfo from '../FormComponents/GeneralInfo';
 import ProductServiceInfo from '../FormComponents/ProductServiceInfo';
 import StartupInfo from '../FormComponents/StartupInfo';
 import UserInfo from '../FormComponents/UserInfo';
-import ProfileFormButton from '../UI/ProfileFormButton/ProfileFormButton';
 import MyModal from '../UI/MyModal/MyModal';
 import WarnUnsavedDataModal from '../FormComponents/WarnUnsavedDataModal';
 import ChangePassword from '../FormComponents/ChangePassword';
 import css from './ProfileContent.module.css';
 import tooltipInnerContentStyles from '../../CustomThemes/customProfileTooltipThemes';
 import INFOLINKS from './TextInfoLinks';
-import FORM_NAMES from './TextFormNames';
 
 
 const ProfileContent = (props) => {
     const [modal, setModal] = useState(false);
-    const [formIsDirty, setFormIsDirty] = useState(false);
+    const { formIsDirty, setFormIsDirty } = useContext(DirtyFormContext);
     const blocker = useBlocker(
         ({ currentLocation, nextLocation }) =>
             formIsDirty &&
@@ -48,18 +46,7 @@ const ProfileContent = (props) => {
         setModal(false);
     };
 
-    useEffect(() => {
-        const onBeforeUnload = (e) => {
-            if (formIsDirty) {
-                e.preventDefault();
-                e.returnValue = '';
-            }
-        };
-        window.addEventListener('beforeunload', onBeforeUnload);
-        return () => {
-            window.removeEventListener('beforeunload', onBeforeUnload);
-        };
-    }, [formIsDirty]);
+
 
     return (
         <div className={css['profile__main']}>
@@ -109,59 +96,41 @@ const ProfileContent = (props) => {
                         Видалити профіль
                     </Link>
                 </div>
-                <DirtyFormContext.Provider value={{ formIsDirty, setFormIsDirty }}>
+
                     <Routes>
                         <Route
                             path="/user-info"
                             element={<UserInfo user={props.user}
-                                profile={props.profile}
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[0]} />} />
+                                profile={props.profile} />} />
                         <Route
                             path="/general-info"
                             element={<GeneralInfo
-                                profile={props.profile}
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[1]} />} />
+                                profile={props.profile} />} />
                         <Route path="/contacts"
                             element={<ContactsInfo
-                                profile={props.profile}
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[2]} />} />
+                                profile={props.profile} />} />
                         <Route
                             path="/products-service-info"
                             element={<ProductServiceInfo
-                                profile={props.profile}
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[3]} />} />
+                                profile={props.profile} />} />
                         <Route
                             path="/additional-info"
                             element={<AdditionalInfo
-                                profile={props.profile}
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[4]} />} />
+                                profile={props.profile} />} />
                         <Route
                             path="/startup"
                             element={<StartupInfo
-                                profile={props.profile}
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[5]} />} />
+                                profile={props.profile} />} />
                         <Route
                             path="/delete"
-                            element={<DeleteProfilePage
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[6]} />} />
+                            element={<DeleteProfilePage />} />
                         <Route
                             path="/change-password"
                             element={<ChangePassword
-                                user={props.user}
-                                currentFormNameHandler={props.currentFormNameHandler}
-                                curForm={FORM_NAMES[7]} />} />
+                                user={props.user} />} />
                     </Routes>
-                </DirtyFormContext.Provider>
-            </div>
-                {props.formName !== 'Delete' && <ProfileFormButton formName={props.formName} formState={formIsDirty} />}
 
+            </div>
                 {blocker.state === 'blocked' &&
                     (
                         <MyModal visible={modal}>
@@ -198,6 +167,4 @@ ProfileContent.propTypes = {
         categories: PropTypes.array,
         activities: PropTypes.array,
     }).isRequired,
-    currentFormNameHandler: PropTypes.func,
-    formName: PropTypes.string,
 };
diff --git a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.module.css b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.module.css
index a0b3b80a5..e0e2d44a3 100644
--- a/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.module.css
+++ b/FrontEnd/src/pages/ProfilePage/ProfilePageComponents/ProfileContent.module.css
@@ -9,7 +9,7 @@
     min-height: var(--profile-min-height-block);
     display: flex;
     padding-bottom: 45px;
-    padding-left: 192px;
+    padding-left: 26px;
     gap: 16px;
 }
 
@@ -17,8 +17,8 @@
     display: flex;
     flex-direction: column;
     align-items: flex-start;
-    width: 222px;
-    gap: 12px;
+    width: 223px;
+    gap: 10px;
 }
 
 .profile__infolink {
@@ -30,6 +30,8 @@
     letter-spacing: -0.01em;
     text-align: left;
     text-decoration: none;
+    padding: 5px 10px;
+    width: 203px;
 }
 
 .profile__infolink-active {
@@ -37,6 +39,7 @@
     font-weight: 600;
     color: #000000;
     text-decoration: none;
+    background-color: var(--main-white);
 }
 
 .profile__infolink-disabled {
diff --git a/FrontEnd/src/pages/ProfilePage/UI/MyModal/MyModal.module.css b/FrontEnd/src/pages/ProfilePage/UI/MyModal/MyModal.module.css
index 5f7a2126b..7723818e5 100644
--- a/FrontEnd/src/pages/ProfilePage/UI/MyModal/MyModal.module.css
+++ b/FrontEnd/src/pages/ProfilePage/UI/MyModal/MyModal.module.css
@@ -10,11 +10,9 @@
 }
 
 .myModal__content {
-    background-color: white;
-    width: 572px;
-    top: 160px;
-    left: 470px;
-    border-radius: 2px;
+    background-color: var(--main-white);
+    width: 345px;
+    border-radius: 6px;
 }
 
 .myModal.active {
@@ -22,4 +20,10 @@
     justify-content: center;
     align-items: center;
     z-index: 2;
+}
+
+@media only screen and (min-width: 768px) {
+    .myModal__content {
+        width: 572px;
+    }
 }
\ No newline at end of file
diff --git a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx
index 2f716b84b..25625040c 100644
--- a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx
+++ b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.jsx
@@ -1,15 +1,18 @@
+import { useContext } from 'react';
+import { DirtyFormContext } from '../../../../context/DirtyFormContext';
+
 import css from './ProfileFormButton.module.css';
 
-const ProfileFormButton = (props) => {
+const ProfileFormButton = () => {
+  const { formIsDirty } = useContext(DirtyFormContext);
   return (
-    <div className={css['sign-up-footer__buttons']}>
+    <div className={css['submit-button__conteiner']}>
       <button
-        form={props.formName}
-        className={css['sign-up__button']}
+        className={css['submit-button']}
         type="submit"
-        disabled={props.formState === false}
+        disabled={!formIsDirty}
       >
-        Зберегти зміни
+        Зберегти
       </button>
     </div>
   );
diff --git a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css
index a30e8a64a..085756895 100644
--- a/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css
+++ b/FrontEnd/src/pages/ProfilePage/UI/ProfileFormButton/ProfileFormButton.module.css
@@ -1,38 +1,24 @@
-.sign-up-footer__buttons {
+.submit-button__conteiner {
     display: flex;
     align-items: flex-start;
-    padding: 6px 0px;
-    background: #EFFFF6;
-    width: var(--main-block-size);
+    padding: 11px 17px;
+    background-color: var(--main-white);
 }
 
-.sign-up__button {
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    gap: 10px;
-    border-radius: 4px;
-    border: 1px solid #1F9A7C;
-    background: #1F9A7C;
-    box-shadow: 0px 2px 0px 0px rgba(0, 0, 0, 0.04);
-    color: white;
-    text-align: center;
-    font-feature-settings: 'calt' off;
-    font-style: normal;
-    padding: 5px 15px 5px 15px;
+.submit-button {
     border-radius: 4px;
-    border: 1px;
-    gap: 10px;
+    background: var(--main-button-color);
+    color: var(--main-white);
+    padding: 10px 16px;
     font-family: var(--font-main);
     font-size: 16px;
     font-weight: 600;
     line-height: 20px;
-    letter-spacing: -0.01em;
-    text-align: center;
     cursor: pointer;
-    margin-left: 430px;
 }
 
-.sign-up__button:active {
-    transform: translateY(2px);
-}
+@media only screen and (min-width: 768px) {
+    .submit-button__conteiner {
+        padding: 11px 24px;
+    }
+}
\ No newline at end of file
diff --git a/FrontEnd/src/routes/ClientRouter.jsx b/FrontEnd/src/routes/ClientRouter.jsx
index f56159fb3..b8a323901 100644
--- a/FrontEnd/src/routes/ClientRouter.jsx
+++ b/FrontEnd/src/routes/ClientRouter.jsx
@@ -33,98 +33,123 @@ import '../pages/CustomThemes/customToastStyles.css';
 import Contact from '../components/Contact/Contact';
 import ErrorPage404 from '../pages/ErrorPages/ErrorPage404';
 
+import { BurgerMenuProvider } from '../context/BurgerMenuContext';
+import PageWrapper from '../components/PageWrapper/PageWrapper';
+
 function ClientRouter() {
   const { isAuth, user, logout, isLoading } = useAuth();
+
   return (
-    <ConfigProvider
-      theme={customTheme}
-    >
-      <SWRConfig value={{
-        onError: (error) => {
-          console.error(error);
-          if (error.status === 401) {
-            logout();
-          }
-        }
-      }}>
-      <Header isAuthorized={isAuth} />
-      {isLoading ? <Loader /> :
-      (<Routes>
-        <Route path="/" element={<MainPage isAuthorized={isAuth} />} />
-        {isAuth ? (
-          <Route path="/profile/*" element={<ProfilePage />} />
+    <ConfigProvider theme={customTheme}>
+      <SWRConfig
+        value={{
+          onError: (error) => {
+            console.error(error);
+            if (error.status === 401) {
+              logout();
+            }
+          },
+        }}
+      >
+        <BurgerMenuProvider>
+          <Header isAuthorized={isAuth} />
+          {isLoading ? (
+            <Loader />
           ) : (
-          <Route path="/profile/*" element={<Navigate to="/" />} />
+            <PageWrapper>
+              <Routes>
+                <Route path="/" element={<MainPage isAuthorized={isAuth} />} />
+                {isAuth ? (
+                  <Route path="/profile/*" element={<ProfilePage />} />
+                ) : (
+                  <Route path="/profile/*" element={<Navigate to="/" />} />
+                )}
+                <Route
+                  path="/profile-detail/:id"
+                  element={<ProfileDetailPage isAuthorized={isAuth} />}
+                />
+                <Route
+                  path="/profiles"
+                  element={<ProfileListPage isAuthorized={isAuth} />}
+                />
+                {isAuth ? (
+                  <Route
+                    path="/login"
+                    element={<Navigate to="/profile/user-info" />}
+                  />
+                ) : (
+                  <Route path="/login" element={<LoginPage />} />
+                )}
+                {isAuth ? (
+                  <Route
+                    path="/sign-up"
+                    element={<Navigate to="/profile/user-info" />}
+                  />
+                ) : (
+                  <Route path="/sign-up" element={<SignUpPage />} />
+                )}
+                <Route
+                  path="/sign-up/completion"
+                  element={<SignUpCompletionPage />}
+                />
+                <Route
+                  path="/sign-up/resend-activation"
+                  element={<ResendActivationPage />}
+                />
+                <Route
+                  path="/activate/:uid/:token"
+                  element={<ActivateProfilePage />}
+                />
+                <Route
+                  path="/reset-password"
+                  element={<SendEmailForgotPasswordPage />}
+                />
+                <Route
+                  path="/reset-password/completion"
+                  element={<ForgotPasswordCompletionPage />}
+                />
+                <Route
+                  path="/password/reset/confirm/:uid/:token"
+                  element={<RestorePasswordPage />}
+                />
+                <Route
+                  path="/reset-password/successfully"
+                  element={<RestorePasswordSuccessPage />}
+                />
+                <Route
+                  path="/reset-password/failed"
+                  element={<RestorePasswordFailedPage />}
+                />
+                <Route path="/privacy-policy" element={<PrivacyPolicy />} />
+                <Route
+                  path="/terms-and-conditions"
+                  element={<TermsAndConditions />}
+                />
+                <Route
+                  path="/cookies-policy"
+                  element={<CookiesPolicyComponent />}
+                />
+                <Route path="/contact" element={<Contact />} />
+                <Route
+                  path="/search"
+                  element={<Search isAuthorized={isAuth} userData={user} />}
+                />
+                <Route
+                  path="/moderation/:id/:action"
+                  element={<ModerationModal />}
+                />
+                <Route path="*" element={<ErrorPage404 />} />
+              </Routes>
+            </PageWrapper>
           )}
-        <Route
-          path="/profile-detail/:id"
-          element={<ProfileDetailPage isAuthorized={isAuth} />}
-        />
-        <Route
-          path="/profiles"
-          element={<ProfileListPage isAuthorized={isAuth} />}
-        />
-        {isAuth ? (
-          <Route path="/login" element={<Navigate to="/profile/user-info" />} />
-        ) : (
-          <Route path="/login" element={<LoginPage />} />
-        )}
-        {isAuth ? (
-          <Route
-            path="/sign-up"
-            element={<Navigate to="/profile/user-info" />}
+          <Footer />
+          <ToastContainer
+            position="top-right"
+            autoClose={3000}
+            theme="colored"
+            icon={false}
           />
-        ) : (
-          <Route path="/sign-up" element={<SignUpPage />} />
-        )}
-        <Route path="/sign-up/completion" element={<SignUpCompletionPage />} />
-        <Route
-          path="/sign-up/resend-activation"
-          element={<ResendActivationPage />}
-        />
-        <Route
-          path="/activate/:uid/:token"
-          element={<ActivateProfilePage />}
-        />
-        <Route
-          path="/reset-password"
-          element={<SendEmailForgotPasswordPage />}
-        />
-        <Route
-          path="/reset-password/completion"
-          element={<ForgotPasswordCompletionPage />}
-        />
-        <Route
-          path="/password/reset/confirm/:uid/:token"
-          element={<RestorePasswordPage />}
-        />
-        <Route
-          path="/reset-password/successfully"
-          element={<RestorePasswordSuccessPage />}
-        />
-        <Route
-          path="/reset-password/failed"
-          element={<RestorePasswordFailedPage />}
-        />
-        <Route path="/privacy-policy" element={<PrivacyPolicy />} />
-        <Route path="/terms-and-conditions" element={<TermsAndConditions />} />
-        <Route path="/cookies-policy" element={<CookiesPolicyComponent />} />
-        <Route path="/contact" element={<Contact />} />
-        <Route
-          path="/search"
-          element={<Search isAuthorized={isAuth} userData={user} />}
-        />
-        <Route path="/moderation/:id/:action" element={<ModerationModal />}
-        />
-        <Route path="*" element={< ErrorPage404 />} />
-      </Routes>)}
-      <Footer />
-      <ToastContainer
-        position="top-right"
-        autoClose={3000}
-        theme="colored"
-        icon={false}
-      />
+        </BurgerMenuProvider>
       </SWRConfig>
     </ConfigProvider>
   );
diff --git a/FrontEnd/src/utils/checkFormIsDirty.js b/FrontEnd/src/utils/checkFormIsDirty.js
index 4c9b5dc1d..2d58f5809 100644
--- a/FrontEnd/src/utils/checkFormIsDirty.js
+++ b/FrontEnd/src/utils/checkFormIsDirty.js
@@ -45,7 +45,7 @@ const checkFormIsDirty = (fields, userData, profileData) => {
     }
 
     if (key === 'founded') {
-      if ((defaultValue !== null && currentValue !== null && defaultValue.toString() !== currentValue.toString()) ||
+      if ((defaultValue !== null && currentValue !== null && defaultValue?.toString() !== currentValue?.toString()) ||
           (defaultValue === null && (currentValue !== null && currentValue !== ''))) {
         return true;
       }