diff --git a/app/partials/views/modules/wizard-create-project.jade b/app/partials/views/modules/wizard-create-project.jade
index aef6fd90..3395d5ac 100644
--- a/app/partials/views/modules/wizard-create-project.jade
+++ b/app/partials/views/modules/wizard-create-project.jade
@@ -21,16 +21,18 @@ form
         div.title
             h1 Create Project
             p Fresh and clean. So exciting!
-        fieldset
-            input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45")
-        fieldset
-            textarea(name="description", ng-model="data.description", data-required="true",  placeholder="Description")
-        fieldset.wizard-action
-            div
-                a.button-prev.button.button-gray(href="", title="Prev") Prev
-                a.submit-button.button.button-green(href="", title="Create") Create
+        div.template-wrapper
+            div.template-inner
+                fieldset
+                    input(type="text", name="name", ng-model="data.name", data-required="true", placeholder="Name", maxlength="45")
+                fieldset
+                    textarea(name="description", ng-model="data.description", data-required="true",  placeholder="Description")
+                fieldset.wizard-action
+                    div
+                        a.button-prev.button.button-gray(href="", title="Prev") Prev
+                        a.submit-button.button.button-green(href="", title="Create") Create
 
-            button(type="submit", class="hidden")
+                    button(type="submit", class="hidden")
 
 div.progress-bar
     div.progress-state
diff --git a/app/styles/components/basic-table.scss b/app/styles/components/basic-table.scss
index d6849312..3e710ed1 100644
--- a/app/styles/components/basic-table.scss
+++ b/app/styles/components/basic-table.scss
@@ -1,15 +1,20 @@
 .basic-table {
-    @include table-flex(stretch, center, flex, column, wrap, flex-start);
+    display: flex;
+    flex-direction: column;
     width: 100%;
     .row {
-        @include table-flex(stretch, center, flex, row, nowrap, flex-start);
+        align-items: center;
         border-bottom: 1px solid darken($whitish, 4%);
+        display: flex;
+        flex-direction: row;
+        flex-wrap: nowrap;
         padding: .3rem 0;
         text-align: left;
         width: 100%;
         @for $i from 1 through 8 {
             .width-#{$i} {
-                @include table-flex-child($i, 50px, 0);
+                flex-basis: 50px;
+                flex-grow: #{$i};
             }
         }
         &:last-child {
diff --git a/app/styles/components/created-by.scss b/app/styles/components/created-by.scss
index 68dc5561..bff30e0a 100644
--- a/app/styles/components/created-by.scss
+++ b/app/styles/components/created-by.scss
@@ -1,17 +1,19 @@
 .us-created-by {
-    @include table-flex();
+    display: flex;
     margin-bottom: 1rem;
     margin-top: .5rem;
     position: relative;
     .user-avatar {
-        @include table-flex-child(0, 40px, 0);
+        flex-basis: 40px;
+        flex-grow: 0;
         img {
             border-radius: 8%;
             width: 100%;
         }
     }
     .created-by {
-        @include table-flex-child(3, 70px, 0);
+        flex-basis: 70px;
+        flex-grow: 3;
         margin-left: .5rem;
         .created-title,
         .created-date {
diff --git a/app/styles/components/kanban-task.scss b/app/styles/components/kanban-task.scss
index 63778eb9..8e8e96b8 100644
--- a/app/styles/components/kanban-task.scss
+++ b/app/styles/components/kanban-task.scss
@@ -27,17 +27,17 @@
         }
     }
     .kanban-tagline {
-        @include table-flex();
         border-color: $postit-hover;
+        display: flex;
         height: .6rem;
     }
     .kanban-tag {
-        @include table-flex-child(1, 0, 0, 0);
         border-color: $postit-hover;
+        flex-grow: 1;
         height: .6rem;
     }
     .kanban-task-inner {
-        @include table-flex();
+        display: flex;
     }
     .avatar {
         a {
@@ -69,7 +69,8 @@
     }
     .task-text {
         @extend %small;
-        @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
+        flex-basis: 50px;
+        flex-grow: 10;
         padding: 0 .5rem 0 .8rem;
         word-wrap: break-word;
     }
@@ -126,7 +127,9 @@
         }
     }
     .avatar {
-        @include table-flex-child($flex-basis: 50px);
+        flex-basis: 50px;
+        flex-grow: 1;
+        width: 55px;
     }
     .task-name {
         word-wrap: break-word;
@@ -188,7 +191,9 @@
         }
     }
     .avatar {
-        @include table-flex-child($flex-basis: 40px);
+        flex-basis: 50px;
+        flex-grow: 1;
+        width: 55px;
     }
     .task-num {
         vertical-align: top;
diff --git a/app/styles/components/paginator.scss b/app/styles/components/paginator.scss
index ac064071..6cfaaf04 100644
--- a/app/styles/components/paginator.scss
+++ b/app/styles/components/paginator.scss
@@ -37,8 +37,8 @@
     overflow: hidden;
 }
 
-a.v-pagination-next,
-a.v-pagination-previous {
+.v-pagination-next,
+.v-pagination-previous {
     background-color: $button-gray;
     color: $whitish;
     display: block;
diff --git a/app/styles/components/summary.scss b/app/styles/components/summary.scss
index 318bdec2..7eb54e96 100644
--- a/app/styles/components/summary.scss
+++ b/app/styles/components/summary.scss
@@ -100,10 +100,10 @@
             }
             &.active {
                 color: $fresh-taiga;
-                &:hover {
-                    color: $gray;
-                    transition: color .3s linear;
-                }
+            }
+            &.active:hover {
+                color: $gray;
+                transition: color .3s linear;
             }
         }
     }
diff --git a/app/styles/components/taskboard-task.scss b/app/styles/components/taskboard-task.scss
index 73a20f8d..8e1440bb 100644
--- a/app/styles/components/taskboard-task.scss
+++ b/app/styles/components/taskboard-task.scss
@@ -32,49 +32,49 @@
         }
     }
     .taskboard-tagline {
-        @include table-flex();
         border-color: $postit-hover;
+        display: flex;
         height: .6rem;
     }
     .taskboard-tag {
-        @include table-flex-child(1, 0, 0, 0);
         border-top: .3rem solid $postit-hover;
+        flex-basis: 0;
+        flex-grow: 1;
         height: .6rem;
         z-index: 100;
     }
     .taskboard-task-inner {
-        @include table-flex();
+        display: flex;
         padding: .5rem;
     }
     .taskboard-user-avatar {
-        .avatar {
-            @include table-flex-child($flex-basis: 50px);
-            a {
-                @extend %small;
-                display: block;
-                text-align: center;
-            }
-            img {
-                margin: 0 auto;
-                &:hover {
-                    border: 2px solid $green-taiga;
-                    transition: border .3s linear;
-                }
-            }
-            figcaption {
-                color: darken($postit-hover, 15%);
-                display: none;
-                //display: block;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                width: 100%;
+        flex-basis: 50px;
+        flex-grow: 1;
+        max-width: 55px;
+        a {
+            @extend %small;
+            display: block;
+            text-align: center;
+        }
+        img {
+            margin: 0 auto;
+            &:hover {
+                border: 2px solid $green-taiga;
+                transition: border .3s linear;
             }
         }
-        &.iocaine {
-            img {
-                filter: hue-rotate(150deg) saturate(200%);
-            }
+        figcaption {
+            color: darken($postit-hover, 15%);
+            display: none;
+            overflow: hidden;
+            text-overflow: ellipsis;
+            white-space: nowrap;
+            width: 100%;
+        }
+    }
+    .iocaine {
+        img {
+            filter: hue-rotate(150deg) saturate(200%);
         }
     }
     .icon-iocaine {
@@ -101,7 +101,8 @@
     }
     .taskboard-text {
         @extend %small;
-        @include table-flex-child($flex-grow: 10, $flex-basis: 50px);
+        flex-basis: 50px;
+        flex-grow: 10;
         padding: 0 .5rem 0 1rem;
         word-wrap: break-word;
     }
diff --git a/app/styles/components/watchers.scss b/app/styles/components/watchers.scss
index 247f30fd..4374ac83 100644
--- a/app/styles/components/watchers.scss
+++ b/app/styles/components/watchers.scss
@@ -19,9 +19,12 @@
         }
     }
     .watcher-single {
-        @include table-flex(center, center, flex, row, wrap, center);
+        align-content: center;
+        align-items: center;
         background: transparent;
         border-bottom: 1px solid $gray-light;
+        display: flex;
+        justify-content: center;
         padding: .5rem;
         vertical-align: middle;
         &:last-child {
@@ -36,13 +39,13 @@
     }
     .watcher-name {
         @extend %small;
-        @include table-flex-child(8, 0);
         color: $grayer;
+        flex-grow: 8;
         margin-left: 1rem;
         position: relative;
     }
     .watcher-avatar {
-        @include table-flex-child(1, 0);
+        flex-grow: 1;
     }
     .icon-delete {
         opacity: 0;
diff --git a/app/styles/dependencies/helpers.scss b/app/styles/dependencies/helpers.scss
index 1fafbc13..c3acdd91 100644
--- a/app/styles/dependencies/helpers.scss
+++ b/app/styles/dependencies/helpers.scss
@@ -1,21 +1,3 @@
-//Flexbox FTW
-%table-flex {
-    align-content: stretch;
-    align-items: stretch;
-    display: flex;
-    flex-direction: row;
-    flex-wrap: wrap;
-    justify-content: flex-start;
-}
-
-%table-flex-child {
-    flex-basis: 300px;
-    flex-grow: 1;
-    flex-shrink: 0;
-    width: 300px;
-}
-
-
 // __Font Sizes__ //
 %xsmall {font-size: .5rem;}
 %small {font-size: .8rem;}
@@ -48,7 +30,10 @@
         top: 2rem;
     }
     &.open {
-        @include table-flex(center, center, flex, row, wrap, center);
+        align-content: center;
+        align-items: center;
+        display: flex;
+        justify-content: center;
         opacity: 1;
         transition: opacity .3s ease;
     }
diff --git a/app/styles/dependencies/mixins.scss b/app/styles/dependencies/mixins.scss
index 88ebfaf3..81e547d2 100644
--- a/app/styles/dependencies/mixins.scss
+++ b/app/styles/dependencies/mixins.scss
@@ -5,26 +5,6 @@
     text-overflow: ellipsis;
 }
 
-// Table Flex - http://devbryce.com/site/flexbox/
-@mixin table-flex($align-content: stretch, $align-items: stretch, $display: flex, $flex-direction: row, $flex-wrap: wrap, $justify-content: flex-start) {
-    align-content: $align-content; //flex-start | flex-end | center | space-between | space-around | stretch
-    align-items: $align-items; //flex-start | flex-end | center | baseline | stretch
-    display: $display;
-    flex-direction: $flex-direction; //row | row-reverse | column | column-reverse
-    flex-wrap: $flex-wrap; //nowrap | wrap | wrap-reverse
-    justify-content: $justify-content; //flex-start | flex-end | center | space-between | space-around
-}
-
-@mixin table-flex-child($flex-grow: 1, $flex-basis: 300px, $flex-shrink: 0, $width:'') {
-    flex: $flex-grow;
-    flex-basis: $flex-basis;
-    flex-shrink: $flex-shrink;
-    width: $flex-basis;
-    @if #{$width} != null {
-        width: #{$width};
-    }
-}
-
 @mixin box-shadow($h-shadow: 1px, $v-shadow: 1px, $blur: 15px, $spread: 6px, $color: rgba(0, 0, 0, .1)) {
     box-shadow: $h-shadow $v-shadow $blur $spread $color;
 }
diff --git a/app/styles/layout/base.scss b/app/styles/layout/base.scss
index 10bd471e..0d7743c5 100644
--- a/app/styles/layout/base.scss
+++ b/app/styles/layout/base.scss
@@ -7,10 +7,7 @@ body {
     @extend %text;
     background: #fff; // fallback
     color: #444;
-    -webkit-font-smoothing: antialiased; // Fix for webkit renderin
     min-height: 100%;
-    -ms-text-size-adjust: 100%;
-    -webkit-text-size-adjust: 100%;
     width: 100%;
     .master {
         transition: transform 1s ease;
diff --git a/app/styles/layout/invitation.scss b/app/styles/layout/invitation.scss
index 84e81040..a72730bb 100644
--- a/app/styles/layout/invitation.scss
+++ b/app/styles/layout/invitation.scss
@@ -1,14 +1,18 @@
 .invitation-main {
     @extend %background-taiga;
-    @include table-flex(center, center, flex, row, wrap, center);
+    align-content: center;
+    align-items: center;
     bottom: 0;
+    justify-content: center;
     left: 0;
     position: fixed;
     right: 0;
     top: 0;
     z-index: 999;
     .invitation-container {
-        @include table-flex-child(0, 650px, 0, 650px);
+        flex-basis: 650px;
+        flex-grow: 1;
+        width: 650px;
     }
     .logo {
         margin: 1rem auto;
@@ -43,7 +47,7 @@
         }
     }
     .invitation-form {
-        @include table-flex();
+        display: flex;
         fieldset {
             margin-bottom: .5rem;
         }
@@ -90,9 +94,11 @@
     }
     .login-form,
     .register-form {
-        @include table-flex-child(1, 200px, 0, 200px);
+        flex-basis: 200px;
+        flex-grow: 1;
         padding: 1rem;
         text-align: center;
+        width: 200px;
         .form-header {
             color: #999;
         }
diff --git a/app/styles/layout/login.scss b/app/styles/layout/login.scss
index 84f164ee..95c61fff 100644
--- a/app/styles/layout/login.scss
+++ b/app/styles/layout/login.scss
@@ -1,6 +1,5 @@
 .login-main {
     @extend %triangled-bg;
-    //@include table-flex(center, center, flex, row, wrap, center);
     align-items: center;
     bottom: 0;
     display: flex;
diff --git a/app/styles/layout/us-detail.scss b/app/styles/layout/us-detail.scss
index bc0897d6..706e6e53 100644
--- a/app/styles/layout/us-detail.scss
+++ b/app/styles/layout/us-detail.scss
@@ -20,48 +20,53 @@
             .us-name,
             .us-related-task {
                 color: $white;
-                a {
-                    color: $white;
-                    transition: color .3s linear;
-                    &:hover {
-                        color: $red-light;
-                    }
-                }
+            }
+            a {
+                color: $white;
+                transition: color .3s linear;
+            }
+            a:hover {
+                color: $red-light;
             }
             .unblock {
                 @extend %bold;
                 color: $white;
                 float: right;
-                &:hover {
-                    color: $red-light;
-                    transition: color .3s linear;
-                }
             }
-            .issue-nav {
-                a {
-                    color: $white;
-                }
+            .unblock:hover {
+                color: $red-light;
+                transition: color .3s linear;
             }
         }
         p {
             margin-bottom: 0;
         }
         .us-edit-name-inner {
-            @include table-flex();
+            display: flex;
+        }
+        .edit-subject {
+            align-content: center;
+            align-items: center;
+            display: flex;
         }
         input {
-            @include table-flex-child(1, 90%, 0);
             background: $white;
+            flex-grow: 9;
+        }
+        .save-container {
+            flex-grow: 1;
         }
         .us-title-text {
+            align-content: center;
+            align-items: center;
             display: flex;
             margin-bottom: 0;
             max-width: 94%;
-            &:hover {
-                .icon-edit {
-                    opacity: 1;
-                    transition: opacity .3s linear;
-                }
+        }
+        .us-title-text:hover {
+            .icon-edit {
+                opacity: 1;
+                transition: opacity .3s linear;
             }
         }
         .us-number {
@@ -98,12 +103,12 @@
                 border-left: 1px solid $gray-light;
                 padding: 0 .2rem;
                 transition: color .3s linear;
-                &:hover {
-                    color: $green-taiga;
-                }
-                &:first-child {
-                    border: 0;
-                }
+            }
+            a:hover {
+                color: $green-taiga;
+            }
+            a:first-child {
+                border: 0;
             }
         }
         .block-desc-container {
@@ -162,9 +167,9 @@
             .editable {
                 background: $whitish;
                 cursor: pointer;
-                .no-description {
-                    color: $grayer;
-                }
+            }
+            .no-description {
+                color: $grayer;
             }
         }
     }
@@ -252,17 +257,19 @@
 }
 
 .points-per-role {
-    @include table-flex();
+    display: flex;
     position: relative;
     > li {
-        @include table-flex-child(1, 18%, 0);
         border-right: 1px solid rgba($grayer, .3);
         color: rgba($grayer, .3);
         display: inline-block;
+        flex-basis: 18%;
+        flex-grow: 1;
         margin: .5rem .1rem;
         position: relative;
         text-align: center;
         transition: color .3s linear;
+        width: 18%;
         &.active {
             color: rgba($green-taiga, 1);
         }
diff --git a/app/styles/modules/admin/admin-functionalities.scss b/app/styles/modules/admin/admin-functionalities.scss
index ec73d682..93e1e2e0 100644
--- a/app/styles/modules/admin/admin-functionalities.scss
+++ b/app/styles/modules/admin/admin-functionalities.scss
@@ -2,37 +2,36 @@
     form {
         display: flex;
         flex-wrap: wrap;
-        width: 100%;
     }
     .functionality {
-        @include table-flex(center, center, flex, column, wrap, center);
+        align-content: center;
+        align-items: center;
         background-color: $whitish;
-        display: inline-block;
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
         margin-bottom: .3rem;
         margin-right: .3rem;
-        min-height: 14px;
         opacity: .5;
         padding: 1rem;
         position: relative;
         transition: all .2s linear;
         vertical-align: top;
         width: 32%;
-        &:nth-child(3n+1) {
-            margin-right: 0;
-        }
         &.active {
             background-color: #e9f0da;
             opacity: 1;
         }
         .icon {
             @extend %xxlarge;
-            @include table-flex-child(1, 120px, 0, 100%);
+            flex-basis: 60px;
+            flex-grow: 1;
             margin: 0 auto;
             min-height: 60px;
-            text-align: center;
         }
         .desc {
-            @include table-flex-child(1 , 0, 0, 100%);
+            flex-grow: 1;
+            text-align: center;
         }
         .activate-input {
             display: none;
@@ -44,11 +43,8 @@
             }
         }
         span {
-            font-weight: bold;
-        }
-        p {
-            margin-bottom: 1rem;
-            min-height: 4.5rem;
+            @extend %bold;
+            display: block;
         }
         select {
             margin-top: 1rem;
diff --git a/app/styles/modules/admin/admin-membership-table.scss b/app/styles/modules/admin/admin-membership-table.scss
index be6c7557..0b296195 100644
--- a/app/styles/modules/admin/admin-membership-table.scss
+++ b/app/styles/modules/admin/admin-membership-table.scss
@@ -3,7 +3,9 @@
         @extend %bold;
     }
     .avatar {
-        @include table-flex(stretch, center, flex, row, wrap, flex-start);
+        align-items: center;
+        display: flex;
+        justify-content: flex-start;
         figcaption {
             margin-left: 1rem;
             width: 75%;
@@ -15,7 +17,8 @@
             }
         }
         img {
-            @include table-flex-child(1, 35px, 0);
+            flex-basis: 35px;
+            flex-grow: 1;
             max-width: 35px;
         }
         .name,
@@ -38,7 +41,9 @@
         padding-right: 1rem;
     }
     .row-status {
-        @include table-flex($justify-content: space-between, $align-items: center);
+        align-items: center;
+        display: flex;
+        justify-content: space-between;
     }
     .active,
     .pending {
@@ -78,17 +83,20 @@
     .row-role,
     .header-member,
     .header-role {
-        @include table-flex-child(3, 0, 0);
+        flex-basis: 210px;
+        flex-grow: 3;
         min-width: 210px;
     }
     .row-admin,
     .header-admin {
-        @include table-flex-child(1, 0, 0);
+        flex-basis: 0;
+        flex-grow: 1;
         min-width: 70px;
     }
     .row-status,
     .header-status {
-        @include table-flex-child(1, 50px, 0);
+        flex-basis: 50px;
+        flex-grow: 1;
     }
     .check {
         background-color: darken($whitish, 10%);
@@ -98,7 +106,7 @@
         overflow: hidden;
         position: relative;
         width: 65px;
-        input[type=checkbox] {
+        input {
             cursor: pointer;
             height: 500px;
             left: -10px;
@@ -129,7 +137,7 @@
                 opacity: .6;
             }
         }
-        input[type=checkbox]:checked {
+        input:checked {
             + div {
                 background-color: #74a218;
                 margin-left: 50%;
diff --git a/app/styles/modules/admin/admin-project-profile.scss b/app/styles/modules/admin/admin-project-profile.scss
index 92503a12..01049811 100644
--- a/app/styles/modules/admin/admin-project-profile.scss
+++ b/app/styles/modules/admin/admin-project-profile.scss
@@ -3,7 +3,7 @@
         max-width: 700px;
         width: 100%;
     }
-    input[type="text"],
+    input,
     textarea {
         @extend %title;
     }
@@ -19,10 +19,11 @@
         height: 10rem;
     }
     .privacy-settings {
-        @include table-flex();
+        display: flex;
         margin-bottom: 2rem;
         div {
-            @include table-flex-child(1, 0, 0, 40%);
+            flex-basis: 0;
+            flex-grow: 1;
             &:first-child {
                 margin-right: .5rem;
             }
@@ -36,11 +37,9 @@
             text-align: center;
         }
         input {
-            &:checked {
-                +label {
-                    background: $fresh-taiga;
-                    color: $white;
-                }
+            &:checked+label {
+                background: $fresh-taiga;
+                color: $white;
             }
         }
     }
diff --git a/app/styles/modules/admin/admin-roles.scss b/app/styles/modules/admin/admin-roles.scss
index 757e4f23..12814b17 100644
--- a/app/styles/modules/admin/admin-roles.scss
+++ b/app/styles/modules/admin/admin-roles.scss
@@ -13,7 +13,7 @@
         transition: opacity .3s linear;
     }
     .edit-role {
-        @include table-flex(stretch, left, center, row, wrap);
+        align-items: left;
         background-color: $whitish;
         display: none;
         margin-bottom: 1rem;
@@ -55,7 +55,7 @@
         overflow: hidden;
         position: relative;
         width: 65px;
-        input[type=checkbox] {
+        input {
             cursor: pointer;
             height: 500px;
             left: -10px;
@@ -86,7 +86,7 @@
                 opacity: .6;
             }
         }
-        input[type=checkbox]:checked {
+        input:checked {
             + div {
                 background-color: #74a218;
                 margin-left: 50%;
diff --git a/app/styles/modules/admin/project-values.scss b/app/styles/modules/admin/project-values.scss
index 5504d08d..9f96b6ee 100644
--- a/app/styles/modules/admin/project-values.scss
+++ b/app/styles/modules/admin/project-values.scss
@@ -1,6 +1,8 @@
 .project-values-row {
-    @include table-flex(stretch, center, flex, row, wrap, center);
+    align-items: center;
     border-bottom: 1px solid $whitish;
+    display: flex;
+    justify-content: center;
     padding: 1rem;
     div {
         margin-left: 1rem;
@@ -36,10 +38,12 @@
 }
 
 .project-values-name {
-    @include table-flex-child(3, 0, 0);
+    flex-basis: 0;
+    flex-grow: 3;
 }
 .project-values-value {
-    @include table-flex-child(1, 0, 0);
+    flex-basis: 0;
+    flex-grow: 1;
     .checksley-error-list {
         left: 0;
         right: auto;
@@ -50,7 +54,8 @@
 
 .project-values-isclosed,
 .project-values-settings {
-    @include table-flex-child(1, 0, 0);
+    flex-basis: 0;
+    flex-grow: 1;
     text-align: right;
 }
 
diff --git a/app/styles/modules/admin/third-parties.scss b/app/styles/modules/admin/third-parties.scss
index 5cb815cc..0c3608c7 100644
--- a/app/styles/modules/admin/third-parties.scss
+++ b/app/styles/modules/admin/third-parties.scss
@@ -4,7 +4,7 @@
         max-width: 700px;
         width: 100%;
     }
-    input[type="text"],
+    input,
     textarea {
         @extend %title;
     }
diff --git a/app/styles/modules/backlog/backlog-table.scss b/app/styles/modules/backlog/backlog-table.scss
index 3fe6fdc0..88a90387 100644
--- a/app/styles/modules/backlog/backlog-table.scss
+++ b/app/styles/modules/backlog/backlog-table.scss
@@ -1,6 +1,7 @@
 .backlog-table-header,
 .backlog-table-body {
-    @include table-flex();
+    display: flex;
+    flex-direction: column;
     width: 100%;
     &.show-tags {
         .tags-block {
@@ -9,8 +10,8 @@
     }
     .row {
         @extend %small;
-        @include table-flex();
         border-bottom: 1px solid $gray-light;
+        display: flex;
         padding: .5rem 0 .5rem .5rem;
         text-align: left;
         width: 100%;
@@ -26,10 +27,12 @@
 
         }
         .status {
-            @include table-flex-child(0, 150px, 0);
+            flex-basis: 150px;
+            flex-grow: 0;
         }
         .points {
-            @include table-flex-child(0, 125px, 0);
+            flex-basis: 125px;
+            flex-grow: 0;
         }
 
     }
@@ -136,11 +139,9 @@
             transition: background .2s ease-in;
         }
         .points {
-            .not-clickable {
-                &:hover {
-                    color: $black;
-                    cursor: text;
-                }
+            .not-clickable:hover {
+                color: $black;
+                cursor: text;
             }
         }
     }
@@ -149,16 +150,15 @@
         transition: background .2s ease-in;
     }
     .user-story-name {
-        @include table-flex($flex-wrap: nowrap);
+        display: flex;
+        flex-wrap: nowrap;
         input {
             flex-shrink: 0;
             margin-right: 1rem;
             vertical-align: super;
-            &:checked {
-                +a {
-                    color: $fresh-taiga;
-                    transition: color .2s ease-in;
-                }
+            &:checked+a {
+                color: $fresh-taiga;
+                transition: color .2s ease-in;
             }
         }
         a {
diff --git a/app/styles/modules/backlog/sprints.scss b/app/styles/modules/backlog/sprints.scss
index 6df29f09..da706f1e 100644
--- a/app/styles/modules/backlog/sprints.scss
+++ b/app/styles/modules/backlog/sprints.scss
@@ -90,16 +90,16 @@
             margin-top: 5px;
         }
         .sprint-summary {
-            @include table-flex();
+            display: flex;
         }
         .sprint-date {
             @extend %large;
             @extend %title;
-            @include table-flex-child(1, 0, 0);
             color: $gray-light;
+            flex-flow: 1;
         }
         .sprint-points {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
         }
         ul {
             float: right;
@@ -132,8 +132,8 @@
     }
     .sprint-table {
         .row {
-            @include table-flex();
             border-bottom: 1px solid $gray-light;
+            display: flex;
             padding: .5em 0;
             text-align: left;
             width: 100%;
@@ -158,7 +158,7 @@
         }
         .column-us {
             @extend %small;
-            @include table-flex-child(3, 0, 0);
+            flex-flow: 3;
             padding: 0 4px;
         }
         .us-name {
@@ -172,7 +172,7 @@
             }
         }
         .column-points {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 0 4px;
             text-align: right;
             &.closed {
diff --git a/app/styles/modules/backlog/taskboard-table.scss b/app/styles/modules/backlog/taskboard-table.scss
index 5bcca330..45d8099b 100644
--- a/app/styles/modules/backlog/taskboard-table.scss
+++ b/app/styles/modules/backlog/taskboard-table.scss
@@ -1,7 +1,7 @@
 //Table basic shared vars
 
 $column-width: 300px;
-$column-flex: 0;
+$column-flex: 1;
 $column-shrink: 0;
 $column-margin: 0 10px 0 0;
 
@@ -31,8 +31,9 @@ $column-margin: 0 10px 0 0;
     }
     &.task-column,
     .task-column {
-        @include table-flex(flex-start);
-        flex-direction: row;
+        align-content: flex-start;
+        display: flex;
+        flex-direction: column;
     }
     .avatar-task-link {
         display: block;
@@ -52,16 +53,18 @@ $column-margin: 0 10px 0 0;
     position: relative;
     width: 100%;
     .taskboard-table-inner {
-        @include table-flex();
+        display: flex;
         overflow: hidden;
         position: absolute;
     }
     .task-colum-name {
         @extend %large;
-        @include table-flex();
         background: $whitish;
         border-top: 3px solid $gray-light;
-        flex: auto 0 auto;
+        display: flex;
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
         justify-content: space-between;
         margin: $column-margin;
         max-width: $column-width;
@@ -93,11 +96,9 @@ $column-margin: 0 10px 0 0;
             span {
                 display: none;
             }
-            .icon {
-                &.hfold,
-                &.hunfold {
-                    margin: 0;
-                }
+            .hfold,
+            .hunfold {
+                margin: 0;
             }
         }
     }
@@ -109,7 +110,9 @@ $column-margin: 0 10px 0 0;
     overflow-y: scroll;
     width: 100%;
     .task-column {
-        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
         margin: $column-margin;
         max-width: $column-width;
         width: $column-width;
@@ -128,7 +131,7 @@ $column-margin: 0 10px 0 0;
         }
     }
     .task-row {
-        @include table-flex();
+        display: flex;
         margin-bottom: .5rem;
         min-height: 10rem;
         width: 100%;
@@ -142,15 +145,16 @@ $column-margin: 0 10px 0 0;
             .taskboard-userstory-box {
                 background: rgba($red, .6);
                 border-radius: 3px;
-                a,
-                .points-value {
-                    color: rgba($white, .9);
-                    transition: color .3s linear;
-                    &:hover {
-                        color: rgba($white, 1);
-                        transition: color .3s linear;
-                    }
-                }
+            }
+            a,
+            .points-value {
+                color: rgba($white, .9);
+                transition: color .3s linear;
+            }
+            a:hover,
+            .points-value:hover {
+                color: rgba($white, 1);
+                transition: color .3s linear;
             }
             .taskboard-tasks-box {
                 background: rgba($red, .1);
@@ -158,15 +162,13 @@ $column-margin: 0 10px 0 0;
         }
         &.row-fold {
             min-height: 0;
-            .taskboard-userstory-box {
-                .us-title {
-                    @include ellipsis(100%);
-                }
-                .points-value,
-                .icon-plus,
-                .icon-bulk {
-                    display: none;
-                }
+            .us-title {
+                @include ellipsis(100%);
+            }
+            .points-value,
+            .icon-plus,
+            .icon-bulk {
+                display: none;
             }
         }
     }
diff --git a/app/styles/modules/common/assigned-to.scss b/app/styles/modules/common/assigned-to.scss
index 2b1f2085..d1185798 100644
--- a/app/styles/modules/common/assigned-to.scss
+++ b/app/styles/modules/common/assigned-to.scss
@@ -1,5 +1,5 @@
 .duty-assigned-to {
-    @include table-flex();
+    display: flex;
     margin-top: 1rem;
     position: relative;
     &:hover {
@@ -22,14 +22,14 @@
         }
     }
     .user-avatar {
-        @include table-flex-child(1, 0);
+        flex-grow: 1;
         img {
             border-radius: 8%;
             width: 100%;
         }
     }
     .assigned-to {
-        @include table-flex-child(3, 0);
+        flex-grow: 3;
         margin-left: 1rem;
         margin-top: 15px;
         .assigned-title {
diff --git a/app/styles/modules/common/attachments.scss b/app/styles/modules/common/attachments.scss
index e14a2eda..f5cfac80 100644
--- a/app/styles/modules/common/attachments.scss
+++ b/app/styles/modules/common/attachments.scss
@@ -3,8 +3,11 @@
 }
 
 .attachments-header {
-    @include table-flex(space-between, center, flex, row, wrap, space-between);
+    align-content: space-between;
+    align-items: center;
     background: $whitish;
+    display: flex;
+    justify-content: space-between;
     padding: .5rem 1rem;
     .attachments-title {
         @extend %medium;
@@ -28,9 +31,9 @@
 
 .single-attachment {
     @extend %small;
-    @include table-flex();
     align-items: center;
     border-bottom: 1px solid $whitish;
+    display: flex;
     padding: .5rem 0 .5rem 1rem;
     position: relative;
     &:hover {
@@ -59,25 +62,33 @@
     .attachment-name {
         @extend %bold;
         @include ellipsis(200px);
-        @include table-flex-child(1, 35%, 0);
+        flex-basis: 35%;
+        flex-grow: 1;
         padding-right: 1rem;
         .icon {
             margin-right: .5rem;
         }
     }
     .attachment-size {
-        @include table-flex-child(1, 15%, 0);
         color: $gray-light;
+        flex-basis: 15%;
+        flex-grow: 1;
         margin-right: .5rem;
     }
-    .attachment-comments {
-        @include table-flex-child(1, 35%, 0);
+    .attachment-comments,
+    .editable-attachment-comment {
+        flex-basis: 35%;
+        flex-grow: 1;
         span {
             color: $gray;
         }
     }
+    .editable-attachment-comment {
+        @extend %medium;
+    }
     .attachment-settings {
-        @include table-flex-child(1, 15%, 0);
+        flex-basis: 15%;
+        flex-grow: 1;
         .settings,
         .editable-settings {
             @extend %large;
@@ -123,13 +134,11 @@
         span {
             color: $gray-light;
         }
-        input[type="checkbox"] {
+        input {
             margin-right: .2rem;
             vertical-align: middle;
-            &:checked {
-                + span {
-                    color: $grayer;
-                }
+            &:checked+span {
+                color: $grayer;
             }
         }
     }
diff --git a/app/styles/modules/common/colors-table.scss b/app/styles/modules/common/colors-table.scss
index c1594d54..630c3c0d 100644
--- a/app/styles/modules/common/colors-table.scss
+++ b/app/styles/modules/common/colors-table.scss
@@ -11,7 +11,9 @@
         }
     }
     .row {
-        @include table-flex(stretch, center, flex, row, wrap, center);
+        align-items: center;
+        display: flex;
+        justify-content: center;
         padding: 1rem;
         &:hover {
             .options-column {
@@ -32,7 +34,8 @@
             }
         }
         .color-column {
-            @include table-flex-child(1, 60px, 0);
+            flex-basis: 60px;
+            flex-grow: 1;
             max-width: 100px;
             position: relative;
         }
@@ -40,10 +43,12 @@
         .is-closed-column,
         .options-column,
         .status-wip-limit {
-            @include table-flex-child(1, 100px, 0);
+            flex-basis: 100px;
+            flex-grow: 1;
         }
         .status-name {
-            @include table-flex-child(6, 150px, 0);
+            flex-basis: 150px;
+            flex-grow: 6;
             padding: 0 10px;
             position: relative;
             span {
@@ -52,7 +57,8 @@
             }
         }
         .status-slug {
-            @include table-flex-child(6, 150px, 0);
+            flex-basis: 150px;
+            flex-grow: 6;
             padding: 0 10px;
         }
         .options-column {
diff --git a/app/styles/modules/common/history.scss b/app/styles/modules/common/history.scss
index b2c7bb33..1cfc957d 100644
--- a/app/styles/modules/common/history.scss
+++ b/app/styles/modules/common/history.scss
@@ -19,15 +19,16 @@
     }
 }
 .change-entry {
-    @include table-flex;
     border-bottom: 1px solid $gray-light;
+    display: flex;
     padding: .5rem;
     &:last-child {
         border-bottom: 0;
     }
     .activity-changed,
     .activity-fromto {
-        @include table-flex-child(1, 50px, 0);
+        flex-basis: 50px;
+        flex-grow: 1;
     }
     .activity-changed {
         @extend %bold;
@@ -108,7 +109,7 @@
         opacity: 0;
     }
 }
-a.show-more-comments {
+.show-more-comments {
     @extend %small;
     border-bottom: 1px solid $gray-light;
     border-top: 1px solid $gray-light;
@@ -148,8 +149,8 @@ a.show-more-comments {
     }
 }
 .activity-single {
-    @include table-flex;
     border-bottom: 1px solid $gray-light;
+    display: flex;
     padding: 2rem 0;
     position: relative;
     &:hover {
@@ -212,7 +213,8 @@ a.show-more-comments {
         margin-bottom: .5rem;
     }
     .activity-user {
-        @include table-flex-child(1, 50px, 0);
+        flex-basis: 50px;
+        flex-grow: 1;
         img {
             max-width: 70px;
             width: 100%;
@@ -224,7 +226,8 @@ a.show-more-comments {
     }
 
     .activity-content {
-        @include table-flex-child(20, 150px, 0);
+        flex-basis: 150px;
+        flex-grow: 20;
     }
     .changes {
         background: $whitish;
diff --git a/app/styles/modules/common/lightbox.scss b/app/styles/modules/common/lightbox.scss
index 3038993f..aaa93e6f 100644
--- a/app/styles/modules/common/lightbox.scss
+++ b/app/styles/modules/common/lightbox.scss
@@ -25,7 +25,9 @@
 
 .lightbox-generic-form {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        max-width: 600px;
     }
 
     fieldset {
@@ -58,11 +60,15 @@
     }
 
     .settings {
-        @include table-flex(flex-start, stretch, flex, row, wrap, flex-start);
+        align-content: flex-start;
+        align-items: stretch;
+        display: flex;
+        justify-content: flex-start;
         margin-bottom: 1rem;
 
         fieldset {
-            @include table-flex-child(1, 30%, 0);
+            flex-basis: 30%;
+            flex-grow: 1;
             margin-right: .5rem;
             text-align: center;
             &:last-child {
@@ -94,28 +100,20 @@
         .client-requirement,
         .team-requirement,
         .iocaine-flag {
-            input {
-                &:checked {
-                    +label {
-                        background: $fresh-taiga;
-                        color: $white;
-                    }
-                }
+            input:checked+label {
+                background: $fresh-taiga;
+                color: $white;
             }
         }
 
         .blocking-flag {
-            input {
-                &:checked {
-                    +label {
-                        background: $red;
-                        color: $white;
-                    }
-                }
+            input:checked+label {
+                background: $red;
+                color: $white;
             }
         }
 
-        input[type="checkbox"] {
+        input {
             display: none;
         }
     }
@@ -128,7 +126,9 @@
 
 .lightbox-generic-bulk {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        max-width: 600px;
     }
     textarea {
         margin-bottom: 1rem;
@@ -139,7 +139,9 @@
 
 .lightbox-search {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        max-width: 600px;
     }
     input {
         margin-bottom: 1rem;
@@ -148,7 +150,7 @@
 
 .lightbox-add-member {
     .add-member-wrapper {
-        @include table-flex();
+        display: flex;
         margin-bottom: .5rem;
         &:last-child {
             margin-bottom: 0;
@@ -156,10 +158,12 @@
         fieldset {
             position: relative;
             &:first-child {
-                @include table-flex-child(3, 400px);
+                flex-basis: 400px;
+                flex-grow: 3;
             }
             &:last-child {
-                @include table-flex-child(1, 200px);
+                flex-basis: 200px;
+                flex-grow: 1;
                 margin-left: .5rem;
             }
         }
@@ -167,7 +171,7 @@
     .extra-text {
         margin-top: 1rem;
     }
-    input[type=email],
+    input,
     select {
         margin-bottom: 0;
     }
@@ -203,7 +207,9 @@
 
 .lightbox-sprint-add-edit {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-flow: 0;
+        max-width: 600px;
     }
     .last-sprint-name {
         color: $gray;
@@ -250,7 +256,9 @@
 
 .lightbox-generic-ask {
     form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-flow: 0;
+        max-width: 420px;
     }
     .subtitle,
     .message {
@@ -263,9 +271,9 @@
         @extend %title;
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -278,7 +286,8 @@
 .lightbox-ask-choice {
     text-align: center;
     form {
-        @include table-flex-child(0, 420px, 0);
+        flex-basis: 420px;
+        flex-grow: 0;
     }
     .question,
     .subtitle {
@@ -297,9 +306,9 @@
         }
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -311,7 +320,9 @@
 
 .lightbox-delete-account {
     form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     .question,
     .subtitle {
@@ -335,9 +346,9 @@
         }
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -349,7 +360,9 @@
 
 .lightbox-delete-project {
     form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     .question,
     .subtitle {
@@ -362,9 +375,9 @@
         @extend %title;
     }
     .options {
-        @include table-flex();
+        display: flex;
         a {
-            @include table-flex-child(1, 0, 0);
+            flex-grow: 1;
             padding: 8px 0;
             text-align: center;
             &:first-child {
@@ -378,7 +391,9 @@
 .lightbox-generic-success,
 .lightbox-generic-error {
     section {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     h2 {
         line-height: 2rem;
@@ -387,14 +402,18 @@
 
 .lightbox-create-issue {
     form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        width: 600px;
     }
 
     .fieldset-row {
-        @include table-flex();
+        display: flex;
         fieldset {
-            @include table-flex-child(1, 100px, 0, 30%);
+            flex-basis: 100px;
+            flex-grow: 1;
             margin-right: .5rem;
+            width: 30%;
             &:last-child {
                 margin: 0;
             }
@@ -410,7 +429,9 @@
 
 .lightbox-block {
     .form {
-        @include table-flex-child(0, 420px, 0, 420px);
+        flex-basis: 420px;
+        flex-grow: 0;
+        width: 420px;
     }
     textarea {
         margin-bottom: 1rem;
@@ -421,14 +442,16 @@
 
 .lightbox-select-user {
     .form {
-        @include table-flex-child(0, 600px, 0, 600px);
+        flex-basis: 600px;
+        flex-grow: 0;
+        width: 600px;
     }
     .watchers {
         margin-top: 1rem;
         min-height: 440px;
 
         .watcher-name {
-            @include table-flex-child(12, 0);
+            flex-grow: 12;
         }
     }
     .watcher-single {
diff --git a/app/styles/modules/common/related-tasks.scss b/app/styles/modules/common/related-tasks.scss
index 89a5d168..8e794345 100644
--- a/app/styles/modules/common/related-tasks.scss
+++ b/app/styles/modules/common/related-tasks.scss
@@ -4,8 +4,11 @@
 }
 
 .related-tasks-header {
-    @include table-flex(space-between, center, flex, row, wrap, space-between);
+    align-content: space-between;
+    align-items: center;
     background: $whitish;
+    display: flex;
+    justify-content: space-between;
     padding: .5rem 1rem;
     .related-tasks-title {
         @extend %medium;
@@ -26,8 +29,11 @@
     width: 100%;
     .row {
         @extend %small;
-        @include table-flex(center, center, flex, row, wrap, center);
+        align-content: center;
+        align-items: center;
         border-bottom: 1px solid $whitish;
+        display: flex;
+        justify-content: center;
         padding: .5rem 0 .5rem .5rem;
         position: relative;
         text-align: left;
@@ -43,13 +49,14 @@
             border: 0;
         }
         .tasks {
-            @include table-flex-child(10, 78%, 0);
+            flex-basis: 78%;
+            flex-grow: 10;
         }
         .status {
-            @include table-flex-child(0, 10%, 0);
+            flex-basis: 10%;
         }
         .assigned-to {
-            @include table-flex-child(0, 10%, 0);
+            flex-basis: 10%;
         }
     }
     .related-task-create-form {
@@ -106,6 +113,7 @@
             white-space: nowrap;
         }
         input {
+            @extend %medium;
             margin-right: 1rem;
             padding: 3px;
             width: 85%;
@@ -116,8 +124,7 @@
             text-align: center;
             width: 100%;
             span {
-                animation: loading .5s linear;
-                animation: spin 1s linear infinite;
+                animation: loading .5s linear, spin 1s linear infinite;
             }
         }
     }
@@ -202,7 +209,7 @@
         display: flex;
         img {
             flex-basis: 35px;
-            /* width & height they are only required for IE */
+            // width & height they are only required for IE
             height: 35px;
             width: 35px;
         }
diff --git a/app/styles/modules/common/wizard.scss b/app/styles/modules/common/wizard.scss
index bc2df2e4..b06d7a29 100644
--- a/app/styles/modules/common/wizard.scss
+++ b/app/styles/modules/common/wizard.scss
@@ -42,9 +42,7 @@
         &.active {
             animation: formSlide .4s ease-in-out;
             &.create-step2,
-            &.create-step3 {
-                @include table-flex();
-            }
+            &.create-step3,
             &.create-step1 {
                 display: block;
             }
@@ -52,12 +50,13 @@
     }
     .wizard-action {
         div {
-            @include table-flex();
+            display: flex;
         }
         a {
-            @include table-flex-child(1, 40%, 0);
             color: $white;
             display: inline-block;
+            flex-basis: 40%;
+            flex-grow: 1;
             &:first-child {
                 margin-right: .5rem;
             }
@@ -65,38 +64,38 @@
     }
     .create-step1 {
         .template-inner {
-            @include table-flex();
-            fieldset {
-                @include table-flex-child(1, 0, 0);
-                &:first-child {
-                    margin-right: .5rem;
-                }
+            display: flex;
+        }
+        fieldset {
+            flex-grow: 1;
+            &:first-child {
+                margin-right: .5rem;
             }
         }
-        input[type="radio"] {
+        input {
             display: none;
-            &:checked {
-                +label {
-                    background: rgba($fresh-taiga, .7);
-                    transition: background .3s ease-in;
-                }
-            }
+        }
+        input:checked {
             +label {
-                background: rgba($whitish, .7);
-                cursor: pointer;
-                display: block;
-                margin-bottom: 1rem;
-                padding: 1rem;
-                text-align: center;
+                background: rgba($fresh-taiga, .7);
                 transition: background .3s ease-in;
-                &:hover {
-                    background: rgba($green-taiga, .7);
-                    transition: background .3s ease-in;
-                }
-                .icon {
-                    @extend %xxlarge;
-                    color: $white;
-                }
+            }
+        }
+        input+label {
+            background: rgba($whitish, .7);
+            cursor: pointer;
+            display: block;
+            margin-bottom: 1rem;
+            padding: 1rem;
+            text-align: center;
+            transition: background .3s ease-in;
+            &:hover {
+                background: rgba($green-taiga, .7);
+                transition: background .3s ease-in;
+            }
+            .icon {
+                @extend %xxlarge;
+                color: $white;
             }
         }
         h2 {
@@ -115,39 +114,36 @@
         left: 0;
         position: absolute;
         width: 100%;
-        &.step1 {
-            .bar {
-                transition: width .6s ease-in-out;
-                width: 25%;
-            }
-            .progress-state {
-                span {
-                    &:nth-child(1) {
-                        color: rgba($white, 1);
-                        transition: color .3s ease-in-out;
-                        transition-delay: .6s;
-                    }
-                }
-            }
+    }
+    .step1 {
+        .bar {
+            transition: width .6s ease-in-out;
+            width: 25%;
         }
-        &.step2 {
-            .bar {
-                transition: width .6s ease-in-out;
-                // width: 50%;
-                width: 75%;
-            }
-            .progress-state {
-                span {
-                    &:nth-child(1),
-                    &:nth-child(2) {
-                        color: rgba($white, 1);
-                        transition: color .3s ease-in-out;
-                        transition-delay: .6s;
-                    }
-                }
+        .progress-state {
+            span:nth-child(1) {
+                color: rgba($white, 1);
+                transition: color .3s ease-in-out;
+                transition-delay: .6s;
             }
         }
     }
+    .step2 {
+        .bar {
+            transition: width .6s ease-in-out;
+            // width: 50%;
+            width: 75%;
+        }
+        .progress-state {
+            span:nth-child(1),
+            span:nth-child(2) {
+                color: rgba($white, 1);
+                transition: color .3s ease-in-out;
+                transition-delay: .6s;
+            }
+        }
+    }
+
     .progress-state {
         position: absolute;
         width: 100%;
diff --git a/app/styles/modules/create-project.scss b/app/styles/modules/create-project.scss
index 3493b97a..c3a8b5e6 100644
--- a/app/styles/modules/create-project.scss
+++ b/app/styles/modules/create-project.scss
@@ -1,7 +1,9 @@
 .create-project {
     @extend %triangled-bg;
-    @include table-flex(center, center, flex, row, wrap, center);
+    align-content: center;
+    align-items: center;
     bottom: 0;
+    justify-content: center;
     left: 0;
     position: fixed;
     right: 0;
@@ -11,7 +13,8 @@
         margin-bottom: 1rem;
     }
     .create-project-container {
-        @include table-flex-child(0, 400px, 0, 400px);
+        flex-basis: 400px;
+        flex-grow: 0;
     }
     h1 {
         color: $white;
diff --git a/app/styles/modules/filters/filters.scss b/app/styles/modules/filters/filters.scss
index 37412981..8a619a83 100644
--- a/app/styles/modules/filters/filters.scss
+++ b/app/styles/modules/filters/filters.scss
@@ -16,7 +16,7 @@
             vertical-align: middle;
         }
     }
-    input[type="text"] {
+    input {
         background: $grayer;
         color: $white;
         @include placeholder {
@@ -33,7 +33,7 @@
 
 .filters-inner {
     opacity: 0;
-    transition : all .1s ease-in;
+    transition: all .1s ease-in;
     .loading {
         background: $grayer;
         border: 1px solid #b8b8b8;
@@ -47,8 +47,8 @@
             float: none;
         }
         span {
-            animation : loading .5s linear;
-            animation : spin 1s linear infinite;
+            animation: loading .5s linear;
+            animation: spin 1s linear infinite;
         }
     }
 }
@@ -91,13 +91,13 @@
         color: $grayer;
         display: block;
         padding: .5rem 0 .5rem .5rem;
-        transition : color .2s ease-in;
+        transition: color .2s ease-in;
         &:hover {
             color: $green-taiga;
-            transition : color .2s ease-in;
+            transition: color .2s ease-in;
             .icon {
                 opacity: 1;
-                transition : opacity .2s ease-in;
+                transition: opacity .2s ease-in;
             }
         }
     }
@@ -105,6 +105,6 @@
         color: $grayer;
         float: right;
         opacity: 0;
-        transition : opacity .2s ease-in;
+        transition: opacity .2s ease-in;
     }
 }
diff --git a/app/styles/modules/filters/list-filters.scss b/app/styles/modules/filters/list-filters.scss
index dc8ce2a2..609cb8bd 100644
--- a/app/styles/modules/filters/list-filters.scss
+++ b/app/styles/modules/filters/list-filters.scss
@@ -18,14 +18,13 @@
             &:hover {
                 color: $blackish;
                 opacity: 1;
-                transition : opacity .3s linear;
-
+                transition: opacity .3s linear;
             }
         }
         .active {
             color: $blackish;
             opacity: 1;
-            transition : opacity .3s linear;
+            transition: opacity .3s linear;
         }
         .icon {
             padding-right: .5rem;
diff --git a/app/styles/modules/help/lightbox-generic-notion.scss b/app/styles/modules/help/lightbox-generic-notion.scss
index 7d102e6d..765fe4bc 100644
--- a/app/styles/modules/help/lightbox-generic-notion.scss
+++ b/app/styles/modules/help/lightbox-generic-notion.scss
@@ -1,5 +1,6 @@
 .lightbox-generic-notion {
     section {
-        @include table-flex-child(0, 600px, 0);
+        display: flex;
+        flex-basis: 600px;
     }
 }
diff --git a/app/styles/modules/home-project.scss b/app/styles/modules/home-project.scss
index 36554dbe..a106546f 100644
--- a/app/styles/modules/home-project.scss
+++ b/app/styles/modules/home-project.scss
@@ -1,7 +1,8 @@
 .home-project-info-list {
-    @include table-flex();
+    display: flex;
     li {
-        @include table-flex-child(1, 0, 0, auto);
+        flex-basis: 0;
+        flex-grow: 1;
         margin-right: 1rem;
     }
     .info-num {
@@ -20,12 +21,12 @@
 }
 
 .project-data-container {
-    @include table-flex();
+    display: flex;
     p {
-        @include table-flex-child(3, 0, 0);
+        flex-grow: 3;
     }
     ul {
-        @include table-flex-child(1, 0, 0);
+        flex-grow: 1;
     }
     li {
         display: inline-block;
diff --git a/app/styles/modules/home-projects-list.scss b/app/styles/modules/home-projects-list.scss
index c8d7ebb5..2ad96b3e 100644
--- a/app/styles/modules/home-projects-list.scss
+++ b/app/styles/modules/home-projects-list.scss
@@ -1,28 +1,29 @@
 .home-projects-list,
 .home-project {
     @extend %background-taiga;
-    @include table-flex(center, center, flex, row, wrap, center);
+    align-content: center;
+    align-items: center;
     background-color: $black;
     background-position: center center;
     background-size: cover;
+    display: flex;
     height: 100%;
+    justify-content: center;
     left: 0;
     padding: 0;
     position: fixed;
     top: 0;
     width: 100%;
     .welcome-user {
-        @include table-flex();
+        display: flex;
         position: absolute;
         right: 1rem;
         top: 1rem;
         p {
             color: $whitish;
             margin-bottom: 0;
-            span {
-                &:before {
-                    content: ' ';
-                }
+            span:before {
+                content: ' ';
             }
         }
         .logout {
@@ -41,17 +42,20 @@
     }
 }
 .home-projects-wrapper {
-    @include table-flex-child(0, 1200px, 0, 1200px);
+    flex-grow: 1;
+    max-width: 1200px;
 }
 
 .home-projects-list-inner {
-    @include table-flex();
+    display: flex;
 }
 
 .recent-projects {
-    @include table-flex-child(8, 0, 0, 800px);
+    flex-grow: 8;
+    max-width: 800px;
     ul {
-        @include table-flex();
+        display: flex;
+        flex-wrap: wrap;
         margin: 0;
         padding: 0;
     }
@@ -64,15 +68,18 @@
         width: 100%;
     }
     li {
-        @include table-flex-child(1, 230px, 0, 23.5%);
         background-color: rgba($white, .5);
         color: $whitish;
+        flex-basis: 230px;
+        flex-grow: 1;
+        flex-shrink: 0;
         height: 130px;
         margin-bottom: 1rem;
         margin-right: 1rem;
         overflow: hidden;
         position: relative;
         transition: background-color .3s linear;
+        width: 23.5%;
         &:hover {
             background-color: rgba($fresh-taiga, .5);
             cursor: pointer;
@@ -104,13 +111,14 @@
 }
 
 .all-projects {
-    @include table-flex-child(1, 285px, 0, 285px);
     background-color: rgba(0, 0, 0, .5);
     display: flex;
     flex-direction: column;
+    flex-grow: 1;
     margin-left: 1rem;
     max-height: 422px;
     padding: 1rem;
+    width: 285px;
     h1 {
         color: $whitish;
         flex-shrink: 0;
@@ -136,16 +144,15 @@
             padding: 1rem;
             text-transform: uppercase;
             width: 100%;
-            &.active,
             &:hover {
                 background-color: $gray;
                 transition: background-color .3s linear;
-                .icon {
-                    opacity: 1;
-                    transition: opacity .3s linear;
-                }
             }
         }
+        .active {
+            background-color: $gray;
+            transition: background-color .3s linear;
+        }
     }
     .projects-pagination {
         width: 100%;
diff --git a/app/styles/modules/issues/issues-table.scss b/app/styles/modules/issues/issues-table.scss
index 29af15f0..59687f97 100644
--- a/app/styles/modules/issues/issues-table.scss
+++ b/app/styles/modules/issues/issues-table.scss
@@ -1,5 +1,5 @@
 .issues-table {
-    @include table-flex();
+    display: flex;
     margin-bottom: 2rem;
     &.empty {
         display: none;
@@ -7,7 +7,7 @@
     .row {
         &:hover {
             background: lighten($green-taiga, 60%);
-            transition : background .2s ease-in;
+            transition: background .2s ease-in;
         }
         .icon {
             display: inline;
@@ -15,7 +15,7 @@
     }
     .row-selected {
         background: lighten($green-taiga, 60%);
-        transition : background .2s ease-in;
+        transition: background .2s ease-in;
     }
     .title {
         @extend %medium;
@@ -33,21 +33,25 @@
         border-bottom: 1px solid darken($whitish, 4%);
     }
     .avatar {
-        @include table-flex(stretch, center, flex, row, wrap, flex-start);
+        align-items: center;
+        display: flex;
         img {
             width: 35px;
         }
         figcaption {
-            @include table-flex-child(1, 60%, 0);
+            flex-basis: 60%;
+            flex-grow: 1;
             margin-left: .5rem;
         }
     }
     .level-field {
-        @include table-flex-child(1, 70px, 0);
+        flex-basis: 70px;
+        flex-grow: 1;
         text-align: center;
     }
     .subject {
-        @include table-flex-child(7, 300px, 0);
+        flex-basis: 300px;
+        flex-grow: 7;
         padding-right: 1rem;
         span {
             &:first-child {
@@ -58,13 +62,15 @@
     .issue-field,
     .assigned-field,
     .created-field {
-        @include table-flex-child(1, 100px, 0);
+        flex-basis: 100px;
+        flex-grow: 1;
         padding: 0 1rem;
         position: relative;
         text-align: left;
     }
     .assigned-field {
-        @include table-flex-child(2, 100px, 0);
+        flex-basis: 100px;
+        flex-grow: 2;
     }
     .issue-assignedto {
         cursor: pointer;
diff --git a/app/styles/modules/kanban/kanban-table.scss b/app/styles/modules/kanban/kanban-table.scss
index 8adee297..73e6287f 100644
--- a/app/styles/modules/kanban/kanban-table.scss
+++ b/app/styles/modules/kanban/kanban-table.scss
@@ -11,9 +11,9 @@ $column-margin: 0 10px 0 0;
     width: 100%;
     .vfold {
         &.task-colum-name {
-            @include table-flex();
             align-items: center;
             cursor: pointer;
+            display: flex;
             justify-content: center;
             opacity: .8;
             padding: .5rem 0;
@@ -33,7 +33,7 @@ $column-margin: 0 10px 0 0;
         }
         &.task-colum-name,
         &.task-column {
-            @include table-flex-child(1, 0, 0);
+            flex-flow: 1;
             max-width: $column-folded-width;
             min-height: 2.5rem;
             min-width: $column-folded-width;
@@ -50,23 +50,24 @@ $column-margin: 0 10px 0 0;
     position: relative;
     width: 100%;
     .kanban-table-inner {
-        @include table-flex();
+        display: flex;
         overflow: hidden;
         position: absolute;
     }
     .task-colum-name {
         @extend %large;
-        @include table-flex();
         background: $whitish;
         border-top: 3px solid $gray-light;
-        flex: auto 0 auto;
+        display: flex;
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
         justify-content: space-between;
         margin: $column-margin;
         max-width: $column-width;
         padding: .5rem .5rem .5rem 1rem;
         position: relative;
         text-transform: uppercase;
-        width: $column-width;
         &:last-child {
             margin-right: 0;
         }
@@ -89,13 +90,16 @@ $column-margin: 0 10px 0 0;
 
 .kanban-table-body {
     @extend %medium;
-    @include table-flex();
+    display: flex;
     overflow: hidden;
     overflow-x: auto;
     width: 100%;
     .task-column {
-        @include table-flex-child($column-flex, $column-width, $column-shrink, $column-width);
+        flex-basis: $column-width;
+        flex-grow: $column-flex;
+        flex-shrink: $column-shrink;
         margin: $column-margin;
+        max-width: $column-width;
         overflow-y: auto;
         &:last-child {
             margin-right: 0;
@@ -123,5 +127,6 @@ $column-margin: 0 10px 0 0;
 }
 
 .kanban-table-inner {
-    @include table-flex($flex-wrap: nowrap);
+    display: flex;
+    flex-wrap: nowrap;
 }
diff --git a/app/styles/modules/search/search-result-table.scss b/app/styles/modules/search/search-result-table.scss
index 80ed56f5..dbce9244 100644
--- a/app/styles/modules/search/search-result-table.scss
+++ b/app/styles/modules/search/search-result-table.scss
@@ -17,7 +17,8 @@
         }
         .user-stories {
             flex-basis: 0;
-            flex-grow: 10;
+            flex-grow: 5;
+            flex-shrink: 1;
         }
         .status,
         .points {
@@ -27,7 +28,7 @@
             text-align: center;
         }
         .assigned-to {
-            flex-basis: 150px;
+            flex-basis: 250px;
             flex-grow: 1;
             padding: 0 1rem;
         }
diff --git a/app/styles/modules/team/team-filters.scss b/app/styles/modules/team/team-filters.scss
index cf23aa0d..1d39765d 100644
--- a/app/styles/modules/team/team-filters.scss
+++ b/app/styles/modules/team/team-filters.scss
@@ -19,16 +19,16 @@
             &:hover,
             &.active {
                 color: $green-taiga;
-                transition : color .3s linear;
-                .icon {
-                    opacity: 1;
-                    transition : opacity .3s linear;
-                }
+                transition: color .3s linear;
+            }
+            &.active.icon {
+                opacity: 1;
+                transition: opacity .3s linear;
             }
         }
         .active {
             opacity: 1;
-            transition : opacity .3s linear;
+            transition: opacity .3s linear;
         }
         .icon {
             color: $blackish;
diff --git a/app/styles/modules/team/team-table.scss b/app/styles/modules/team/team-table.scss
index 01f8f706..50a9c6b1 100644
--- a/app/styles/modules/team/team-table.scss
+++ b/app/styles/modules/team/team-table.scss
@@ -49,7 +49,7 @@
         &:hover {
             .icon {
                 color: $red;
-                transition : color .3s linear;
+                transition: color .3s linear;
             }
         }
     }
@@ -67,9 +67,11 @@
         }
     }
     .avatar {
-        @include table-flex(stretch, center, flex, row, wrap, flex-start);
+        align-items: center;
+        display: flex;
         img {
-            @include table-flex-child(1, 66px, 0);
+            flex-basis: 66px;
+            flex-grow: 1;
             max-width: 66px;
         }
         figcaption {
diff --git a/app/styles/modules/user-settings/mail-notifications-table.scss b/app/styles/modules/user-settings/mail-notifications-table.scss
index 762b7fe5..01fffa42 100644
--- a/app/styles/modules/user-settings/mail-notifications-table.scss
+++ b/app/styles/modules/user-settings/mail-notifications-table.scss
@@ -1,7 +1,9 @@
 .policy-table {
     .policy-table-row {
-        @include table-flex(stretch, center, flex, row, wrap, center);
+        align-items: center;
         border-bottom: 1px solid $whitish;
+        display: flex;
+        justify-content: center;
     }
 
     .policy-table-header {
@@ -17,13 +19,15 @@
     }
 
     .policy-table-project {
-        @include table-flex-child(3, 0, 0);
+        flex-basis: 0;
+        flex-grow: 3;
     }
 
     .policy-table-all,
     .policy-table-involved,
     .policy-table-none {
-        @include table-flex-child(1, 0, 0);
+        flex-basis: 0;
+        flex-grow: 1;
     }
     input {
         display: none;
diff --git a/app/styles/modules/user-settings/user-profile.scss b/app/styles/modules/user-settings/user-profile.scss
index 7184d462..603624d7 100644
--- a/app/styles/modules/user-settings/user-profile.scss
+++ b/app/styles/modules/user-settings/user-profile.scss
@@ -3,10 +3,11 @@
         max-width: 700px;
         width: 100%;
         .container {
-            @include table-flex();
+            display: flex;
         }
         .avatar-container {
-            @include table-flex-child(1, 0, 0);
+            flex-basis: 0;
+            flex-grow: 1;
             margin-right: 1rem;
             .image-container {
                 position: relative;
@@ -51,7 +52,8 @@
             }
         }
         .data {
-            @include table-flex-child(3, 0, 0);
+            flex-basis: 0;
+            flex-grow: 3;
         }
     }
     fieldset {
diff --git a/app/styles/modules/wiki/wiki-nav.scss b/app/styles/modules/wiki/wiki-nav.scss
index 78f9f928..aa8421a4 100644
--- a/app/styles/modules/wiki/wiki-nav.scss
+++ b/app/styles/modules/wiki/wiki-nav.scss
@@ -42,8 +42,7 @@
                 float: none;
             }
             span {
-                animation: loading .5s linear;
-                animation: spin 1s linear infinite;
+                animation: loading .5s linear, spin 1s linear infinite;
             }
         }
     }