diff --git a/src/app/ToDoItem.js b/src/app/ToDoItem.js
index 68a2d0d..98a0ec1 100644
--- a/src/app/ToDoItem.js
+++ b/src/app/ToDoItem.js
@@ -15,7 +15,7 @@ export class ToDoItem extends BaseComponent {
                      {{#if edit}}
                         <input type="text" value="{{ value }}" class="internal-element"/>
                      {{else}}
-                        <span class="{{ tern checked true 'checked' '' }} to-do-span">{{value}}</span>
+                        <div class="to-do-cont"><span class="{{ tern checked true 'checked' '' }} to-do-span">{{value}}</span></div>
                      {{/if}}
                      <div class="tool-bar">
                         {{#if edit}}
diff --git a/src/main.js b/src/main.js
index 7a8c7e8..b389199 100644
--- a/src/main.js
+++ b/src/main.js
@@ -1,6 +1,6 @@
 import {MainComponent} from './app/MainComponent';
 import {attachMainComponent} from './app/helpers';
-import './styles/style.scss';
+import './styles/style-fb.scss';
 
 
 attachMainComponent(new MainComponent().render());
\ No newline at end of file
diff --git a/src/styles/style-fb.scss b/src/styles/style-fb.scss
new file mode 100644
index 0000000..c78ac55
--- /dev/null
+++ b/src/styles/style-fb.scss
@@ -0,0 +1,173 @@
+$fa-font-path: '~font-awesome/fonts';
+@import '~font-awesome/scss/font-awesome';
+@import 'reset.css';
+
+$checkbox-size: 30px;
+$primary-font-weight: 700;
+$primary-font-color: #8b8f97;
+$primary-font-size: 20px;
+$prim-right-margin: 48px;
+$prim-left-margin: 28px;
+$main-border: 2px solid #dfdcdc;
+$co-main-border: 1.8px solid #e6ebed;
+@font-face {
+  font-family: "Lucida Grande";
+  src: url('fonts/LucidaGrande.ttf') format('truetype');
+}
+@mixin row_positioning() {
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+}
+@mixin column_positioning() {
+  display: flex;
+  flex-direction: column;
+}
+@mixin primary_font() {
+  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
+  font-size: $primary-font-size;
+  font-weight: $primary-font-weight;
+  color: $primary-font-color;
+}
+@mixin set_width_height($width, $height) {
+  width: $width;
+  height: $height;
+}
+@mixin buttons_style() {
+  background-color: #ffffff;
+  color: #c8cace;
+  font-size: 16px;
+  :active {
+    background-color: #dcdee2;
+  }
+}
+@mixin margin_for_checkbox($margin-top, $margin-bot) {
+  margin: $margin-top $prim-right-margin $margin-bot $prim-left-margin;
+}
+body {
+  background-color: #f7f5f5;
+  label {
+    @include set_width_height($checkbox-size, $checkbox-size);
+  }
+  button, input[type="checkbox"], input[type="text"] {
+    outline: none;
+    border: none;
+  }
+  button {
+    @include buttons_style;
+  }
+  input[type="checkbox"] {
+    position: absolute;
+    visibility: hidden;
+    z-index: -1;
+  }
+  input[type="checkbox"] + .pseudo-checkbox {
+    @include set_width_height(30px, 30px);
+    border: 2px solid #6bb3ca;
+    border-radius: 2px;
+    background-color: #faf9f9;
+    text-align: center;
+    font-size: 28px;
+    color: #cccecf;
+  }
+  input[type="checkbox"]:checked + .pseudo-checkbox {
+    @include set_width_height(30px, 30px);
+    border: 2px solid #c4c4c4;
+    border-radius: 2px;
+    background-color: #f6f5f5;
+    text-align: center;
+    font-size: 28px;
+    color: #cccecf;
+  }
+  input[type="checkbox"] + span i {
+    opacity: 0;
+  }
+  input[type="checkbox"]:checked + span i {
+    opacity: 1;
+  }
+
+  input[type="text"] {
+    @include primary_font;
+    @include set_width_height(300px, 34px);
+  }
+  .checked {
+    color: #d9d9d9;
+    text-decoration: line-through;
+  }
+  .filtered-button {
+    background-color: #f1f0f0;
+    border: 1.8px solid #6bb3ca;
+    border-radius: 2px;
+    font-weight: bold;
+  }
+}
+
+main {
+  background: url(img/line.png) repeat-y;
+  @include column_positioning;
+  @include set_width_height(500px, auto);
+  margin: 170px auto;
+  border: $main-border;
+  header {
+    @include row_positioning;
+    @include set_width_height(auto, 80px);
+    border-bottom: $co-main-border;
+    label {
+      @include row_positioning;
+      @include margin_for_checkbox(30px, 16px);
+    }
+    .input-text {}
+    .add-button {
+      @include set_width_height(40px, 40px);
+    }
+  }
+  ul {
+    @include column_positioning;
+    li:hover .tool-bar {
+      opacity: 1;
+    }
+    .view {
+      @include row_positioning;
+      @include set_width_height(auto, 60px);
+      border-bottom: $co-main-border;
+      label {
+        @include row_positioning;
+        @include margin_for_checkbox(auto, auto);
+      }
+      .to-do-cont {
+        @include row_positioning;
+        .to-do-span {
+          word-wrap: break-word;
+          @include set_width_height(300px, 100%);
+          @include primary_font;
+        }
+      }
+      .internal-element {
+        font-style: italic;
+      }
+      .tool-bar {
+        @include row_positioning;
+        opacity: 0;
+        .edit {
+          @include set_width_height(40px, 40px);
+        }
+        .delete {
+          @include set_width_height(40px, 40px);
+        }
+      }
+    }
+  }
+
+  .footer {
+    @include set_width_height(auto, 80px);
+    @include row_positioning;
+    ul {
+      @include row_positioning;
+      margin-left: $prim-left-margin + $prim-right-margin + $checkbox-size;
+      li {
+        margin-right: 5px;
+        button {}
+      }
+    }
+  }
+}
\ No newline at end of file
diff --git a/src/styles/style.scss b/src/styles/style.scss
deleted file mode 100644
index 6132cf3..0000000
--- a/src/styles/style.scss
+++ /dev/null
@@ -1,178 +0,0 @@
-$fa-font-path: '~font-awesome/fonts';
-@import '~font-awesome/scss/font-awesome';
-@import 'reset.css';
-
-@font-face {
-  font-family: "Lucida Grande";
-  src: url('fonts/LucidaGrande.ttf') format('truetype');
-}
-
-$list-border: 2px solid #d1cfcf;
-$primary-font-size: 18px;
-$primary-font-weight: 500;
-$primary-font-color: #8b8f97;
-$body-bg-color: #f6f3f3;
-$buttons-content-font-size: 16px;
-
-@mixin primary_font() {
-  font-family: "Lucida Grande", Geneva, Verdana, sans-serif;
-  font-size: 16px;
-  font-weight: $primary-font-weight;
-  color: $primary-font-color;
-}
-
-@mixin set_width_height($width, $height) {
-  width: $width;
-  height: $height;
-}
-
-@mixin buttons_style() {
-  border: none;
-  outline: none;
-  background-color: #ffffff;
-  color: #c8cace;
-  font-size: $buttons-content-font-size;
-  :active {
-    background-color: #dcdee2;
-  }
-}
-
-@mixin positioning() {
-  display: inline-block;
-  vertical-align: middle;
-}
-
-body {
-  @include primary_font;
-  background-color: $body-bg-color;
-  input[type="text"] {
-    @include primary_font;
-    @include positioning;
-    @include set_width_height(300px, 34px);
-  }
-  button, input[type="checkbox"], input[type="text"] {
-    outline: none;
-    border: none;
-  }
-  input[type="checkbox"] {
-    position: absolute;
-    visibility: hidden;
-    z-index: -1;
-  }
-  input[type="checkbox"] + .pseudo-checkbox {
-    @include positioning;
-    @include set_width_height(18px, 18px);
-    border: 1.8px solid #6bb3ca;
-    background-color: #faf9f9;
-    text-align: center;
-    font-size: 16px;
-    color: #cccecf;
-  }
-  input[type="checkbox"]:checked + .pseudo-checkbox {
-    @include positioning;
-    @include set_width_height(18px, 18px);
-    border: 1.8px solid #c4c4c4;
-    background-color: #f6f5f5;
-    text-align: center;
-    font-size: 16px;
-    color: #cccecf;
-  }
-  input[type="checkbox"] + span i {
-    opacity: 0;
-  }
-  input[type="checkbox"]:checked + span i {
-    opacity: 1;
-  }
-  .checked {
-    color: #d9d9d9;
-    text-decoration: line-through;
-  }
-}
-
-main {
-  background: url(img/line.png) repeat-y;
-  background-color: #ffffff;
-  border: $list-border;
-  @include set_width_height(500px, auto);
-  margin: 170px auto;
-  font-size: $primary-font-size;
-  header {
-    @include positioning;
-    @include set_width_height(100%, 80px);
-    border-bottom: 1.8px solid #e6ebed;
-    label {
-      @include positioning;
-      margin: 30px 44px 16px 28px;
-    }
-    .input-text {
-      font-size: $primary-font-size;
-      margin: 10px 0 0 10px;
-    }
-    .add-button {
-      @include buttons_style;
-      @include positioning;
-      margin: 40px 0 24px 12px;
-    }
-  }
-  ul {
-    li:hover .tool-bar {
-      opacity: 1;
-    }
-    .view {
-      border-bottom: 1.5px solid #e6ebed;
-      label {
-        @include positioning;
-        @include set_width_height(20px, 20px);
-        margin: 16px 44px 12px 28px;
-      }
-      .to-do-span {
-        word-wrap: break-word;
-        @include set_width_height(300px, 100%);
-        @include positioning;
-        margin: 22px 0 22px 10px;
-      }
-      .internal-element {
-        @include positioning;
-        margin: 16px 0 8px 10px;
-        font-style: italic;
-        font-size: 16px;
-      }
-      .tool-bar {
-        @include positioning;
-        @include set_width_height(80px, 40px);
-        margin: 12px 0 8px 0;
-        float: right;
-        font-size: 0;
-        opacity: 0;
-        .edit {
-          width: 40px;
-          height: 40px;
-          @include buttons_style;
-        }
-        .delete {
-          @include set_width_height(40px, 40px);
-          @include buttons_style;
-        }
-      }
-    }
-  }
-  .footer {
-    @include set_width_height(100%, 80px);
-    ul {
-      @include set_width_height(auto, 28px);
-      list-style: none;
-      padding: 26px 0 26px 104px;
-      li {
-        display: inline;
-        button {
-          @include buttons_style;
-        }
-      }
-      .filtered-button {
-        background-color: #f1f0f0;
-        border: 1.8px solid #6bb3ca;
-        font-weight: bold;
-      }
-    }
-  }
-}
\ No newline at end of file