diff --git a/projects/components/src/radio/radio-group.component.scss b/projects/components/src/radio/radio-group.component.scss
index d4a80cd3d..a3948b5e9 100644
--- a/projects/components/src/radio/radio-group.component.scss
+++ b/projects/components/src/radio/radio-group.component.scss
@@ -1,3 +1,66 @@
-.radio-button {
- padding-right: 16px;
+@import 'color-palette';
+@import 'font';
+
+.title {
+ @include body-2-medium($gray-7);
+ display: block;
+ padding-bottom: 11px;
+}
+
+.radio-group {
+ ::ng-deep .radio-button {
+ line-height: 18px;
+ padding-right: 10px;
+ margin-bottom: 10px;
+
+ &.mat-radio-checked {
+ .mat-radio-container {
+ height: 18px;
+ width: 18px;
+
+ .mat-radio-outer-circle {
+ background: $blue-4;
+ height: 18px;
+ width: 18px;
+ }
+
+ .mat-radio-outer-circle {
+ border-width: 0px;
+ }
+
+ .mat-radio-inner-circle {
+ height: 16px;
+ width: 16px;
+ top: 1px;
+ left: 1px;
+ background: white;
+ }
+ }
+ }
+
+ .mat-radio-container {
+ height: 18px;
+ width: 18px;
+
+ .mat-radio-outer-circle {
+ border-color: $gray-2;
+ border-width: 1px;
+ height: 18px;
+ width: 18px;
+ }
+
+ .mat-radio-label-content {
+ padding-left: 9px;
+ margin-top: 1px;
+ }
+ }
+
+ .radio-button-label {
+ @include body-2-regular($gray-7);
+ }
+ }
+
+ .radio-button:last-child {
+ margin-bottom: 0px;
+ }
}
diff --git a/projects/components/src/radio/radio-group.component.ts b/projects/components/src/radio/radio-group.component.ts
index e1c68d293..42598663d 100644
--- a/projects/components/src/radio/radio-group.component.ts
+++ b/projects/components/src/radio/radio-group.component.ts
@@ -8,10 +8,15 @@ import { RadioOption } from './radio-option';
styleUrls: ['./radio-group.component.scss'],
changeDetection: ChangeDetectionStrategy.OnPush,
template: `
-
-
+
+
-
+
`