diff --git a/src/app/attendance/attendance.component.html b/src/app/attendance/attendance.component.html
index f27dc2ac..2adb197a 100644
--- a/src/app/attendance/attendance.component.html
+++ b/src/app/attendance/attendance.component.html
@@ -1,8 +1,6 @@
-
-
{{languageConstants.april}}
-
2021
-
"{{languageConstants.attendance}}
+
+
{{languageConstants.april}}
2021
{{languageConstants.attendance}}
diff --git a/src/app/attendance/attendance.component.scss b/src/app/attendance/attendance.component.scss
index 4654026c..7f2bb455 100644
--- a/src/app/attendance/attendance.component.scss
+++ b/src/app/attendance/attendance.component.scss
@@ -1,17 +1,46 @@
-@import '../../styles.scss';
-#attendance{
- .align-middle{
- @include flex-box(column, top);
- text-align: center;
- padding-bottom: 5px;
- width: 90%;
- margin: 0% auto;
- }
- .leave-status{
- background-color: $clr-mania;
- .width-90{
- width: 90%;
- margin: 5% auto;
- }
- }
+.align-middle {
+ display: flex;
+ flex-direction: column;
+ justify-content: center;
+ align-items: center;
+
+ text-align: center;
+ padding-bottom: 5px;
+ width: 90%;
+ margin: 0% auto;
+}
+
+.leave-status {
+ background-color: #b4e8fd;
+
+ .width-90 {
+ width: 90%;
+ margin: 5% auto;
+ }
+}
+
+.flex-row {
+ flex-direction: row;
+ display: flex;
+ width: 100%;
+}
+
+.page-container {
+ height: 100%;
+ display: flex;
+ flex-direction: column;
+ background-color: #b4e8fd;
+}
+
+.font-body-xsmall-bold {
+ font-size: 0.812rem;
+ line-height: 1.125rem;
+ letter-spacing: 1px;
+ font-family: "Raleway VariableFont";
+ text-transform: uppercase;
+}
+
+.title {
+ text-align: center;
+ margin:2%;
}
\ No newline at end of file