diff --git a/Client/src/app/app-routing.module.ts b/Client/src/app/app-routing.module.ts
index 3636232..99bf268 100644
--- a/Client/src/app/app-routing.module.ts
+++ b/Client/src/app/app-routing.module.ts
@@ -17,6 +17,7 @@ import { MissionaryFormPageComponent } from './components/missionary-form-page/m
 import { ContributorYearlyReportComponent } from './components/contributor-yearly-report/contributor-yearly-report.component';
 import { ContributorAllReportsComponent } from './components/contributor-all-reports/contributor-all-reports.component';
 import { LiveStreamComponent } from './components/live-stream/live-stream.component';
+import { VideoServicesComponent } from './components/video-services/video-services.component';
 
 const routes =
   [
@@ -48,6 +49,10 @@ const routes =
         path: 'sermons',
         component: SermonsComponent
       },
+      {
+        path: 'video',
+        component: VideoServicesComponent
+      },
       {
         path: 'sermons/:id',
         component: SermonsComponent
diff --git a/Client/src/app/app.module.ts b/Client/src/app/app.module.ts
index 39b754d..fd0f058 100644
--- a/Client/src/app/app.module.ts
+++ b/Client/src/app/app.module.ts
@@ -77,6 +77,7 @@ import { MissionarySupportService } from './services/missionary-support-service'
 import { ContributorYearlyReportComponent } from './components/contributor-yearly-report/contributor-yearly-report.component';
 import { ContributorAllReportsComponent } from './components/contributor-all-reports/contributor-all-reports.component';
 import { LiveStreamComponent } from './components/live-stream/live-stream.component';
+import { VideoServicesComponent } from './components/video-services/video-services.component';
 
 
 
@@ -101,6 +102,7 @@ import { LiveStreamComponent } from './components/live-stream/live-stream.compon
     DurationPipe,
     LocationComponent,
     SermonLargeComponent,
+    VideoServicesComponent,
     AddSermonPopupComponent,
     LoginPopupComponent,
     OkPopupComponent,
diff --git a/Client/src/app/components/home/countdown.ts b/Client/src/app/components/home/countdown.ts
index a33717b..d54dbd1 100644
--- a/Client/src/app/components/home/countdown.ts
+++ b/Client/src/app/components/home/countdown.ts
@@ -1,13 +1,12 @@
 import { DateTime } from "luxon";
+import { VideoServices, VideoService } from './video-services';
 
 export class Countdown {
     public days: number = 0;
     public hours: number = 0;
     public minutes: number = 0;
     public seconds: number = 0;
-    public liveDates: Date[] = [        
-        DateTime.fromObject({year: 2020, month: 3, day: 22, hour: 11, zone: 'America/Denver'})
-    ];
+    public services: VideoService[] = [];
     public showButton: boolean;
     public showCounter: boolean = true;
 
@@ -48,11 +47,15 @@ export class Countdown {
 
     private clock;
 
-    constructor() {
-        if (this.liveDates.length == 0) return;
-        this.liveDates.sort((a, b) => {
-            if (a < b) return -1;
-            if (a === b) return 0;
+    constructor(services: VideoService[]) {
+        if (!services || services.length == 0) return;
+        this.services = services;
+        this.services.forEach(v => {
+            v.date = DateTime.fromISO(v.date, {zone: 'America/Denver'})
+        });
+        this.services.sort((a, b) => {
+            if (a.date < b.date) return -1;
+            if (a.date === b.date) return 0;
             return 1;
         });
         this.updateClock();
@@ -69,10 +72,10 @@ export class Countdown {
     private updateClock() {
         this.showCounter = true;
         var now = DateTime.local();
-        var nearestPast = this.getNearestPastDate(now);
+        var nearestPast = this.getNearestPastDate(now).date;
         if (nearestPast) {
             var pastDiff = now.diff(nearestPast, ['minutes']);
-            if (pastDiff.minutes < 10080) {                
+            if (pastDiff.minutes < 240) {                
                 this.showButton = true;
                 this.dateDisplay = nearestPast.toLocaleString(DateTime.DATETIME_HUGE);
                 this.dateDisplaySmall = nearestPast.toLocaleString(DateTime.DATETIME_MED);
@@ -81,7 +84,7 @@ export class Countdown {
         }
 
         this.showButton = false;
-        var nearestFuture = this.getNearestFutureDate(now);        
+        var nearestFuture = this.getNearestFutureDate(now).date;        
         if (!nearestFuture) {
             this.stopClock();
             this.resetToZero();
@@ -90,12 +93,12 @@ export class Countdown {
             this.dateDisplaySmall = '';
             return;
         }
-        var secDiff = nearestFuture.diff(now, ['seconds']);
+        var secDiff = (<DateTime>nearestFuture).diff(now, ['seconds']);
         if (secDiff.seconds <= 0) {
             this.showButton = true;
         }
 
-        var hourDiff = nearestFuture.diff(now, ['hours']);
+        var hourDiff = (<DateTime>nearestFuture).diff(now, ['hours']);
         if (hourDiff.hours >= 48) {
             this.showCounter = false;
             this.dateDisplay = '';
@@ -103,7 +106,7 @@ export class Countdown {
             return;
         }        
 
-        var diff = nearestFuture.diff(now, ['days', 'hours', 'minutes', 'seconds']);
+        var diff = (<DateTime>nearestFuture).diff(now, ['days', 'hours', 'minutes', 'seconds']);
         this.days = diff.days;
         this.hours = diff.hours;
         this.minutes = diff.minutes;
@@ -120,19 +123,19 @@ export class Countdown {
         clearInterval(this.clock);
     }
 
-    private getNearestPastDate(now: DateTime): DateTime {
-        if (this.liveDates.length === 0) return null;
+    private getNearestPastDate(now: DateTime): VideoService {
+        if (this.services.length === 0) return null;
         var now = now || DateTime.local();
-        var nearestIndex = this.liveDates.findIndex(d => d > now);
+        var nearestIndex = this.services.findIndex(s => s.date > now);
         if (nearestIndex === 0) return null;
-        if (nearestIndex === -1) return this.liveDates[this.liveDates.length - 1];
-        return this.liveDates[nearestIndex - 1];
+        if (nearestIndex === -1) return this.services[this.services.length - 1];
+        return this.services[nearestIndex - 1];
     }
 
-    private getNearestFutureDate(now: DateTime): DateTime {
-        if (this.liveDates.length === 0) return null;
+    private getNearestFutureDate(now: DateTime): VideoService {
+        if (this.services.length === 0) return null;
         var now = now || DateTime.local();
-        var nearest = this.liveDates.find(d => d > now);
+        var nearest = this.services.find(s => s.date > now);
         return nearest;
     }
 
diff --git a/Client/src/app/components/home/home.component.html b/Client/src/app/components/home/home.component.html
index 49cfaa8..950944b 100644
--- a/Client/src/app/components/home/home.component.html
+++ b/Client/src/app/components/home/home.component.html
@@ -2,11 +2,11 @@
 <img id="background-image" src="assets/images/home-images/tiny/sunset_b.jpg" alt="background image" width="100%">
 
 <div id="filler">
-    <div id="live-stream-container" *ngIf="countdown.showCounter">
+    <div id="live-stream-container" *ngIf="countdown && countdown.showCounter">
         <div id="title">
             <span class="live">VIDEO</span> 
-            <span *ngIf="!countdown.showButton"> SERMON STARTS IN</span>
-            <span *ngIf="countdown.showButton"> SERMON AVAILABLE NOW</span>
+            <span *ngIf="!countdown.showButton"> SERVICE STARTS IN</span>
+            <span *ngIf="countdown.showButton"> SERVICE AVAILABLE NOW</span>
         </div>
         <a id="countdown-container" routerLink="/live" [class.show-button]="countdown.showButton" >
             <div id="live-button" [class.opacity-zero]="!countdown.showButton">
@@ -58,7 +58,7 @@
                 </p>
                 <br>
                 <p ofbFadeInOnScroll class="action">
-                    <i ofbicon>live_tv</i> <a routerLink="/live" class="align-top">Click here to watch online</a>
+                    <i ofbicon>live_tv</i> <a routerLink="/video" class="align-top">Click here to watch online</a>
                 </p>
                 <p ofbFadeInOnScroll class="action">
                     <i ofbicon>headset</i> <a routerLink="/sermons" class="align-top">Click here to listen online</a>
diff --git a/Client/src/app/components/home/home.component.ts b/Client/src/app/components/home/home.component.ts
index b229abe..c0f672a 100644
--- a/Client/src/app/components/home/home.component.ts
+++ b/Client/src/app/components/home/home.component.ts
@@ -3,6 +3,8 @@ import { MatDialog, MatDialogConfig } from '@angular/material';
 import { VideoPopupComponent } from '../popups/video-popup/video-popup.component';
 import { environment } from '../../../environments/environment';
 import { Countdown } from './countdown';
+import { HttpClient } from '@angular/common/http';
+import { VideoServices } from './video-services';
 
 @Component({
   selector: 'home-component',
@@ -51,12 +53,12 @@ export class HomeComponent {
   }
 
   public countdown: Countdown;
-  public liveDates: Date[] = [];
 
-  constructor(private dialog: MatDialog)
+  constructor(private dialog: MatDialog, private http: HttpClient)
   {
-    this.countdown = new Countdown();
-    this.liveDates = [];
+    this.http.get<VideoServices>('assets/json/videoServices.json').subscribe(res => {
+      this.countdown = new Countdown(res.videos);
+    });
   }
 
   @HostListener('window:scroll', ['$event'])
diff --git a/Client/src/app/components/home/video-services.ts b/Client/src/app/components/home/video-services.ts
new file mode 100644
index 0000000..937fcee
--- /dev/null
+++ b/Client/src/app/components/home/video-services.ts
@@ -0,0 +1,11 @@
+export class VideoServices {
+    videos: VideoService[];
+}
+
+export class VideoService {
+    isReady: boolean;
+    title: string;
+    src: string;
+    date: Date;
+    archived: boolean;
+}
\ No newline at end of file
diff --git a/Client/src/app/components/live-stream/live-stream.component.ts b/Client/src/app/components/live-stream/live-stream.component.ts
index becde23..841789a 100644
--- a/Client/src/app/components/live-stream/live-stream.component.ts
+++ b/Client/src/app/components/live-stream/live-stream.component.ts
@@ -2,6 +2,7 @@ import { BibleVerseService } from './../../services/bible-verse.service';
 import { Component, OnInit } from '@angular/core';
 import { Router } from '@angular/router';
 import { HttpClient } from '@angular/common/http';
+import { VideoServices } from '../home/video-services';
 
 @Component({
   selector: 'live-stream-component',
@@ -28,16 +29,20 @@ export class LiveStreamComponent implements OnInit {
   private interval;
   ngOnInit() {
     this.interval = setInterval(() => {
-      this.http.get('assets/json/message.json').subscribe(res => {
-        console.log(res);
-        this.message = (<any>res).message;
-        this.isReady= (<any>res).isReady;
-        if (this.isReady === true) {
-          this.showVideo = true;
-          this.videoSrc = '';
-          this.videoSrc = this.sermonVideo;
-          clearInterval(this.interval);
-        }
+      this.http.get<VideoServices>('assets/json/videoServices.json').subscribe(res => {
+        var nonArchivedReady = res.videos.filter(v => v.archived === false);
+        if (nonArchivedReady && nonArchivedReady.length > 0) {
+          var service = nonArchivedReady[0];
+          this.message = (<any>service).message;
+          if (service.isReady === true) {
+            if (this.isReady === true) {
+              this.showVideo = true;
+              this.videoSrc = '';
+              this.videoSrc = service.src;
+              clearInterval(this.interval);
+            }
+          }
+        }        
       });
     }, 3000);
 
diff --git a/Client/src/app/components/video-services/video-services.component.css b/Client/src/app/components/video-services/video-services.component.css
new file mode 100644
index 0000000..e69de29
diff --git a/Client/src/app/components/video-services/video-services.component.html b/Client/src/app/components/video-services/video-services.component.html
new file mode 100644
index 0000000..851f402
--- /dev/null
+++ b/Client/src/app/components/video-services/video-services.component.html
@@ -0,0 +1,14 @@
+<secondary-page-component [hideSideBarOnMobile]="true" >
+    <div mainContent>
+        <div *ngFor="let video of services; let i = index;">
+            <button (click)="showVideo(i)" mat-stroked-button>
+                <i ofbicon class="mr-10" >live_tv</i>
+                {{video.title}}
+            </button>
+            <video style="width:100%" *ngIf="video.show" src="{{video.src}}"></video>
+        </div>      
+    </div>
+    <div sideBar class="side-bar">
+
+    </div>
+</secondary-page-component>
\ No newline at end of file
diff --git a/Client/src/app/components/video-services/video-services.component.ts b/Client/src/app/components/video-services/video-services.component.ts
new file mode 100644
index 0000000..43e3308
--- /dev/null
+++ b/Client/src/app/components/video-services/video-services.component.ts
@@ -0,0 +1,35 @@
+import { WindowRefService } from './../../services/window-ref.service';
+import { Component, HostListener, OnInit } from '@angular/core';
+import { HttpClient } from '@angular/common/http';
+import { VideoServices, VideoService } from '../home/video-services';
+import { take } from 'rxjs/operators';
+
+
+
+@Component({
+  selector: 'video-services-component',
+  templateUrl: './video-services.component.html',
+  styleUrls: ['./video-services.component.css'],
+})
+export class VideoServicesComponent implements OnInit {
+
+    public loading: boolean = true;
+    public services: VideoService[];
+
+  constructor(private http: HttpClient){ }
+
+  ngOnInit(){
+    this.http.get<VideoServices>('assets/json/videoServices.json')
+    .subscribe(res => {
+        this.services = res.videos.filter(v => v.isReady === true);
+        this.loading = false;
+    });    
+  }
+
+  showVideo(index: number) {
+    this.services.forEach(s => {
+        (<any>s).show = false;
+    });
+    (<any>this.services[index]).show = true;
+    }
+}
diff --git a/Client/src/assets/json/message.json b/Client/src/assets/json/message.json
deleted file mode 100644
index f4375cf..0000000
--- a/Client/src/assets/json/message.json
+++ /dev/null
@@ -1,4 +0,0 @@
-{
-    "isReady":false,
-    "message": "Please Wait..."
-    }
\ No newline at end of file
diff --git a/Client/src/assets/json/videoServices.json b/Client/src/assets/json/videoServices.json
new file mode 100644
index 0000000..1770c4f
--- /dev/null
+++ b/Client/src/assets/json/videoServices.json
@@ -0,0 +1,19 @@
+{
+    "videos": [
+        {
+            "isReady": false,
+            "title": "Sunday Evening",
+            "src": "https://ofbbutte.com/static/media/video/2020-03-22 1900 Pastor Derek Loewen.mp4",
+            "date": "2020-03-22T19:00:00-06:00",
+            "archived": false,
+            "message": "Please Stay Tuned Until 3/22/2020 at 7 PM MDT"
+        },
+        {
+            "isReady": true,
+            "title": "Sunday Morning",
+            "src": "https://ofbbutte.com/static/media/video/sermon.mp4",
+            "date": "2020-03-22T11:00:00-06:00",
+            "archived": true
+        }
+    ]
+}
\ No newline at end of file