diff --git a/src/index.css b/src/index.css
index 14abadb..864316a 100644
--- a/src/index.css
+++ b/src/index.css
@@ -4,11 +4,12 @@
     box-sizing: border-box;
 }
 
+
 body {
     margin: 0;
     font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto',
-        'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
-        'Helvetica Neue', sans-serif;
+    'Oxygen', 'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans',
+    'Helvetica Neue', sans-serif;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
     box-sizing: border-box;
@@ -16,7 +17,7 @@ body {
 
 code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-        monospace;
+    monospace;
 }
 
 [data-theme='1'] {
diff --git a/src/s2-homeworks/hw07/HW7.module.css b/src/s2-homeworks/hw07/HW7.module.css
new file mode 100644
index 0000000..b1ef09c
--- /dev/null
+++ b/src/s2-homeworks/hw07/HW7.module.css
@@ -0,0 +1,4 @@
+.container {
+    display: flex;
+    gap: 110px;
+}
\ No newline at end of file
diff --git a/src/s2-homeworks/hw07/HW7.tsx b/src/s2-homeworks/hw07/HW7.tsx
index e2fce1c..431c9d0 100644
--- a/src/s2-homeworks/hw07/HW7.tsx
+++ b/src/s2-homeworks/hw07/HW7.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react'
 import SuperSelect from './common/c5-SuperSelect/SuperSelect'
 import SuperRadio from './common/c6-SuperRadio/SuperRadio'
 import s2 from '../../s1-main/App.module.css'
+import s from './HW7.module.css'
 
 const arr = [
     { id: 1, value: 'x' },
@@ -14,26 +15,30 @@ const HW7 = () => {
     console.log(value)
 
     return (
-        <div id={'hw7'} className={s2.hw}>
-            <div className={s2.hwTitle}>homeworks 7</div>
+        <div id={'hw7'}>
+            <div className={s2.hwTitle}>Homework #7</div>
 
             {/*should work (должно работать)*/}
-            <div>
-                <SuperSelect
-                    id={'hw7-super-select'}
-                    options={arr}
-                    value={value}
-                    onChangeOption={onChangeOption}
-                />
-            </div>
-            <div>
-                <SuperRadio
-                    id={'hw7-super-radio'}
-                    name={'hw7-radio'}
-                    options={arr}
-                    value={value}
-                    onChangeOption={onChangeOption}
-                />
+            <div className={s2.hw}>
+                <div className={s.container}>
+                    <div>
+                        <SuperSelect
+                            id={'hw7-super-select'}
+                            options={arr}
+                            value={value}
+                            onChangeOption={onChangeOption}
+                        />
+                    </div>
+                    <div>
+                        <SuperRadio
+                            id={'hw7-super-radio'}
+                            name={'hw7-radio'}
+                            options={arr}
+                            value={value}
+                            onChangeOption={onChangeOption}
+                        />
+                    </div>
+                </div>
             </div>
         </div>
     )
diff --git a/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css b/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
index c50c2fa..afa0f29 100644
--- a/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
+++ b/src/s2-homeworks/hw07/common/c5-SuperSelect/SuperSelect.module.css
@@ -1,18 +1,19 @@
 .select {
-    width: 100px;
-    padding: 5px;
+    padding-left: 10px;
+    width: 165px;
+    height: 24px;
     cursor: pointer;
     appearance: none;
-    background-color: var(--primary);
-    background-image: linear-gradient(45deg, transparent 50%, currentColor 50%),
-        linear-gradient(135deg, currentColor 50%, transparent 50%);
-    background-position: calc(100% - 20px) calc(1px + 50%),
-        calc(100% - 16px) calc(1px + 50%);
-    background-size: 4px 4px, 4px 4px;
+    background-color: transparent;
+    background-image: url('./chevron-down.svg');
+    background-position: right center;
     background-repeat: no-repeat;
     border-radius: 2px;
-    border: 2px solid var(--primary);
-    color: var(--primary-content);
+    border: 1px solid #C2C2C2;
+    color: #000000;
+    font-family: 'Montserrat', sans-serif;
+    font-weight: 400;
+    font-size: 14px;
 }
 
 .select:focus {
diff --git a/src/s2-homeworks/hw07/common/c5-SuperSelect/chevron-down.svg b/src/s2-homeworks/hw07/common/c5-SuperSelect/chevron-down.svg
new file mode 100644
index 0000000..7ce7b07
--- /dev/null
+++ b/src/s2-homeworks/hw07/common/c5-SuperSelect/chevron-down.svg
@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M11.9999 15.4999C11.8683 15.5007 11.7379 15.4755 11.616 15.4257C11.4942 15.3759 11.3834 15.3026 11.2899 15.2099L7.28994 11.2099C7.1967 11.1167 7.12274 11.006 7.07228 10.8842C7.02182 10.7624 6.99585 10.6318 6.99585 10.4999C6.99585 10.3681 7.02182 10.2375 7.07228 10.1157C7.12274 9.99387 7.1967 9.88318 7.28994 9.78994C7.38318 9.6967 7.49387 9.62274 7.61569 9.57228C7.73751 9.52182 7.86808 9.49585 7.99994 9.49585C8.1318 9.49585 8.26237 9.52182 8.38419 9.57228C8.50601 9.62274 8.6167 9.6967 8.70994 9.78994L11.9999 13.0999L15.2999 9.91994C15.3919 9.81765 15.504 9.73544 15.6293 9.67846C15.7545 9.62147 15.8901 9.59093 16.0276 9.58875C16.1652 9.58657 16.3017 9.6128 16.4287 9.66579C16.5556 9.71878 16.6703 9.7974 16.7655 9.89672C16.8607 9.99605 16.9343 10.1139 16.9819 10.243C17.0294 10.3721 17.0498 10.5096 17.0418 10.647C17.0338 10.7843 16.9975 10.9185 16.9352 11.0412C16.873 11.1639 16.7861 11.2724 16.6799 11.3599L12.6799 15.2199C12.4971 15.3963 12.2539 15.4964 11.9999 15.4999Z" fill="black"/>
+</svg>
diff --git a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css b/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css
index c2c8ce9..610d4d1 100644
--- a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css
+++ b/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.module.css
@@ -1,26 +1,41 @@
 .radio {
+    margin: 0;
+    -webkit-appearance: none;
     appearance: none;
-    height: 10px;
-    width: 10px;
-
+    height: 20px;
+    width: 20px;
     cursor: pointer;
     border-radius: 50%;
-    outline: none;
-    background: #335533;
+    border: 2px solid black;
+    display: grid;
+    place-content: center;
 }
 
-.radio:hover {
-    border: 2px solid #cc99ff;
+.radio::before {
+    content: "";
+    width: 10px;
+    height: 10px;
+    border-radius: 50%;
+    transform: scale(0);
+    transition: 120ms transform ease-in-out;
+    background-color: black;
 }
 
-.radio:checked {
-    background: #55ffff;
-}
 
-.radio:focus {
-    border: 2px solid #cc99ff;
+.radio:checked::before {
+    transform: scale(1);
 }
 
 .label {
     cursor: pointer;
+    display: flex;
+    align-items: center;
+    gap: 13px;
+    width: max-content;
+}
+
+.options {
+    display: flex;
+    flex-direction: column;
+    gap: 21px;
 }
diff --git a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx b/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx
index be4a477..da353aa 100644
--- a/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx
+++ b/src/s2-homeworks/hw07/common/c6-SuperRadio/SuperRadio.tsx
@@ -69,7 +69,7 @@ const SuperRadio: React.FC<SuperRadioPropsType> = ({
           ))
         : []
 
-    return <>{mappedOptions}</>
+    return <div className={s.options}>{mappedOptions}</div>
 }
 
 export default SuperRadio