diff --git a/07-lection5/02-radio/index.html b/07-lection5/02-radio/index.html
index 6ce2cb0..97e3c3a 100644
--- a/07-lection5/02-radio/index.html
+++ b/07-lection5/02-radio/index.html
@@ -1,11 +1,56 @@
 <!DOCTYPE html>
 <!-- Страница радио -->
 <html lang="ru">
-    <head>
-        <link rel="stylesheet" href="../../assets/css/main.css">
-        <link rel="stylesheet" href="./radio.css">
-    </head>
-    <body>
-
-    </body>
-</html>
+
+<head>
+    <link rel="stylesheet" href="../../assets/css/main.css">
+    <link rel="stylesheet" href="./radio.css">
+
+    <title>Radio</title>
+
+    <script src="https://unpkg.com/feather-icons"></script>
+</head>
+
+<body>
+    <div class="container">
+
+        <label class="radio">
+                <input class="radio__input" type="radio" name="radio" value="1">
+
+                <div class="radio__state">
+                    <div class="radio__circle">
+                        <i class="radio__icon" data-feather="circle"></i>
+                    </div>
+                    <p class="radio__title">Default</p>
+                </div>
+        </label>
+
+        <label class="radio">
+            <input class="radio__input" type="radio" name="radio" value="2" checked>
+
+            <div class="radio__state">
+                <div class="radio__circle">
+                    <i class="radio__icon" data-feather="circle"></i>
+                </div>
+                <p class="radio__title">Selected</p>
+            </div>
+        </label>
+
+        <label class="radio">
+            <input class="radio__input" type="radio" name="radio" value="3" disabled>
+
+            <div class="radio__state">
+                <div class="radio__circle">
+                    <i class="radio__icon" data-feather="circle"></i>
+                </div>
+                <p class="radio__title">Disabled</p>
+            </div>
+        </label>
+    </div>
+    
+    <script>
+        feather.replace();
+    </script>
+</body>
+
+</html>
\ No newline at end of file
diff --git a/07-lection5/02-radio/radio.css b/07-lection5/02-radio/radio.css
index e69de29..f004856 100644
--- a/07-lection5/02-radio/radio.css
+++ b/07-lection5/02-radio/radio.css
@@ -0,0 +1,61 @@
+.radio {
+    display: inline-flex;
+    vertical-align: middle;
+}
+
+.radio__state {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+}
+
+.radio__circle {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+    border: 1px solid var(--grey-2, #DDE2E5);
+}
+
+.radio__icon {
+    display: none;
+    width: 18px;
+    height: 18px;
+}
+
+.radio__title {
+    color: var(--grey-4, #495057);
+    font-family: Inter, sans-serif;
+    font-size: 16px;
+    font-style: normal;
+    font-weight: 400;
+    line-height: 1.5;
+}
+
+.radio__input {
+    position: absolute;
+    left: -100vh;
+}
+
+.radio__input:checked ~ .radio__state .radio__circle {
+    border-color: var(--blue, #374FC7);
+}
+
+.radio__input:checked ~ .radio__state .radio__icon {
+    display: block;
+    color: var(--blue, #374FC7);
+}
+
+.radio__input:focus ~ .radio__state .radio__title {
+    text-decoration: underline;
+}
+
+.radio__input:disabled ~ .radio__state .radio__title {
+    color: var(--grey-2, #DDE2E5);
+}
+
+.radio__input:disabled ~ .radio__state .radio__circle {
+    background-color: var(--grey-2, #DDE2E5);
+}
\ No newline at end of file
