diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx
index 9d943eb..fc9b704 100644
--- a/src/s1-main/App.tsx
+++ b/src/s1-main/App.tsx
@@ -1,5 +1,7 @@
 import React from 'react'
 import HW2 from '../s2-homeworks/hw02/HW2'
+import HW3 from '../s2-homeworks/hw03/HW3'
+import HW4 from '../s2-homeworks/hw04/HW4'
 import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
 // import HW2 from '../s2-homeworks/hw02/HW2'
@@ -19,9 +21,9 @@ const App = () => {
             {/*<div>react homeworks:</div>*/}
 
             {/*<HW1/>*/}
-            <HW2/>
+            {/*<HW2/>*/}
             {/*<HW3/>*/}
-            {/*<HW4/>*/}
+            <HW4/>
 
             {/*<HW5/>*/}
         </div>
diff --git a/src/s2-homeworks/hw01/HW1.tsx b/src/s2-homeworks/hw01/HW1.tsx
index 0f4e9ca..24b2f27 100644
--- a/src/s2-homeworks/hw01/HW1.tsx
+++ b/src/s2-homeworks/hw01/HW1.tsx
@@ -57,7 +57,7 @@ const HW1 = () => {
 
             {/*<hr/>*/}
             {/*можно убрать этот тег*/}
-            {/*<hr/>*/}
+            <hr />
             {/*можно убрать этот тег*/}
         </div>
     )
diff --git a/src/s2-homeworks/hw02/HW2.tsx b/src/s2-homeworks/hw02/HW2.tsx
index 8220dac..07816d1 100644
--- a/src/s2-homeworks/hw02/HW2.tsx
+++ b/src/s2-homeworks/hw02/HW2.tsx
@@ -24,11 +24,11 @@ const defaultAffairs: any = [ // need to fix any // AffairType[]
 // pure helper functions
 export const filterAffairs = (affairs: any, filter: any): any => { // need to fix any // (affairs: AffairType[], filter: FilterType): AffairType[]
     if (filter === 'all') return affairs // создаёт студент
-    // else if (filter === 'low') return affairs.filter(a => a.priority === 'low')
-    // else if (filter === 'middle') return affairs.filter(a => a.priority === 'middle')
-    // else if (filter === 'high') return affairs.filter(a => a.priority === 'high')
-    // else {
-    // }
+        // else if (filter === 'low') return affairs.filter(a => a.priority === 'low')
+        // else if (filter === 'middle') return affairs.filter(a => a.priority === 'middle')
+        // else if (filter === 'high') return affairs.filter(a => a.priority === 'high')
+        // else {
+        // }
     // return []
     else return affairs.filter((a: any) => a.priority === filter) // need to fix // создаёт студент
 }
@@ -44,7 +44,7 @@ function HW2() {
     const deleteAffairCallback = (_id: any) => setAffairs(deleteAffair(affairs, _id)) // need to fix any // number
 
     return (
-        <div id={'hw2'} className={s2.hw}>
+        <div id={'hw2'} className={s2.hw} style={{marginTop: '39px'}}>
             {/*<hr/>*/}
             {/*можно убрать этот тег*/}
 
diff --git a/src/s2-homeworks/hw03/Greeting.module.css b/src/s2-homeworks/hw03/Greeting.module.css
index 1f9d5cf..fcfec60 100644
--- a/src/s2-homeworks/hw03/Greeting.module.css
+++ b/src/s2-homeworks/hw03/Greeting.module.css
@@ -1,61 +1,80 @@
 .greetingForm {
     display: flex;
-    align-items: center;
+    flex-direction: column;
+    padding: 31px 0 0 70px;
+    height: 336px;
+}
+
+.inputAndButtonContainer {
+    display: flex;
+    gap: 24px;
+    margin-bottom: 22px;
 }
 
 .error {
     position: absolute;
     color: red;
-    margin-left: 10px;
-    margin-top: -14px;
+    margin-left: 14px;
+    margin-top: -28px;
 }
 
 .input {
-    margin: 10px;
-
-    background: #003300;
-    color: #99ff99;
+    border: 1px solid #d1d1d1;
+    border-radius: 5px;
+    width: 370px;
+    font-family: 'Montserrat', sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    padding: 8px 0 8px 12px;
+    color: #000;
 }
 
 .input:focus {
     outline: none;
-    border: #99ff99 solid 2px;
+    border: 1px solid #06c;
 }
 
 .errorInput {
-    margin: 10px;
-
-    background: #003300;
-    color: #99ff99;
-
-    border: 2px solid red;
-    outline: none;
+    border: 1px solid red;
 }
 
 .button {
-    margin: 10px;
-    width: 60px;
-
-    background: #003300;
-    color: #99ff99;
+    margin-left: 12px;
+    background: #06c;
+    color: white;
+    border: none;
+    border-radius: 15px;
     outline: none;
+    padding: 8px 24px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
+    cursor: pointer;
 }
+
 .button:focus {
-    outline: #99ff99 solid 1px;
+
 }
 
 .button:active {
-    background: #99ff99;
+
 }
 
 .button:disabled {
-    color: #005500;
+    opacity: 0.6;
+    cursor: default;
 }
 
 .count {
-    margin: 10px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 17px;
+    margin-bottom: 9px;
 }
 
 .greeting {
-    margin-left: 10px;
 }
\ No newline at end of file
diff --git a/src/s2-homeworks/hw03/Greeting.tsx b/src/s2-homeworks/hw03/Greeting.tsx
index e80d7eb..091ef6f 100644
--- a/src/s2-homeworks/hw03/Greeting.tsx
+++ b/src/s2-homeworks/hw03/Greeting.tsx
@@ -1,4 +1,4 @@
-import React, {ChangeEvent, KeyboardEvent} from 'react'
+import React, { ChangeEvent, KeyboardEvent } from 'react'
 import s from './Greeting.module.css'
 
 type GreetingPropsType = {
@@ -16,24 +16,28 @@ type GreetingPropsType = {
 const Greeting: React.FC<GreetingPropsType> = (
     {name, setNameCallback, addUser, onEnter, error, totalUsers, lastUser, onBlur} // деструктуризация пропсов
 ) => {
-    const inputClass = error ? s.errorInput : s.input // need to fix with (?:)
+    const inputClass = error ? `${s.input} ${s.errorInput}` : s.input // need to fix with (?:)
 
     return (
         <div id={'hw3-form'} className={s.greetingForm}>
-            <div>
-                <input
-                    id={'hw3-input'}
-                    value={name}
-                    onChange={setNameCallback}
-                    className={inputClass}
-                    onKeyDown={onEnter}
-                    onBlur={onBlur}
-                />
-                <div id={'hw3-error'} className={s.error}>{error}</div>
+            <div id={'hw3-users-total'} className={s.count}>{totalUsers}</div>
+            <div className={s.inputAndButtonContainer}>
+                <div>
+                    <input
+                        id={'hw3-input'}
+                        value={name}
+                        onChange={setNameCallback}
+                        className={inputClass}
+                        onKeyDown={onEnter}
+                        onBlur={onBlur}
+                    />
+                    <div id={'hw3-error'} className={s.error}>{error}</div>
+                </div>
+
+                <button id={'hw3-button'} onClick={addUser} className={s.button} disabled={!name}>add</button>
+
             </div>
 
-            <button id={'hw3-button'} onClick={addUser} className={s.button} disabled={!name}>add</button>
-            <div id={'hw3-users-total'} className={s.count}>{totalUsers}</div>
             {lastUser && (
                 <div className={s.greeting}>
                     hello{' '}
diff --git a/src/s2-homeworks/hw03/GreetingContainer.tsx b/src/s2-homeworks/hw03/GreetingContainer.tsx
index fb1a5e4..d1f6439 100644
--- a/src/s2-homeworks/hw03/GreetingContainer.tsx
+++ b/src/s2-homeworks/hw03/GreetingContainer.tsx
@@ -1,6 +1,6 @@
-import React, {ChangeEvent, KeyboardEvent, useState} from 'react'
+import React, { ChangeEvent, KeyboardEvent, useState } from 'react'
 import Greeting from './Greeting'
-import {UserType} from './HW3'
+import { UserType } from './HW3'
 
 type GreetingContainerPropsType = {
     users: UserType[] // need to fix any
@@ -28,7 +28,7 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser
         const trimmedName = name.trim()
 
         if (!trimmedName) {
-            setError('name is require!')
+            setError('name is required!')
         }
         setName(trimmedName) // need to fix
     }
@@ -39,7 +39,7 @@ const GreetingContainer: React.FC<GreetingContainerPropsType> = ({users, addUser
 
             if (!trimmedName) {
                 setName('')
-                setError('name is require!')
+                setError('name is required!')
             } else {
                 addUserCallback(trimmedName)
                 setName('')
diff --git a/src/s2-homeworks/hw03/HW3.tsx b/src/s2-homeworks/hw03/HW3.tsx
index 493838d..3130aa2 100644
--- a/src/s2-homeworks/hw03/HW3.tsx
+++ b/src/s2-homeworks/hw03/HW3.tsx
@@ -1,5 +1,5 @@
-import React, {useState} from 'react'
-import {v1} from 'uuid'
+import React, { useState } from 'react'
+import { v1 } from 'uuid'
 import s from './Greeting.module.css'
 import s2 from '../../s1-main/App.module.css'
 import GreetingContainer from './GreetingContainer'
@@ -23,16 +23,17 @@ const HW3 = () => {
 
     return (
         <div id={'hw3'} className={s2.hw}>
-            <hr/>
+            {/*<hr/>*/}
             {/*можно убрать этот тег*/}
 
-            <div className={s2.hwTitle}>homeworks 3</div>
+            <div className={s2.hwTitle}>Homework #3</div>
 
             {/*для автоматической проверки дз (не менять)*/}
-            <GreetingContainer users={users} addUserCallback={addUserCallback}/>
+
 
             <hr/>
             {/*можно убрать этот тег*/}
+            <GreetingContainer users={users} addUserCallback={addUserCallback}/>
             <hr/>
             {/*можно убрать этот тег*/}
         </div>
diff --git a/src/s2-homeworks/hw04/HW4.tsx b/src/s2-homeworks/hw04/HW4.tsx
index d9b7af3..67595d6 100644
--- a/src/s2-homeworks/hw04/HW4.tsx
+++ b/src/s2-homeworks/hw04/HW4.tsx
@@ -5,18 +5,17 @@ import Stand from './Stand'
 const HW4 = () => {
     return (
         <div id={'hw4'} className={s2.hw}>
-            <hr/>
             {/*можно убрать этот тег*/}
 
-            <div className={s2.hwTitle}>homeworks 4</div>
-
+            <div className={s2.hwTitle}>Homework #4</div>
+            <hr/>
             {/*проверка отображения*/}
-            демострация возможностей компонент:
+            {/*демонстрация возможностей компонент:*/}
             <Stand/>
 
             <hr/>
             {/*можно убрать этот тег*/}
-            <hr/>
+            {/*<hr/>*/}
             {/*можно убрать этот тег*/}
         </div>
     )
diff --git a/src/s2-homeworks/hw04/Stand.module.css b/src/s2-homeworks/hw04/Stand.module.css
index f0e083a..732004c 100644
--- a/src/s2-homeworks/hw04/Stand.module.css
+++ b/src/s2-homeworks/hw04/Stand.module.css
@@ -1,16 +1,25 @@
 .stand {
     display: flex;
-    justify-content: space-around;
+    justify-content: space-between;
+    height: 336px;
+    align-items: center;
+    padding: 0 70px;
 }
 
 .inputs {
-
+    display: flex;
+    flex-direction: column;
+    gap: 48px;
 }
 
 .buttons {
-
+    display: flex;
+    flex-direction: column;
+    gap: 24px;
 }
 
 .checkboxes {
-
+    display: flex;
+    flex-direction: column;
+    gap: 36px;
 }
\ No newline at end of file
diff --git a/src/s2-homeworks/hw04/Stand.tsx b/src/s2-homeworks/hw04/Stand.tsx
index 360384c..fcb9e93 100644
--- a/src/s2-homeworks/hw04/Stand.tsx
+++ b/src/s2-homeworks/hw04/Stand.tsx
@@ -13,7 +13,7 @@ const Stand = () => {
     return (
         <div id={'hw4-stand'} className={s.stand}>
             <div className={s.inputs}>
-                инпут с ошибкой:
+                {/*инпут с ошибкой:*/}
                 <div>
                     <SuperInputText
                         id={'hw4-super-input-with-error'}
@@ -26,7 +26,7 @@ const Stand = () => {
                         }}
                     />
                 </div>
-                совместим со старым кодом
+                {/*совместим со старым кодом*/}
                 <div>
                     <SuperInputText
                         id={'hw4-super-input-like-old'}
@@ -37,15 +37,15 @@ const Stand = () => {
             </div>
 
             <div className={s.buttons}>
-                обычная кнопка:
+                {/*обычная кнопка:*/}
                 <div>
                     <SuperButton id={'hw4-super-button-default'}>default</SuperButton>
                 </div>
-                красная кнопка:
+                {/*красная кнопка:*/}
                 <div>
                     <SuperButton id={'hw4-super-button-red'} xType={'red'}>red</SuperButton>
                 </div>
-                задизэйбленная кнопка:
+                {/*задизэйбленная кнопка:*/}
                 <div>
                     <SuperButton id={'hw4-super-button-disabled'} xType={'red'} disabled>disabled</SuperButton>
                 </div>
@@ -53,7 +53,7 @@ const Stand = () => {
             </div>
 
             <div className={s.checkboxes}>
-                чекбокс с текстом:
+                {/*чекбокс с текстом:*/}
                 <div>
                     <SuperCheckbox
                         id={'hw4-super-checkbox-with-text'}
@@ -63,7 +63,7 @@ const Stand = () => {
                         some text
                     </SuperCheckbox>
                 </div>
-                совместим со старым кодом
+                {/*совместим со старым кодом*/}
                 <div>
                     <SuperCheckbox
                         id={'hw4-super-checkbox-like-old'}
diff --git a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
index a8f4624..880605a 100644
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
@@ -1,26 +1,42 @@
+
 .input:focus {
-    outline: none;
-    border: #99ff99 solid 2px;
+    border: 1px solid #06c;
 }
 
-.superInput {
-    margin: 10px;
+.errorInput:focus {
+    border: 1px solid #cc1439;
+}
 
-    background: #003300;
-    color: #99ff99;
+.input {
+    border: 1px solid #d1d1d1;
+    border-radius: 5px;
+    width: 370px;
+    font-family: 'Montserrat', sans-serif;
+    font-style: normal;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    padding: 8px 0 8px 12px;
+    color: #000;
+    outline: none;
+}
+
+.inputWrapper {
+    position: relative;
 }
 
 .errorInput {
-    margin: 10px;
-
-    background: #003300;
-    color: #99ff99;
-
-    border: 2px solid #dd3355;
+    border: 1px solid #cc1439;
 }
 
 .error {
-    color: #dd3355;
-    height: 21px;
-    margin-left: 10px;
+    font-family: 'Montserrat', sans-serif;
+    font-style: normal;
+    font-weight: 400;
+    font-size: 10px;
+    line-height: 12px;
+    color: #cc1439;
+    position: absolute;
+    top: -17px;
+    left: 0;
 }
\ No newline at end of file
diff --git a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
index f36f79f..5064858 100644
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
@@ -1,4 +1,4 @@
-import React, {ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, KeyboardEvent, ReactNode} from 'react'
+import React, { ChangeEvent, DetailedHTMLProps, InputHTMLAttributes, KeyboardEvent, ReactNode } from 'react'
 import s from './SuperInputText.module.css'
 
 // тип пропсов обычного инпута
@@ -41,7 +41,7 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = (
     const finalInputClassName = `${s.input} ${error ? s.errorInput : s.superInput} ${className}` // задача на смешивание классов
 
     return (
-        <>
+        <div className={s.inputWrapper}>
             <input
                 id={id}
                 type={'text'}
@@ -51,8 +51,8 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = (
 
                 {...restProps} // отдаём инпуту остальные пропсы если они есть (value например там внутри)
             />
-             <span id={id ? id + '-span' : undefined} className={finalSpanClassName}>{error}</span>
-        </>
+            <span id={id ? id + '-span' : undefined} className={finalSpanClassName}>{error}</span>
+        </div>
     )
 }
 
diff --git a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
index 5d5a3db..f26a0c3 100644
--- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
+++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
@@ -8,24 +8,30 @@
 }
 
 .default {
-    background: #003300;
-    color: #99ff99;
-    outline: none;
+    background: #06c;
 }
 
 .red {
-    background: #dd3355;
+    background: #cc1439;
 }
 
 .disabled {
-    color: #005500;
+    background: #004d99;
+    opacity: 0.5;
 }
 
 .button {
     position: relative;
-    margin: 10px;
     overflow: hidden;
     cursor: pointer;
+    border-radius: 15px;
+    border: none;
+    color: white;
+    padding: 5px 24px;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 600;
+    font-size: 14px;
+    line-height: 20px;
 }
 
 .button::after {
@@ -40,7 +46,7 @@
 
     transform: skew(45deg);
 
-    background-color: #ffffff;
+    background-color: #fff;
     opacity: 0.7;
 
     z-index: 14;
@@ -60,19 +66,30 @@
     height: 100vh;
     width: 300vw;
 
-    background-color: #ffffff;
+    background-color: #fff;
     opacity: 0.2;
 
     z-index: 7;
 }
 
-.button:focus {
-    outline: #99ff99 solid 1px;
+.default:hover {
+    background: #0080ff;
 }
 
-.button:active {
-    background: #99ff99;
-    color: #003300;
+.red:hover {
+    background: #ff1a47;
+}
+
+.button:focus {
+
+}
+
+.default:active {
+    background: #0059b3;
+}
+
+.red:active {
+    background: #b31232;
 }
 
 .button:disabled {
diff --git a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css
index 970a784..dc83274 100644
--- a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css
+++ b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.module.css
@@ -8,35 +8,37 @@
 /*input[type="checkbox"] - no*/
 
 .checkbox {
-    appearance: none; /*Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции.
-    Если задать значение none, то чекбокс пропадет, но по нему, тем не менее,
-    можно щелкать и состояние чекбокса будет меняться*/
+    appearance: none;
+    /*Свойство appearance изменяет внешний вид элемента интерфейса, при сохранении его функции.
+       Если задать значение none, то чекбокс пропадет, но по нему, тем не менее,
+       можно щелкать и состояние чекбокса будет меняться*/
 
-    width: 20px;
-    height: 20px;
+    width: 18px;
+    height: 18px;
 
-    /*background-repeat: no-repeat;*/
-    /*background-position: center center;*/
+    background-repeat: no-repeat;
+    background-position: center center;
 
-    /*background-size: 90% 90%;*/
-    /*vertical-align: middle;*/
-    margin-right: 10px;
-
-    background: #335533;
+    /* background-size: 90% 90%; */
+    vertical-align: middle;
+    margin-right: 8px;
+    border-radius: 3px;
+    border: 2px solid #06c;
     cursor: pointer;
 }
 
 .checkbox:checked {
     appearance: none;
 
-    background-image: url("checked.png");
+    background-image: url("checked.svg");
     /*background: #99ff99;*/
 }
 
 .checkbox:focus {
-    outline: #99ff99 solid 1px;
+    border-color: #0059b3;
 }
 
 .spanClassName {
-
+    font-family: 'Montserrat', sans-serif;
+    color: #06c;
 }
\ No newline at end of file
diff --git a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/checked.svg b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/checked.svg
new file mode 100644
index 0000000..19d18d7
--- /dev/null
+++ b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/checked.svg
@@ -0,0 +1,3 @@
+<svg width="10" height="9" viewBox="0 0 10 9" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M7.70019 1.38993L3.92019 6.38993L2.29019 4.27993C2.12708 4.07041 1.88742 3.93427 1.62393 3.90145C1.36044 3.86863 1.09471 3.94182 0.885189 4.10493C0.675668 4.26804 0.539523 4.5077 0.506704 4.77119C0.473885 5.03468 0.547081 5.30041 0.710189 5.50993L3.14019 8.61993C3.23436 8.73911 3.35445 8.83527 3.49133 8.90111C3.62821 8.96696 3.7783 9.00075 3.93019 8.99993C4.08291 8.99957 4.23351 8.96422 4.37045 8.89662C4.50739 8.82902 4.62703 8.73095 4.72019 8.60993L9.29019 2.60993C9.45197 2.39776 9.52284 2.13001 9.48721 1.86558C9.45158 1.60116 9.31236 1.36171 9.10019 1.19993C8.88802 1.03815 8.62027 0.96728 8.35584 1.00291C8.09141 1.03854 7.85197 1.17776 7.69019 1.38993H7.70019Z" fill="#0066CC"/>
+</svg>