diff --git a/src/app/app.module.ts b/src/app/app.module.ts
index d6be746..ed04791 100644
--- a/src/app/app.module.ts
+++ b/src/app/app.module.ts
@@ -43,6 +43,7 @@ import { StartComponent } from './tabs/courses/test/start/start.component';
 import { EndComponent } from './tabs/courses/test/end/end.component';
 import { QuestionSheetComponent } from './tabs/courses/test/question-sheet/question-sheet.component';
 import { QuestionComponent } from './tabs/courses/test/question-sheet/question/question.component';
+import { AddBroadcastComponent } from './chat-page/add-broadcast/add-broadcast.component';
 
 @NgModule({
 	declarations: [
@@ -73,6 +74,7 @@ import { QuestionComponent } from './tabs/courses/test/question-sheet/question/q
 		EndComponent,
 		QuestionSheetComponent,
 		QuestionComponent,
+		AddBroadcastComponent,
 	],
 	imports: [
 		BrowserModule,
diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.html b/src/app/chat-page/add-broadcast/add-broadcast.component.html
new file mode 100644
index 0000000..31d380b
--- /dev/null
+++ b/src/app/chat-page/add-broadcast/add-broadcast.component.html
@@ -0,0 +1 @@
+<p>add-broadcast works!</p>
diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.scss b/src/app/chat-page/add-broadcast/add-broadcast.component.scss
new file mode 100644
index 0000000..e69de29
diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.spec.ts b/src/app/chat-page/add-broadcast/add-broadcast.component.spec.ts
new file mode 100644
index 0000000..66f5dc9
--- /dev/null
+++ b/src/app/chat-page/add-broadcast/add-broadcast.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddBroadcastComponent } from './add-broadcast.component';
+
+describe('AddBroadcastComponent', () => {
+  let component: AddBroadcastComponent;
+  let fixture: ComponentFixture<AddBroadcastComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddBroadcastComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddBroadcastComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/src/app/chat-page/add-broadcast/add-broadcast.component.ts b/src/app/chat-page/add-broadcast/add-broadcast.component.ts
new file mode 100644
index 0000000..8f250bc
--- /dev/null
+++ b/src/app/chat-page/add-broadcast/add-broadcast.component.ts
@@ -0,0 +1,21 @@
+import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
+
+@Component({
+    selector: 'app-add-broadcast',
+    templateUrl: './add-broadcast.component.html',
+    styleUrls: ['./add-broadcast.component.scss']
+})
+export class AddBroadcastComponent implements OnInit {
+    @Input() broadcastInfo: any;
+    @Output() addBroadcastEvents = new EventEmitter();
+    @Input() friendList: any = [];
+    searchTerm: string = '';
+    tempFriendList: any = [];
+
+    constructor() { }
+
+    ngOnInit(): void {
+        this.tempFriendList = this.friendList;
+    }
+
+}
diff --git a/src/app/chat-page/chat-page.component.html b/src/app/chat-page/chat-page.component.html
index 2e6e3c9..94bd37a 100644
--- a/src/app/chat-page/chat-page.component.html
+++ b/src/app/chat-page/chat-page.component.html
@@ -46,7 +46,7 @@
         </div>
 
         <div *ngIf="selectedSegment === 'broadcasts' && !showSearch">
-            <ul class="chat-list">
+            <ul class="chat-list" *ngIf="!showAddBroadCast">
                 <li *ngFor="let chat of broadCastList; let i = index" (click)="openBroadcastChat(i)">
                     <img src="{{ chat.user.imgUrl }}">
                     <div class="content">
@@ -60,6 +60,13 @@
                     </div>
                 </li>
             </ul>
+
+            <button class="add-broadcast-button" (click)="showAddBroadCast = !showAddBroadCast">
+                <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon>
+            </button>
+
+            <app-add-broadcast *ngIf="showAddBroadCast"></app-add-broadcast>
+
         </div>
 
         <section class="search-list" *ngIf="showSearch">
diff --git a/src/app/chat-page/chat-page.component.scss b/src/app/chat-page/chat-page.component.scss
index ae30c09..7a68b2b 100644
--- a/src/app/chat-page/chat-page.component.scss
+++ b/src/app/chat-page/chat-page.component.scss
@@ -84,6 +84,28 @@
     padding: 10px 5%;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
+
+    .add-broadcast-button {
+        position: fixed;
+        right: 20px;
+        bottom: 20px;
+        z-index: 1;
+        background-color: var(--teal-green);
+        border: 0px;
+        border-radius: 50%;
+        width: 50px;
+        height: 50px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        .icon {
+            width: 70%;
+            position: relative;
+            top: 1px;
+            fill: white;
+        }
+    }
 }
 
 .chat-list {
diff --git a/src/app/chat-page/chat-page.component.ts b/src/app/chat-page/chat-page.component.ts
index 5873c37..fac1ad8 100644
--- a/src/app/chat-page/chat-page.component.ts
+++ b/src/app/chat-page/chat-page.component.ts
@@ -16,6 +16,7 @@ export class ChatPageComponent implements OnInit {
         chatList: [],
         broadCastList: []
     };
+    showAddBroadCast: boolean = false;
 
     chatList = [{
         user: {