diff --git a/frontend/src/app/components/home/header/header.component.html b/frontend/src/app/components/home/header/header.component.html
index a3bbbd1..beb762f 100644
--- a/frontend/src/app/components/home/header/header.component.html
+++ b/frontend/src/app/components/home/header/header.component.html
@@ -2,5 +2,7 @@
   <div class="logo">
     <img src="./../../../../assets/img/logo_full.svg" alt="" />
   </div>
-  <div class="btn">Log in</div>
+  <div class="btn">
+    <app-btn-large [value]="'Log in'"></app-btn-large>
+  </div>
 </header>
diff --git a/frontend/src/app/components/home/header/header.component.ts b/frontend/src/app/components/home/header/header.component.ts
index c780cb4..5b7db74 100644
--- a/frontend/src/app/components/home/header/header.component.ts
+++ b/frontend/src/app/components/home/header/header.component.ts
@@ -1,12 +1,11 @@
 import { Component } from '@angular/core';
+import { BtnLargeComponent } from '../../../shared/components/btn-large/btn-large.component';
 
 @Component({
   selector: 'app-header',
   standalone: true,
-  imports: [],
+  imports: [BtnLargeComponent],
   templateUrl: './header.component.html',
-  styleUrl: './header.component.scss'
+  styleUrl: './header.component.scss',
 })
-export class HeaderComponent {
-
-}
+export class HeaderComponent {}
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.html b/frontend/src/app/shared/components/btn-large/btn-large.component.html
new file mode 100644
index 0000000..35217a8
--- /dev/null
+++ b/frontend/src/app/shared/components/btn-large/btn-large.component.html
@@ -0,0 +1,3 @@
+<button class="btn" type="{{ type }}" [disabled]="disabled">
+  {{ value }}
+</button>
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.scss b/frontend/src/app/shared/components/btn-large/btn-large.component.scss
new file mode 100644
index 0000000..1b726bd
--- /dev/null
+++ b/frontend/src/app/shared/components/btn-large/btn-large.component.scss
@@ -0,0 +1,27 @@
+@import "./../../../../assets/style/colors.scss";
+
+.btn {
+  padding: 12px 24px;
+  width: fit-content;
+  box-shadow: 1px 1px 3px $gray;
+  border-radius: 24px;
+  color: $white;
+  background-color: $blue;
+  border: 1px solid $blue;
+  font-size: 18px;
+  font-weight: 600;
+  transition: background-color 300ms ease-in-out, color 300ms ease-in-out,
+    border 300ms ease-in-out;
+  cursor: pointer;
+  &:not(:disabled):hover {
+    color: $blue;
+    background-color: $white;
+    border: 1px solid $white;
+  }
+  &:disabled {
+    background-color: $gray;
+    color: darken($gray, 20%);
+    border: 1px solid $gray;
+    cursor: default;
+  }
+}
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts b/frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts
new file mode 100644
index 0000000..80f4a1f
--- /dev/null
+++ b/frontend/src/app/shared/components/btn-large/btn-large.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { BtnLargeComponent } from './btn-large.component';
+
+describe('BtnLargeComponent', () => {
+  let component: BtnLargeComponent;
+  let fixture: ComponentFixture<BtnLargeComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [BtnLargeComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(BtnLargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/frontend/src/app/shared/components/btn-large/btn-large.component.ts b/frontend/src/app/shared/components/btn-large/btn-large.component.ts
new file mode 100644
index 0000000..b4250b4
--- /dev/null
+++ b/frontend/src/app/shared/components/btn-large/btn-large.component.ts
@@ -0,0 +1,15 @@
+import { CommonModule } from '@angular/common';
+import { Component, Input } from '@angular/core';
+
+@Component({
+  selector: 'app-btn-large',
+  standalone: true,
+  imports: [CommonModule],
+  templateUrl: './btn-large.component.html',
+  styleUrl: './btn-large.component.scss',
+})
+export class BtnLargeComponent {
+  @Input() type: string = '';
+  @Input() value: string = '';
+  @Input() disabled: boolean = false;
+}