diff --git a/lib/data/booking.dart b/lib/data/booking.dart
index 200a1b4..afac466 100644
--- a/lib/data/booking.dart
+++ b/lib/data/booking.dart
@@ -19,6 +19,7 @@ class Booking {
   String code;
   String information;
 
+  int weekday = -1;
   String holiday = '';
   String dayLeft = '';
   String dayRight = '';
@@ -45,10 +46,11 @@ class Booking {
     required this.information,
   }) {
     PublicHolidays h = PublicHolidays(year: bookingDay.year);
-    
+
+    weekday = bookingDay.weekday;
     holiday = h.holiday(bookingDay);
     dayLeft = DateFormat('EEEE - dd').format(bookingDay);
-    dayRight =  DateFormat('dd - EEEE').format(bookingDay);
+    dayRight = DateFormat('dd - EEEE').format(bookingDay);
     pause = '';
     durationIs = '';
     durationShould = '';
@@ -78,6 +80,8 @@ class BookingDataSource extends DataGridSource {
   void buildDataGridRow() {
     _bookingDataGridRows = booking
         .map<DataGridRow>((e) => DataGridRow(cells: [
+              DataGridCell<String>(columnName: 'code', value: e.code),
+              DataGridCell<int>(columnName: 'weekday', value: e.weekday),
               DataGridCell<String>(columnName: 'dayLeft', value: e.dayLeft),
               DataGridCell<String>(columnName: 'holiday', value: e.holiday),
               DataGridCell<String>(
@@ -148,7 +152,6 @@ class BookingDataSource extends DataGridSource {
   }
 
   List<Booking> booking = [];
-
   List<DataGridRow> _bookingDataGridRows = [];
 
   @override
@@ -156,10 +159,51 @@ class BookingDataSource extends DataGridSource {
 
   @override
   DataGridRowAdapter buildRow(DataGridRow row) {
+    Color colBG = Colors.white;
+    String code = row.getCells().toList()[0].value;
+    int weekday = row.getCells().toList()[1].value;
+    String holiday = row.getCells().toList()[3].value;
+
+    if (code == 'U') {
+      colBG = Color.fromARGB(255, 127, 127, 255);
+    }
+    if (weekday == 6 || weekday == 7) {
+      colBG = Color.fromARGB(255, 255, 165, 0);
+    }
+    if (holiday != '') {
+      colBG = Color.fromARGB(255, 255, 165, 0);
+    }
+    if (code == 'T') {
+      colBG = Color.fromARGB(255, 127, 127, 255);
+    }
+    if (code == 'SU') {
+      colBG = Color.fromARGB(255, 127, 127, 255);
+    }
+    if (code == 'K') {
+      colBG = Colors.yellow;
+    }
+    if (code == 'G') {
+      colBG = Color.fromARGB(255, 191, 191, 255);
+    }
+    if (code == 'T') {
+      colBG = Colors.red;
+    }
+
     return DataGridRowAdapter(
         cells: row.getCells().map<Widget>((e) {
+      if (e.columnName == 'dayRight' ||
+          e.columnName == 'holiday' ||
+          e.columnName == 'information') {
+        return Container(
+          alignment: Alignment.centerLeft,
+          color: colBG,
+          padding: const EdgeInsets.all(8.0),
+          child: Text(e.value.toString() == '99:99' ? '' : e.value.toString()),
+        );
+      }
       return Container(
-        alignment: Alignment.center,
+        alignment: Alignment.centerRight,
+        color: colBG,
         padding: const EdgeInsets.all(8.0),
         child: Text(e.value.toString() == '99:99' ? '' : e.value.toString()),
       );
diff --git a/lib/widgets/monthly/monthlyScreen.dart b/lib/widgets/monthly/monthlyScreen.dart
index b73bd4c..82784f3 100644
--- a/lib/widgets/monthly/monthlyScreen.dart
+++ b/lib/widgets/monthly/monthlyScreen.dart
@@ -69,7 +69,7 @@ class _MonthlyScreenState extends State<MonthlyScreen> {
         leave4: DateTime(1900, 1, 1),
         come5: DateTime(1900, 1, 1),
         leave5: DateTime(1900, 1, 1),
-        code: '',
+        code: 'U',
         information: '',
       ));
     }
@@ -79,13 +79,27 @@ class _MonthlyScreenState extends State<MonthlyScreen> {
 
   List<GridColumn> getColumns() {
     return <GridColumn>[
+      GridColumn(
+          columnName: 'code',
+          visible: false,
+          label: Container(
+              padding: const EdgeInsets.all(16.0),
+              alignment: Alignment.centerRight,
+              child: const Text('code'))),
+      GridColumn(
+          columnName: 'weekday',
+          visible: false,
+          label: Container(
+              padding: const EdgeInsets.all(16.0),
+              alignment: Alignment.centerRight,
+              child: const Text('weekday'))),
       GridColumn(
           columnName: 'dayLeft',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(16.0),
-              alignment: Alignment.centerLeft,
-              child: const Text('dayLeft'))),
+              alignment: Alignment.centerRight,
+              child: const Text('day'))),
       GridColumn(
           columnName: 'holiday',
           columnWidthMode: ColumnWidthMode.auto,
@@ -99,70 +113,70 @@ class _MonthlyScreenState extends State<MonthlyScreen> {
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('come1'))),
+              child: const Text('come 1'))),
       GridColumn(
           columnName: 'leave1',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('leave1'))),
+              child: const Text('leave 1'))),
       GridColumn(
           columnName: 'come2',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('come2'))),
+              child: const Text('come 2'))),
       GridColumn(
           columnName: 'leave2',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('leave2'))),
+              child: const Text('leave 2'))),
       GridColumn(
           columnName: 'come3',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('come3'))),
+              child: const Text('come 3'))),
       GridColumn(
           columnName: 'leave3',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('leave3'))),
+              child: const Text('leave 3'))),
       GridColumn(
           columnName: 'come4',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('come4'))),
+              child: const Text('come 4'))),
       GridColumn(
           columnName: 'leave4',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('leave4'))),
+              child: const Text('leave 4'))),
       GridColumn(
           columnName: 'come5',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('come5'))),
+              child: const Text('come 5'))),
       GridColumn(
           columnName: 'leave5',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('leave5'))),
+              child: const Text('leave 5'))),
       GridColumn(
           columnName: 'pause',
           columnWidthMode: ColumnWidthMode.auto,
@@ -183,14 +197,14 @@ class _MonthlyScreenState extends State<MonthlyScreen> {
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('durationIs'))),
+              child: const Text('duration Is'))),
       GridColumn(
           columnName: 'durationShould',
           columnWidthMode: ColumnWidthMode.auto,
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('durationShould'))),
+              child: const Text('duration Should'))),
       GridColumn(
           columnName: 'diff',
           columnWidthMode: ColumnWidthMode.auto,
@@ -211,7 +225,7 @@ class _MonthlyScreenState extends State<MonthlyScreen> {
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('currentDiff'))),
+              child: const Text('current Diff'))),
       GridColumn(
           columnName: 'decimal',
           columnWidthMode: ColumnWidthMode.auto,
@@ -225,7 +239,7 @@ class _MonthlyScreenState extends State<MonthlyScreen> {
           label: Container(
               padding: const EdgeInsets.all(8.0),
               alignment: Alignment.centerLeft,
-              child: const Text('dayRight'))),
+              child: const Text('day'))),
     ];
   }
 
diff --git a/web/index.html b/web/index.html
index 8d81baa..263e899 100644
--- a/web/index.html
+++ b/web/index.html
@@ -39,21 +39,27 @@
   <!-- This script adds the flutter initialization JS code -->
   <script src="flutter.js" defer></script>
 </head>
-<body>
-  <script>
-    window.addEventListener('load', function(ev) {
-      // Download main.dart.js
+<div id="loading"></div>
+<script>
+  window.addEventListener('load', function(ev) {
+      var loading = document.querySelector('#loading');
+      loading.textContent = "Loading workinghours...";
       _flutter.loader.loadEntrypoint({
-        serviceWorker: {
-          serviceWorkerVersion: serviceWorkerVersion,
-        },
-        onEntrypointLoaded: function(engineInitializer) {
-          engineInitializer.initializeEngine().then(function(appRunner) {
-            appRunner.runApp();
-          });
-        }
+          serviceWorker: {
+              serviceWorkerVersion: serviceWorkerVersion,
+          },
+          onEntrypointLoaded: async function(engineInitializer) {
+              loading.textContent = "Initializing engine...";
+
+              let appRunner = await engineInitializer.initializeEngine({
+                  hostElement: document.querySelector("#flutter_app"),
+                  renderer: "html"
+              });
+
+              loading.textContent = "Running app...";
+              await appRunner.runApp();
+          }
       });
-    });
-  </script>
-</body>
+  });
+</script>
 </html>