diff --git a/src/app/calendar/calendar.component.html b/src/app/calendar/calendar.component.html
index 9a4adf5..764870f 100644
--- a/src/app/calendar/calendar.component.html
+++ b/src/app/calendar/calendar.component.html
@@ -1,4 +1,4 @@
-<div class="page" #scrollMe>
+<div class="page">
     <header class="nav-header">
         <button class="close-button" (click)="back()">
             <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/close.svg"></svg-icon>
@@ -82,157 +82,103 @@
             </li>
         </ul>
 
-        <div class="preceeding-days-progress" *ngIf="showAllSchedules">
-            <header> {{ selectedDate - 1 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
-            <ul>
-                <li class="attended">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Mathematics class </label>
-                            <p> 8:00 AM to 10:00 AM </p>
+        <section class="preceeding-days-progress" [ngClass]="{'active' : showAllSchedules}">
+            <div *ngIf="showAllSchedules">
+                <header class="first-header"> {{ selectedDate - 1 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
+                <ul>
+                    <li class="attended" [routerLink]="['/quiz']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Social Science class </label>
+                                <p> 4:00 PM to 5:00 PM </p>
+                            </div>
+                            <span class="status"> In Progress </span>
                         </div>
-                        <span class="status"> Attended </span>
-                    </div>
-                </li>
-
-                <li class="absent">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Physics class </label>
-                            <p> 11:00 AM to 1:00 PM </p>
-                        </div>
-                        <span class="status"> Absent </span>
-                    </div>
-
-                </li>
-
-                <li class="late">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Chemistry class </label>
-                            <p> 2:00 PM to 3:00 PM </p>
-                        </div>
-                        <span class="status"> Late by 10 mins </span>
-                    </div>
-
-                </li>
-
-                <li class="progress">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Social Science class </label>
-                            <p> 4:00 AM to 5:00 PM </p>
-                        </div>
-                        <span class="status"> Progress </span>
-                    </div>
-
-                </li>
-            </ul>
-
-            <header> {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
-            <ul>
-                <li class="attended">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Mathematics class </label>
-                            <p> 8:00 AM to 10:00 AM </p>
+                    </li>
+
+                    <li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Chemistry class </label>
+                                <p> 2:00 PM to 3:00 PM </p>
+                            </div>
+                            <span class="status"> Late by 10 mins </span>
                         </div>
-                        <span class="status"> Attended </span>
-                    </div>
-                </li>
-
-                <li class="absent">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Physics class </label>
-                            <p> 11:00 AM to 1:00 PM </p>
-                        </div>
-                        <span class="status"> Absent </span>
-                    </div>
-
-                </li>
-
-                <li class="late">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Chemistry class </label>
-                            <p> 2:00 PM to 3:00 PM </p>
+                    </li>
+
+                    <li class="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Physics class </label>
+                                <p> 11:00 AM to 1:00 PM </p>
+                            </div>
+                            <span class="status"> Absent </span>
                         </div>
-                        <span class="status"> Late by 10 mins </span>
-                    </div>
-
-                </li>
-
-                <li class="progress">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Social Science class </label>
-                            <p> 4:00 AM to 5:00 PM </p>
+                    </li>
+
+                    <li class="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Mathematics class </label>
+                                <p> 8:00 AM to 10:00 AM </p>
+                            </div>
+                            <span class="status"> Attended </span>
                         </div>
-                        <span class="status"> Progress </span>
-                    </div>
-
-                </li>
-            </ul>
-
-            <header> {{ selectedDate - 3 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
-            <ul>
-                <li class="attended">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Mathematics class </label>
-                            <p> 8:00 AM to 10:00 AM </p>
+                    </li>
+                </ul>
+
+                <header> {{ selectedDate - 2 }}, {{ selectedMonth }} {{ selectedYear }}  </header>
+                <ul>
+                    <li class="absent" [routerLink]="['/quiz']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Social Science class </label>
+                                <p> 4:00 PM to 5:00 PM </p>
+                            </div>
+                            <span class="status"> In Progress </span>
                         </div>
-                        <span class="status"> Attended </span>
-                    </div>
-                </li>
-
-                <li class="absent">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Physics class </label>
-                            <p> 11:00 AM to 1:00 PM </p>
+                    </li>
+
+                    <li class="late" [routerLink]="['/video-chapter', 'Chemistry Class']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Chemistry class </label>
+                                <p> 2:00 PM to 3:00 PM </p>
+                            </div>
+                            <span class="status"> Late by 10 mins </span>
                         </div>
-                        <span class="status"> Absent </span>
-                    </div>
-
-                </li>
-
-                <li class="late">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/warning.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Chemistry class </label>
-                            <p> 2:00 PM to 3:00 PM </p>
+                    </li>
+
+                    <li class="absent" [routerLink]="['/chapter-notes', 'Physics Class']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/close-circle.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Physics class </label>
+                                <p> 11:00 AM to 1:00 PM </p>
+                            </div>
+                            <span class="status"> Absent </span>
                         </div>
-                        <span class="status"> Late by 10 mins </span>
-                    </div>
-
-                </li>
-
-                <li class="progress">
-                    <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/question-mark.svg"></svg-icon>
-                    <div class="content-holder">
-                        <div class="content">
-                            <label> Social Science class </label>
-                            <p> 4:00 AM to 5:00 PM </p>
+                    </li>
+
+                    <li class="attended" [routerLink]="['/video-chapter', 'Mathematics Class']">
+                        <svg-icon [applyClass]="true" class="icon status-icon" src="assets/custom-icons/checkmark.svg"></svg-icon>
+                        <div class="content-holder">
+                            <div class="content">
+                                <label> Mathematics class </label>
+                                <p> 8:00 AM to 10:00 AM </p>
+                            </div>
+                            <span class="status"> Attended </span>
                         </div>
-                        <span class="status"> Progress </span>
-                    </div>
-
-                </li>
-            </ul>
-        </div>
+                    </li>
+                </ul>
+            </div>
+        </section>
     </section>
 
     <button class="add-button"> <svg-icon [applyClass]="true" class="icon" src="assets/custom-icons/plus.svg"></svg-icon> </button>
diff --git a/src/app/calendar/calendar.component.scss b/src/app/calendar/calendar.component.scss
index 147e43b..980d653 100644
--- a/src/app/calendar/calendar.component.scss
+++ b/src/app/calendar/calendar.component.scss
@@ -139,7 +139,7 @@
 .schedule-details {
     background-color: white;
     padding: 0 5% 100px;
-    overflow: auto;
+    overflow: hidden;
     border-top-left-radius: 30px;
     border-top-right-radius: 30px;
     position: relative;
@@ -167,6 +167,20 @@
         list-style: none;
     }
 
+    .preceeding-days-progress {
+        opacity: 0;
+        transition: opacity 0.5s, transform 0.5s;
+        transition-delay: 0.5s;
+        transform: translateY(20vh);
+        margin: 0;
+
+        &.active {
+            opacity: 1;
+            transform: translateY(0vh);
+        }
+    }
+
+
     li {
         display: flex;
         width: 100%;
diff --git a/src/app/calendar/calendar.component.ts b/src/app/calendar/calendar.component.ts
index 2df213b..7b0c46c 100644
--- a/src/app/calendar/calendar.component.ts
+++ b/src/app/calendar/calendar.component.ts
@@ -1,4 +1,4 @@
-import { Component, OnInit, ElementRef, ViewChild } from '@angular/core';
+import { Component, OnInit } from '@angular/core';
 import { Location } from '@angular/common';
 
 @Component({
@@ -7,7 +7,6 @@ import { Location } from '@angular/common';
 	styleUrls: ['./calendar.component.scss']
 })
 export class CalendarComponent implements OnInit {
-    @ViewChild('scrollMe') private myScrollContainer: ElementRef;
     currentDate: number;
 	currentMonth: string;
 	currentYear: number;
@@ -30,7 +29,12 @@ export class CalendarComponent implements OnInit {
 
         if (this.showAllSchedules) {
             try {
-                this.myScrollContainer.nativeElement.scrollTop = this.myScrollContainer.nativeElement.scrollHeight;
+                setTimeout(() => {
+                    document.querySelector('.first-header').scrollIntoView({
+                        behavior: 'smooth',
+                        block: 'center'
+                    });
+                }, 100);
             } catch(err) { }
         }
     }