diff --git a/src/app/app-routing.module.ts b/src/app/app-routing.module.ts
index b1f37e8b..564f5daa 100644
--- a/src/app/app-routing.module.ts
+++ b/src/app/app-routing.module.ts
@@ -14,6 +14,9 @@ import { AuthGuard } from './services/auth.guard';
 import { EditUserComponent } from './pages/edit-user/edit-user.component';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
+import { ProgramacaoComponent } from './pages/programacao/programacao.component';
+import { AgoraComponent } from './pages/agora/agora.component';
+import { TransmissoesComponent } from './pages/transmissoes/transmissoes.component';
 
 const routes: Routes = [
   { path: 'login', component: LoginComponent },
@@ -28,7 +31,10 @@ const routes: Routes = [
   { path: 'participate', component: ParticipateComponent },
   { path: 'profile', component: ProfileComponent, canActivate: [AuthGuard], },
   { path: 'editUser/:id', component: EditUserComponent, canActivate: [AuthGuard], },
-  { path: '', component: HomePageComponent, canActivate: [AuthGuard], }
+  { path: '', component: HomePageComponent, canActivate: [AuthGuard], },
+  { path: 'programacao', component: ProgramacaoComponent},
+  { path: 'agora', component: AgoraComponent},
+  { path: 'transmissoes', component: TransmissoesComponent}
 ];
 
 @NgModule({
diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index 85123e85..b8086993 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -22,6 +22,8 @@ import { CheckCodeRestPasswordComponent } from './pages/check-code-rest-password
 import { AuthGuard } from './services/auth.guard';
 import { AuthService } from './services/auth.service';
 import { EditUserComponent } from './pages/edit-user/edit-user.component';
+import { AgoraComponent } from './pages/agora/agora.component';
+import { ProgramacaoComponent } from './pages/programacao/programacao.component';
 import { SuggestAgendaComponent } from './pages/suggest-agenda/suggest-agenda.component';
 import { ParticipateComponent } from './pages/participate/participate.component';
 
@@ -42,6 +44,8 @@ import { ParticipateComponent } from './pages/participate/participate.component'
     ResetPasswordComponent,
     CheckCodeRestPasswordComponent,
     EditUserComponent,
+    AgoraComponent,
+    ProgramacaoComponent,
     SuggestAgendaComponent,
     ParticipateComponent,
   ],
diff --git a/src/app/components/background/background.component.html b/src/app/components/background/background.component.html
index 1ce3a450..1da517b1 100644
--- a/src/app/components/background/background.component.html
+++ b/src/app/components/background/background.component.html
@@ -4,14 +4,19 @@
             <img alt="simbolo-unb" src="../../../assets/Simbolo_UnBTV-01 1.png">
         </div>
         <div class="flex flex-row items-center justify-center w-full">
-            <div class="text-programs">
-              <div class="px-2 cursor-pointer">Início</div>|
-              <div class="px-2 cursor-pointer">Agora na TV</div>|
-              <div class="px-2 cursor-pointer">Programação</div>|
-              <div class="px-2 cursor-pointer">Transmissões</div>|
-              <div class="pl-2 cursor-pointer" [routerLink]="['/participate']">Participe</div>
-            </div>
-            <img class="cursor-pointer" alt="hamburguer" src="../../../assets/hamburguer.svg">
+            <nav class="text-programs">
+              <a routerLink="" class="px-2 cursor-pointer">Início</a>|
+              <a routerLink="/agora" class="px-2 cursor-pointer">Agora na TV</a>|
+              <a routerLink="/programacao" class="px-2 cursor-pointer">Programação</a>|
+              <a routerLink="/transmissoes" class="pl-2 cursor-pointer">Transmissões</a>
+
+            </nav>
+            <img alt="hamburguer" class="cursor-pointer" (click)="toggleMenu()" src="../../../assets/hamburguer.svg">
+        </div>
+        <div class="menu flex flex-col" *ngIf="isMenuOpened">
+          <a class="menu-item cursor-pointer">teste</a>
+          <a class="menu-item cursor-pointer">teste</a>
+          <a class="menu-item cursor-pointer">teste</a>
         </div>
     </div>
     <div class="flex-grow">
diff --git a/src/app/components/background/background.component.ts b/src/app/components/background/background.component.ts
index e02d26df..de116eb8 100644
--- a/src/app/components/background/background.component.ts
+++ b/src/app/components/background/background.component.ts
@@ -6,6 +6,9 @@ import { Component } from '@angular/core';
   styleUrls: ['./background.component.css']
 })
 export class BackgroundComponent {
-  
-  }
+  isMenuOpened: boolean = false;
 
+  toggleMenu(): void {
+    this.isMenuOpened = !this.isMenuOpened;
+  }
+}
diff --git a/src/app/pages/agora/agora.component.css b/src/app/pages/agora/agora.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/agora/agora.component.html b/src/app/pages/agora/agora.component.html
new file mode 100644
index 00000000..48b60c14
--- /dev/null
+++ b/src/app/pages/agora/agora.component.html
@@ -0,0 +1 @@
+<p>agora works!</p>
diff --git a/src/app/pages/agora/agora.component.spec.ts b/src/app/pages/agora/agora.component.spec.ts
new file mode 100644
index 00000000..a11174b6
--- /dev/null
+++ b/src/app/pages/agora/agora.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AgoraComponent } from './agora.component';
+
+describe('AgoraComponent', () => {
+  let component: AgoraComponent;
+  let fixture: ComponentFixture<AgoraComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ AgoraComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(AgoraComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/agora/agora.component.ts b/src/app/pages/agora/agora.component.ts
new file mode 100644
index 00000000..4ee9c175
--- /dev/null
+++ b/src/app/pages/agora/agora.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-agora',
+  templateUrl: './agora.component.html',
+  styleUrls: ['./agora.component.css']
+})
+export class AgoraComponent {
+
+}
diff --git a/src/app/pages/programacao/programacao.component.css b/src/app/pages/programacao/programacao.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/programacao/programacao.component.html b/src/app/pages/programacao/programacao.component.html
new file mode 100644
index 00000000..a1c2dc60
--- /dev/null
+++ b/src/app/pages/programacao/programacao.component.html
@@ -0,0 +1 @@
+<p>programacao works!</p>
diff --git a/src/app/pages/programacao/programacao.component.spec.ts b/src/app/pages/programacao/programacao.component.spec.ts
new file mode 100644
index 00000000..dc125793
--- /dev/null
+++ b/src/app/pages/programacao/programacao.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ProgramacaoComponent } from './programacao.component';
+
+describe('ProgramacaoComponent', () => {
+  let component: ProgramacaoComponent;
+  let fixture: ComponentFixture<ProgramacaoComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ ProgramacaoComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(ProgramacaoComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/programacao/programacao.component.ts b/src/app/pages/programacao/programacao.component.ts
new file mode 100644
index 00000000..cf1bf82d
--- /dev/null
+++ b/src/app/pages/programacao/programacao.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-programacao',
+  templateUrl: './programacao.component.html',
+  styleUrls: ['./programacao.component.css']
+})
+export class ProgramacaoComponent {
+
+}
diff --git a/src/app/pages/transmissoes/transmissoes.component.css b/src/app/pages/transmissoes/transmissoes.component.css
new file mode 100644
index 00000000..e69de29b
diff --git a/src/app/pages/transmissoes/transmissoes.component.html b/src/app/pages/transmissoes/transmissoes.component.html
new file mode 100644
index 00000000..36d26117
--- /dev/null
+++ b/src/app/pages/transmissoes/transmissoes.component.html
@@ -0,0 +1 @@
+<p>transmissoes works!</p>
diff --git a/src/app/pages/transmissoes/transmissoes.component.spec.ts b/src/app/pages/transmissoes/transmissoes.component.spec.ts
new file mode 100644
index 00000000..03f6da3a
--- /dev/null
+++ b/src/app/pages/transmissoes/transmissoes.component.spec.ts
@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { TransmissoesComponent } from './transmissoes.component';
+
+describe('TransmissoesComponent', () => {
+  let component: TransmissoesComponent;
+  let fixture: ComponentFixture<TransmissoesComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [TransmissoesComponent]
+    })
+    .compileComponents();
+    
+    fixture = TestBed.createComponent(TransmissoesComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/pages/transmissoes/transmissoes.component.ts b/src/app/pages/transmissoes/transmissoes.component.ts
new file mode 100644
index 00000000..b76f82c9
--- /dev/null
+++ b/src/app/pages/transmissoes/transmissoes.component.ts
@@ -0,0 +1,11 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'app-transmissoes',
+  templateUrl: './transmissoes.component.html',
+  styleUrls: ['./transmissoes.component.css']
+  
+})
+export class TransmissoesComponent {
+
+}