diff --git a/public/images/sp_flag.png b/public/images/sp_flag.png
new file mode 100644
index 0000000..1ed07ee
Binary files /dev/null and b/public/images/sp_flag.png differ
diff --git a/public/images/uk_flag.png b/public/images/uk_flag.png
new file mode 100644
index 0000000..3f8ad70
Binary files /dev/null and b/public/images/uk_flag.png differ
diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.html b/src/app/components/lang-switch-btn/lang-switch-btn.html
new file mode 100644
index 0000000..b6a556f
--- /dev/null
+++ b/src/app/components/lang-switch-btn/lang-switch-btn.html
@@ -0,0 +1,5 @@
+
diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.scss b/src/app/components/lang-switch-btn/lang-switch-btn.scss
new file mode 100644
index 0000000..e59a43a
--- /dev/null
+++ b/src/app/components/lang-switch-btn/lang-switch-btn.scss
@@ -0,0 +1,19 @@
+.container {
+ background-color: transparent;
+ border: none;
+
+ align-items: center;
+ display: flex;
+ min-height: 65px;
+
+ cursor: pointer;
+ img {
+ width: 50px;
+ }
+ @media screen and (min-width: 480px) {
+ min-height: 76.8px;
+ img {
+ width: unset;
+ }
+ }
+}
diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts b/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts
new file mode 100644
index 0000000..cb2a3b3
--- /dev/null
+++ b/src/app/components/lang-switch-btn/lang-switch-btn.spec.ts
@@ -0,0 +1,43 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LangSwitchBtn } from './lang-switch-btn';
+import { LanguageManager } from '../../services/language-manager';
+import { By } from '@angular/platform-browser';
+
+describe('LangSwitchBtn', () => {
+ let component: LangSwitchBtn;
+ let fixture: ComponentFixture;
+ let languageManager: jasmine.SpyObj;
+
+ beforeEach(async () => {
+ languageManager = jasmine.createSpyObj(LanguageManager, ['selectedLanguage$', 'setLanguage']);
+ await TestBed.configureTestingModule({
+ imports: [LangSwitchBtn],
+ providers: [{ provide: LanguageManager, useValue: languageManager }],
+ }).compileComponents();
+
+ fixture = TestBed.createComponent(LangSwitchBtn);
+ component = fixture.componentInstance;
+ });
+
+ it('should create', () => {
+ fixture.detectChanges();
+ expect(component).toBeTruthy();
+ });
+
+ it('should show spanish flag', () => {
+ languageManager.selectedLanguage$.and.returnValue('en');
+ fixture.detectChanges();
+ const img = fixture.debugElement.query(By.css('img')).attributes;
+ expect(img['src']).toEqual('images/sp_flag.png');
+ });
+
+ it('should updateLanguage on click', () => {
+ const updateLanguageSpy = spyOn(component, 'updateLanguage').and.callThrough();
+ languageManager.selectedLanguage$.and.returnValue('en');
+ fixture.detectChanges();
+ const container = fixture.debugElement.query(By.css('.container'));
+ container.triggerEventHandler('click');
+ expect(updateLanguageSpy).toHaveBeenCalledTimes(1);
+ });
+});
diff --git a/src/app/components/lang-switch-btn/lang-switch-btn.ts b/src/app/components/lang-switch-btn/lang-switch-btn.ts
new file mode 100644
index 0000000..065fc31
--- /dev/null
+++ b/src/app/components/lang-switch-btn/lang-switch-btn.ts
@@ -0,0 +1,25 @@
+import { Component, computed, inject } from '@angular/core';
+import { LanguageManager } from '../../services/language-manager';
+
+@Component({
+ selector: 'app-lang-switch-btn',
+ templateUrl: './lang-switch-btn.html',
+ styleUrl: './lang-switch-btn.scss',
+})
+export class LangSwitchBtn {
+ protected readonly languageManager = inject(LanguageManager);
+
+ flagSrc = computed(() => {
+ if (this.languageManager.selectedLanguage$() === 'en') {
+ return 'images/sp_flag.png';
+ } else {
+ return 'images/uk_flag.png';
+ }
+ });
+
+ updateLanguage() {
+ this.languageManager.setLanguage(
+ this.languageManager.selectedLanguage$() === 'en' ? 'es' : 'en'
+ );
+ }
+}