diff --git a/Client/src/app/components/app/app.component.spec.ts b/Client/src/app/components/app/app.component.spec.ts
new file mode 100644
index 0000000..5be2cb3
--- /dev/null
+++ b/Client/src/app/components/app/app.component.spec.ts
@@ -0,0 +1,34 @@
+/* tslint:disable:no-unused-variable */
+
+import { TestBed, async } from '@angular/core/testing';
+import { AppComponent } from './app.component';
+
+describe('AppComponent', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      declarations: [
+        AppComponent
+      ],
+    });
+    TestBed.compileComponents();
+  });
+
+  it('should create the app', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app).toBeTruthy();
+  }));
+
+  it(`should have as title 'app works!'`, async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    const app = fixture.debugElement.componentInstance;
+    expect(app.title).toEqual('app works!');
+  }));
+
+  it('should render title in a h1 tag', async(() => {
+    const fixture = TestBed.createComponent(AppComponent);
+    fixture.detectChanges();
+    const compiled = fixture.debugElement.nativeElement;
+    expect(compiled.querySelector('h1').textContent).toContain('app works!');
+  }));
+});
diff --git a/Client/src/app/components/app/app.component.ts b/Client/src/app/components/app/app.component.ts
new file mode 100644
index 0000000..a927116
--- /dev/null
+++ b/Client/src/app/components/app/app.component.ts
@@ -0,0 +1,87 @@
+import { GoogleAnalyticsService } from './../../services/google-analytics.service';
+import { Component, Inject, Injectable, HostListener } from '@angular/core';
+import { Router, NavigationEnd, Event } from '@angular/router';
+import { EventService } from '../../services/event.service';
+import { AudioPlayerService } from '../../services/audio-player.service';
+import { BibleVerseService } from '../../services/bible-verse.service';
+
+
+@Injectable()
+@Component({
+  selector: 'app-root',
+  templateUrl: './app.component.html',
+  styleUrls: ['./app.component.css'],
+  providers:[EventService, AudioPlayerService, BibleVerseService]
+})
+export class AppComponent {
+  title = 'app works w!';
+  menuOpen: boolean = false;
+  headerOpacity: number = 0;
+  fadeHeader: boolean = true;
+  copyrightYear: number = (new Date()).getUTCFullYear();
+  lastRoute: string = '';
+  currRoute: string = '';
+  lastScrollPos: number = 0;
+  showAudioPlayer: boolean = false;
+
+  constructor(private router: Router, 
+              private audioPlayerService: AudioPlayerService,
+              private googleAnalyticsService: GoogleAnalyticsService){
+    this.router.events.subscribe((event:Event) => {
+      if(event instanceof NavigationEnd) {
+        this.lastRoute = this.currRoute;
+        this.currRoute = event.urlAfterRedirects;
+        
+        
+        let doc = document.documentElement;
+        let scrollPos = (window.pageYOffset || doc.scrollTop)  - (doc.clientTop || 0);
+
+        let url = event.urlAfterRedirects;
+        
+        if (url === '/home'){
+          this.fadeHeader = true;
+          this.headerOpacity = 0;
+        } else {
+          this.fadeHeader = false;
+          this.headerOpacity = 1;
+        }
+        if (this.lastRoute === event.url){
+          window.scrollTo(0,this.lastScrollPos);
+        } else {
+          window.scrollTo(0, 0);
+        }
+        this.lastRoute = event.url;
+        this.lastScrollPos = scrollPos;
+        // Google Analytics
+        googleAnalyticsService.pageView(url.substr(1),url);
+    }
+      
+    });
+  }  
+
+  mainMenuClick(){
+    this.menuOpen = !this.menuOpen;
+  }
+
+  audioPlayerClosed(): void{
+    this.showAudioPlayer = false;
+    this.audioPlayerService.updateAudioPlayerOpen(this.showAudioPlayer);
+  }
+
+  audioPlayerStarted(): void{
+    this.showAudioPlayer = true;
+    this.audioPlayerService.updateAudioPlayerOpen(this.showAudioPlayer);
+  }
+
+  @HostListener('window:scroll', ['$event'])
+  onScroll(event){
+    if (!this.fadeHeader){
+      return;
+    }
+    //this.scrollElement = event.target.documentElement || event.target.body || window;
+    let scrollTop = event.target.documentElement.scrollTop || event.target.body.scrollTop || window.pageYOffset;
+    let allIn = 100;
+    this.headerOpacity = scrollTop / allIn;
+    this.headerOpacity = this.headerOpacity > 1 ? 1 : this.headerOpacity;
+  }
+}
diff --git a/Client/src/app/components/audio-player/audio-player.component.css b/Client/src/app/components/audio-player/audio-player.component.css
new file mode 100644
index 0000000..d1a916c
--- /dev/null
+++ b/Client/src/app/components/audio-player/audio-player.component.css
@@ -0,0 +1,45 @@
+.wrapper{    
+    text-align: left;    
+}
+
+.audio-control-button{
+    font-size: 40px;
+    margin: 10px;
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.padding5{
+    padding: 5px;
+}
+
+.duration{
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.audio-control-button:hover{
+    cursor: pointer;
+}
+
+.audio-control-button-c{
+    display: table-cell;
+    vertical-align: middle;
+}
+
+.slider{
+    width: 100%;
+    max-width: 1000px; 
+    display: table;   
+}
+
+.slider-control{
+    width: 100%;
+    display: table-cell;
+    vertical-align: middle;
+}
+.text{
+    text-align: center;
+    margin-top: -15px;
+    padding-bottom: 20px;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/audio-player/audio-player.component.html b/Client/src/app/components/audio-player/audio-player.component.html
new file mode 100644
index 0000000..9a0a8c5
--- /dev/null
+++ b/Client/src/app/components/audio-player/audio-player.component.html
@@ -0,0 +1,28 @@
+<div class="wrapper">  
+  <div class="slider">
+    <span [ngSwitch]="audioState" >
+      <span *ngSwitchDefault><i ofbicon class="audio-control-button">slow_motion_video</i></span>      
+      <span *ngSwitchCase="audioStates.Loading"><i ofbicon class="audio-control-button padding5">slow_motion_video</i></span>
+      <span *ngSwitchCase="audioStates.Paused"><i ofbicon (click)="play()" class="audio-control-button padding5">play_arrow</i></span>
+      <span *ngSwitchCase="audioStates.Playing"><i ofbicon (click)="pause()" class="audio-control-button padding5">pause</i></span>
+      <span *ngSwitchCase="audioStates.Error"><i ofbicon (click)="play()" class="audio-control-button padding5">play_arrow</i></span>
+    </span>
+    <mat-slider class="slider-control padding5" min="0" [max]="audioDuration" [value]="currentTime" (change)="changeTime($event)"></mat-slider>
+    <span class="duration padding5">{{ currentTime | duration:audioDuration }}</span>
+    <span><i ofbicon class="audio-control-button padding5" (click)="close()">close</i></span>
+  </div>
+  <div [ngSwitch]="audioState" class="text">
+    <div *ngSwitchCase="audioStates.Loading">
+      Loading...
+    </div>
+    <div *ngSwitchCase="audioStates.Paused">
+      {{ audioFileTitle }}
+    </div>
+    <div *ngSwitchCase="audioStates.Playing">
+      {{ audioFileTitle }}
+    </div>
+    <div *ngSwitchCase="audioStates.Error">
+      Error Playing... {{ errorMessage }}
+    </div>
+  </div>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/audio-player/audio-player.component.ts b/Client/src/app/components/audio-player/audio-player.component.ts
new file mode 100644
index 0000000..2a128ec
--- /dev/null
+++ b/Client/src/app/components/audio-player/audio-player.component.ts
@@ -0,0 +1,110 @@
+import { GoogleAnalyticsService } from './../../services/google-analytics.service';
+import { Component, OnInit, OnDestroy, Output, EventEmitter } from '@angular/core';
+import { AudioPlayerService } from '../../services/audio-player.service';
+import { AudioStates } from '../../enum/audio-states';
+
+
+@Component({
+  selector: 'audio-player-component',
+  templateUrl: './audio-player.component.html',
+  styleUrls: ['./audio-player.component.css'],
+})
+export class AudioPlayerComponent implements OnInit, OnDestroy {
+    audioStates = AudioStates; //Store reference to enum so we can access it in the template
+    audioState: AudioStates;
+    
+    audioFileId: number;
+    audioFileTitle: string;
+    audioFileAuthor: string;
+    audioDuration: number;
+    currentTime: number;
+    
+    primarySourceUrl: string = '';
+    errorMessage: string = 'Unknown Error';
+    private interval: any;
+
+    onStateChangedSubscription: any;
+    
+    @Output()
+    closed: EventEmitter<string> = new EventEmitter();
+    @Output()
+    started: EventEmitter<string> = new EventEmitter();
+
+  constructor(private audioPlayerService: AudioPlayerService,
+              private googleAnalyticsService: GoogleAnalyticsService){
+
+  }
+
+  ngOnInit(): void{
+      this.onStateChangedSubscription = this.audioPlayerService.onStateChanged().subscribe(({metaData,state,error})=>{
+        this.parseMetaData(metaData);
+        this.audioState = state;    
+        this.errorMessage = error;
+        this.audioDuration = this.audioPlayerService.getDuration();
+        this.currentTime = this.audioPlayerService.getCurrentTime(); 
+        if (this.audioState == AudioStates.Loading){
+          this.started.emit("loading");          
+        }       
+        if (this.audioState == AudioStates.Playing){
+          this.started.emit("playing");           
+          this.interval = setInterval(()=>{
+            this.audioDuration = this.audioPlayerService.getDuration();
+            this.currentTime = this.audioPlayerService.getCurrentTime();
+          },1000);          
+        } else {
+          clearInterval(this.interval);
+        }
+        this.sendGoogleAnalytics(state,error);
+      });
+  }
+
+  sendGoogleAnalytics(state: AudioStates, error: any){
+    switch (state) {
+      case AudioStates.Error:
+        this.googleAnalyticsService.audioError(this.audioFileId, this.audioFileTitle, error)
+        break;
+
+      case AudioStates.Loading:
+        this.googleAnalyticsService.loadingSermon(this.audioFileId,this.audioFileTitle);
+        break;
+
+      case AudioStates.Paused:
+      this.googleAnalyticsService.pauseSermon(this.audioFileId,this.audioFileTitle,this.audioPlayerService.getCurrentTime())
+        break;
+
+      case AudioStates.Playing:
+      this.googleAnalyticsService.playSermon(this.audioFileId,this.audioFileTitle,this.audioPlayerService.getCurrentTime())
+        break;
+    
+      default:
+        break;
+    }
+  }
+
+  play(): void{    
+    this.audioPlayerService.resume();
+  }
+
+  pause(): void{
+    this.audioPlayerService.pause();
+  }
+
+  close(): void{
+    this.audioPlayerService.stop();
+    this.closed.emit("closed");
+  }
+
+  changeTime(event){
+    this.audioPlayerService.setPosition(event.value);
+  }
+
+  ngOnDestroy(): void{
+    this.onStateChangedSubscription.unsubscribe();
+  }
+
+  private parseMetaData(metaData): void{
+    this.audioFileId = metaData.id;
+    this.audioFileTitle = metaData.title;
+    this.audioFileAuthor = metaData.author;
+  }
+}
diff --git a/Client/src/app/components/contact-page/contact-page.component.css b/Client/src/app/components/contact-page/contact-page.component.css
new file mode 100644
index 0000000..00e445e
--- /dev/null
+++ b/Client/src/app/components/contact-page/contact-page.component.css
@@ -0,0 +1,15 @@
+.full-width{
+    width: 100%;
+}
+
+.hide{
+    display: none;
+}
+
+.errorMessages{
+    color: white;
+    background-color: rgb(255,90,90);
+    padding: 10px;
+    border-radius: 3px;
+    margin-bottom: 5px;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/contact-page/contact-page.component.html b/Client/src/app/components/contact-page/contact-page.component.html
new file mode 100644
index 0000000..f8b39cd
--- /dev/null
+++ b/Client/src/app/components/contact-page/contact-page.component.html
@@ -0,0 +1,35 @@
+<secondary-page-component [hideSideBarOnMobile]="true" >
+    <div mainContent>
+      <br>
+        <div *ngIf="!formSubmitted">            
+            <form class="form" #contactForm="ngForm" (ngSubmit)="onSubmit()">
+              <mat-form-field class="full-width">
+                <input matInput type="text" placeholder="Name" required value="" [(ngModel)]="name" name="name" >
+              </mat-form-field>
+              <mat-form-field class="full-width">
+                <input matInput type="email" placeholder="Email" required value="" [(ngModel)]="email" name="email" pattern="^\w+([\.-]?\w+)*@\w+([\.-]?\w+)*(\.\w{2,3})+$">
+              </mat-form-field>
+              <mat-form-field class="full-width">
+                <input matInput type="tel" placeholder="Phone" value="" [(ngModel)]="phone" name="phone">
+              </mat-form-field>
+              <mat-form-field class="full-width">
+                <textarea matInput type="text" placeholder="Message" required value="" [(ngModel)]="body" name="body" rows="5" ></textarea>
+              </mat-form-field>
+              <mat-form-field class="hide">
+                <input matInput type="text" placeholder="hp" required value="" [(ngModel)]="hp" name="subject">
+              </mat-form-field> 
+              <div class="errorMessages" *ngIf="errorMessages.length > 0">
+                <p *ngFor="let error of errorMessages">{{error}}</p>  
+              </div>
+              <button mat-raised-button type="submit" [disabled]="!contactForm.form.valid || submitButtonDisabled">{{submitButtonText}}</button>  
+            </form> 
+        </div>
+        <div *ngIf="formSubmitted">
+          <p><b>Thank You!</b></p>
+          <p>Your message has been sent.</p>
+        </div>
+    </div>
+    <div sideBar ofbFadeInOnScroll>
+        
+    </div>
+</secondary-page-component>
\ No newline at end of file
diff --git a/Client/src/app/components/contact-page/contact-page.component.spec.ts b/Client/src/app/components/contact-page/contact-page.component.spec.ts
new file mode 100644
index 0000000..8461439
--- /dev/null
+++ b/Client/src/app/components/contact-page/contact-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { ContactPageComponent } from './contact-page.component';
+
+describe('ContactPageComponent', () => {
+  let component: ContactPageComponent;
+  let fixture: ComponentFixture<ContactPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ ContactPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(ContactPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/contact-page/contact-page.component.ts b/Client/src/app/components/contact-page/contact-page.component.ts
new file mode 100644
index 0000000..23055a8
--- /dev/null
+++ b/Client/src/app/components/contact-page/contact-page.component.ts
@@ -0,0 +1,79 @@
+import { Router } from '@angular/router';
+import { MatDialogConfig } from '@angular/material';
+import { OkPopupComponent } from './../popups/ok-popup/ok-popup.component';
+import { EmailService } from './../../services/email.service';
+import { Component, OnInit } from '@angular/core';
+import { MatDialog } from '@angular/material';
+
+@Component({
+  selector: 'app-contact-page',
+  templateUrl: './contact-page.component.html',
+  styleUrls: ['./contact-page.component.css']
+})
+export class ContactPageComponent implements OnInit {
+  public submitButtonText: string = "Submit";
+  public submitButtonDisabled: boolean = false;
+  public formSubmitted: boolean = false;
+
+  public name: string;
+  public email: string;
+  public phone: string;
+  public body: string;
+  public hp: string = ".";
+
+  public errorMessages: string[] = [];
+
+
+  constructor(private emailService: EmailService, 
+              private MatDialog: MatDialog,
+              private router: Router) { }
+
+  ngOnInit() {
+  }
+
+  onSubmit(){
+    this.errorMessages = [];
+    if (this.name == null || this.name == ""){
+      this.errorMessages.push("Please enter a name");
+    }
+    if (this.email == null || this.email == ""){
+      this.errorMessages.push("Please enter an email address");
+    }
+    if (this.body == null || this.body == ""){
+      this.errorMessages.push("Please enter a message");
+    }
+    if (this.errorMessages.length > 0){ return; }
+
+    this.submitButtonText = "Please Wait...";
+    this.submitButtonDisabled = true;
+    this.emailService.sendEmail(this.name,
+                                this.email,
+                                this.phone,
+                                this.body,
+                                this.hp)
+                      .subscribe(
+                        success => {this.emailSuccess();},
+                        error => {this.emailError();});
+  }
+
+  private emailSuccess(){
+    let opts = new MatDialogConfig;
+    opts.data = { title:'Email Sent','message':'Thank You! Your message has been sent.' };
+    let popup = this.MatDialog.open(OkPopupComponent,opts);
+    this.submitButtonText = "Submit";
+    this.submitButtonDisabled = false;
+    popup.afterClosed().subscribe(()=>{
+      this.formSubmitted = true;
+    });
+  }
+
+  private emailError(){
+    console.error("error");
+    let opts = new MatDialogConfig;
+    opts.data = { title:'Email Error','message':'Please make sure that you have entered a valid email address.' };
+    let popup = this.MatDialog.open(OkPopupComponent,opts);
+    this.submitButtonText = "Submit";
+    this.submitButtonDisabled = false;
+  }
+
+}
diff --git a/Client/src/app/components/date/date.component.ts b/Client/src/app/components/date/date.component.ts
new file mode 100644
index 0000000..9aca9a8
--- /dev/null
+++ b/Client/src/app/components/date/date.component.ts
@@ -0,0 +1,25 @@
+import { Component, Input, OnInit } from '@angular/core';
+import { MONTHS } from '../../constants/months';
+
+
+@Component({
+  selector: 'date-component',
+  template: '<div class="wrapper"><div class="month">{{ month }}</div><div class="day">{{ day }}</div></div>',
+  styles: ['.month{ color:white; background-color:red; width:40px; font-size: .75rem; text-align:center; } .day{ text-align:center; background:linear-gradient(to bottom, #ededed 0%,#ffffff 100%); }'],
+})
+export class DateComponent implements OnInit {
+    @Input()
+    date: Date = new Date();
+    month: number;
+    day: number;
+
+    constructor(){
+
+    }
+
+    ngOnInit(): void{
+        let monthNum = this.date.getMonth();
+        this.month = MONTHS[monthNum];
+        this.day = this.date.getDate();
+    }
+}
diff --git a/Client/src/app/components/event-large/event-large.component.css b/Client/src/app/components/event-large/event-large.component.css
new file mode 100644
index 0000000..1769246
--- /dev/null
+++ b/Client/src/app/components/event-large/event-large.component.css
@@ -0,0 +1,92 @@
+.wrapper{
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.photo{
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 100px;
+    margin: 0;
+    vertical-align: top;
+}
+
+.fade{
+    text-align: center;
+    vertical-align: bottom;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    padding-bottom: 2px;
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.8+100 */
+    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 ); /* IE6-9 */
+}
+
+.photo button{
+    padding: 0;
+    vertical-align: top;
+}
+
+button img{
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.info{
+    display: inline-block;
+    vertical-align: top;
+    padding: 2px 2px 8px 5px;
+    box-sizing: border-box;
+    width: calc(100% - 100px);    
+    overflow-y: hidden;
+    position: relative;
+    height: 100px;
+}
+
+.title{
+    font-weight: bold;
+}
+
+.date, .author{
+    font-style: italic;
+    font-size: 14px;
+}
+
+.description{
+    font-size: 14px;
+    color: darkgray;
+    word-wrap: none;
+    border-top: 0px solid lightgray;
+    padding-top:6px;
+    margin-top: 6px;    
+}
+.expanded{
+    overflow-y: hidden;
+}
+.expanded-content{
+    margin: 10px;
+}
+
+.buttons, .buttons-edit{
+    background-color: lightgray;
+}
+
+.buttons button, .buttons .filler{
+    display: inline-block;
+    width: 33.33333%;
+}
+
+.border{
+    margin: 0px 5px 0px 5px;
+    border-top: 1px inset lightgray;
+}
+
+.buttons-edit button{
+    display: inline-block;
+    width: 50%;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/event-large/event-large.component.html b/Client/src/app/components/event-large/event-large.component.html
new file mode 100644
index 0000000..cc582cd
--- /dev/null
+++ b/Client/src/app/components/event-large/event-large.component.html
@@ -0,0 +1,32 @@
+<div class="wrapper" [@inout]="startFadeIn">
+    <div class="photo">
+        <button mat-button (click)="toggleState()">
+            <img src="{{imgSrc}}" />
+        </button>
+    </div><!--
+    --><div class="info"  (click)="toggleState()">
+        <span class="title">{{ title }}</span>
+        <br>
+        <span class="date">{{ startDate | ofbDate:true }}</span>
+        <br>
+        <p class="description" [@toggleAnimationFade]="state">
+            {{ description }}
+        </p>
+        <div class="fade"><i ofbicon *ngIf="state === 'closed'">arrow_drop_down</i><i ofbicon *ngIf="state === 'open'">arrow_drop_up</i></div>
+    </div>  
+    <div class="expanded" [@toggleAnimation]="state" (click)="toggleState()">
+        <p class="expanded-content">
+            {{ description }}
+        </p>
+    </div>  
+    <div class="buttons">
+        <span class="action pct10 filler"></span><!--
+        --><span class="action pct10 filler"></span><!--
+        --><button mat-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
+    </div>
+    <div class="buttons-edit" *ngIf="loggedIn">
+        <div class="border"></div>
+        <span class="action filler"></span><!--
+        --><button mat-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i>  Delete</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/event-large/event-large.component.spec.ts b/Client/src/app/components/event-large/event-large.component.spec.ts
new file mode 100644
index 0000000..a2c675e
--- /dev/null
+++ b/Client/src/app/components/event-large/event-large.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventLargeComponent } from './event-large.component';
+
+describe('EventLargeComponent', () => {
+  let component: EventLargeComponent;
+  let fixture: ComponentFixture<EventLargeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventLargeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventLargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/event-large/event-large.component.ts b/Client/src/app/components/event-large/event-large.component.ts
new file mode 100644
index 0000000..300aa7f
--- /dev/null
+++ b/Client/src/app/components/event-large/event-large.component.ts
@@ -0,0 +1,109 @@
+import { Component, AfterContentInit, Input, Inject } from '@angular/core';
+import { MatDialog, MatDialogConfig } from '@angular/material';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { EventService } from './../../services/event.service';
+
+import { SharePopupComponent } from './../popups/share-popup/share-popup.component';
+import { YesNoPopupComponent } from './../popups/yes-no-popup/yes-no-popup.component';
+
+import { MONTHS_FULL } from '../../constants/months';
+
+@Component({
+  selector: 'event-large-component',
+  templateUrl: './event-large.component.html',
+  styleUrls: ['./event-large.component.css'],
+  animations:[
+    trigger("inout",[
+      state("1", style({ opacity: '1' })),
+      state("0",style({ opacity: '0' })),
+      transition('* => 1',[
+          animate('500ms ease-in-out')
+      ]),
+      transition(':enter',[
+          animate('0ms')
+      ])
+    ]),
+    trigger('toggleAnimation', [
+      state('open', style({
+        height: '*',
+      })),
+      state('closed', style({
+        height: '0px',
+      })),
+      transition('open <=> closed', animate('500ms ease-in-out'))
+    ]),
+    trigger('toggleAnimationFade', [
+      state('open', style({
+        opacity: 0,
+      })),
+      state('closed', style({
+        opacity: 1,
+      })),
+      transition('open <=> closed', animate('500ms ease-in-out'))
+    ])
+  ]
+})
+export class EventLargeComponent implements AfterContentInit {
+
+  public state: string = 'closed';
+  @Input()
+  public loggedIn: boolean;
+
+  @Input()
+  id: number;
+  @Input()
+  title: string;
+  @Input()
+  description: string;
+  @Input()
+  startDate: Date;
+  @Input()
+  endDate: Date;
+  public startFadeIn: boolean = false;
+  @Input()
+  public delayFadeIn: number = 100;
+
+  public _imgSrc: string;
+  public get imgSrc(): string{
+    var monthNum = this.startDate.getMonth();
+    var monthName = '';
+    monthName = MONTHS_FULL[monthNum];
+    return "/api2/cim/" + monthName + "/" + this.startDate.getDate();
+  }
+
+  constructor(private dialog: MatDialog,
+              private eventService: EventService){     
+  }
+
+  ngAfterContentInit(): void{
+      setTimeout(() => this.startFadeIn = true, this.delayFadeIn);
+  }
+
+  toggleState(){
+    this.state = this.state === 'open' ? 'closed' : 'open'
+  }
+
+  share(){
+    let opts = new MatDialogConfig;
+    opts.data = { prefix: 'e', id: this.id, title: this.title, description: this.description };
+    let dialog = this.dialog.open(SharePopupComponent, opts);
+  }
+
+  delete(){
+    let opts = new MatDialogConfig;
+    opts.data = { title:'Delete','message':'Are you sure you want to delete "' + this.title + '"?' };
+    let dialog = this.dialog.open(YesNoPopupComponent, opts);
+
+    dialog.afterClosed().subscribe(s => {
+      s = s as boolean;
+      if (s === true){
+        this.eventService.deleteEvent(this.id).subscribe(
+          success => {  },
+          error => { console.error(error);  }
+        );
+      }        
+    });
+  }
+
+}
+
diff --git a/Client/src/app/components/event/event.component.css b/Client/src/app/components/event/event.component.css
new file mode 100644
index 0000000..146b2ae
--- /dev/null
+++ b/Client/src/app/components/event/event.component.css
@@ -0,0 +1,23 @@
+.inner-wrapper{
+    position:relative;
+}
+
+.title{
+    display: table;
+    font-size: 1.25em;    
+}
+
+.title-text{
+    vertical-align: middle;
+    display: table-cell;
+    padding-left: 10px;
+    font-size: .95rem;
+}
+
+a{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    top: 0;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/event/event.component.html b/Client/src/app/components/event/event.component.html
new file mode 100644
index 0000000..b2c9c9b
--- /dev/null
+++ b/Client/src/app/components/event/event.component.html
@@ -0,0 +1,9 @@
+<div class="wrapper" [@inout]="startFadeIn">
+    <div class="inner-wrapper">
+        <div class="title">
+            <a></a>  
+            <date-component class="title-date" [date]="startDate"></date-component>      
+            <span class="title-text">{{ title }}</span>
+        </div>  
+    </div> 
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/event/event.component.ts b/Client/src/app/components/event/event.component.ts
new file mode 100644
index 0000000..b5fbc2b
--- /dev/null
+++ b/Client/src/app/components/event/event.component.ts
@@ -0,0 +1,40 @@
+import { Component, AfterContentInit, Input } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+
+@Component({
+  selector: 'event-component',
+  templateUrl: './event.component.html',
+  styleUrls: ['./event.component.css'],
+  animations:[
+      trigger("inout",[
+        state("1", style({ opacity: '1', transform:'translateX(0)' })),
+        state("0",style({ opacity: '0', transform:'translateX(5%)' })),
+        transition('* => 1',[
+            animate('500ms ease-in-out')
+        ]),
+        transition(':enter',[
+            animate('0ms')
+        ])
+      ])
+  ]
+})
+export class EventComponent implements AfterContentInit {
+    @Input()
+    title: string;
+    @Input()
+    description: string;
+    @Input()
+    startDate: Date;
+    @Input()
+    endDate: Date;
+    public startFadeIn: boolean = false;
+    @Input()
+    public delayFadeIn: number = 100;
+
+    constructor(){
+    }
+
+    ngAfterContentInit(): void{
+        setTimeout(() => this.startFadeIn = true, this.delayFadeIn);
+    }
+}
diff --git a/Client/src/app/components/events-page/events-page.component.css b/Client/src/app/components/events-page/events-page.component.css
new file mode 100644
index 0000000..65ae5f9
--- /dev/null
+++ b/Client/src/app/components/events-page/events-page.component.css
@@ -0,0 +1,49 @@
+
+ul{
+    list-style: none;
+}
+
+li{
+    margin: 40px 0px 40px 0px; /* top right bottom left */
+}
+
+li:first-child{
+    margin-top: 0px;
+}
+
+li:last-child{
+    margin-bottom: 0px;
+}
+
+.side-bar{
+    position: fixed;
+}
+
+.width100{
+    width: 100%;
+}
+
+.fab-buttons{
+    display: none;
+}
+
+#showAllButton{
+    margin-top: 10px;
+}
+
+#audio-player-filler{
+    height: 60px;
+    background-color: inherit;
+}
+
+@media(max-width:800px){
+    .mobile-search{
+        display: block;
+    }
+    .fab-buttons{
+        display: inline-block;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+    }
+}
\ No newline at end of file
diff --git a/Client/src/app/components/events-page/events-page.component.html b/Client/src/app/components/events-page/events-page.component.html
new file mode 100644
index 0000000..9d80fc3
--- /dev/null
+++ b/Client/src/app/components/events-page/events-page.component.html
@@ -0,0 +1,27 @@
+<secondary-page-component [hideSideBarOnMobile]="true" >
+    <div mainContent>
+        <p *ngIf="loading">Loading upcoming events...</p>
+        <ul>
+            <li *ngFor="let event of events; let i = index;">
+                <event-large-component
+                    [id]="event.id"
+                    [title]="event.title"
+                    [startDate]="event.startDate"
+                    [description]="event.description"
+                    [delayFadeIn]="(i+1)*200"
+                    [loggedIn]="loggedIn"
+                    ></event-large-component>
+            </li>
+        </ul>
+        <button mat-button *ngIf="showAllButtonVisible" id="showAllButton" class="width100" style="text-align: center;" routerLink="/events" >               
+            <i ofbicon >expand_more</i><span *ngIf="!loading"> Show All</span>
+        </button>
+        <div class="fab-buttons" >
+            <button mat-fab *ngIf="loggedIn" (click)="addEvent()"><i ofbicon>add</i></button>
+            <div id="audio-player-filler" *ngIf="audioPlayerOpen"></div>
+        </div>        
+    </div>
+    <div sideBar class="side-bar">
+        <button mat-raised-button *ngIf="loggedIn" class="width100" (click)="addEvent()" >Add Event</button>
+    </div>
+</secondary-page-component>
\ No newline at end of file
diff --git a/Client/src/app/components/events-page/events-page.component.spec.ts b/Client/src/app/components/events-page/events-page.component.spec.ts
new file mode 100644
index 0000000..6eb703f
--- /dev/null
+++ b/Client/src/app/components/events-page/events-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { EventsPageComponent } from './events-page.component';
+
+describe('EventsPageComponent', () => {
+  let component: EventsPageComponent;
+  let fixture: ComponentFixture<EventsPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ EventsPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(EventsPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/icon-button/icon-button.component.ts b/Client/src/app/components/icon-button/icon-button.component.ts
new file mode 100644
index 0000000..6c3565a
--- /dev/null
+++ b/Client/src/app/components/icon-button/icon-button.component.ts
@@ -0,0 +1,45 @@
+import { Component, OnChanges, SimpleChanges, Input } from '@angular/core';
+import { trigger, transition, state, style, animate } from '@angular/animations';
+
+@Component({
+  selector: 'icon-button-component',
+  template: `<button mat-button *ngIf="routerLink" [@menuOpened]="menuOpened" class="width100" style="text-align: left;" routerLink="{{routerLink}}"><i ofbicon [iconName]="icon"></i> {{text}}</button>
+             <button mat-button *ngIf="!routerLink" [@menuOpened]="menuOpened" class="width100" style="text-align: left;"><i ofbicon [iconName]="icon"></i> {{text}}</button>`,
+  styles: ['.width100{width: 100%;}button{font-size: 16px;margin-bottom: 10px;}'],
+  animations: [trigger(
+    'menuOpened',
+    [
+      state('1',style({transform:'translateX(0)'})),
+      state('0',style({transform: 'translateX(80%)'})),
+      transition("0 => 1", [
+        animate('400ms ease-in-out')
+      ]),
+      transition("1 => 0", [
+        animate('300ms ease-in-out')
+      ])
+    ])]
+})
+export class IconButtonComponent implements OnChanges {
+    @Input()
+    public routerLink: string;
+    @Input()
+    public icon: string;
+    @Input()
+    public text: string;
+    @Input()
+    public menuOpen: boolean = true;
+    public menuOpened: boolean = false;
+    @Input()
+    public animationDelay: number = 100;
+
+    ngOnChanges(changes: SimpleChanges){
+        var self = this;
+        if(changes.hasOwnProperty("menuOpen")){
+            if (self.menuOpen === true){
+                setTimeout(function(){ self.menuOpened = self.menuOpen; },self.animationDelay);
+            } else {
+                setTimeout(function(){ self.menuOpened = self.menuOpen; },self.animationDelay);
+            }            
+        }
+    }
+}
diff --git a/Client/src/app/components/location/location.component.css b/Client/src/app/components/location/location.component.css
new file mode 100644
index 0000000..fe20ad5
--- /dev/null
+++ b/Client/src/app/components/location/location.component.css
@@ -0,0 +1,9 @@
+.map{
+    width: 100%;
+    height: 450px;
+}
+
+#verseFrame{
+    display: block;
+    border: none;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/location/location.component.html b/Client/src/app/components/location/location.component.html
new file mode 100644
index 0000000..0b3aa36
--- /dev/null
+++ b/Client/src/app/components/location/location.component.html
@@ -0,0 +1,12 @@
+<secondary-page-component [hideSideBarOnMobile]="true" >
+    <div mainContent class="mapWrapper">
+        <p *ngIf="mapLoading">Loading Google Map...</p>
+        <iframe class="map" (load)="mapLoaded()" src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d2773.999802164379!2d-112.51416668494458!3d45.951286979109824!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x535b078c3c74ea33%3A0xac299097142c5894!2sOld+Fashion+Baptist+Church!5e0!3m2!1sen!2sus!4v1493451790286" frameborder="0" style="border:0" allowfullscreen></iframe>
+    </div>
+    <div sideBar ofbFadeInOnScroll>
+        We are located South West of the Copper King hotel in Butte, Montana just off of Motor View Road.
+        <br><br><br>
+        Trust in the LORD with all thine heart; and lean not unto thine own understanding.
+        In all thy ways acknowledge him, and he shall direct thy paths. <a href="https://www.kingjamesbibleonline.org/Proverbs-3-5_3-6/">(Proverbs 3:5 - 6)</a>
+    </div>
+</secondary-page-component>
\ No newline at end of file
diff --git a/Client/src/app/components/location/location.component.spec.ts b/Client/src/app/components/location/location.component.spec.ts
new file mode 100644
index 0000000..012cd79
--- /dev/null
+++ b/Client/src/app/components/location/location.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LocationComponent } from './location.component';
+
+describe('LocationComponent', () => {
+  let component: LocationComponent;
+  let fixture: ComponentFixture<LocationComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LocationComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LocationComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/location/location.component.ts b/Client/src/app/components/location/location.component.ts
new file mode 100644
index 0000000..642dd4d
--- /dev/null
+++ b/Client/src/app/components/location/location.component.ts
@@ -0,0 +1,30 @@
+import { BibleVerseService } from './../../services/bible-verse.service';
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'location-component',
+  templateUrl: './location.component.html',
+  styleUrls: ['./location.component.css']
+})
+export class LocationComponent implements OnInit {
+  public mapLoading: boolean = true;
+
+  constructor(private bibleVerseService: BibleVerseService) { }
+
+  ngOnInit() {
+    // this.bibleVerseService.randomVerse().subscribe(
+    //   verse => {
+        
+    //   },
+    //   error => console.log(error) );
+  }
+
+  mapLoaded(){
+    this.mapLoading = false;
+  }
+
+  verseLoaded(){
+    console.log("DONE");
+  }
+
+}
diff --git a/Client/src/app/components/menu/menu.component.css b/Client/src/app/components/menu/menu.component.css
new file mode 100644
index 0000000..db86cde
--- /dev/null
+++ b/Client/src/app/components/menu/menu.component.css
@@ -0,0 +1,32 @@
+
+
+#menu-background{
+    position:fixed;
+    top: 0px;
+    left: 0px;
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0,0,0,.7);
+    z-index: 10000;
+}
+
+.width100{
+    width: 100%;
+}
+
+#close-button{
+    margin-left: 7px;
+}
+
+
+#header-menu{
+    position: fixed;
+    top: 0px;
+    bottom: 0px;
+    right: 0px;
+    width: 160px;
+    overflow-y: auto;
+    background-color: rgba(50,50,50,1);
+    color: white;
+    overflow-x: hidden;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/menu/menu.component.html b/Client/src/app/components/menu/menu.component.html
new file mode 100644
index 0000000..6267802
--- /dev/null
+++ b/Client/src/app/components/menu/menu.component.html
@@ -0,0 +1,16 @@
+
+
+<div id="menu-background" [@backgroundMenuOpen]="menuOpen" (click)="menuClick($event)">
+<div id="header-menu" [@menuOpen]="menuOpen">
+    <ul class="width100">
+      <button mat-icon-button id="close-button" (click)="menuClick($event)"><i ofbicon>close</i></button>
+      <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="0" icon="help_outline" routerLink="/whoweare" text="Who We Are"></icon-button-component></li>
+      <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="50" icon="access_time" routerLink="/services" text="Service Times"></icon-button-component></li>
+      <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="100" icon="place" routerLink="/location" text="Location"></icon-button-component></li>
+      <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="150" icon="headset" routerLink="/sermons" text="Sermons"></icon-button-component></li>
+      <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="200" icon="event" routerLink="/events" text="Events"></icon-button-component></li>
+      <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="250" icon="mail_outline" routerLink="/contact" text="Contact"></icon-button-component></li>
+      <li class="width100"><icon-button-component [menuOpen]="menuOpen" animationDelay="300" icon="input" (click)="showLogin($event)" text="Login"></icon-button-component></li>
+    </ul>
+  </div>
+  </div>
\ No newline at end of file
diff --git a/Client/src/app/components/menu/menu.component.ts b/Client/src/app/components/menu/menu.component.ts
new file mode 100644
index 0000000..c45ff4c
--- /dev/null
+++ b/Client/src/app/components/menu/menu.component.ts
@@ -0,0 +1,59 @@
+import { Component,         
+         Input,
+         Output,
+         EventEmitter } from '@angular/core';
+import { trigger,
+         state,
+         style,
+         transition,
+         animate } from '@angular/animations';
+import { MatDialog } from '@angular/material';
+import { LoginPopupComponent } from '../popups/login-popup/login-popup.component';
+
+@Component({
+  selector: 'menu-component',
+  templateUrl: './menu.component.html',
+  styleUrls: ['./menu.component.css'],
+  animations: [
+  trigger('menuOpen', [
+    state('1', style({transform: 'translateX(0)'})),
+    state('0', style({transform: 'translateX(100%)'})),
+    transition('0 => 1', [
+        animate('400ms ease-in-out', style({transform: 'translateX(0)'}))
+    ]),
+    transition('1 => 0', [
+      animate('400ms 100ms ease-in-out', style({transform: 'translateX(100%)'}))
+    ])
+  ]),
+  trigger('backgroundMenuOpen', [
+    state('1', style({opacity: '1'})),
+    state('0', style({opacity: '0', display:'none'})),
+    transition('0 => 1', [
+        animate('400ms ease-in-out', style({opacity: '1'}))
+    ]),
+    transition('1 => 0', [
+      animate('400ms 100ms ease-in-out', style({opacity: '0'}))
+    ])
+  ])]
+})
+export class MenuComponent {
+  @Input()
+  menuOpen: boolean = false;
+  @Output()
+  closed: EventEmitter<boolean> = new EventEmitter<boolean>();
+  
+  constructor(private MatDialog: MatDialog){
+
+  }
+
+  menuClick(event): void{   
+    event.stopPropagation();   
+    this.menuOpen = !this.menuOpen;
+    this.closed.emit(this.menuOpen);
+  }
+
+  showLogin(event){
+    event.preventDefault();
+    let dialog = this.MatDialog.open(LoginPopupComponent);
+  }
+}
diff --git a/Client/src/app/components/popups/add-event-popup/add-event-popup.component.css b/Client/src/app/components/popups/add-event-popup/add-event-popup.component.css
new file mode 100644
index 0000000..edd94f5
--- /dev/null
+++ b/Client/src/app/components/popups/add-event-popup/add-event-popup.component.css
@@ -0,0 +1,15 @@
+.full-width{
+    width: 100%;
+}
+
+form{
+    margin-top: 7px;
+}
+
+button{
+    margin: 20px 0px 20px 20px;
+}
+
+.first{
+   margin-left: 0px;
+}
diff --git a/Client/src/app/components/popups/add-event-popup/add-event-popup.component.html b/Client/src/app/components/popups/add-event-popup/add-event-popup.component.html
new file mode 100644
index 0000000..f28f4db
--- /dev/null
+++ b/Client/src/app/components/popups/add-event-popup/add-event-popup.component.html
@@ -0,0 +1,28 @@
+<div md-dialog-title>
+    <p>Add Event</p>
+</div>
+<div md-dialog-content>  
+  <form #addEventForm="ngForm" (ngSubmit)="onSubmit()">
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Title" required [(ngModel)]="eventTitle" name="title" >
+    </mat-form-field>
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Start Date" required [ngModel]="eventStartDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="eventStartDate = $event"  name="startDate" type="datetime-local">
+    </mat-form-field> 
+    <mat-form-field class="full-width">
+        <input matInput placeholder="End Date" required [ngModel]="eventEndDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="eventEndDate = $event"  name="endDate" type="datetime-local">
+      </mat-form-field> 
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Description" required [(ngModel)]="eventDescription" name="description" >
+    </mat-form-field>
+
+    <br><br>
+    <div *ngIf="errorMessages.length > 0" class="errorMessages">
+      <p *ngFor="let error of errorMessages">
+        {{error}}
+      </p>
+    </div>
+    <button mat-raised-button class="first" (click)="cancel($event)" >Cancel</button><!--
+  --><button mat-raised-button type="submit" [disabled]="!addEventForm.form.valid || addEventButtonDisabled">{{ addEventButtonText }}</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/add-event-popup/add-event-popup.component.spec.ts b/Client/src/app/components/popups/add-event-popup/add-event-popup.component.spec.ts
new file mode 100644
index 0000000..ad1ce18
--- /dev/null
+++ b/Client/src/app/components/popups/add-event-popup/add-event-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddEventPopupComponent } from './add-event-popup.component';
+
+describe('AddEventPopupComponent', () => {
+  let component: AddEventPopupComponent;
+  let fixture: ComponentFixture<AddEventPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddEventPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddEventPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.css b/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.css
new file mode 100644
index 0000000..25c9e3c
--- /dev/null
+++ b/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.css
@@ -0,0 +1,34 @@
+.full-width{
+    width: 100%;
+}
+
+
+form{
+    margin-top: 7px;
+}
+
+.progressPct{
+    display: inline-block;
+    width: 80px;
+    margin-right: 10px;
+}
+
+.progressBar{
+    width: calc(100% - 100px);
+}
+
+button{
+    margin: 20px 0px 20px 20px;
+}
+
+.first{
+   margin-left: 0px;
+}
+
+.errorMessages{
+    color: white;
+    background-color: rgb(255,90,90);
+    padding: 10px;
+    border-radius: 3px;
+    margin-bottom: 5px;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.html b/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.html
new file mode 100644
index 0000000..5a260f8
--- /dev/null
+++ b/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.html
@@ -0,0 +1,35 @@
+<div md-dialog-title>
+  Add Sermon<br>
+  <div *ngIf="monitorProgress">
+    <span class="progressPct">{{ uploadProgress/uploadTotal | percent:'1.0-2' }}</span>
+    <mat-slider class="progressBar" min="0" [max]="uploadTotal" step="1" [value]="uploadProgress"></mat-slider>
+  </div>
+  
+</div>
+<div md-dialog-content>
+  
+  <form #addSermonForm="ngForm" (ngSubmit)="onSubmit()">
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Title" required [(ngModel)]="sermonTitle" name="title" >
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput placeholder="Date" required [ngModel]="sermonDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="sermonDate = $event"  name="date" type="datetime-local">
+    </mat-form-field> 
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Speaker" required [(ngModel)]="sermonSpeaker" name="speaker" >
+    </mat-form-field> 
+    <mat-form-field class="full-width">
+      <input matInput placeholder="Description" required [(ngModel)]="sermonDescription" name="description" >
+    </mat-form-field>
+    
+    <input type="file" (change)="onFileChange($event)" placeholder="Choose File" accept=".mp3,audio/mpeg3" >
+    <br><br>
+    <div *ngIf="errorMessages.length > 0" class="errorMessages">
+      <p *ngFor="let error of errorMessages">
+        {{error}}
+      </p>
+    </div>
+    <button mat-raised-button class="first" (click)="cancel($event)" >Cancel</button><!--
+  --><button mat-raised-button type="submit" [disabled]="!addSermonForm.form.valid || addSermonButtonDisabled">{{ addSermonButtonText }}</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.spec.ts b/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.spec.ts
new file mode 100644
index 0000000..ecf141a
--- /dev/null
+++ b/Client/src/app/components/popups/add-sermon-popup/add-sermon-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { AddSermonPopupComponent } from './add-sermon-popup.component';
+
+describe('AddSermonPopupComponent', () => {
+  let component: AddSermonPopupComponent;
+  let fixture: ComponentFixture<AddSermonPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ AddSermonPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(AddSermonPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/input-popup/input-popup.component.css b/Client/src/app/components/popups/input-popup/input-popup.component.css
new file mode 100644
index 0000000..a7bdd5c
--- /dev/null
+++ b/Client/src/app/components/popups/input-popup/input-popup.component.css
@@ -0,0 +1,7 @@
+.align-right{
+    text-align: right;
+}
+
+.display-block{
+    display: block;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/popups/input-popup/input-popup.component.html b/Client/src/app/components/popups/input-popup/input-popup.component.html
new file mode 100644
index 0000000..c7515b2
--- /dev/null
+++ b/Client/src/app/components/popups/input-popup/input-popup.component.html
@@ -0,0 +1,10 @@
+<div md-dialog-title>{{title}}</div>
+<div md-dialog-content>
+  {{message}}<br>
+  <mat-form-field>
+    <input matInput [(ngModel)]="searchTerm" (keyup.enter)="onEnter()" name="search" placeholder="Search">
+  </mat-form-field>
+</div>
+<div md-dialog-actions class="align-right display-block">
+  <button mat-raised-button (click)="ok()" class="display-inline">OK</button>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/input-popup/input-popup.component.spec.ts b/Client/src/app/components/popups/input-popup/input-popup.component.spec.ts
new file mode 100644
index 0000000..6fa89d4
--- /dev/null
+++ b/Client/src/app/components/popups/input-popup/input-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { InputPopupComponent } from './input-popup.component';
+
+describe('InputPopupComponent', () => {
+  let component: InputPopupComponent;
+  let fixture: ComponentFixture<InputPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ InputPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(InputPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/input-popup/input-popup.component.ts b/Client/src/app/components/popups/input-popup/input-popup.component.ts
new file mode 100644
index 0000000..30eb8cd
--- /dev/null
+++ b/Client/src/app/components/popups/input-popup/input-popup.component.ts
@@ -0,0 +1,32 @@
+import { MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { Component, OnInit, Inject } from '@angular/core';
+
+@Component({
+  selector: 'app-input-popup',
+  templateUrl: './input-popup.component.html',
+  styleUrls: ['./input-popup.component.css']
+})
+export class InputPopupComponent implements OnInit {
+
+  public title: string;
+  public message: string;
+  public searchTerm: string = "";
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private MatDialogRef: MatDialogRef<InputPopupComponent>) { 
+    this.title = data.title;
+    this.message = data.message;
+  }
+
+  ngOnInit() {
+  }
+
+  ok(){
+    this.MatDialogRef.close(this.searchTerm);
+  }
+
+  onEnter(){
+    this.MatDialogRef.close(this.searchTerm);
+  }
+
+}
diff --git a/Client/src/app/components/popups/login-popup/login-popup.component.css b/Client/src/app/components/popups/login-popup/login-popup.component.css
new file mode 100644
index 0000000..df4f50d
--- /dev/null
+++ b/Client/src/app/components/popups/login-popup/login-popup.component.css
@@ -0,0 +1,14 @@
+
+
+.input-container{
+    display: block;
+    padding: 10px 0px 10px 0px;
+}
+
+button{
+    margin: 20px 0px 20px 20px;
+}
+
+.first{
+   margin-left: 0px;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/popups/login-popup/login-popup.component.html b/Client/src/app/components/popups/login-popup/login-popup.component.html
new file mode 100644
index 0000000..8ae2b48
--- /dev/null
+++ b/Client/src/app/components/popups/login-popup/login-popup.component.html
@@ -0,0 +1,15 @@
+<div md-dialog-title>
+  Login
+</div>
+<div md-dialog-content>
+    <form class="form" #loginForm="ngForm" (ngSubmit)="onSubmit()">
+      <mat-form-field class="input-container">
+        <input matInput placeholder="Username" required value="" [(ngModel)]="username" name="username">
+      </mat-form-field> 
+      <mat-form-field class="input-container">
+        <input type="password" matInput placeholder="Password" required value="" [(ngModel)]="password" name="password">
+      </mat-form-field>  
+      <button mat-raised-button type="button" class="first" (click)="cancel()">Cancel</button><!--
+      --><button mat-raised-button type="submit" [disabled]="!loginForm.form.valid || loginButtonDisabled">{{loginButtonText}}</button>             
+    </form>     
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/login-popup/login-popup.component.spec.ts b/Client/src/app/components/popups/login-popup/login-popup.component.spec.ts
new file mode 100644
index 0000000..2c4e496
--- /dev/null
+++ b/Client/src/app/components/popups/login-popup/login-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { LoginPopupComponent } from './login-popup.component';
+
+describe('LoginPopupComponent', () => {
+  let component: LoginPopupComponent;
+  let fixture: ComponentFixture<LoginPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ LoginPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(LoginPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/ok-popup/ok-popup.component.css b/Client/src/app/components/popups/ok-popup/ok-popup.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Client/src/app/components/popups/ok-popup/ok-popup.component.html b/Client/src/app/components/popups/ok-popup/ok-popup.component.html
new file mode 100644
index 0000000..2513551
--- /dev/null
+++ b/Client/src/app/components/popups/ok-popup/ok-popup.component.html
@@ -0,0 +1,5 @@
+<div md-dialog-title>{{title}}</div>
+<div md-dialog-content>{{message}}</div>
+<div md-dialog-actions>
+  <button mat-raised-button (click)="close()">OK</button>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/ok-popup/ok-popup.component.spec.ts b/Client/src/app/components/popups/ok-popup/ok-popup.component.spec.ts
new file mode 100644
index 0000000..8ae998a
--- /dev/null
+++ b/Client/src/app/components/popups/ok-popup/ok-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { OkPopupComponent } from './ok-popup.component';
+
+describe('OkPopupComponent', () => {
+  let component: OkPopupComponent;
+  let fixture: ComponentFixture<OkPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ OkPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(OkPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/ok-popup/ok-popup.component.ts b/Client/src/app/components/popups/ok-popup/ok-popup.component.ts
new file mode 100644
index 0000000..c29949b
--- /dev/null
+++ b/Client/src/app/components/popups/ok-popup/ok-popup.component.ts
@@ -0,0 +1,27 @@
+import { MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { Component, OnInit, Inject } from '@angular/core';
+
+@Component({
+  selector: 'app-ok-popup',
+  templateUrl: './ok-popup.component.html',
+  styleUrls: ['./ok-popup.component.css']
+})
+export class OkPopupComponent implements OnInit {
+
+  public title: string;
+  public message: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private MatDialogRef: MatDialogRef<OkPopupComponent>) { 
+    this.title = data.title;
+    this.message = data.message;
+  }
+
+  ngOnInit() {
+  }
+
+  close(){
+    this.MatDialogRef.close();
+  }
+
+}
diff --git a/Client/src/app/components/popups/share-popup/share-popup.component.css b/Client/src/app/components/popups/share-popup/share-popup.component.css
new file mode 100644
index 0000000..e75aa40
--- /dev/null
+++ b/Client/src/app/components/popups/share-popup/share-popup.component.css
@@ -0,0 +1,41 @@
+.width100{
+    width: 100%;
+}
+
+.shareHeader{
+    font-size: 25px;
+}
+
+.social-wrapper{  
+    box-sizing: border-box;  
+    width: calc(100% - 10px);
+    text-align: center;
+    color: white;
+    padding: 10px;
+    border-radius: 5px;
+    margin: 5px;
+}
+
+.social-wrapper:hover{
+    cursor: pointer;
+}
+
+.social-wrapper > span{
+    vertical-align: top;
+}
+
+.facebook{
+    background-color: #3B5998;
+}
+
+.facebook:hover{
+    background-color: #3B5998;
+}
+
+.twitter{
+    background-color: #55acee;
+}
+
+.copy{
+    background-color: #7d7d7d;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/popups/share-popup/share-popup.component.html b/Client/src/app/components/popups/share-popup/share-popup.component.html
new file mode 100644
index 0000000..1700170
--- /dev/null
+++ b/Client/src/app/components/popups/share-popup/share-popup.component.html
@@ -0,0 +1,39 @@
+<div md-dialog-title>Share</div>
+<div md-dialog-content>
+  <a (click)="facebookShare()" [href]="facebookIframeUrl | safeUrl" target="_blank">
+    <div class="social-wrapper facebook" data-network="facebook" draggable="false" style="display: inline-block;">
+      <svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1.2em" width="1.2em" viewBox="0 0 40 40">
+        <g>
+          <path d="m21.7 16.7h5v5h-5v11.6h-5v-11.6h-5v-5h5v-2.1c0-2 0.6-4.5 1.8-5.9 1.3-1.3 2.8-2 4.7-2h3.5v5h-3.5c-0.9 0-1.5 0.6-1.5 1.5v3.5z"></path>
+        </g>
+      </svg>
+      <span class="st-label">Share</span>
+    </div>
+  </a>
+  <a (click)="twitterShare()" [href]="twitterUrl | safeUrl" target="_blank">
+    <div class="social-wrapper twitter" data-network="facebook" draggable="false" style="display: inline-block;">
+      <svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1.2em" width="1.2em" viewBox="0 0 40 40">
+        <g>
+          <path d="m31.5 11.7c1.3-0.8 2.2-2 2.7-3.4-1.4 0.7-2.7 1.2-4 1.4-1.1-1.2-2.6-1.9-4.4-1.9-1.7 0-3.2 0.6-4.4 1.8-1.2 1.2-1.8 2.7-1.8 4.4 0 0.5 0.1 0.9 0.2 1.3-5.1-0.1-9.4-2.3-12.7-6.4-0.6 1-0.9 2.1-0.9 3.1 0 2.2 1 3.9 2.8 5.2-1.1-0.1-2-0.4-2.8-0.8 0 1.5 0.5 2.8 1.4 4 0.9 1.1 2.1 1.8 3.5 2.1-0.5 0.1-1 0.2-1.6 0.2-0.5 0-0.9 0-1.1-0.1 0.4 1.2 1.1 2.3 2.1 3 1.1 0.8 2.3 1.2 3.6 1.3-2.2 1.7-4.7 2.6-7.6 2.6-0.7 0-1.2 0-1.5-0.1 2.8 1.9 6 2.8 9.5 2.8 3.5 0 6.7-0.9 9.4-2.7 2.8-1.8 4.8-4.1 6.1-6.7 1.3-2.6 1.9-5.3 1.9-8.1v-0.8c1.3-0.9 2.3-2 3.1-3.2-1.1 0.5-2.3 0.8-3.5 1z"></path>
+        </g>
+      </svg>
+      <span class="st-label">Tweet</span>
+    </div>
+  </a>
+  <a (click)="copyLink(shareText)">
+    <div class="social-wrapper copy" data-network="facebook" draggable="false" style="display: inline-block;">
+      <svg fill="#fff" preserveAspectRatio="xMidYMid meet" height="1.2em" width="1.2em" viewBox="0 0 40 40">
+        <g>
+          <path d="m30 26.8c2.7 0 4.8 2.2 4.8 4.8s-2.1 5-4.8 5-4.8-2.3-4.8-5c0-0.3 0-0.7 0-1.1l-11.8-6.8c-0.9 0.8-2.1 1.3-3.4 1.3-2.7 0-5-2.3-5-5s2.3-5 5-5c1.3 0 2.5 0.5 3.4 1.3l11.8-6.8c-0.1-0.4-0.2-0.8-0.2-1.1 0-2.8 2.3-5 5-5s5 2.2 5 5-2.3 5-5 5c-1.3 0-2.5-0.6-3.4-1.4l-11.8 6.8c0.1 0.4 0.2 0.8 0.2 1.2s-0.1 0.8-0.2 1.2l11.9 6.8c0.9-0.7 2.1-1.2 3.3-1.2z"></path>
+        </g>
+      </svg>
+      <span class="st-label">Copy Link</span>
+    </div>
+  </a>
+  <mat-form-field class="width100">
+    <input matInput #shareText value="{{shareUrl}}">
+  </mat-form-field>
+</div>
+<div md-dialog-actions>
+  <button mat-raised-button (click)="close()">OK</button>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/share-popup/share-popup.component.spec.ts b/Client/src/app/components/popups/share-popup/share-popup.component.spec.ts
new file mode 100644
index 0000000..907da98
--- /dev/null
+++ b/Client/src/app/components/popups/share-popup/share-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SharePopupComponent } from './share-popup.component';
+
+describe('SharePopupComponent', () => {
+  let component: SharePopupComponent;
+  let fixture: ComponentFixture<SharePopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SharePopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SharePopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/share-popup/share-popup.component.ts b/Client/src/app/components/popups/share-popup/share-popup.component.ts
new file mode 100644
index 0000000..e690fc5
--- /dev/null
+++ b/Client/src/app/components/popups/share-popup/share-popup.component.ts
@@ -0,0 +1,74 @@
+import { GoogleAnalyticsService } from './../../../services/google-analytics.service';
+import { MatDialogRef, MatSnackBar } from '@angular/material';
+import { DOCUMENT } from '@angular/platform-browser';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { Component, OnInit, Inject } from '@angular/core';
+
+@Component({
+  selector: 'app-share-popup',
+  templateUrl: './share-popup.component.html',
+  styleUrls: ['./share-popup.component.css']
+})
+export class SharePopupComponent implements OnInit {
+  //private urlPartA: string = "https://www.facebook.com/plugins/share_button.php?href=";
+  //private urlPartB: string = "&layout=button_count&size=large&mobile_iframe=true&width=106&height=28&appId";
+  private urlPartA: string = "https://www.facebook.com/sharer/sharer.php?kid_directed_site=0&u=";
+  private urlPartB: string = "&display=popup&ref=plugin&src=share_button";
+  private twitterPartA: string = "https://twitter.com/intent/tweet?text=";
+  private twitterPartB: string = "https://twitter.com/intent/tweet?text=ShareThis&url=http%3A%2F%2Fwww.sharethis.com%2F";
+  public twitterUrl: string;
+  private id: string;
+  public facebookIframeUrl: string;
+  private shareBaseUrl: string = "/api2/share/";
+  public shareUrl: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, 
+              @Inject(DOCUMENT) private document,
+              private MatDialogRef: MatDialogRef<SharePopupComponent>, 
+              private snackbar: MatSnackBar,
+              private googleAnalyticsService: GoogleAnalyticsService) { 
+    this.id = data.id;
+    let port = this.document.location.port ? ":"+this.document.location.port : "";
+    this.shareUrl = this.document.location.protocol +'//'+ this.document.location.hostname + port + this.shareBaseUrl + data.prefix + this.id;
+    this.facebookIframeUrl = this.urlPartA + this.shareUrl + this.urlPartB;
+    this.twitterUrl = this.twitterPartA + data.title + " - " + data.description + "&url=" + this.shareUrl;
+  }
+
+  ngOnInit() {
+  }
+
+  close(){
+    this.MatDialogRef.close();
+  }
+  
+  copyLink(target){
+    target.select();
+    try {
+      var successful = document.execCommand('copy');
+      var msg = successful ? 'successful' : 'unsuccessful';
+      target.blur();
+      let s = this.snackbar.open("Link Copied","OK");
+          s.onAction().subscribe(()=>{ s.dismiss(); });
+          s.afterOpened().subscribe(()=>{ setTimeout(()=>{ s.dismiss(); },3000); });
+      this.share("link");
+    } catch (err) {
+      console.error('Oops, unable to copy');
+    }
+  }
+
+  share(method: string){
+    if (this.data.prefix === 's'){
+      this.googleAnalyticsService.shareSermon(Number(this.id),this.data.title,method);
+    } else if (this.data.prefix === 'e'){
+      this.googleAnalyticsService.shareEvent(Number(this.id),this.data.title,method);
+    }
+  }
+
+  facebookShare(){
+    this.share('facebook');
+  }
+
+  twitterShare(){
+    this.share('twitter');
+  }
+}
diff --git a/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.css b/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.css
new file mode 100644
index 0000000..28e4e2d
--- /dev/null
+++ b/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.css
@@ -0,0 +1,15 @@
+
+
+mat-form-field{
+    display:block;
+    padding-top: 10px;
+    padding-bottom: 10px;
+}
+
+button{
+    margin: 20px 0px 20px 20px;
+}
+
+.first{
+   margin-left: 0px;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.html b/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.html
new file mode 100644
index 0000000..dcb767f
--- /dev/null
+++ b/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.html
@@ -0,0 +1,23 @@
+<div md-dialog-title>
+  Add Sermon 
+</div>
+<div md-dialog-content>
+  
+  <form #updateSermonForm="ngForm" (ngSubmit)="onSubmit()">
+    <mat-form-field class="example-full-width">
+      <input matInput required [(ngModel)]="sermonTitle" name="title" placeholder="Title">
+    </mat-form-field>
+    <mat-form-field>
+      <input matInput required [ngModel]="sermonDate | date:'yyyy-MM-ddTHH:mm'" (ngModelChange)="sermonDate = $event"  name="date" type="datetime-local" placeholder="Choose a date">
+    </mat-form-field> 
+    <mat-form-field class="example-full-width">
+      <input matInput required [(ngModel)]="sermonSpeaker" name="speaker" placeholder="Speaker">
+    </mat-form-field> 
+    <mat-form-field class="example-full-width">
+      <input matInput required [(ngModel)]="sermonDescription" name="description" placeholder="Description">
+    </mat-form-field>
+    
+    <button mat-raised-button class="first" type="button" (click)="cancel()" >Cancel</button><!--
+  --><button mat-raised-button type="submit" [disabled]="!updateSermonForm.form.valid || updateSermonButtonDisabled">{{ updateSermonButtonText }}</button>
+  </form>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.spec.ts b/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.spec.ts
new file mode 100644
index 0000000..ab3d2f0
--- /dev/null
+++ b/Client/src/app/components/popups/update-sermon-popup/update-sermon-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { UpdateSermonPopupComponent } from './update-sermon-popup.component';
+
+describe('UpdateSermonPopupComponent', () => {
+  let component: UpdateSermonPopupComponent;
+  let fixture: ComponentFixture<UpdateSermonPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ UpdateSermonPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(UpdateSermonPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.css b/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.html b/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.html
new file mode 100644
index 0000000..d1178a3
--- /dev/null
+++ b/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.html
@@ -0,0 +1,6 @@
+<div md-dialog-title>{{title}}</div>
+<div md-dialog-content>{{message}}</div>
+<div md-dialog-actions>
+  <button mat-raised-button (click)="yes()">YES</button>
+  <button mat-raised-button (click)="no()">NO</button>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.spec.ts b/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.spec.ts
new file mode 100644
index 0000000..6c20352
--- /dev/null
+++ b/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { YesNoPopupComponent } from './yes-no-popup.component';
+
+describe('YesNoPopupComponent', () => {
+  let component: YesNoPopupComponent;
+  let fixture: ComponentFixture<YesNoPopupComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ YesNoPopupComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(YesNoPopupComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should be created', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.ts b/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.ts
new file mode 100644
index 0000000..786fa92
--- /dev/null
+++ b/Client/src/app/components/popups/yes-no-popup/yes-no-popup.component.ts
@@ -0,0 +1,31 @@
+import { MatDialogRef } from '@angular/material';
+import { MAT_DIALOG_DATA } from '@angular/material';
+import { Component, OnInit, Inject } from '@angular/core';
+
+@Component({
+  selector: 'app-yes-no-popup',
+  templateUrl: './yes-no-popup.component.html',
+  styleUrls: ['./yes-no-popup.component.css']
+})
+export class YesNoPopupComponent implements OnInit {
+
+  public title: string;
+  public message: string;
+
+  constructor(@Inject(MAT_DIALOG_DATA) public data: any, private MatDialogRef: MatDialogRef<YesNoPopupComponent>) { 
+    this.title = data.title;
+    this.message = data.message;
+  }
+
+  ngOnInit() {
+  }
+
+  yes(){
+    this.MatDialogRef.close(true);
+  }
+
+  no(){
+    this.MatDialogRef.close(false);
+  }
+
+}
diff --git a/Client/src/app/components/recent-sermons/recent-sermons.component.css b/Client/src/app/components/recent-sermons/recent-sermons.component.css
new file mode 100644
index 0000000..5240604
--- /dev/null
+++ b/Client/src/app/components/recent-sermons/recent-sermons.component.css
@@ -0,0 +1,16 @@
+
+.sermon-header{
+    font-size: 1.2em;
+    font-weight: bold;
+    text-align: center;
+    border-bottom: 1px solid gray;
+    margin-bottom: 10px;
+}
+
+ul{
+    list-style: none;
+}
+
+li{
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/salvation-page/salvation-page.component.css b/Client/src/app/components/salvation-page/salvation-page.component.css
new file mode 100644
index 0000000..3144eb1
--- /dev/null
+++ b/Client/src/app/components/salvation-page/salvation-page.component.css
@@ -0,0 +1,14 @@
+.section-header{
+    font-size: 1.2em;
+    font-weight: bold;
+    border-bottom: 1px solid gray;
+    margin-bottom: 10px;
+}
+
+a{
+    color: inherit;
+}
+
+a:visited{
+    color: inherit;
+}
diff --git a/Client/src/app/components/salvation-page/salvation-page.component.html b/Client/src/app/components/salvation-page/salvation-page.component.html
new file mode 100644
index 0000000..17856d1
--- /dev/null
+++ b/Client/src/app/components/salvation-page/salvation-page.component.html
@@ -0,0 +1,67 @@
+<secondary-page-component [hideSideBarOnMobile]="true">
+    <div mainContent>
+        <p ofbFadeInOnScroll class="section-header">Salvation</p>
+        <p ofbFadeInOnScroll class="section-paragraph">
+            Salvation put simply means being saved from sin, from Satan and from Hell. The truth is that
+            we are all sinners and we have fallen short. The punishment or wage for our sin is eternal death
+            and seperation from God. So, how does someone receive salvation?
+        </p>
+        
+        <br><br>
+        <p ofbFadeInOnScroll class="section-header">God says we won't arrive</p>
+        <div ofbFadeInOnScroll class="section-paragraph">
+            <div class="verse">"For all have sinned and come short of the glory of God." <a href="https://www.kingjamesbibleonline.org/Romans-3-23/">Romans 3:23</a></div>
+            <br>
+            We are all sinners and <a href="https://www.kingjamesbibleonline.org/Romans-6-23/">Romans 6:23</a> tells us that the consequence of our sin is death.
+            <br>
+            <div class="verse">"For the wages of sin is death;..." <a href="https://www.kingjamesbibleonline.org/Romans-6-23/">Romans 6:23</a></div>
+            <br>
+            We have all sinned, we have all earned death and eternal seperation from God. The outlook
+            for us is not too good when we consider our position. God, knowing all about our helpless situation, has made
+            a way for every individual to avoid death, to be set free and receive the gift of eternal life.
+            The second half of <a href="https://www.kingjamesbibleonline.org/Romans-6-23/">Romans 6:23</a> says:
+            <div class="verse">"...but the gift of God is eternal life through Jesus Christ our Lord." <a href="https://www.kingjamesbibleonline.org/Romans-6-23/">Romans 6:23</a></div>
+        </div>
+        
+        <br><br>
+        <p ofbFadeInOnScroll class="section-header">God says the road ends</p>
+        <div ofbFadeInOnScroll class="section-paragraph">
+            <div class="verse">"There is a way that seemeth right unto a man, but the end thereof are the ways of 
+                death." <a href="https://www.kingjamesbibleonline.org/Proverbs-16-25/">Proverbs 16:25</a></div>
+        </div>
+
+        <br><br>
+        <b></b>
+        <p ofbFadeInOnScroll class="section-header">God says that we need to turn around</p>
+        <div ofbFadeInOnScroll class="section-paragraph">
+            <div class="verse">"But, except ye repent, ye shall all likewise perish." <a href="https://www.kingjamesbibleonline.org/Luke-13-3/">Luke 13:3</a></div>
+        </div>
+        
+        <br><br>
+        <p ofbFadeInOnScroll class="section-header">God says there is only one way</p>
+        <div ofbFadeInOnScroll class="section-paragraph">
+            <div class="verse">"Jesus says, <span class="red">I am the way, the truth, and the life: no man cometh unto the Father,
+                but by me.</span>" <a href="https://www.kingjamesbibleonline.org/John-14-6/">John 11:6</a></div>
+        </div>
+        
+        <br><br>
+        <p ofbFadeInOnScroll class="section-header">God says we need to change drivers</p>
+        <div ofbFadeInOnScroll class="section-paragraph">
+            <div class="verse">"But as many as received him to them gave he power to become the sons of God,
+                even to them that believe on His name." <a href="https://www.kingjamesbibleonline.org/John-1-12/">John 1:12</a></div>
+            <br><br>
+            Salvation is when we realize our own sin and because of that realization we repent of our wrong doing
+            and turn to Christ asking Him to save us and by faith receiving Jesus Christ as our personal living Saviour.
+            Each individual has the choice to reject or accept the gift of eternal life. What will your choice be?
+            If you understand that you are a sinner and the need to repent, you can do so right now. Pray to God, repent
+            of your sin and ask Him to come into your life.
+            <br><br>
+            If you would like more information or if you have put your faith in Jesus alone for salvation and would like further 
+            guidance please click <a routerLink="/contact">here to contact us.</a>  
+            </div>
+                     
+    </div>
+    <div sideBar class="side-bar">
+        
+    </div>
+</secondary-page-component>
\ No newline at end of file
diff --git a/Client/src/app/components/salvation-page/salvation-page.component.spec.ts b/Client/src/app/components/salvation-page/salvation-page.component.spec.ts
new file mode 100644
index 0000000..3765a53
--- /dev/null
+++ b/Client/src/app/components/salvation-page/salvation-page.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SalvationPageComponent } from './salvation-page.component';
+
+describe('SalvationPageComponent', () => {
+  let component: SalvationPageComponent;
+  let fixture: ComponentFixture<SalvationPageComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SalvationPageComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SalvationPageComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/salvation-page/salvation-page.component.ts b/Client/src/app/components/salvation-page/salvation-page.component.ts
new file mode 100644
index 0000000..b9d2807
--- /dev/null
+++ b/Client/src/app/components/salvation-page/salvation-page.component.ts
@@ -0,0 +1,15 @@
+import { Component, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'app-salvation-page',
+  templateUrl: './salvation-page.component.html',
+  styleUrls: ['./salvation-page.component.css']
+})
+export class SalvationPageComponent implements OnInit {
+
+  constructor() { }
+
+  ngOnInit() {
+  }
+
+}
diff --git a/Client/src/app/components/secondary-page/secondary-page.component.css b/Client/src/app/components/secondary-page/secondary-page.component.css
new file mode 100644
index 0000000..0d4df67
--- /dev/null
+++ b/Client/src/app/components/secondary-page/secondary-page.component.css
@@ -0,0 +1,39 @@
+
+#content{    
+    margin: auto;
+    width: 100%;
+    max-width: 1000px;
+    display: table;
+}
+
+.main-content{
+    width: 70%;
+    display: table-cell;
+    padding: 20px 10px 10px 10px;
+}
+
+.side-bar{
+    width: 30%;
+    display: table-cell;
+    height: 100%;
+    padding: 20px;
+}
+
+.align-top{
+    vertical-align: top;
+}
+
+@media(max-width:800px){
+    .side-bar{
+        display: block;
+        width: 100%;
+    }
+    .hide-on-mobile{
+        display: none;
+    }
+
+    .main-content{
+        display: block;
+        width: 100%;
+    }
+}
\ No newline at end of file
diff --git a/Client/src/app/components/secondary-page/secondary-page.component.html b/Client/src/app/components/secondary-page/secondary-page.component.html
new file mode 100644
index 0000000..db0680f
--- /dev/null
+++ b/Client/src/app/components/secondary-page/secondary-page.component.html
@@ -0,0 +1,10 @@
+<div id="content-wrapper">
+    <div id="content">
+            <div class="main-content align-top">
+                <ng-content select="[mainContent]"></ng-content>
+            </div><!--
+            --><div class="side-bar align-top" [class.hide-on-mobile]="hideSideBarOnMobile">
+                <ng-content select="[sideBar]"></ng-content>
+            </div>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/secondary-page/secondary-page.component.ts b/Client/src/app/components/secondary-page/secondary-page.component.ts
new file mode 100644
index 0000000..6d4c51c
--- /dev/null
+++ b/Client/src/app/components/secondary-page/secondary-page.component.ts
@@ -0,0 +1,19 @@
+import { Component, Input, OnInit } from '@angular/core';
+
+@Component({
+  selector: 'secondary-page-component',
+  templateUrl: './secondary-page.component.html',
+  styleUrls: ['./secondary-page.component.css'],
+})
+export class SecondaryPageComponent implements OnInit {
+    @Input()
+    public hideSideBarOnMobile: boolean;
+
+    constructor(){
+
+    }
+
+    ngOnInit(){
+
+    }
+}
diff --git a/Client/src/app/components/sermon-large/sermon-large-pic.component.css b/Client/src/app/components/sermon-large/sermon-large-pic.component.css
new file mode 100644
index 0000000..cb8f762
--- /dev/null
+++ b/Client/src/app/components/sermon-large/sermon-large-pic.component.css
@@ -0,0 +1,92 @@
+.wrapper{
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.photo{
+    box-sizing: border-box;
+    display: inline-block;
+    max-width: 100px;
+    margin: 0;
+    vertical-align: top;
+}
+
+.fade{
+    text-align: center;
+    vertical-align: bottom;
+    position: absolute;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    height: 20px;
+    padding-bottom: 2px;
+    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+0,ffffff+100&0+0,0.8+100 */
+    background: -moz-linear-gradient(top, rgba(255,255,255,0) 0%, rgba(255,255,255,0.8) 100%); /* FF3.6-15 */
+    background: -webkit-linear-gradient(top, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* Chrome10-25,Safari5.1-6 */
+    background: linear-gradient(to bottom, rgba(255,255,255,0) 0%,rgba(255,255,255,0.8) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#00ffffff', endColorstr='#ccffffff',GradientType=0 ); /* IE6-9 */
+}
+
+.photo button{
+    padding: 0;
+    vertical-align: top;
+}
+
+button img{
+    display: block;
+    height: 100%;
+    width: 100%;
+}
+
+.info{
+    display: inline-block;
+    vertical-align: top;
+    padding: 2px 2px 8px 5px;
+    box-sizing: border-box;
+    width: calc(100% - 100px);    
+    overflow-y: hidden;
+    position: relative;
+    height: 100px;
+}
+
+.title{
+    font-weight: bold;
+}
+
+.date, .author{
+    font-style: italic;
+    font-size: 14px;
+}
+
+.description{
+    font-size: 14px;
+    color: darkgray;
+    word-wrap: none;
+    border-top: 0px solid lightgray;
+    padding-top:6px;
+    margin-top: 6px;    
+}
+.expanded{
+    overflow-y: hidden;
+}
+.expanded-content{
+    margin: 10px;
+}
+
+.buttons, .buttons-edit{
+    background-color: lightgray;
+}
+
+.buttons button{
+    display: inline-block;
+    width: 33.33333%;
+}
+
+.border{
+    margin: 0px 5px 0px 5px;
+    border-top: 1px inset lightgray;
+}
+
+.buttons-edit button{
+    display: inline-block;
+    width: 50%;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/sermon-large/sermon-large-pic.component.html b/Client/src/app/components/sermon-large/sermon-large-pic.component.html
new file mode 100644
index 0000000..3fda1b4
--- /dev/null
+++ b/Client/src/app/components/sermon-large/sermon-large-pic.component.html
@@ -0,0 +1,32 @@
+<div class="wrapper" [@inout]="startFadeIn">
+    <div class="photo">
+        <button mat-button (click)="play()">
+            <img src="../../assets/images/tiny/facebookplay.png" />
+        </button>
+    </div><!--
+    --><div class="info"  (click)="toggleState()">
+        <span class="title">{{ title }}</span>
+        <br>
+        <span class="date">{{ date |ofbDate:false }}</span> | <span class="author">{{ author }}</span>
+        <br>
+        <p class="description" [@toggleAnimationFade]="state">
+            {{ description }}
+        </p>
+        <div class="fade"><i ofbicon *ngIf="state === 'closed'">arrow_drop_down</i><i ofbicon *ngIf="state === 'open'">arrow_drop_up</i></div>
+    </div>  
+    <div class="expanded" [@toggleAnimation]="state" (click)="toggleState()">
+        <p class="expanded-content">
+            {{ description }}
+        </p>
+    </div>  
+    <div class="buttons">
+        <button mat-button class="action pct40" (click)="play()" ><i ofbicon>headset</i>  Listen</button><!--
+        --><button mat-button class="action pct50" (click)="download()" ><i ofbicon>file_download</i>  Download</button><!--
+        --><button mat-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
+    </div>
+    <div class="buttons-edit" *ngIf="loggedIn">
+        <div class="border"></div>
+        <button mat-button class="action" (click)="edit()" ><i ofbicon>edit</i>  Edit</button><!--
+        --><button mat-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i>  Delete</button>
+    </div>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/sermon-large/sermon-large.component.css b/Client/src/app/components/sermon-large/sermon-large.component.css
new file mode 100644
index 0000000..549470e
--- /dev/null
+++ b/Client/src/app/components/sermon-large/sermon-large.component.css
@@ -0,0 +1,35 @@
+
+.inner-wrapper{
+    position:relative;
+    
+    padding: 0px 0px 10px 0px;
+    padding: 10px;
+    box-shadow: 0 3px 1px -2px rgba(0,0,0,.2), 0 2px 2px 0 rgba(0,0,0,.14), 0 1px 5px 0 rgba(0,0,0,.12);
+}
+
+.title{
+    display: inline-block;
+    font-size: 1.15em;   
+    font-weight: bold;
+}
+
+
+.action-buttons{
+    text-align: right;
+}
+
+.speaker-date{
+    font-style: italic;
+    color: darkslategray;
+    float: right;
+}
+
+.description{
+    margin: 15px 0px 15px 0px;
+}
+
+@media(max-width:700px){
+    .speaker-date{
+        float: none;
+    }
+}
\ No newline at end of file
diff --git a/Client/src/app/components/sermon-large/sermon-large.component.html b/Client/src/app/components/sermon-large/sermon-large.component.html
new file mode 100644
index 0000000..43703a3
--- /dev/null
+++ b/Client/src/app/components/sermon-large/sermon-large.component.html
@@ -0,0 +1,21 @@
+<div class="wrapper" [@inout]="startFadeIn">
+    <div class="inner-wrapper">
+        <p class="title">{{ title }}</p>
+        <div class="speaker-date">
+            <p>{{ author }} | {{ date |date:'yyyy-MM-dd' }}</p>
+        </div>
+        <div class="info">                 
+            <div class="description">{{ description }}</div><!--
+            --><div class="action-buttons">
+                <button mat-button class="action pct40" (click)="play()" ><i ofbicon>headset</i>  Listen</button><!--
+                --><button mat-button class="action pct50" (click)="download()" ><i ofbicon>file_download</i>  Download</button><!--
+                --><button mat-button class="action pct10" (click)="share()" ><i ofbicon>share</i> Share</button>
+            </div><!--
+            --><div class="action-buttons" *ngIf="loggedIn">
+                <button mat-button class="action" (click)="edit()" ><i ofbicon>edit</i>  Edit</button><!--
+                --><button mat-button class="action" (click)="delete()" ><i ofbicon>delete_forever</i>  Delete</button>
+            </div>
+            
+        </div>       
+    </div> 
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/sermon-large/sermon-large.component.spec.ts b/Client/src/app/components/sermon-large/sermon-large.component.spec.ts
new file mode 100644
index 0000000..cd6b71a
--- /dev/null
+++ b/Client/src/app/components/sermon-large/sermon-large.component.spec.ts
@@ -0,0 +1,25 @@
+import { async, ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { SermonLargeComponent } from './sermon-large.component';
+
+describe('SermonLargeComponent', () => {
+  let component: SermonLargeComponent;
+  let fixture: ComponentFixture<SermonLargeComponent>;
+
+  beforeEach(async(() => {
+    TestBed.configureTestingModule({
+      declarations: [ SermonLargeComponent ]
+    })
+    .compileComponents();
+  }));
+
+  beforeEach(() => {
+    fixture = TestBed.createComponent(SermonLargeComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/components/sermon-large/sermon-large.component.ts b/Client/src/app/components/sermon-large/sermon-large.component.ts
new file mode 100644
index 0000000..7f45c8d
--- /dev/null
+++ b/Client/src/app/components/sermon-large/sermon-large.component.ts
@@ -0,0 +1,126 @@
+import { SharePopupComponent } from './../popups/share-popup/share-popup.component';
+import { Sermon } from './../../interfaces/sermon';
+import { UpdateSermonPopupComponent } from './../popups/update-sermon-popup/update-sermon-popup.component';
+import { SermonService } from './../../services/sermon.service';
+import { YesNoPopupComponent } from './../popups/yes-no-popup/yes-no-popup.component';
+import { MatDialog, MatDialogConfig, MatSnackBar } from '@angular/material';
+import { Component, OnInit, Input, AfterContentInit } from '@angular/core';
+import { trigger, state, style, transition, animate } from '@angular/animations';
+import { SermonSmallComponent } from '../sermon-small/sermon-small.component';
+import { AudioPlayerService } from '../../services/audio-player.service';
+import { SERMON_DOWNLOAD_URL } from '../../constants/urls';
+
+@Component({
+  selector: 'sermon-large-component',
+  templateUrl: './sermon-large-pic.component.html',
+  styleUrls: ['./sermon-large-pic.component.css'],
+  animations:[
+      trigger("inout",[
+        state("1", style({ opacity: '1' })),
+        state("0",style({ opacity: '0' })),
+        transition('* => 1',[
+            animate('500ms ease-in-out')
+        ]),
+        transition(':enter',[
+            animate('0ms')
+        ])
+      ]),
+      trigger('toggleAnimation', [
+        state('open', style({
+          height: '*',
+        })),
+        state('closed', style({
+          height: '0px',
+        })),
+        transition('open <=> closed', animate('500ms ease-in-out'))
+      ]),
+      trigger('toggleAnimationFade', [
+        state('open', style({
+          opacity: 0,
+        })),
+        state('closed', style({
+          opacity: 1,
+        })),
+        transition('open <=> closed', animate('500ms ease-in-out'))
+      ])
+  ]
+})
+export class SermonLargeComponent extends SermonSmallComponent implements OnInit, AfterContentInit {
+
+  public state: string = 'closed';
+
+  @Input()
+  public loggedIn: boolean;
+
+  constructor(private aplayer: AudioPlayerService
+             ,private dialog: MatDialog
+             ,private sermonService: SermonService
+             ,private snackbar: MatSnackBar) { 
+    super(aplayer);
+  }
+
+  ngOnInit() {
+  }
+
+  toggleState(){
+    this.state = this.state === 'open' ? 'closed' : 'open'
+  }
+
+  download(){
+    window.location.href = SERMON_DOWNLOAD_URL + this.id;
+  }
+
+  share(){
+    let opts = new MatDialogConfig;
+    opts.data = { prefix: 's', id: this.id, title: this.title, description: this.description };
+    let dialog = this.dialog.open(SharePopupComponent, opts);    
+  }
+
+  edit(){
+    let config = new MatDialogConfig();
+    config.data = {
+      id: this.id,
+      title: this.title,
+      description: this.description,
+      date: this.date,
+      author: this.author
+    };
+    let dialog = this.dialog.open(UpdateSermonPopupComponent,config);
+
+    dialog.afterClosed().subscribe(s => {
+      s = s as Sermon;
+      if (s){
+        this.title = s.title;
+        this.description = s.description;
+        this.author = s.author;
+        this.date = s.date;
+        
+        let snack = this.snackbar.open(s.title + " was updated!", "Ok");
+        snack.onAction().subscribe(()=>{
+          snack.dismiss();
+        });
+        setTimeout(()=>{snack.dismiss();},3000);
+          }
+    });
+  }
+
+  delete(){
+    let opts = new MatDialogConfig;
+    opts.data = { title:'Delete','message':'Are you sure you want to delete "' + this.title + '"?' };
+    let dialog = this.dialog.open(YesNoPopupComponent, opts);
+
+    dialog.afterClosed().subscribe(s => {
+      s = s as boolean;
+      if (s === true){
+        this.sermonService.deleteSermon(this.id).subscribe(
+          success => {  },
+          error => { console.error(error);  }
+        );
+      }
+        
+    });
+  }
+
+  
+
+}
diff --git a/Client/src/app/components/sermon-small/sermon-small.component.css b/Client/src/app/components/sermon-small/sermon-small.component.css
new file mode 100644
index 0000000..5f758a3
--- /dev/null
+++ b/Client/src/app/components/sermon-small/sermon-small.component.css
@@ -0,0 +1,31 @@
+
+
+.inner-wrapper{
+    position:relative;
+}
+
+.title{
+    display: table;
+    font-size: 1.25em;    
+}
+
+.title-text{
+    vertical-align: middle;
+    display: table-cell;
+    padding-left: 10px;
+    font-size: .95rem;
+}
+
+button{
+    position: absolute;
+    width: 100%;
+    height: 100%;
+}
+
+ofb-button{
+    position: absolute;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    top: 0;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/sermon-small/sermon-small.component.html b/Client/src/app/components/sermon-small/sermon-small.component.html
new file mode 100644
index 0000000..25253e8
--- /dev/null
+++ b/Client/src/app/components/sermon-small/sermon-small.component.html
@@ -0,0 +1,9 @@
+<div class="wrapper" [@inout]="startFadeIn">
+    <div class="inner-wrapper">
+        <div class="title">
+            <button mat-button (click)="play()"></button>
+            <date-component class="title-date" [date]="date"></date-component>      
+            <span class="title-text">{{ title }}</span>
+        </div>  
+    </div> 
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/sermons/sermons.component.css b/Client/src/app/components/sermons/sermons.component.css
new file mode 100644
index 0000000..b1e6132
--- /dev/null
+++ b/Client/src/app/components/sermons/sermons.component.css
@@ -0,0 +1,49 @@
+
+ul{
+    list-style: none;
+}
+
+li{
+    margin: 40px 0px 40px 0px; /* top right bottom left */
+}
+
+li:first-child{
+    margin-top: 0px;
+}
+
+li:last-child{
+    margin-bottom: 0px;
+}
+
+.side-bar{
+    position: fixed;
+}
+
+.width100{
+    width: 100%;
+}
+
+.mobile-search{
+    display: none;
+}
+
+.fab-buttons{
+    display: none;
+}
+
+#audio-player-filler{
+    height: 60px;
+    background-color: inherit;
+}
+
+@media(max-width:800px){
+    .mobile-search{
+        display: block;
+    }
+    .fab-buttons{
+        display: inline-block;
+        position: fixed;
+        bottom: 20px;
+        right: 20px;
+    }
+}
\ No newline at end of file
diff --git a/Client/src/app/components/services/services.component.css b/Client/src/app/components/services/services.component.css
new file mode 100644
index 0000000..34a594c
--- /dev/null
+++ b/Client/src/app/components/services/services.component.css
@@ -0,0 +1,28 @@
+.verse{
+    text-align: center;
+    font-style: italic;
+}
+
+.reference{
+    font-weight: bold;
+}
+
+.side-bar-header{
+    text-align: center;
+    background-color: gray;
+}
+
+.section-header{
+    font-size: 1.2em;
+    font-weight: bold;
+    border-bottom: 1px solid gray;
+    margin-bottom: 10px;
+}
+
+img{
+    border-radius: 5px;
+    width: 100%;
+    -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
+    -moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.75);
+    box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.75);
+}
diff --git a/Client/src/app/components/services/services.component.html b/Client/src/app/components/services/services.component.html
new file mode 100644
index 0000000..57e400a
--- /dev/null
+++ b/Client/src/app/components/services/services.component.html
@@ -0,0 +1,49 @@
+<secondary-page-component [hideSideBarOnMobile]="true">
+    <div mainContent>
+        <div>            
+            <p ofbFadeInOnScroll class="section-header">Service Times</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                Join Us every Sunday and Wednesday for challenging messages from the Bible and fellowship with others!
+                Bring the whole family!
+            </p> 
+            <br>
+            <div ofbFadeInOnScroll class="imageBorder">
+                <img class="image" src="assets/images/tiny/sign.png" alt="Church Image" />
+            </div> 
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">Sunday School 10 AM</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                During the Sunday morning service, kids are allowed to separate from the adults to attend a class that is appropriate for thier age group. We have a nursery and Sunday School classes for all age groups.
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">Sunday Morning 11 AM</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                Sunday Morning church service immediately follows Sunday School service with a short break in between. Nursery and childrens church is available during the Sunday morning hour.
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">Sunday Evening 7 PM</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                Sunday night is the last opportunity to hear a great message before the work week starts. We encourage you to come fellowship with us each sunday night at 7 P.M. Nursery services are available. 
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">Wednesday Evening 7 PM</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                Join us on Wednesday night for a Bible study that will challenge you in your walk with the Lord. Wednesday evening is a great time to come and hear a great message from the Bible to stay focused during the week. Nursery and childrens church are also available. 
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header"></p>
+            <div ofbFadeInOnScroll class="section-paragraph">
+                <p class="verse">Not forsaking the assembling of ourselves together, as the manner of some is; but exhorting one another: and so much the more, as ye see the day approaching.</p>
+                <p class="verse reference">Hebrews 10:25</p>
+            </div>
+        </div>             
+    </div>
+    <div sideBar class="side-bar">
+        <upcoming-events-component [numberOfEventsToShow]="4" ></upcoming-events-component>
+    </div>
+</secondary-page-component>
\ No newline at end of file
diff --git a/Client/src/app/components/services/services.component.ts b/Client/src/app/components/services/services.component.ts
new file mode 100644
index 0000000..9b320d6
--- /dev/null
+++ b/Client/src/app/components/services/services.component.ts
@@ -0,0 +1,34 @@
+import { WindowRefService } from './../../services/window-ref.service';
+import { Component, HostListener, OnInit } from '@angular/core';
+
+
+
+@Component({
+  selector: 'services-component',
+  templateUrl: './services.component.html',
+  styleUrls: ['./services.component.css'],
+})
+export class ServicesComponent implements OnInit {
+
+  public columnCount: number = 2;
+  private smallColumnCount: number = 1;
+  private medColumnCount: number = 2;
+  private smallWidth: number = 500;
+
+  constructor(private windowRef: WindowRefService){ }
+
+  ngOnInit(){
+    let event = { target:this.windowRef.getWindow() };
+    this.onResize(event);
+  }
+
+  @HostListener('window:resize', ['$event'])
+  onResize(event) {
+    if (event.target.innerWidth < this.smallWidth){
+      this.columnCount = this.smallColumnCount;
+    } else {
+      this.columnCount = this.medColumnCount;
+    }
+  }
+
+}
diff --git a/Client/src/app/components/upcoming-events/upcoming-events.component.css b/Client/src/app/components/upcoming-events/upcoming-events.component.css
new file mode 100644
index 0000000..41e9a6a
--- /dev/null
+++ b/Client/src/app/components/upcoming-events/upcoming-events.component.css
@@ -0,0 +1,15 @@
+.event-header{
+    font-size: 1.2em;
+    font-weight: bold;
+    text-align: center;
+    border-bottom: 1px solid gray;
+    margin-bottom: 10px;
+}
+
+ul{
+    list-style: none;
+}
+
+li{
+    padding: 5px;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/upcoming-events/upcoming-events.component.html b/Client/src/app/components/upcoming-events/upcoming-events.component.html
new file mode 100644
index 0000000..4dcbf36
--- /dev/null
+++ b/Client/src/app/components/upcoming-events/upcoming-events.component.html
@@ -0,0 +1,13 @@
+<div class="event-container" *ngIf="events.length > 0 || !hideWhenNoEvents">
+    <p class="event-header" >Upcoming Events</p>
+    <p *ngIf="loading">Loading...</p>
+    <ul class="events">
+        <li *ngFor="let event of events; let i = index;">
+            <event-component
+                [title]="event.title"
+                [startDate]="event.startDate"
+                [delayFadeIn]="(i+1)*200"
+                ></event-component>
+        </li>
+    </ul>
+</div>
\ No newline at end of file
diff --git a/Client/src/app/components/whoweare/whoweare.component.css b/Client/src/app/components/whoweare/whoweare.component.css
new file mode 100644
index 0000000..2de308f
--- /dev/null
+++ b/Client/src/app/components/whoweare/whoweare.component.css
@@ -0,0 +1,72 @@
+.main-content-header{
+    font-weight: bold;
+    font-size: 1.2em;
+}
+
+a{
+    color: inherit;
+}
+
+a:visited{
+    color: inherit;
+}
+
+.action{
+    display: block;
+    font-weight: bold;
+    font-size: 20px;
+    margin: 20px;
+}
+
+
+.align-top{
+    vertical-align: top;
+}
+
+.side-bar-header{
+    text-align: center;
+    background-color: gray;
+}
+
+.section-header{
+    font-size: 1.2em;
+    font-weight: bold;
+    border-bottom: 1px solid gray;
+    margin-bottom: 10px;
+}
+
+.shadow{
+    border-radius: 5px;
+    width: 100%;
+    -webkit-box-shadow: 3px 3px 5px 0px rgba(50, 50, 50, 0.75);
+    -moz-box-shadow:    3px 3px 5px 0px rgba(50, 50, 50, 0.75);
+    box-shadow:         3px 3px 5px 0px rgba(50, 50, 50, 0.75);
+}
+
+
+.container-3-col{
+    width: 100%;
+}
+
+.container-3-col > button{
+    width: calc(33% - 12px);
+    background-color: lightgray;
+    color: black;
+}
+
+.container-3-col > button ~ button{
+    margin-left: 18px;
+}
+
+@media(max-width: 600px){
+    .container-3-col{
+        text-align: center;
+    }
+    .container-3-col > button{
+        width: 90%;
+        margin: 10px;
+    }
+    .container-3-col > button ~ button{
+        margin-left: 10px;
+    }
+}
\ No newline at end of file
diff --git a/Client/src/app/components/whoweare/whoweare.component.html b/Client/src/app/components/whoweare/whoweare.component.html
new file mode 100644
index 0000000..97cc695
--- /dev/null
+++ b/Client/src/app/components/whoweare/whoweare.component.html
@@ -0,0 +1,78 @@
+<secondary-page-component [hideSideBarOnMobile]="true" >
+    <div mainContent>
+        <div>            
+            <p ofbFadeInOnScroll class="section-header">Who We Are</p>
+            <div ofbFadeInOnScroll class="section-paragraph">
+                Old Fashion Baptist Church is a small independent baptist church located in Butte, Montana. We meet regularly throughout the week
+                to spread the word of God as well as encourage and challenge believers in their Christian life. 
+                <br><br>
+                <div class="container-3-col">
+                    <button mat-raised-button routerLink="/services"><i ofbicon>access_time</i> Service Schedule</button><!--
+                    --><button mat-raised-button routerLink="/location"><i ofbicon>directions</i> Directions</button><!--
+                    --><button mat-raised-button routerLink="/contact"><i ofbicon>mail_outline</i> Contact Us</button>
+                </div>                
+            </div> 
+            <br><br>
+            <div ofbFadeInOnScroll class="imageBorder">
+                <img class="image shadow" src="assets/images/home-images/tiny/church.jpg" alt="Church Image" />
+            </div> 
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">What to expect</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                Sometimes it can be difficult to attend if you are not familiar with church and don't know what to expect. 
+                One thing you can always expect is to be welcomed at Old Fashion Baptist. We count it a privalege to have 
+                visitors attend our church services so the first thing you will find is a friendly church family.
+                <br><br>
+                Each service begins with a few songs along with prayer. Prayer and praise are a great way to help prepare
+                our hearts for the message that follows. You can expect the message to last aproximately 45 - 60 
+                minutes and will be straight from the Bible. We want you to know that the message is from the Bible and will
+                turn to verses throughout the service. You are welcome to just listen or follow along in your Bible.
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">Nursery</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                Nursery workers are available for every service. Our nursery is available so that you can attend the church service
+                without interruption.
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">Kids</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                We also offer Sunday School classes for all age groups of kids. This is a great opportunity for 
+                children to recieve a message that is appropriate for their age.
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">Jesus</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                Jesus, God who became flesh and dwelt among us by being born of the virgin Mary is our only hope for eternal life.
+                Because of the sin and wickedness of mankind a wage was earned - that wage is death. Out of His great love
+                for us God sent his only begotten Son who lived on this earth as a man who "was in all points tempted like as we are, yet without sin" <a href="https://www.kingjamesbibleonline.org/Hebrews-4-15/">Hebrews 4:15</a>.
+                <br><br>
+                He was sinless - He layed down His life and became the sacrifice for all! <a routerLink="/salvation">Have you accepted Him?</a>
+            </p>
+
+            <br><br>
+            <p ofbFadeInOnScroll class="section-header">The Bible</p>
+            <p ofbFadeInOnScroll class="section-paragraph">
+                    In the beginning was the Word, and the Word was with God, and the Word was God. <a href="https://www.kingjamesbibleonline.org/John-1-1/">John 1:1</a>
+                <br><br>
+                All scripture is given by inspiration of God, and is profitable for doctrine, for reproof, for correction, for instruction in righteousness:
+                That the man of God may be perfect, thoroughly furnished unto all good works. <a href="https://www.kingjamesbibleonline.org/2-Timothy-3-16_3-17/">2 Timothy 3:16 - 17</a>
+                <br><br>
+                But he answered and said, <span class="red">It is written, Man shall not live by bread alone, but by every word that proceedeth out of the mouth of God.</span> <a href="https://www.kingjamesbibleonline.org/Matthew-4-4/">Matthew 4:4</a>
+                <br><br>
+                The words of the LORD are pure words: as silver tried in a furnace of earth, purified seven times.
+                Thou shalt keep them, O LORD, thou shalt preserve them from this generation for ever. <a href="https://www.kingjamesbibleonline.org/Psalms-12-6_12-7/">Psalm 12:6 - 7</a>
+                <br><br>
+                <span class="red">Heaven and earth shall pass away, but my words shall not pass away.</span> <a href="https://www.kingjamesbibleonline.org/Matthew-24-35/">Matthew 24:35</a>
+
+            </p>
+        </div>
+    </div>
+    <div sideBar ofbFadeInOnScroll>
+        <recent-sermons-component [numberOfSermonsToShow]="4" ></recent-sermons-component>
+    </div>
+</secondary-page-component>
\ No newline at end of file
diff --git a/Client/src/app/components/whoweare/whoweare.component.ts b/Client/src/app/components/whoweare/whoweare.component.ts
new file mode 100644
index 0000000..ea2a300
--- /dev/null
+++ b/Client/src/app/components/whoweare/whoweare.component.ts
@@ -0,0 +1,10 @@
+import { Component } from '@angular/core';
+
+@Component({
+  selector: 'whoweare-component',
+  templateUrl: './whoweare.component.html',
+  styleUrls: ['./whoweare.component.css'],
+})
+export class WhoWeAreComponent {
+
+}
diff --git a/Client/src/app/constants/months.ts b/Client/src/app/constants/months.ts
new file mode 100644
index 0000000..87afad4
--- /dev/null
+++ b/Client/src/app/constants/months.ts
@@ -0,0 +1,29 @@
+export const MONTHS = {
+    0: "JAN",
+    1: "FEB",
+    2: "MAR",
+    3: "APR",
+    4: "MAY",
+    5: "JUN",
+    6: "JUL",
+    7: "AUG",
+    8: "SEP",
+    9: "OCT",
+    10: "NOV",
+    11: "DEC"
+};
+
+export const MONTHS_FULL = {
+    0: "JANUARY",
+    1: "FEBRUARY",
+    2: "MARCH",
+    3: "APRIL",
+    4: "MAY",
+    5: "JUNE",
+    6: "JULY",
+    7: "AUGUST",
+    8: "SEPTEMBER",
+    9: "OCTOBER",
+    10: "NOVEMBER",
+    11: "DECEMBER"
+};
\ No newline at end of file
diff --git a/Client/src/app/directives/fade-in-on-scroll.directive.ts b/Client/src/app/directives/fade-in-on-scroll.directive.ts
new file mode 100644
index 0000000..fac97b3
--- /dev/null
+++ b/Client/src/app/directives/fade-in-on-scroll.directive.ts
@@ -0,0 +1,44 @@
+import { Directive, 
+         ElementRef, 
+         Input, 
+         HostListener, 
+         HostBinding,
+         OnInit } from '@angular/core';
+
+
+@Directive({ 
+    selector: '[ofbFadeInOnScroll]',
+    host:{
+       //'[class.animation-fade-in]':'true',
+       '[style.transition]':'"all .5s ease-in-out"'
+    }
+
+})
+export class FadeInOnScrollDirective implements OnInit {
+    @HostBinding('style.opacity')
+    opacity: number = 0;
+
+    constructor(private el: ElementRef) {
+       
+    }
+
+    ngOnInit(): void{
+        this.checkScroll();
+    }
+
+    checkScroll(): void{
+        if (this.opacity === 1) return;
+        let viewPort = this.el.nativeElement.getBoundingClientRect();
+        let winHeight = window.innerHeight;
+        let dif = winHeight - viewPort.top;
+        let maxMargin = 100;
+        if (dif >= 50 && this.opacity != 1){
+            this.opacity = 1;
+        }
+    }
+
+    @HostListener('window:scroll', ['$event'])
+    onScroll(event){
+        this.checkScroll();
+    }
+}
\ No newline at end of file
diff --git a/Client/src/app/directives/icon-code-map.ts b/Client/src/app/directives/icon-code-map.ts
new file mode 100644
index 0000000..dbf7d8c
--- /dev/null
+++ b/Client/src/app/directives/icon-code-map.ts
@@ -0,0 +1,27 @@
+export const ICONS = {
+    access_time: '&#xE192;',
+    add: '&#xE145;',
+    close: '&#xE5CD;',
+    copyright: '&#xE90C;',
+    delete_forever: '&#xE92B;',
+    arrow_drop_down: '&#xE5C5;',
+    arrow_drop_up: '&#xE5C7;',
+    directions: '&#xE52E;',
+    edit: '&#xE3C9;',
+    event: '&#xE878;',
+    expand_more: '&#xE5CF;',
+    file_download: '&#xE2C4;',
+    headset: '&#xE310;',
+    help_outline: '&#xE8FD;',
+    info_outline: '&#xE88F;',
+    input: '&#xE890;',
+    mail_outline: '&#xE0E1;',
+    menu: '&#xE5D2;',
+    pause: '&#xE034;',
+    phone: '&#xE0CD;',
+    place: '&#xE55F;',
+    play_arrow: '&#xE037;',
+    search: '&#xE8B6;',
+    share: '&#xE80D;',
+    slow_motion_video: '&#xE068;',
+};
\ No newline at end of file
diff --git a/Client/src/app/directives/icon.directive.ts b/Client/src/app/directives/icon.directive.ts
new file mode 100644
index 0000000..98d3230
--- /dev/null
+++ b/Client/src/app/directives/icon.directive.ts
@@ -0,0 +1,46 @@
+import { Directive, 
+         ElementRef,
+         OnInit,
+         Input,
+         OnChanges,
+         SimpleChanges } from '@angular/core';
+import { ICONS } from './icon-code-map';
+
+
+@Directive({ 
+    selector: '[ofbicon]',
+    host:{
+       '[class.material-icon]':'true'
+    }
+
+})
+export class IconDirective implements OnInit, OnChanges {
+    @Input()
+    iconName: string;
+    iconCode: string;
+
+    constructor(private el: ElementRef) {
+
+    }
+
+    ngOnInit(): void{
+        if (this.el.nativeElement.innerText != ''){
+            this.iconName = this.el.nativeElement.innerText;
+            this.setIcon();
+        }              
+    }
+
+    ngOnChanges(changes: SimpleChanges): void{
+        this.setIcon();
+    }
+
+    setIcon(){
+        let iconCode = ICONS[this.iconName];
+        if (typeof iconCode !== 'undefined'){
+            this.iconCode = iconCode;
+            this.el.nativeElement.innerHTML = this.iconCode;
+        }
+    }
+
+
+}
\ No newline at end of file
diff --git a/Client/src/app/enum/audio-states.ts b/Client/src/app/enum/audio-states.ts
new file mode 100644
index 0000000..4293263
--- /dev/null
+++ b/Client/src/app/enum/audio-states.ts
@@ -0,0 +1,6 @@
+export enum AudioStates{
+    Loading,
+    Paused,
+    Playing,
+    Error
+}
\ No newline at end of file
diff --git a/Client/src/app/pipes/duration.pipe.ts b/Client/src/app/pipes/duration.pipe.ts
new file mode 100644
index 0000000..4a10ac4
--- /dev/null
+++ b/Client/src/app/pipes/duration.pipe.ts
@@ -0,0 +1,27 @@
+import { Pipe, PipeTransform } from '@angular/core';
+/*
+ * 
+*/
+@Pipe({name: 'duration'})
+export class DurationPipe implements PipeTransform {
+  transform(value: number, duration: number): string {    
+    if (duration != null && typeof duration === 'number'){
+        value = duration - value;
+    }
+    if (value === NaN || typeof value !== 'number')
+        return "00:00";
+
+    value = Math.ceil(value);
+    let minutes = Math.floor(value / 60);
+    let seconds = value - (minutes * 60);
+    let hours = Math.floor(minutes / 60);
+    minutes = minutes - (hours * 60);
+    let min = minutes < 10 ? "0" + minutes : minutes;
+    let sec = seconds < 10 ? "0" + seconds : seconds;
+    let hou = hours < 10 ? "0" + hours : hours;
+    
+    let str = (hou == "00" ? "" : hou + ":") + min + ":" + sec;
+    return str; 
+
+  }
+}
\ No newline at end of file
diff --git a/Client/src/app/pipes/ofb-date.pipe.spec.ts b/Client/src/app/pipes/ofb-date.pipe.spec.ts
new file mode 100644
index 0000000..f2f0017
--- /dev/null
+++ b/Client/src/app/pipes/ofb-date.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { OfbDatePipe } from './ofb-date.pipe';
+
+describe('OfbDatePipe', () => {
+  it('create an instance', () => {
+    const pipe = new OfbDatePipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/pipes/ofb-date.pipe.ts b/Client/src/app/pipes/ofb-date.pipe.ts
new file mode 100644
index 0000000..49856b9
--- /dev/null
+++ b/Client/src/app/pipes/ofb-date.pipe.ts
@@ -0,0 +1,31 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'ofbDate'
+})
+export class OfbDatePipe implements PipeTransform {
+
+  transform(value: Date, time?: boolean): any {   
+    if (typeof value === 'undefined' || value == null){
+      console.error("value for ofb-date-pipe was undefined or null");
+      return value;
+    } 
+    var year = value.getFullYear();
+    var month = value.getMonth() + 1;
+    var day = value.getDate();
+    var m = month < 10 ? "0" + month : month;
+    var d = day < 10 ? "0" + day : day;
+    var datePart = year + "-" + m + "-" + d;
+    if (time){
+      var hour = value.getHours();
+      var minutes = value.getMinutes();
+      var m = minutes < 10 ? "0" + minutes : minutes;
+      var amPm = hour < 12 ? " AM" : " PM";
+      hour = hour > 12 ? hour - 12 : hour;
+      hour = hour == 0 ? 12 : hour;
+      return datePart + " | " + hour + ":" + m + amPm;
+    }
+    return datePart;
+  }
+
+}
diff --git a/Client/src/app/pipes/safe-url.pipe.spec.ts b/Client/src/app/pipes/safe-url.pipe.spec.ts
new file mode 100644
index 0000000..3c4b05a
--- /dev/null
+++ b/Client/src/app/pipes/safe-url.pipe.spec.ts
@@ -0,0 +1,8 @@
+import { SafeUrlPipe } from './safe-url.pipe';
+
+describe('SafeUrlPipe', () => {
+  it('create an instance', () => {
+    const pipe = new SafeUrlPipe();
+    expect(pipe).toBeTruthy();
+  });
+});
diff --git a/Client/src/app/pipes/safe-url.pipe.ts b/Client/src/app/pipes/safe-url.pipe.ts
new file mode 100644
index 0000000..afaaccd
--- /dev/null
+++ b/Client/src/app/pipes/safe-url.pipe.ts
@@ -0,0 +1,10 @@
+import { Pipe, PipeTransform } from '@angular/core';
+import { DomSanitizer} from '@angular/platform-browser';
+
+@Pipe({ name: 'safeUrl' })
+export class SafeUrlPipe implements PipeTransform {
+  constructor(private sanitizer: DomSanitizer) {}
+  transform(url) {
+    return this.sanitizer.bypassSecurityTrustResourceUrl(url);
+  }
+} 
diff --git a/Client/src/app/services/google-analytics.service.spec.ts b/Client/src/app/services/google-analytics.service.spec.ts
new file mode 100644
index 0000000..99ff659
--- /dev/null
+++ b/Client/src/app/services/google-analytics.service.spec.ts
@@ -0,0 +1,15 @@
+import { TestBed, inject } from '@angular/core/testing';
+
+import { GoogleAnalyticsService } from './google-analytics.service';
+
+describe('GoogleAnalyticsService', () => {
+  beforeEach(() => {
+    TestBed.configureTestingModule({
+      providers: [GoogleAnalyticsService]
+    });
+  });
+
+  it('should be created', inject([GoogleAnalyticsService], (service: GoogleAnalyticsService) => {
+    expect(service).toBeTruthy();
+  }));
+});
diff --git a/Client/src/app/services/google-analytics.service.ts b/Client/src/app/services/google-analytics.service.ts
new file mode 100644
index 0000000..a1cb2e3
--- /dev/null
+++ b/Client/src/app/services/google-analytics.service.ts
@@ -0,0 +1,106 @@
+declare var gtag;
+
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class GoogleAnalyticsService {
+  
+  private trackingId: string = 'UA-107601801-1';
+  private baseUrl: string = 'https://ofbbutte.com';
+  private lastSermonId: number = 0;
+  private lastSermonStartPos: number = 0;
+
+  constructor() {  }
+
+  public pageView(title: string, path: string){    
+    gtag('config', this.trackingId, {
+      'page_title': title,
+      'page_location': this.baseUrl + path,
+      'page_path': path
+    });
+  }
+
+  public searchSermon(searchTerm: string){
+    gtag('event', 'search', {
+      'search_term': searchTerm
+    });
+  }
+
+  public shareSermon(id: number, title: string, method: string){
+    gtag('event', 'share', {
+      'method': method,
+      'content_type': 'audio',
+      'content_id': id,
+      'content_title': title
+    });
+  }
+
+  public shareEvent(id: number, title: string, method: string){
+    gtag('event', 'share', {
+      'method': method,
+      'content_type': 'event',
+      'content_id': id,
+      'content_title': title
+    });
+  }
+
+  public shareSermonConversion(id: number, title: string){
+    gtag('event', 'share_conversion', {
+      'content_type': 'audio',
+      'content_id': id,
+      'content_title': title
+    });
+  }
+
+  public shareEventConversion(id: number, title: string){
+    gtag('event', 'share_conversion', {
+      'content_type': 'event',
+      'content_id': id,
+      'content_title': title
+    });
+  }
+
+  public loadingSermon(id: number, title: string){
+    gtag('event', 'audio_loading', {
+      'audio_id': id,
+      'audio_title': title
+    });
+  }
+
+  public playSermon(id: number, title: string, position: number){
+    this.lastSermonId = id;
+    this.lastSermonStartPos = position;
+    gtag('event', 'audio_play', {
+      'audio_id': id,
+      'audio_title': title,
+      'audio_start_position': position
+    });
+  }
+
+  public pauseSermon(id: number, title: string, position: number){
+    let duration = null;
+    let lastStartPos = null;
+    if (id == this.lastSermonId){
+      duration = position - this.lastSermonStartPos;
+      lastStartPos = this.lastSermonStartPos;
+    } else {
+
+    }
+    gtag('event', 'audio_pause', {
+      'audio_id': id,
+      'audio_title': title,
+      'audio_start_position': lastStartPos,
+      'audio_pause_position': position,
+      'audio_listen_duration': duration
+    });
+  }
+
+  public audioError(id: number, title: string, error: string){
+    gtag('event', 'audio_error', {
+      'audio_id': id,
+      'audio_title': title,
+      'audio_error_message': error
+    });
+  }
+
+}
diff --git a/Client/src/app/services/window-ref.service.ts b/Client/src/app/services/window-ref.service.ts
new file mode 100644
index 0000000..a7d1e2e
--- /dev/null
+++ b/Client/src/app/services/window-ref.service.ts
@@ -0,0 +1,12 @@
+import { Injectable } from '@angular/core';
+
+@Injectable()
+export class WindowRefService {
+
+   constructor() { }
+
+   public getWindow(): any{
+       return window;
+   }
+
+}
\ No newline at end of file
diff --git a/Client/src/assets/.gitkeep b/Client/src/assets/.gitkeep
new file mode 100644
index 0000000..e69de29
diff --git a/Client/src/assets/fonts/MaterialIcons-Regular.eot b/Client/src/assets/fonts/MaterialIcons-Regular.eot
new file mode 100644
index 0000000..70508eb
Binary files /dev/null and b/Client/src/assets/fonts/MaterialIcons-Regular.eot differ
diff --git a/Client/src/assets/fonts/MaterialIcons-Regular.ttf b/Client/src/assets/fonts/MaterialIcons-Regular.ttf
new file mode 100644
index 0000000..7015564
Binary files /dev/null and b/Client/src/assets/fonts/MaterialIcons-Regular.ttf differ
diff --git a/Client/src/assets/fonts/MaterialIcons-Regular.woff b/Client/src/assets/fonts/MaterialIcons-Regular.woff
new file mode 100644
index 0000000..b648a3e
Binary files /dev/null and b/Client/src/assets/fonts/MaterialIcons-Regular.woff differ
diff --git a/Client/src/assets/fonts/MaterialIcons-Regular.woff2 b/Client/src/assets/fonts/MaterialIcons-Regular.woff2
new file mode 100644
index 0000000..9fa2112
Binary files /dev/null and b/Client/src/assets/fonts/MaterialIcons-Regular.woff2 differ
diff --git a/Client/src/assets/images/home-images/original/bible.jpg b/Client/src/assets/images/home-images/original/bible.jpg
new file mode 100644
index 0000000..40fa1cd
Binary files /dev/null and b/Client/src/assets/images/home-images/original/bible.jpg differ
diff --git a/Client/src/assets/images/home-images/original/bus2.jpg b/Client/src/assets/images/home-images/original/bus2.jpg
new file mode 100644
index 0000000..46ac2e7
Binary files /dev/null and b/Client/src/assets/images/home-images/original/bus2.jpg differ
diff --git a/Client/src/assets/images/home-images/original/church.jpg b/Client/src/assets/images/home-images/original/church.jpg
new file mode 100644
index 0000000..01d6e33
Binary files /dev/null and b/Client/src/assets/images/home-images/original/church.jpg differ
diff --git a/Client/src/assets/images/home-images/original/churchImageLarge.png b/Client/src/assets/images/home-images/original/churchImageLarge.png
new file mode 100644
index 0000000..88ace45
Binary files /dev/null and b/Client/src/assets/images/home-images/original/churchImageLarge.png differ
diff --git a/Client/src/assets/images/home-images/original/family.jpg b/Client/src/assets/images/home-images/original/family.jpg
new file mode 100644
index 0000000..7827cd0
Binary files /dev/null and b/Client/src/assets/images/home-images/original/family.jpg differ
diff --git a/Client/src/assets/images/home-images/original/headphones.png b/Client/src/assets/images/home-images/original/headphones.png
new file mode 100644
index 0000000..4aa560a
Binary files /dev/null and b/Client/src/assets/images/home-images/original/headphones.png differ
diff --git a/Client/src/assets/images/home-images/original/road.jpg b/Client/src/assets/images/home-images/original/road.jpg
new file mode 100644
index 0000000..7d7747b
Binary files /dev/null and b/Client/src/assets/images/home-images/original/road.jpg differ
diff --git a/Client/src/assets/images/home-images/original/sunset_b.jpg b/Client/src/assets/images/home-images/original/sunset_b.jpg
new file mode 100644
index 0000000..1e3c8dc
Binary files /dev/null and b/Client/src/assets/images/home-images/original/sunset_b.jpg differ
diff --git a/Client/src/assets/images/home-images/tiny/bible.jpg b/Client/src/assets/images/home-images/tiny/bible.jpg
new file mode 100644
index 0000000..4e06b84
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/bible.jpg differ
diff --git a/Client/src/assets/images/home-images/tiny/bus2.jpg b/Client/src/assets/images/home-images/tiny/bus2.jpg
new file mode 100644
index 0000000..46ac2e7
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/bus2.jpg differ
diff --git a/Client/src/assets/images/home-images/tiny/church.jpg b/Client/src/assets/images/home-images/tiny/church.jpg
new file mode 100644
index 0000000..f87c632
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/church.jpg differ
diff --git a/Client/src/assets/images/home-images/tiny/churchImageLarge.png b/Client/src/assets/images/home-images/tiny/churchImageLarge.png
new file mode 100644
index 0000000..7575f8c
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/churchImageLarge.png differ
diff --git a/Client/src/assets/images/home-images/tiny/family.jpg b/Client/src/assets/images/home-images/tiny/family.jpg
new file mode 100644
index 0000000..0db59f0
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/family.jpg differ
diff --git a/Client/src/assets/images/home-images/tiny/headphones.png b/Client/src/assets/images/home-images/tiny/headphones.png
new file mode 100644
index 0000000..9222335
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/headphones.png differ
diff --git a/Client/src/assets/images/home-images/tiny/road.jpg b/Client/src/assets/images/home-images/tiny/road.jpg
new file mode 100644
index 0000000..5603268
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/road.jpg differ
diff --git a/Client/src/assets/images/home-images/tiny/sunset_b.jpg b/Client/src/assets/images/home-images/tiny/sunset_b.jpg
new file mode 100644
index 0000000..cfd5d1e
Binary files /dev/null and b/Client/src/assets/images/home-images/tiny/sunset_b.jpg differ
diff --git a/Client/src/assets/images/original/event_back.png b/Client/src/assets/images/original/event_back.png
new file mode 100644
index 0000000..a2b6521
Binary files /dev/null and b/Client/src/assets/images/original/event_back.png differ
diff --git a/Client/src/assets/images/original/facebookplay.png b/Client/src/assets/images/original/facebookplay.png
new file mode 100644
index 0000000..75fe07e
Binary files /dev/null and b/Client/src/assets/images/original/facebookplay.png differ
diff --git a/Client/src/assets/images/original/logo.png b/Client/src/assets/images/original/logo.png
new file mode 100644
index 0000000..38b5940
Binary files /dev/null and b/Client/src/assets/images/original/logo.png differ
diff --git a/Client/src/assets/images/original/logo_dark.png b/Client/src/assets/images/original/logo_dark.png
new file mode 100644
index 0000000..84d79dc
Binary files /dev/null and b/Client/src/assets/images/original/logo_dark.png differ
diff --git a/Client/src/assets/images/original/logo_large.jpg b/Client/src/assets/images/original/logo_large.jpg
new file mode 100644
index 0000000..b7e8225
Binary files /dev/null and b/Client/src/assets/images/original/logo_large.jpg differ
diff --git a/Client/src/assets/images/original/pageflip.png b/Client/src/assets/images/original/pageflip.png
new file mode 100644
index 0000000..ec0ea37
Binary files /dev/null and b/Client/src/assets/images/original/pageflip.png differ
diff --git a/Client/src/assets/images/original/sign.png b/Client/src/assets/images/original/sign.png
new file mode 100644
index 0000000..ddc46e4
Binary files /dev/null and b/Client/src/assets/images/original/sign.png differ
diff --git a/Client/src/assets/images/tiny/event_back.png b/Client/src/assets/images/tiny/event_back.png
new file mode 100644
index 0000000..fdf3687
Binary files /dev/null and b/Client/src/assets/images/tiny/event_back.png differ
diff --git a/Client/src/assets/images/tiny/facebookplay.png b/Client/src/assets/images/tiny/facebookplay.png
new file mode 100644
index 0000000..343ec01
Binary files /dev/null and b/Client/src/assets/images/tiny/facebookplay.png differ
diff --git a/Client/src/assets/images/tiny/logo.png b/Client/src/assets/images/tiny/logo.png
new file mode 100644
index 0000000..86a4ad0
Binary files /dev/null and b/Client/src/assets/images/tiny/logo.png differ
diff --git a/Client/src/assets/images/tiny/pageflip.png b/Client/src/assets/images/tiny/pageflip.png
new file mode 100644
index 0000000..2c4c36e
Binary files /dev/null and b/Client/src/assets/images/tiny/pageflip.png differ
diff --git a/Client/src/assets/images/tiny/sign.png b/Client/src/assets/images/tiny/sign.png
new file mode 100644
index 0000000..e30bea2
Binary files /dev/null and b/Client/src/assets/images/tiny/sign.png differ
diff --git a/Client/src/index.html b/Client/src/index.html
index d8a71ca..d981bb4 100644
--- a/Client/src/index.html
+++ b/Client/src/index.html
@@ -1,7 +1,7 @@
 <!doctype html>
 <html>
 <head>
-  <!-- V2  -->
+  <!-- V2 -->
   <base href="/"> 
   <meta charset="utf-8">
   <title>Old Fashion Baptist Church</title>
diff --git a/Client/src/web-app-files/android-chrome-192x192.png b/Client/src/web-app-files/android-chrome-192x192.png
new file mode 100644
index 0000000..f6afa7f
Binary files /dev/null and b/Client/src/web-app-files/android-chrome-192x192.png differ
diff --git a/Client/src/web-app-files/android-chrome-512x512.png b/Client/src/web-app-files/android-chrome-512x512.png
new file mode 100644
index 0000000..e1c7abc
Binary files /dev/null and b/Client/src/web-app-files/android-chrome-512x512.png differ
diff --git a/Client/src/web-app-files/apple-touch-icon.png b/Client/src/web-app-files/apple-touch-icon.png
new file mode 100644
index 0000000..db3dc51
Binary files /dev/null and b/Client/src/web-app-files/apple-touch-icon.png differ
diff --git a/Client/src/web-app-files/browserconfig.xml b/Client/src/web-app-files/browserconfig.xml
new file mode 100644
index 0000000..8eb723b
--- /dev/null
+++ b/Client/src/web-app-files/browserconfig.xml
@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/web-app-files/mstile-150x150.png?v=LbWKNzlwGb"/>
+            <TileColor>#00bcd4</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>
diff --git a/Client/src/web-app-files/favicon-16x16.png b/Client/src/web-app-files/favicon-16x16.png
new file mode 100644
index 0000000..b42ba25
Binary files /dev/null and b/Client/src/web-app-files/favicon-16x16.png differ
diff --git a/Client/src/web-app-files/favicon-32x32.png b/Client/src/web-app-files/favicon-32x32.png
new file mode 100644
index 0000000..ba87cdb
Binary files /dev/null and b/Client/src/web-app-files/favicon-32x32.png differ
diff --git a/Client/src/web-app-files/favicon.ico b/Client/src/web-app-files/favicon.ico
new file mode 100644
index 0000000..244acd2
Binary files /dev/null and b/Client/src/web-app-files/favicon.ico differ
diff --git a/Client/src/web-app-files/manifest.json b/Client/src/web-app-files/manifest.json
new file mode 100644
index 0000000..0aae5dd
--- /dev/null
+++ b/Client/src/web-app-files/manifest.json
@@ -0,0 +1,18 @@
+{
+    "name": "Old Fashion Baptist",
+    "icons": [
+        {
+            "src": "/web-app-files/android-chrome-192x192.png?v=LbWKNzlwGb",
+            "sizes": "192x192",
+            "type": "image/png"
+        },
+        {
+            "src": "/web-app-files/android-chrome-512x512.png?v=LbWKNzlwGb",
+            "sizes": "512x512",
+            "type": "image/png"
+        }
+    ],
+    "theme_color": "#00bcd4",
+    "background_color": "#00bcd4",
+    "display": "standalone"
+}
\ No newline at end of file
diff --git a/Client/src/web-app-files/mstile-150x150.png b/Client/src/web-app-files/mstile-150x150.png
new file mode 100644
index 0000000..671a8c5
Binary files /dev/null and b/Client/src/web-app-files/mstile-150x150.png differ
diff --git a/Client/src/web-app-files/safari-pinned-tab.svg b/Client/src/web-app-files/safari-pinned-tab.svg
new file mode 100644
index 0000000..3c95953
--- /dev/null
+++ b/Client/src/web-app-files/safari-pinned-tab.svg
@@ -0,0 +1 @@
+<svg version="1" xmlns="http://www.w3.org/2000/svg" width="3600" height="3600" viewBox="0 0 2700.000000 2700.000000"><path d="M1275.7 244.7c-.2.5-.3 79.9-.3 176.5.1 155.5-.1 175.7-1.4 176-.8.2-96.8.4-213.2.3H849v150h426.5v525.3c0 289-.2 525.7-.5 526-.3.4-5.9.8-12.5.9-11.2.2-22.1.7-37.5 1.8-3.6.2-11.4.7-17.5 1-6 .4-12.6.8-14.5 1-1.9.2-7.8.6-13 1-5.2.3-11.1.8-13 1-3.7.5-15.6 1.6-20.5 2.1-1.6.1-3 .3-3 .4 0 0-2 .2-4.5.4-6.7.6-18.1 1.7-21 2.1-2.5.4-6.6.9-16.5 2.1-2.7.3-6.1.7-7.5.9-1.4.2-6.1.9-10.5 1.4-4.4.6-9.1 1.3-10.5 1.6-1.4.3-5 .8-8 1-3 .3-6.2.8-7 1-1.4.4-17.5 3-26 4.1-1.9.3-10.7 1.8-19.5 3.4-21.3 3.9-21.5 3.9-25.5 4.6-1.9.3-4.1.7-4.9 1-1.4.5-13.4 3-18.6 3.8-9.1 1.6-50.3 11.3-73 17.2-11.5 3-21.7 5.6-22.6 5.8-3.3.8-37.5 10.7-39.9 11.5-1.4.5-9.2 3-17.5 5.6-34.7 11-92.1 31.9-114 41.5-1.1.5-5.4 2.3-9.5 4-4.1 1.7-9.9 4.2-12.8 5.6-2.9 1.3-5.4 2.4-5.6 2.4-.2 0-3.5 1.4-7.3 3.2-3.7 1.7-7 3.2-7.3 3.3-.9.2-10.4 4.7-23 10.8-6.9 3.3-12.7 6.1-13 6.2-.8.1-35.4 17.6-36.5 18.5-.5.4-6.4 3.6-13 7-6.6 3.5-15.7 8.5-20.3 11.2-4.6 2.6-8.8 4.8-9.3 4.8s-.9.4-.9.9-1 1.3-2.2 1.7c-1.3.4-3.9 1.7-5.8 2.9s-6.9 4.2-11 6.6c-4.1 2.4-7.6 4.7-7.8 5.1-.2.5-.8.8-1.3.8-.8 0-20.3 11.7-25.1 15.2-1 .7-6.2 4-11.5 7.5-5.4 3.4-10.2 6.6-10.8 7-.9.8-15.7 10.8-21.1 14.3-3.8 2.5-10.9 7.5-11.4 8-.3.4-2.7 2.2-5.5 4.1-10.8 7.5-41.5 30.7-52.5 39.6-.8.7-5.8 4.7-11 8.9-9.6 7.7-12.6 10.2-21.2 17.6l-4.6 3.9 15.6 12.6c15.3 12.4 17.3 14 21.4 17.5 1.2 1 2.3 1.8 2.6 1.8.2 0 6.8-4 14.6-8.9 17.7-11.1 37.4-22.9 44.6-26.7 3-1.6 5.7-3.2 5.8-3.7.2-.4.7-.7 1.2-.7.4 0 4.5-2.1 9.1-4.6 16.8-9.3 35.9-19.2 35.9-18.6 0 .3.8-.2 1.8-1 1.4-1.3 31.7-16.4 33.2-16.6.3 0 4.2-1.9 8.7-4.1 4.6-2.3 8.5-4.1 8.7-4.1.2 0 3.7-1.5 7.8-3.4 28.8-13.3 83.8-34.9 119.3-46.7 6.6-2.2 12.9-4.4 14-4.9 1.8-.8 6.1-2.2 7.5-2.5.3-.1 5.9-1.8 12.5-4 6.6-2.1 12.5-4 13-4.1.6-.1 6.6-1.9 13.5-3.9 6.9-2.1 15.4-4.6 19-5.6 17.5-4.8 31.7-8.7 34-9.2 1.4-.3 8.7-2.2 16.3-4.1 27.8-7.2 92.1-21.3 109.2-24 7.8-1.2 22.1-3.8 22.6-4.2.3-.2 2.6-.6 5-.9 2.4-.3 6.9-1 9.9-1.5s7.2-1.2 9.4-1.6c2.1-.3 4.8-.8 6-1 1.1-.2 5.5-.9 9.6-1.5 4.1-.5 8.6-1.2 10-1.5 1.4-.2 5.7-.9 9.5-1.4 3.9-.5 8.1-1.2 9.5-1.4 1.4-.3 4.8-.7 7.5-1 2.8-.3 12-1.5 20.5-2.6 8.5-1.2 17.8-2.3 20.5-2.5 2.8-.3 6.7-.7 8.8-1 6.5-.9 11-1.4 17.7-2 3.6-.3 7.6-.8 9-1 1.4-.2 5.9-.7 10-1 4.1-.3 9.1-.8 11-1 1.9-.3 6.8-.7 10.9-1 4.1-.3 9.9-.8 13-1.1 6.9-.7 10.9-1 23.1-1.8 5.2-.3 12.2-.8 15.5-1.1 9.4-.8 19-1.4 32-2 6.6-.3 15.6-.8 20-1.1 38.6-2.5 151.2-3.7 207.5-2.2 37.3 1 59 1.8 64.5 2.2 2.8.2 11.1.7 18.5 1.1 18 .8 25 1.3 34.2 2 4.2.4 10.2.8 13.5 1 8.8.5 23.5 1.6 26.3 2 1.4.3 6.4.7 11.1 1 4.7.3 9.5.7 10.7 1 1.1.2 6.1.7 10.9 1 4.8.4 9.5.8 10.3 1 1.8.5 8.8 1.2 19 2.1 4.1.3 7.8.8 8.2 1 .3.2 3.2.6 6.3.9 4.9.3 8.7.8 17.5 2 1.4.2 5.2.7 8.5 1.1 3.3.3 6.9.8 8 1 1.1.3 4.5.7 7.5 1 3 .3 7.8 1 10.7 1.5 2.9.6 6.9 1.2 9 1.4 2.1.2 9.9 1.4 17.3 2.6 7.4 1.1 14.9 2.3 16.5 2.5 1.7.2 5.4.9 8.3 1.5 2.9.6 6.5 1.2 8 1.4 2.4.3 17.2 3 22.7 4.1 1.1.3 3.6.7 5.5 1 1.9.2 5.8 1 8.5 1.6 2.8.7 5.4 1.1 5.8 1 .5-.1 2.5.2 4.5.7 2 .6 5.3 1.3 7.2 1.6 1.9.3 5.3 1 7.5 1.5s11.4 2.6 20.5 4.6c20.4 4.4 18.5 4 24.5 5.4 2.8.6 5.7 1.3 6.6 1.5 7.9 1.6 51 12.8 67.8 17.6 5.8 1.7 11.3 3.2 12.1 3.4.8.2 6.9 2 13.5 4s12.5 3.7 13 3.9c1.6.4 24.9 7.7 26.5 8.3.8.3 8.5 2.9 17 5.8 17.9 6.1 33.1 11.6 51.5 18.7 28 10.7 41.8 16.4 56.7 23.2 3.1 1.4 6 2.6 6.3 2.6.4 0 3.5 1.3 6.9 2.9 3.3 1.5 8.8 4.1 12.1 5.6 3.3 1.5 10.3 4.8 15.5 7.3 5.2 2.5 9.7 4.6 10 4.7.3 0 1.6.7 3 1.5s2.7 1.5 3 1.5c1.2.2 37.3 18.8 47 24.2 1.9 1.1 6 3.3 9 4.9 3 1.6 5.7 3.1 6 3.4.3.3 2.3 1.5 4.5 2.7 8.6 4.6 12.4 6.8 23.5 13.5 6.3 3.8 12.4 7.5 13.4 8.1 1.1.7 7.1 4.5 13.4 8.5 11.4 7.3 11.4 7.3 14 5.6 2.8-1.8 28.4-22.5 31.3-25.3.9-.9 2.7-2.5 4-3.5l2.3-1.9-2.5-2c-1.3-1-4.4-3.6-6.9-5.7-4.4-3.8-9.7-8.1-13.4-11-1-.8-2.6-2.2-3.5-3-.9-.8-3.5-2.8-5.6-4.5-4-3-6.7-5.1-8.9-7-.6-.6-4-3.2-7.6-6-3.6-2.7-6.9-5.3-7.5-5.8-.5-.4-5.5-4.1-11-8.2s-10.4-7.8-11-8.2c-2.5-2-33-23.5-42.3-29.8-12.1-8.2-13.4-9.1-19.8-13-2.7-1.6-5.1-3.2-5.4-3.5-.3-.3-7.9-5.2-17-10.8-9.1-5.6-17-10.6-17.7-11.2-.7-.5-1.4-1-1.7-1-.3 0-6.6-3.6-14.2-8-7.5-4.4-13.8-8-14-8-.3 0-2.1-1-4.2-2.3-3.6-2.3-12.5-7.2-26.2-14.5-8.9-4.8-63.8-32.2-64.4-32.2-.3 0-4.4-1.8-9.3-4.1-10.8-5-14.9-6.9-23.3-10.4-3.6-1.5-8.9-3.8-11.8-5.2-9.6-4.3-45.1-18.3-60.2-23.8-3.6-1.3-11.7-4.2-18-6.5-10.3-3.8-40-13.8-42.5-14.4-.5-.1-4.8-1.5-9.5-3-4.7-1.6-9.8-3.2-11.5-3.6-1.6-.5-7.7-2.3-13.5-4-5.8-1.8-13.4-4-17-5-11.9-3.3-18.5-5.2-20-5.6-.8-.2-3.3-.8-5.5-1.4-2.2-.6-5.8-1.6-8-2.1-2.2-.6-5.8-1.4-8-2-2.2-.5-5.6-1.4-7.5-1.8-1.9-.5-7.5-1.9-12.5-3.1-4.9-1.2-10.1-2.4-11.4-2.6-1.2-.3-5.3-1.2-9-2-8.8-2.1-7.5-1.8-24.6-5.3-8.2-1.7-16.8-3.5-19-4-2.2-.6-6.9-1.5-10.5-2.1-3.6-.6-8.5-1.6-11-2-2.5-.5-5.8-1.2-7.5-1.4-1.6-.3-5.9-1-9.5-1.7-7-1.2-8.4-1.4-14.5-2.3-2.2-.3-5.1-.8-6.5-1.1-1.4-.3-4.3-.7-6.5-1-2.2-.3-4.7-.7-5.5-1-.8-.2-3.7-.6-6.5-1-7-.9-11.6-1.5-14.5-2-1.4-.3-4.7-.7-7.5-1-2.7-.3-7.7-1-11-1.5s-8.5-1.2-11.5-1.5c-3-.3-8.9-1-13-1.5s-10.2-1.2-13.5-1.5c-3.3-.3-7.3-.8-9-1-1.6-.2-5.9-.6-9.5-.9-3.6-.3-8.3-.8-10.5-1.1-8-.9-15.2-1.6-23-2-4.4-.2-9.8-.6-12.1-.9-2.2-.3-8.3-.8-13.5-1.1-5.2-.2-13.2-.7-17.9-1-24.1-1.4-29.2-1.7-37-1.9-4.7-.1-9-.5-9.5-.8-.7-.4-1-191.1-1-526V747.5H1851v-150h-212.5c-188.3 0-212.5-.2-212.6-1.5-.1-.8-.2-80.3-.3-176.5l-.1-175-74.7-.3c-41.1-.1-74.8.1-75.1.5z"/><path d="M1336.7 2036.6c-.1.1-15.5.4-34.2.8-44.5.9-72.2 1.9-88 3.1-2.7.2-9.8.7-15.8 1-5.9.3-12.9.7-15.5 1-2.6.2-8.7.7-13.7 1-9.8.6-17.5 1.3-24.5 2-2.5.3-7.6.7-11.5 1-3.8.3-7.9.7-9 .9-1.9.4-13.7 1.5-22 2.1-2.2.2-5.3.6-7 .9-1.6.2-5.5.7-8.5 1.1-5.7.6-9.7 1.1-16.5 1.9-2.2.3-6.5.8-9.5 1.2-3 .4-6.4.8-7.5.9-1.1.2-4.2.6-7 1-2.7.4-12.2 1.8-21 3.1s-18.2 2.7-21 3c-2.7.4-5.3.8-5.6 1-.4.2-2.6.6-5 .9-2.4.3-5.5.7-6.9 1-1.4.3-3.6.7-5 .9-1.4.3-4.1.8-6 1-1.9.3-8.2 1.5-14 2.7-5.8 1.1-12.1 2.2-14 2.4-3.4.4-7.3 1.2-27 5.5-5.2 1.1-11.1 2.3-13 2.6-1.9.3-8 1.6-13.5 2.9-5.5 1.3-11.1 2.6-12.5 2.9-1.4.3-3.6.8-5 1.1-1.4.3-3.6.8-5 1.1-1.4.3-6.1 1.4-10.5 2.5-4.4 1-8.9 2.1-10 2.4-5 1.1-25.6 6.5-31 8-3.3 1-6.9 1.9-8 2.1-4 .7-42.6 12-58.5 17.1-5.8 1.9-11.2 3.5-12 3.6-.8.2-1.9.5-2.5.8-.5.3-5.7 2.1-11.5 3.9-12 3.7-31.8 10.6-53.4 18.7-8.2 3-15.4 5.6-16 5.8-.6.1-2.4.7-4.1 1.4-1.6.7-10.2 4.1-19 7.6s-17.3 6.9-19 7.6c-1.6.7-3.2 1.3-3.5 1.4-.3.1-1.6.7-3 1.3-5.9 2.7-35.8 15.5-38.5 16.6-1.6.6-3.2 1.3-3.5 1.6-.3.3-3.4 1.8-7 3.4-7.9 3.4-17.6 8-33.3 15.8-6.6 3.2-12.5 5.8-13.2 5.8-.7 0-1.5.4-1.7.8-.1.4-5.2 3.3-11.3 6.4-15.5 7.9-22.3 11.5-36.1 19.1-6.7 3.7-12.7 6.7-13.3 6.7-.6 0-1.1.4-1.1.9s-1.2 1.4-2.7 2c-1.6.7-3.7 1.7-4.8 2.4-1.1.7-5.9 3.4-10.5 6.1-19 11.1-49.7 29.6-55.5 33.6-2.2 1.5-12.1 8.1-22 14.6s-18.2 12-18.5 12.4c-.3.3-3 2.1-6 4s-5.9 3.8-6.5 4.3c-.5.4-10.8 7.8-22.7 16.5-11.9 8.6-22.7 16.6-24 17.7-1.3 1.1-4 3.1-5.9 4.5-1.9 1.3-3.8 2.8-4.4 3.2-.5.5-9.5 7.6-20 16-17.5 13.9-29.3 23.5-30.5 24.9-.3.3-2.2 1.8-4.2 3.3-2.1 1.6-3.8 3.3-3.8 4 0 .6 3.5 3.9 7.8 7.2 4.3 3.4 9.1 7.3 10.7 8.7 4.7 4 16.9 13.9 21.1 17.2 2.1 1.6 4.3 2.9 4.8 2.7.6-.2 3.4-1.9 6.3-3.8 2.8-1.9 5.6-3.4 6.2-3.4.6 0 1.1-.4 1.1-.8 0-.5 1.2-1.5 2.8-2.3 1.5-.7 4.8-2.8 7.4-4.6 2.6-1.8 5-3.3 5.2-3.3.2 0 5.1-2.9 11-6.5 5.8-3.6 11.1-6.5 11.6-6.5.6 0 1-.4 1-.9s.8-1.1 1.8-1.4c.9-.4 3.7-1.8 6.2-3.3 2.5-1.5 6.4-3.7 8.7-5 2.4-1.3 6.4-3.6 9-5.1 2.7-1.4 7.7-4.2 11.3-6.1 3.6-1.9 10.8-5.8 16-8.7 9.7-5.2 53-26.8 65.3-32.4 16.3-7.5 20.4-9.4 23.7-10.8 1.9-.8 5.8-2.6 8.7-3.9 2.8-1.3 5.5-2.4 5.8-2.4.4 0 3.6-1.3 7.2-3 3.5-1.6 6.6-3 6.9-3 .2 0 2.3-.9 4.7-1.9 2.3-1.1 12.5-5.2 22.7-9.2 10.2-3.9 19.9-7.7 21.5-8.4 1.7-.7 4.6-1.8 6.5-2.5 1.9-.6 4.4-1.6 5.5-2.1 2.5-1.1 36.9-13.3 53-18.7 17.9-6.1 59.8-19.2 71-22.2 1.7-.4 12.2-3.3 23.5-6.5 11.3-3.1 21.6-5.9 23-6.2 1.4-.2 4.8-1.1 7.6-1.9 2.8-.8 6-1.6 7-1.8 1.1-.2 4.8-1.2 8.4-2.1 3.6-.9 7.3-1.9 8.2-2.1 2.5-.6 4.4-1 11.8-2.9 3.6-.9 7.6-1.8 9-2.1 1.4-.3 5.2-1.1 8.5-1.9 9.6-2.3 24.7-5.6 28-6.2 1.7-.2 4.8-.9 7-1.5s5.4-1.2 7-1.4c1.7-.3 4.8-.9 7-1.4 4.1-1 33.1-6.5 39.5-7.5 1.9-.3 4.2-.8 5-1 .8-.2 3.1-.6 5-.9 1.9-.3 4.6-.8 6-1.1 1.4-.3 4.1-.8 6-1.1 1.9-.3 11.6-1.9 21.5-3.6 9.9-1.6 19.6-3.1 21.5-3.3 1.9-.2 3.5-.4 3.5-.5 0-.1 1.1-.3 2.5-.5 1.4-.1 4.3-.5 6.5-.9 5.7-.9 9.4-1.5 14-2.1 2.2-.3 6.9-1 10.5-1.5 3.6-.5 9.2-1.2 12.5-1.6 3.3-.3 6.9-.8 8-1 1.1-.2 4.4-.6 7.3-1 2.9-.3 6.1-.7 7-.9.9-.1 4.6-.6 8.2-.9 7.4-.8 13.3-1.5 17-2.1 1.4-.2 5.2-.6 8.5-.9 3.3-.3 8-.8 10.5-1.1 2.5-.3 6.8-.7 9.5-1 13.7-1.2 17.2-1.5 20-2 1.7-.2 7.1-.7 12-1.1 5-.3 10.6-.8 12.5-1 3.9-.4 12.5-1.1 24-1.9 4.1-.3 10.2-.8 13.5-1 8-.7 20-1.4 31-2 5-.2 12.2-.7 16-1 3.9-.2 13.1-.7 20.5-1.1 7.4-.3 16.7-.7 20.5-.9 6.9-.4 38.7-1.3 68-2 19.5-.5 111.5-.5 131.5 0 41.8.9 63.1 1.5 67.1 2 2.4.2 11.8.7 20.9 1 9.1.3 19.4.8 23 1 3.6.3 10.3.7 15 1 20.4 1.2 26.8 1.6 31 2 2.5.3 8.6.7 13.5 1 5 .3 13.5 1 19 1.5 5.5.6 12.7 1.2 16 1.5 5.5.4 8.8.7 22.5 2 4.5.4 11.2 1.2 18.5 2.1 2.2.3 6.5.7 9.5.9 5.8.5 12.5 1.3 17.7 2.1 1.7.3 4.9.6 7 .8 4.5.4 14.7 1.6 18.3 2.2 1.4.2 6.3.9 11 1.4 4.7.6 9.6 1.3 11 1.5 1.4.2 4.5.6 7 .9 2.5.3 5.6.8 7 1 1.4.3 4.8.8 7.5 1.1 2.8.4 5.9.9 7 1 1.1.2 4.3.6 7 1 2.8.4 5.7.8 6.5 1 .8.2 5.1.8 9.5 1.5s8.9 1.4 10 1.7c1.1.2 4.7.8 8 1.3 3.3.6 7.2 1.2 8.8 1.5 4 .7 7.3 1.3 16.7 3 4.7.8 9.6 1.7 11 2 1.4.3 5 .9 8 1.5s6.9 1.3 8.5 1.6c1.7.3 3.9.7 5 .9 1.1.2 6.7 1.3 12.5 2.4 5.8 1.2 11.4 2.3 12.5 2.5 1.1.2 9.4 2 18.5 4s17.6 3.9 19 4.2c4.7 1 6.5 1.4 12.5 2.9 3.3.9 6.7 1.7 7.5 1.8 6 1.1 17.7 4.1 18.8 5 .7.5 1.5.7 1.8.4.3-.3 2.7.1 5.2.8 2.6.8 5.8 1.6 7.2 1.9 4.1.9 29.1 7.6 45.4 12.2 5 1.5 10.5 3 12.1 3.4 4 1.1 23.8 7.1 41.2 12.6 7.9 2.5 14.4 4.5 14.5 4.4.2 0 4.1 1.3 8.8 3 4.7 1.7 9.2 3.3 10 3.5.8.2 4.2 1.3 7.5 2.5 3.3 1.1 6.5 2.2 7 2.4.6.2 1.9.6 3 1 1.1.5 4.3 1.6 7 2.6 2.8 1 7 2.6 9.5 3.5 2.5.9 6.5 2.3 9 3.1 2.5.8 5.4 1.9 6.5 2.4 1.1.6 7 2.9 13 5.1 16 6.1 30.5 11.8 45.5 18.2 1.4.6 2.7 1.1 3 1.2.9.3 5.4 2.3 10.5 4.6 2.8 1.2 5.2 2.3 5.5 2.4 2.2.7 36 15.9 38.8 17.5 5.5 3 37.3 18 38.1 18 .5 0 1.1.3 1.3.7.2.5 3.9 2.6 8.3 4.9 15.9 8 25 12.9 25.6 13.7.3.5.9.8 1.3.8 1.2-.1 7.6 3.3 7.6 4.1 0 .4.8.8 1.9.8 1 0 2.4.7 3.1 1.5.7.8 1.6 1.5 2 1.5 1.5 0 37.6 21 50.3 29.2 2.3 1.5 4.9 3.1 5.7 3.5.8.4 4 2.4 7.2 4.5 3.1 2.1 6.1 3.8 6.7 3.8.5 0 1.1.4 1.3.8.2.4 1.9 1.8 3.9 3l3.6 2.2 4.4-3.8c2.4-2.1 10.5-8.7 17.9-14.7 7.4-5.9 14-11.4 14.6-12.2.6-.7 1.4-1.3 1.7-1.3.3 0 1.7-1.1 3.2-2.4l2.5-2.3-3.9-3.3c-2.2-1.7-5-4.1-6.3-5.2-1.3-1.1-3.8-3.2-5.7-4.6-1.9-1.5-3.9-3.2-4.5-3.7-.6-.6-3.6-3-6.6-5.5-3-2.5-5.7-4.7-6-5-.3-.3-3.4-2.7-7-5.4-3.6-2.8-7.2-5.6-8-6.3-.8-.7-3.1-2.6-5-4.3-1.9-1.6-3.9-3-4.4-3-.5 0-1.4-.6-2-1.3-.6-.8-6.5-5.4-13.1-10.3s-12.2-9.1-12.5-9.4c-.3-.4-2.2-1.6-4.2-2.9-2.1-1.2-3.8-2.7-3.8-3.2s-.7-.9-1.5-.9-1.5-.4-1.5-.8c0-.5-1.2-1.5-2.7-2.3-1.6-.8-3-1.6-3.3-1.9-1-1.1-14.6-10.8-22.5-16.1-4.4-2.9-8.1-5.7-8.3-6.1-.2-.5-.8-.8-1.3-.8s-2.7-1.2-4.8-2.8c-7.7-5.5-42.9-28.2-43.7-28.2-.2 0-1.7-.8-3.2-1.9-7-4.8-14.1-9.1-15.1-9.1-.6 0-1.1-.5-1.1-1 0-.6-.4-1-1-1-.5 0-5-2.5-10-5.5s-9.3-5.5-9.6-5.5c-.3 0-2.8-1.5-5.7-3.3-2.9-1.9-8.6-5.2-12.7-7.4s-9.5-5.2-12-6.5c-2.5-1.4-7-3.8-10-5.4-3-1.6-5.9-3.3-6.5-3.7-1-.8-28.1-14.8-37-19-2.7-1.4-11.5-5.6-19.5-9.5-8-3.8-16.5-7.9-19-9-2.5-1.1-8.4-3.8-13.2-6.1-4.8-2.2-16.3-7.2-25.5-11.2-9.3-3.9-19.2-8.2-22.1-9.5-2.9-1.3-5.7-2.4-6.2-2.4-1 0-2-.4-7.8-3.3-1.9-.9-3.8-1.7-4.4-1.7-.5 0-2.4-.6-4.1-1.4-8.3-3.7-46.4-17.8-69.2-25.7-9.9-3.3-18.7-6.4-19.5-6.7-.8-.3-1.7-.6-2-.6-.3-.1-5.9-1.9-12.5-4-14.6-4.6-14.5-4.6-14.8-4.5-.1 0-1.5-.5-3.2-1.1-1.6-.6-5.2-1.8-8-2.5-2.7-.7-10.2-2.9-16.5-4.8-6.3-1.9-16.9-4.9-23.5-6.7-6.6-1.8-12.7-3.5-13.5-3.8-.8-.3-2.2-.6-3-.8-.8-.2-9.6-2.4-19.5-4.9-21.3-5.4-42.8-10.5-47-11.1-1.6-.3-3.7-.7-4.5-1-2.6-.9-51.9-11.1-58-11.9-1.4-.2-4.7-.9-7.5-1.5-2.7-.6-5.7-1.1-6.5-1.2-.8 0-3.5-.5-6-1-2.5-.6-5.6-1.2-7-1.4-1.4-.1-3.8-.5-5.5-.8-1.6-.3-4.8-.8-7-1.1-2.2-.4-5-.8-6.2-1.1-1.3-.2-3.3-.6-4.5-.8-1.3-.3-5.9-1-10.3-1.6-4.4-.6-9.1-1.3-10.5-1.6-1.4-.2-4.3-.7-6.5-1-2.2-.2-6.7-.9-10-1.4-3.3-.5-8.4-1.2-11.3-1.5-3-.3-5.7-.7-6.1-.9-.3-.2-3.6-.7-7.1-1-3.6-.3-8.1-.8-10-1.1-5.6-.7-12.1-1.5-17-2-2.5-.3-5.8-.8-7.5-1-1.6-.2-6.1-.7-10-1-3.8-.3-8.6-.8-10.5-1-5.7-.8-12.2-1.5-17.5-2-2.7-.2-7.9-.7-11.5-1-3.6-.4-9.2-.8-12.5-1-7.2-.5-17.7-1.3-26-2-3.3-.3-10.7-.8-16.5-1.1-5.8-.2-13.4-.7-17-.9-23.3-1.7-142-4.9-143.3-3.9z"/></svg>
\ No newline at end of file