diff --git a/src/app/todo/todo.component.css b/src/app/todo/todo.component.css
index 7e663dd..0f771fc 100644
--- a/src/app/todo/todo.component.css
+++ b/src/app/todo/todo.component.css
@@ -1,7 +1,23 @@
-@import "../../../node_modules/@dhx/trial-todolist/dist/todo.css";
+/* import To Do List styles */
+@import "@dhx/trial-todolist/dist/todo.css";
 
+/* specify styles for initial page */
+html,
+body{
+  height: 100%;
+  padding: 0;
+  margin: 0;
+  background-color: #f7f7f7;
+}
+
+/* specify styles for To Do List and Toolbar container */
 .component_container {
   height: 100%; 
   max-width: 800px; 
   margin: 0 auto;
 }
+
+/* specify styles for To Do List container */
+.widget {
+  height: calc(100% - 56px);
+}
diff --git a/src/app/todo/todo.component.ts b/src/app/todo/todo.component.ts
index 2e8bb0e..5915e65 100644
--- a/src/app/todo/todo.component.ts
+++ b/src/app/todo/todo.component.ts
@@ -16,7 +16,7 @@ import {
   styleUrls: ["./todo.component.css"],
   template:  `<main class="component_container">
                 <div #toolbar_container></div>
-                <div #todo_container style="height: calc(100% - 56px);"></div>
+                <div #todo_container class="widget"></div>
               </main>`
 })
 export class ToDoComponent implements OnInit, OnDestroy {