diff --git a/src/app/schedules/schedules.component.html b/src/app/schedules/schedules.component.html
index a46280e..d3a7845 100644
--- a/src/app/schedules/schedules.component.html
+++ b/src/app/schedules/schedules.component.html
@@ -1,22 +1,107 @@
-<div class="calendar-holder">
-	<div class="widget-heading-holder">
-		<header> Shop Events and Timings </header>
+<div class="container">
+	<div class="calendar-holder">
+		<div class="widget-heading-holder">
+			<header> Shop Events and Timings </header>
+		</div>
+
+		<section class="calendar">
+			<div class="month">
+				<span>{{ selectedMonth }} {{ selectedYear }}</span>
+			</div>
+
+			<div class="days">
+				<span> Sunday </span><span> Monday </span><span> Tuesday </span><span> Wednesday </span>
+				<span> Thursday </span><span> Friday </span><span> Saturday </span>
+			</div>
+			<div class="dates">
+				<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
+				<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectDay(selectedMonthDay)"> {{ selectedMonthDay }}
+				</span>
+				<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays"> {{ succeedingDay }} </span>
+			</div>
+		</section>
 	</div>
 
-	<section class="calendar">
-		<div class="month">
-			<span>{{ selectedMonth }} {{ selectedYear }}</span>
-		</div>
+	<div class="schedule-list-holder">
+
+		<section class="mini-calendar">
+			<div class="month">
+				<button (click)="selectPreviousMonth()"> <i class="icon ion-ios-arrow-back"></i> </button>
+				<span>{{ selectedMonth }} {{ selectedYear }}</span>
+				<button (click)="selectNextMonth()"> <i class="icon ion-ios-arrow-forward"></i> </button>
+			</div>
+
+			<div class="days">
+				<span> Sun </span><span> Mon </span><span> Tue </span><span> Wed </span>
+				<span> Thur </span><span> Fri </span><span> Sat </span>
+			</div>
+			<div class="dates">
+				<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
+				<span [ngClass]="{'current-date': currentDate === selectedMonthDay && currentMonth === selectedMonth, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays">
+					{{ selectedMonthDay }}
+				</span>
+				<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays">
+					{{ succeedingDay }}
+				</span>
+			</div>
+		</section>
+
+		<section class="day-details">
+			<section class="tabs-holder">
+				<button [ngClass]="{'active' : selectedTab === 'holiday' }"
+				(click)="selectedTab = 'holiday'"> Holiday </button>
+				<button [ngClass]="{'active' : selectedTab === 'events' }"
+				(click)="selectedTab = 'events'"> Events </button>
+			</section>
+
+			<section class="tab-info">
+				<ul class="holiday-list" *ngIf="selectedTab === 'holiday'">
+					<li>
+						<header> Shop will be closed </header>
+						<p> On: 14 Oct 2019 </p>
+					</li>
+					<li>
+						<header> Shop will be closed </header>
+						<p> On: 14 Oct 2019 </p>
+					</li>
+					<li>
+						<header> Shop will be closed </header>
+						<p> On: 14 Oct 2019 </p>
+					</li>
+				</ul>
+
+				<ul class="event-list" *ngIf="selectedTab === 'events'">
+					<li>
+						<header> Birthday Event </header>
+						<p> On: 14 Oct 2019 </p>
+					</li>
+					<li>
+						<header> Birthday Event </header>
+						<p> On: 14 Oct 2019 </p>
+					</li>
+				</ul>
+			</section>
+		</section>
+
+		<ul class="timings">
+			<li>
+				<header>
+					<span> <i class="icon ion-ios-time"></i> Default Timing: </span>
+					<button> Change </button>
+				</header>
+				<div class="time"> 09:00 PM to 5:00 PM </div>
+				<p> Every Day </p>
+			</li>
+
+			<li>
+				<header>
+					<span> <i class="icon ion-ios-time"></i> Changed Timing: </span>
+				</header>
+				<div class="time"> 12:00 PM to 5:00 PM </div>
+				<p> Oct 29 2019 </p>
+			</li>
+		</ul>
+
+	</div>
 
-		<div class="days">
-			<span> Sunday </span><span> Monday </span><span> Tuesday </span><span> Wednesday </span>
-			<span> Thursday </span><span> Friday </span><span> Saturday </span>
-		</div>
-		<div class="dates">
-			<span class="non-current-date" *ngFor="let preceedingDay of preceedingDays"> {{ preceedingDay }} </span>
-			<span [ngClass]="{'current-date': currentDate === selectedMonthDay, 'active' : selectedDate === selectedMonthDay }" *ngFor="let selectedMonthDay of selectedMonthDays" (click)="selectDay(selectedMonthDay)"> {{ selectedMonthDay }}
-			</span>
-			<span class="non-current-date" *ngFor="let succeedingDay of succeedingDays"> {{ succeedingDay }} </span>
-		</div>
-	</section>
 </div>
diff --git a/src/app/schedules/schedules.component.scss b/src/app/schedules/schedules.component.scss
index 5ad526e..8ff7315 100644
--- a/src/app/schedules/schedules.component.scss
+++ b/src/app/schedules/schedules.component.scss
@@ -1,12 +1,50 @@
+.container {
+	width: 95%;
+	margin-left: auto;
+	display: flex;
+	align-items: stretch;
+}
+
 .calendar-holder {
 	width: 65%;
-	padding: 0 5%;
+	margin-right: auto;
 
 	.widget-heading-holder {
 		width: 100%;
 	}
 }
 
+.schedule-list-holder {
+	width: 30%;
+	background-color: white;
+	height: calc(100vh - 70px);
+	overflow: auto;
+
+	&:hover {
+		&::-webkit-scrollbar {
+		  display: block;
+		}
+	}
+
+	&::-webkit-scrollbar {
+		width: 8px;
+		display: none;
+	}
+
+		/* Track */
+	&::-webkit-scrollbar-track {
+		background-color: white;
+	}
+	/* Handle */
+	&::-webkit-scrollbar-thumb {
+		background-color: rgba(black, 0.2);
+	}
+	/* Handle on hover */
+	&::-webkit-scrollbar-thumb:hover {
+		background-color: rgba(black, 0.5);
+	}
+}
+
 .calendar {
     padding: 15px 30px;
     background-color: white;
@@ -19,7 +57,7 @@
 	    padding: 5px 0 20px;
 
 	    span {
-	        color: black;
+	        color: var(--dark-grey);
 	        text-transform: capitalize;
 	        font-size: 16px;
 			font-weight: 500;
@@ -40,6 +78,10 @@
             color: var(--grey);
 			border-right: 1px solid #efefef;
 			padding: 5px 0;
+
+			&:nth-child(7) {
+				border-right: 0;
+			}
         }
     }
 
@@ -63,6 +105,10 @@
 			border-right: 1px solid #efefef;
 			transition: background-color 0.3s, color 0.3s;
 
+			&:nth-child(7n) {
+				border-right: 0;
+			}
+
 			&:hover {
 				background-color: #efefef;
 			}
@@ -93,3 +139,235 @@
         }
     }
 }
+
+
+
+.mini-calendar {
+    background-color: white;
+	width: 90%;
+	margin: 30px auto 20px;
+	padding-bottom: 20px;
+	border-bottom: 1px solid #cecece;
+
+	.month {
+	    padding: 5px 0 20px;
+		display: flex;
+		margin: 0 auto;
+		width: 90%;
+		align-items: center;
+		text-align: center;
+		justify-content: space-between;
+
+	    span {
+	        color: var(--dark-grey);
+	        text-transform: capitalize;
+	        font-size: 16px;
+			letter-spacing: 1px;
+			font-weight: 500;
+	    }
+
+		button {
+			width: 30px;
+			height: 30px;
+			font-size: 30px;
+			color: var(--brand-blue);
+			background-color: transparent;
+			border: 0;
+		}
+	}
+
+
+    .days {
+        display: flex;
+        width: 100%;
+
+        span {
+            width: calc(100% / 7);
+            text-align: center;
+            font-size: 12px;
+            color: var(--grey);
+			padding: 5px 0;
+        }
+    }
+
+    .dates {
+        display: flex;
+        width: 100%;
+        flex-wrap: wrap;
+
+        span {
+			display: block;
+			cursor: pointer;
+            font-size: 12px;
+            width: calc(100% / 7);
+            color: var(--dark-grey);
+			font-weight: 400;
+            position: relative;
+			padding: 10px 0;
+			text-align: center;
+
+			&.current-date {
+				border: 2px solid var(--brand-blue);
+				border-radius: 50%;
+			}
+
+            &.non-current-date {
+                color: #cecece;
+            }
+        }
+    }
+}
+
+.day-details {
+	width: 90%;
+	margin: 0 auto;
+
+	.tabs-holder {
+		display: flex;
+		align-items: center;
+		justify-content: center;
+
+		button {
+			margin: 0 10px;
+			border-radius: 20px;
+			border: 1px solid transparent;
+			background-color: transparent;
+			font-size: 12px;
+			padding: 5px 15px;
+			letter-spacing: 1px;
+			font-weight: 500;
+			color: var(--grey);
+			transition: background-color 0.3s, color 0.3s, border-color 0.3s;
+
+			&:first-child {
+				border-color: var(--pink);
+				color: var(--pink);
+
+				&.active {
+					background-color: var(--pink);
+					color: white;
+				}
+			}
+
+			&:last-child {
+				border-color: var(--green);
+				color: var(--green);
+
+				&.active {
+					background-color: var(--green);
+					color: white;
+				}
+			}
+		}
+	}
+
+	.tab-info {
+		width: 100%;
+		padding: 20px 0 0;
+		border-bottom: 1px solid #cecece;
+		letter-spacing: 1px;
+
+		ul {
+			width: 80%;
+			margin: 0 auto;
+			list-style: none;
+
+			&.holiday-list {
+				li::before {
+					background-color: var(--pink);
+				}
+			}
+
+			&.event-list {
+				li::before {
+					background-color: var(--green);
+				}
+			}
+		}
+
+		li {
+			padding-left: 30px;
+			line-height: 1.5;
+			margin-bottom: 15px;
+			position: relative;
+
+			&::before {
+				content: '';
+				position: absolute;
+				left: 0;
+				top: 7px;
+				width: 8px;
+				height: 8px;
+				background-color: var(--dark-grey);
+				border-radius: 50%;
+			}
+
+			header {
+				font-size: 13px;
+				color: var(--dark-grey);
+				font-weight: 500;
+			}
+
+			p {
+				color: var(--grey);
+				font-size: 12px;
+			}
+		}
+	}
+}
+
+.timings {
+	width: 88%;
+	margin: 0 auto;
+	list-style: none;
+
+	li {
+		border-bottom: 1px solid #cecece;
+		margin: 15px 0;
+		padding-bottom: 15px;
+
+		&:last-child {
+			border-bottom: 0;
+		}
+	}
+
+	header {
+		font-size: 16px;
+		color: black;
+		font-weight: 500;
+		letter-spacing: 1px;
+		display: flex;
+		align-items: center;
+		width: 100%;
+		justify-content: space-between;
+
+		i {
+			font-size: 16px;
+			color: var(--brand-blue);
+		}
+
+		button {
+			border-radius: 20px;
+			border: 1px solid var(--brand-blue);
+			padding: 5px 10px;
+			background-color: transparent;
+			color: var(--brand-blue);
+			font-weight: 500;
+		}
+	}
+
+	.time {
+		font-size: 14px;
+		letter-spacing: 1px;
+		margin: 5px auto;
+		color: var(--dark-grey);
+		font-weight: 500;
+		padding-left: 20px;
+	}
+
+	p {
+		color: var(--grey);
+		font-size: 14px;
+		padding-left: 20px;
+	}
+}
diff --git a/src/app/schedules/schedules.component.ts b/src/app/schedules/schedules.component.ts
index c1f84c6..a3ab95c 100644
--- a/src/app/schedules/schedules.component.ts
+++ b/src/app/schedules/schedules.component.ts
@@ -1,5 +1,4 @@
 import { Component, OnInit } from '@angular/core';
-import * as moment from 'moment';
 
 @Component({
 	selector: 'app-schedules',
@@ -8,6 +7,7 @@ import * as moment from 'moment';
 })
 export class SchedulesComponent implements OnInit {
 	currentDate: number;
+	currentMonth: string;
 	selectedDate: number;
     selectedMonth: string;
     selectedYear: number;
@@ -16,6 +16,7 @@ export class SchedulesComponent implements OnInit {
     preceedingDays: Array<number> = [];
     succeedingDays: Array<number> = [];
     selectedMonthDays: Array<number> = [];
+	selectedTab: string = 'holiday';
 
 	constructor() { }
 
@@ -23,6 +24,7 @@ export class SchedulesComponent implements OnInit {
 		this.selectedMonth = this.monthMap[(new Date()).getMonth()];
         this.selectedYear = (new Date()).getFullYear();
 		this.currentDate = new Date().getDate();
+		this.currentMonth = this.monthMap[(new Date()).getMonth()];
         this.renderCalendar();
 	}
 
diff --git a/src/app/widgets-holder/widgets-holder.component.ts b/src/app/widgets-holder/widgets-holder.component.ts
index a29932c..8779e87 100644
--- a/src/app/widgets-holder/widgets-holder.component.ts
+++ b/src/app/widgets-holder/widgets-holder.component.ts
@@ -6,7 +6,7 @@ import { Component, OnInit } from '@angular/core';
 	styleUrls: ['./widgets-holder.component.scss']
 })
 export class WidgetsHolderComponent implements OnInit {
-	selected_nav: string = 'support';
+	selected_nav: string = 'schedule';
 
 	constructor() { }
 
diff --git a/src/styles.scss b/src/styles.scss
index 90224d0..3691921 100644
--- a/src/styles.scss
+++ b/src/styles.scss
@@ -7,6 +7,8 @@ $ionicons-font-path: "~ionicons/dist/fonts";
   --brand-yellow: #f79319;
   --grey: #9a9a9a;
   --dark-grey: #666666;
+  --pink: #f76d6d;
+  --green: #8cc63f;
 }