diff --git a/src/s1-main/App.tsx b/src/s1-main/App.tsx
index 233f912..093964f 100644
--- a/src/s1-main/App.tsx
+++ b/src/s1-main/App.tsx
@@ -3,6 +3,7 @@ import s from './App.module.css'
 import HW1 from '../s2-homeworks/hw01/HW1'
 import HW2 from '../s2-homeworks/hw02/HW2'
 import HW3 from '../s2-homeworks/hw03/HW3'
+import HW4 from '../s2-homeworks/hw04/HW4'
 
 function App() {
     // для дз 12
@@ -19,7 +20,7 @@ function App() {
             <HW1/>
             <HW2/>
             <HW3/>
-            {/*<HW4/>*/}
+            <HW4/>
 
             {/*<HW5/>*/}
         </div>
diff --git a/src/s2-homeworks/hw04/HW4.tsx b/src/s2-homeworks/hw04/HW4.tsx
index e982e7a..04aa701 100644
--- a/src/s2-homeworks/hw04/HW4.tsx
+++ b/src/s2-homeworks/hw04/HW4.tsx
@@ -2,6 +2,13 @@ import React from 'react'
 import s2 from '../../s1-main/App.module.css'
 import Stand from './Stand'
 
+/*
+* 1 - понять (и простить) SuperInputText
+* 2 - в зависимости от типа и дизэйбла прицепить нужный класс в SuperButton.tsx (строка 21)
+* 3 - дописать onChangeCallback в SuperCheckbox.tsx чтоб оба чекбокса работали на стенде
+* 4 - сделать стили в соответствии с дизайном
+* */
+
 const HW4 = () => {
     return (
         <div id={'hw4'}>
diff --git a/src/s2-homeworks/hw04/Stand.tsx b/src/s2-homeworks/hw04/Stand.tsx
index dbe13e8..0236717 100644
--- a/src/s2-homeworks/hw04/Stand.tsx
+++ b/src/s2-homeworks/hw04/Stand.tsx
@@ -5,14 +5,22 @@ import SuperCheckbox from './common/c3-SuperCheckbox/SuperCheckbox'
 import SuperButton from './common/c2-SuperButton/SuperButton'
 
 const Stand = () => {
-    const [stateForAllInputs, setValue] = useState('')
-    const [error, setError] = useState<undefined | string>(undefined)
+    const [stateForAllInputs, setValue] = useState<string>('')
+    const [error, setError] = useState<string>('')
 
-    const [stateForAllCheckboxes, setChecked] = useState(false)
+    const [stateForAllCheckboxes, setChecked] = useState<boolean>(false)
 
     return (
         <div id={'hw4-stand'} className={s.stand}>
             <div className={s.inputs}>
+                {/*совместим со старым кодом:*/}
+                <div>
+                    <SuperInputText
+                        id={'hw4-super-input-like-old'}
+                        value={stateForAllInputs}
+                        onChange={(e) => setValue(e.currentTarget.value)}
+                    />
+                </div>
                 {/*инпут с ошибкой:*/}
                 <div>
                     <SuperInputText
@@ -23,21 +31,13 @@ const Stand = () => {
                         onEnter={() => {
                             setError(
                                 stateForAllInputs.trim()
-                                    ? undefined
-                                    : 'some error'
+                                    ? ''
+                                    : 'Error'
                             )
                             setValue('')
                         }}
                     />
                 </div>
-                {/*совместим со старым кодом*/}
-                <div>
-                    <SuperInputText
-                        id={'hw4-super-input-like-old'}
-                        value={stateForAllInputs}
-                        onChange={(e) => setValue(e.currentTarget.value)}
-                    />
-                </div>
             </div>
 
             <div className={s.buttons}>
@@ -63,6 +63,15 @@ const Stand = () => {
                         disabled
                     </SuperButton>
                 </div>
+                {/*задизэйбленная кнопка:*/}
+                <div>
+                    <SuperButton
+                        id={'hw4-super-button-secondary'}
+                        xType={'secondary'}
+                    >
+                        secondary
+                    </SuperButton>
+                </div>
             </div>
 
             <div className={s.checkboxes}>
@@ -76,7 +85,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 3fe7194..4286e4f 100644
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.module.css
@@ -7,18 +7,20 @@
 }
 
 .input {
+    width: 370px;
+    height: 36px;
+    padding: 8px 0 8px 12px;
+
+    color: #000;
     border: 1px solid #d1d1d1;
     border-radius: 5px;
-    width: 370px;
+    outline: none;
+
     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;
-    height: 36px;
 }
 
 .inputWrapper {
@@ -30,13 +32,14 @@
 }
 
 .error {
+    position: absolute;
+    top: -17px;
+    left: 0;
+
+    color: #cc1439;
     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;
 }
diff --git a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
index fccda28..9f4fc50 100644
--- a/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
+++ b/src/s2-homeworks/hw04/common/c1-SuperInputText/SuperInputText.tsx
@@ -8,10 +8,8 @@ import React, {
 import s from './SuperInputText.module.css'
 
 // тип пропсов обычного инпута
-type DefaultInputPropsType = DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
->
+type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement>
 
 // здесь мы говорим что у нашего инпута будут такие же пропсы как у обычного инпута, кроме type
 // (чтоб не писать value: string, onChange: ...; они уже все описаны в DefaultInputPropsType)
@@ -23,18 +21,20 @@ type SuperInputTextPropsType = Omit<DefaultInputPropsType, 'type'> & {
     spanClassName?: string
 }
 
-const SuperInputText: React.FC<SuperInputTextPropsType> = ({
-    onChange,
-    onChangeText,
-    onKeyPress,
-    onEnter,
-    error,
-    className,
-    spanClassName,
-    id,
+const SuperInputText: React.FC<SuperInputTextPropsType> = (
+    {
+        onChange,
+        onChangeText,
+        onKeyPress,
+        onEnter,
+        error,
+        className,
+        spanClassName,
+        id,
 
-    ...restProps // все остальные пропсы попадут в объект restProps
-}) => {
+        ...restProps // все остальные пропсы попадут в объект restProps
+    }
+) => {
     const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
         onChange?.(e) // если есть пропс onChange, то передать ему е (поскольку onChange не обязателен)
 
@@ -44,16 +44,15 @@ const SuperInputText: React.FC<SuperInputTextPropsType> = ({
         onKeyPress?.(e)
 
         onEnter && // если есть пропс onEnter
-            e.key === 'Enter' && // и если нажата кнопка Enter
-            onEnter() // то вызвать его
+        e.key === 'Enter' && // и если нажата кнопка Enter
+        onEnter() // то вызвать его
     }
 
-    const finalSpanClassName = `${s.error} ${
-        spanClassName ? spanClassName : ''
-    }`
-    const finalInputClassName = `${s.input} ${
-        error ? s.errorInput : s.superInput
-    } ${className}` // задача на смешивание классов
+    const finalSpanClassName = s.error
+        + (spanClassName ? ' ' + spanClassName : '')
+    const finalInputClassName = s.input
+        + (error ? ' ' + s.errorInput : ' ' + s.superInput)
+        + (className ? ' ' + s.className : '') // задача на смешивание классов
 
     return (
         <div className={s.inputWrapper}>
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 b11b31d..06dba34 100644
--- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
+++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.module.css
@@ -1,38 +1,29 @@
-@keyframes blink {
-    0% {
-        left: -130%;
-    }
-    100% {
-        left: 130%;
-    }
-}
-
-
-.disabled {
-    background: #004d99;
-    opacity: 0.5;
-    color: #002e5c;
-}
-
-
 .button {
     overflow: hidden;
-    cursor: pointer;
-    border-radius: 3px;
-    border: 1px solid #0066CC;
-    color: white;
     padding: 5px 24px;
+
+    border-radius: 3px;
+    border: none;
+
+    color: white;
     font-family: 'Montserrat', sans-serif;
     font-weight: 600;
     font-size: 14px;
     line-height: 20px;
+    cursor: pointer;
+}
+
+.disabled {
+    color: #002e5c;
+    background: #004d99;
+    opacity: 0.5;
 }
 
 .secondary {
+    color: #0066CC;
     background: transparent;
     border: 1px solid #0066CC;
     border-radius: 3px;
-    color: #0066CC;
 }
 
 .default {
@@ -43,24 +34,6 @@
     background: #cc1439;
 }
 
-.button::after {
-    display: block;
-    content: '';
-    position: absolute;
-
-    left: -130%;
-    top: 0;
-    height: 100%;
-    width: 20%;
-
-    transform: skew(45deg);
-
-    background-color: #fff;
-    opacity: 0.7;
-
-    z-index: 14;
-}
-
 .default:hover {
     background: #0080ff;
 }
diff --git a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx
index ccea9d8..19e5db0 100644
--- a/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx
+++ b/src/s2-homeworks/hw04/common/c2-SuperButton/SuperButton.tsx
@@ -1,31 +1,31 @@
-import React, { ButtonHTMLAttributes, DetailedHTMLProps } from 'react'
+import React, {ButtonHTMLAttributes, DetailedHTMLProps} from 'react'
 import s from './SuperButton.module.css'
 
 // тип пропсов обычной кнопки, children в котором храниться название кнопки там уже описан
-type DefaultButtonPropsType = DetailedHTMLProps<
-    ButtonHTMLAttributes<HTMLButtonElement>,
-    HTMLButtonElement
->
+type DefaultButtonPropsType = DetailedHTMLProps<ButtonHTMLAttributes<HTMLButtonElement>,
+    HTMLButtonElement>
 
 type SuperButtonPropsType = DefaultButtonPropsType & {
     xType?: string
 }
 
-const SuperButton: React.FC<SuperButtonPropsType> = ({
-    xType,
-    className,
-    disabled,
-    ...restProps // все остальные пропсы попадут в объект restProps, там же будет children
-}) => {
-    const finalClassName = `${s.button} ${
-        disabled
-            ? s.disabled
-            : xType === 'red'
-            ? s.red
-            : xType === 'secondary'
-            ? s.secondary
-            : s.default
-    } ${className}` // задачка на смешивание классов
+const SuperButton: React.FC<SuperButtonPropsType> = (
+    {
+        xType,
+        className,
+        disabled,
+        ...restProps // все остальные пропсы попадут в объект restProps, там же будет children
+    }
+) => {
+    const finalClassName = s.button
+        + (disabled
+                ? ' ' + s.disabled
+                : xType === 'red'
+                    ? ' ' + s.red
+                    : xType === 'secondary'
+                        ? ' ' + s.secondary
+                        : ' ' + s.default)
+        + (className ? ' ' + className : '') // задачка на смешивание классов
 
     return (
         <button
diff --git a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx
index d4c1610..c2f71e7 100644
--- a/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx
+++ b/src/s2-homeworks/hw04/common/c3-SuperCheckbox/SuperCheckbox.tsx
@@ -6,26 +6,26 @@ import React, {
 import s from './SuperCheckbox.module.css'
 
 // тип пропсов обычного инпута
-type DefaultInputPropsType = DetailedHTMLProps<
-    InputHTMLAttributes<HTMLInputElement>,
-    HTMLInputElement
->
+type DefaultInputPropsType = DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>,
+    HTMLInputElement>
 
 type SuperCheckboxPropsType = Omit<DefaultInputPropsType, 'type'> & {
     onChangeChecked?: (checked: boolean) => void
     spanClassName?: string
 }
 
-const SuperCheckbox: React.FC<SuperCheckboxPropsType> = ({
-    onChange,
-    onChangeChecked,
-    className,
-    spanClassName,
-    children, // в эту переменную попадёт текст, типизировать не нужно так как он затипизирован в React.FC
-    id,
+const SuperCheckbox: React.FC<SuperCheckboxPropsType> = (
+    {
+        onChange,
+        onChangeChecked,
+        className,
+        spanClassName,
+        children, // в эту переменную попадёт текст, типизировать не нужно так как он затипизирован в React.FC
+        id,
 
-    ...restProps // все остальные пропсы попадут в объект restProps
-}) => {
+        ...restProps // все остальные пропсы попадут в объект restProps
+    }
+) => {
     const onChangeCallback = (e: ChangeEvent<HTMLInputElement>) => {
         // задачка на написание онченджа
         onChange?.(e)
@@ -33,7 +33,8 @@ const SuperCheckbox: React.FC<SuperCheckboxPropsType> = ({
         onChangeChecked?.(e.currentTarget.checked)
     }
 
-    const finalInputClassName = `${s.checkbox} ${className ? className : ''}`
+    const finalInputClassName = s.checkbox
+        + (className ? ' ' + className : '')
 
     return (
         <label className={s.label}>