diff --git a/packages/default/scss/gantt/_layout.scss b/packages/default/scss/gantt/_layout.scss
index be984a57c30..075a18c09b9 100644
--- a/packages/default/scss/gantt/_layout.scss
+++ b/packages/default/scss/gantt/_layout.scss
@@ -1,6 +1,6 @@
 @include exports("gantt/layout") {
 
-    $row-height: #{$line-height-em} + #{2 * $cell-padding};
+    $row-height: #{$line-height-em} + #{2 * $cell-padding} + #{$grid-cell-horizontal-border-width};
 
     .k-gantt {
         position: relative;
@@ -14,10 +14,10 @@
             vertical-align: top;
         }
         .k-grid-header tr {
-            height: add-three( $line-height-em, 2 * $cell-padding-y, 1px );
+            height: add-three( $line-height-em, 2 * $grid-header-padding-y, 1px );
         }
         .k-grid-content tr {
-            height: add-two( $line-height-em, 2 * $cell-padding-y );
+            height: add-three( $line-height-em, 2 * $grid-cell-padding-y, $grid-cell-horizontal-border-width );
         }
 
 
@@ -44,6 +44,7 @@
         border-width: 0 0 1px;
         border-style: solid;
         border-color: inherit;
+        line-height: $toolbar-line-height;
 
         .k-gantt-layout + & {
             border-width: 1px 0 0;
@@ -87,7 +88,7 @@
 
     // View switcher
     .k-gantt-views {
-        @extend %ul-button-group;
+        @extend %ul-button-group !optional;
 
         .k-current-view { display: none; }
         .k-current-view .k-link::after {
@@ -104,8 +105,8 @@
             flex-direction: column;
             align-items: stretch;
             position: absolute;
-            right: $padding-x;
-            top: $padding-x;
+            top: $toolbar-padding-y;
+            right: $toolbar-padding-x;
             z-index: 1000;
 
             li { display: none; }
@@ -127,12 +128,10 @@
             border-width: 0;
         }
         .k-grid-header {
-            // sass-lint:disable no-important
-            padding: 0 !important;
-            // sass-lint:enable no-important
+            padding: 0 !important; // sass-lint:disable-line no-important
         }
         .k-grid-header tr {
-            height: add-three( 2 * $line-height-em, 4 * $cell-padding-y, 2px );
+            height: add-three( 2 * $line-height-em, 4 * $grid-header-padding-y, 2px );
             vertical-align: bottom;
         }
         .k-grid-content {
@@ -190,6 +189,7 @@
 
         td {
             padding: 0;
+            border-width: 0;
             position: relative;
             vertical-align: middle;
         }
diff --git a/packages/default/scss/grid/_layout.scss b/packages/default/scss/grid/_layout.scss
index f1ec720a696..944a41fa58a 100644
--- a/packages/default/scss/grid/_layout.scss
+++ b/packages/default/scss/grid/_layout.scss
@@ -761,8 +761,8 @@
 
     .k-edit-cell,
     .k-grid-edit-row > td {
-        >.k-textbox,
-        >.k-widget,
+        > .k-textbox,
+        > .k-widget,
         > .text-box {
             margin-left: $edit-cell-input-space;
         }
diff --git a/packages/material/scss/all.scss b/packages/material/scss/all.scss
index 9f5e109513e..f633d657981 100644
--- a/packages/material/scss/all.scss
+++ b/packages/material/scss/all.scss
@@ -47,7 +47,7 @@
 
 // Scheduling
 @import "calendar";
-//@import "gantt";
+@import "gantt";
 //@import "scheduler";
 
 
diff --git a/packages/material/scss/gantt.scss b/packages/material/scss/gantt.scss
new file mode 100644
index 00000000000..5564fd2fd92
--- /dev/null
+++ b/packages/material/scss/gantt.scss
@@ -0,0 +1,12 @@
+@import "variables";
+@import "mixins";
+
+
+// Dependencies
+@import "common/all";
+@import "button";
+
+
+// Component
+@import "gantt/layout";
+@import "gantt/theme";
\ No newline at end of file
diff --git a/packages/material/scss/gantt/_layout.scss b/packages/material/scss/gantt/_layout.scss
new file mode 100644
index 00000000000..8ca00846c01
--- /dev/null
+++ b/packages/material/scss/gantt/_layout.scss
@@ -0,0 +1,89 @@
+@import "~@progress/kendo-theme-default/scss/gantt/layout";
+
+@include exports("gantt/layout/material") {
+
+    .k-gantt {}
+
+
+    // Header and footer
+    .k-gantt-toolbar {
+
+        .k-button {
+            @extend .k-button.k-flat;
+            padding: $toolbar-button-padding-y $toolbar-button-padding-x;
+        }
+    }
+
+
+    // View switcher
+    .k-gantt-views {
+
+        li,
+        li.k-state-hover,
+        li.k-state-selected {
+            color: inherit;
+            background: none;
+        }
+        li a {
+            @extend .k-button.k-flat;
+            padding: $toolbar-button-padding-y $toolbar-button-padding-x;
+            display: flex;
+            align-items: center;
+            position: relative;
+        }
+        li a::before {
+            @extend .k-button::before;
+            display: block;
+        }
+        li.k-state-selected a::before {
+            @include opacity( $flat-button-selected-opacity );
+        }
+
+
+        &.k-state-expanded {
+            li {
+                margin: 0;
+                border-radius: 0;
+            }
+            li + li {
+                margin: 0;
+            }
+            .k-current-view ~ li a {
+                padding-top: $list-item-padding-y;
+                padding-bottom: $list-item-padding-y;
+                line-height: 2;
+            }
+        }
+    }
+
+
+    // Treelist
+    .k-gantt-treelist {}
+
+
+    // Milestone
+    .k-milestone-wrap {}
+    .k-task-milestone {}
+
+
+    // Summary
+    .k-summary-wrap {}
+    .k-task-summary {}
+    .k-task-summary-complete {}
+    .k-task-summary-progress {
+        height: 15px;
+        overflow: hidden;
+    }
+
+
+    // Single task
+    .k-single-wrap {}
+    .k-task-single {
+        border-width: 0;
+    }
+    .k-task-template {
+        padding: $button-padding-y-sm $button-padding-x-sm;
+        line-height: $button-line-height;
+    }
+
+}
diff --git a/packages/material/scss/gantt/_theme.scss b/packages/material/scss/gantt/_theme.scss
new file mode 100644
index 00000000000..6a3c4ed254e
--- /dev/null
+++ b/packages/material/scss/gantt/_theme.scss
@@ -0,0 +1,122 @@
+@include exports("gantt/theme") {
+
+    // Theme
+    .k-gantt {
+        @include appearance( panel );
+    }
+
+
+    // Header and footer
+    .k-gantt-toolbar {
+        @include appearance( toolbar );
+    }
+
+
+    // View switcher
+    .k-gantt-views {
+
+        li {}
+
+
+        &.k-state-expanded {
+            @include appearance( popup );
+            box-shadow: $popup-shadow;
+
+            li {
+                margin: 0;
+                border-radius: 0;
+            }
+            li + li { margin: 0; }
+        }
+    }
+
+
+    // Rows and colls
+    .k-gantt-rows {}
+    .k-gantt-columns {}
+    .k-gantt-columns .k-nonwork-hour {
+        background-color: rgba( $panel-text, .025 );
+    }
+
+
+    .k-gantt-dependencies {}
+    .k-line {
+        color: mix( $panel-text, $panel-bg );
+        background-color: mix( $panel-text, $panel-bg );
+    }
+    .k-line.k-state-selected {
+        color: $header-selected-bg;
+        background-color: $header-selected-bg;
+    }
+
+    .k-task-dot {}
+    .k-task-dot::before {
+        background-color: $panel-text;
+    }
+    .k-task-dot:hover::before,
+    .k-task-dot.k-state-hover::before {
+        border-color: $panel-text;
+        background-color: $panel-bg;
+    }
+
+
+    // Milestone
+    .k-task-milestone {
+        border-color: $accent;
+        background-color: $accent;
+    }
+    .k-task-milestone.k-state-selected {
+        border-color: $secondary;
+        background-color: $secondary;
+    }
+
+
+    // Summary
+    .k-task-summary {
+        color: mix( $accent, $grid-bg, 54 );
+    }
+    .k-task-summary-complete {
+        color: $accent;
+    }
+    .k-task-summary.k-state-selected {
+        color: mix( $secondary, $grid-bg, 54 );
+
+        .k-task-summary-complete {
+            color: $secondary;
+        }
+    }
+    .k-task-summary::before,
+    .k-task-summary::after,
+    .k-task-summary-complete::before,
+    .k-task-summary-complete::after {
+        display: none;
+    }
+
+
+    // Tasks
+    .k-task-single {
+        @include border-radius( $border-radius );
+        color: $accent-contrast;
+        background-color: mix( $accent, $grid-bg, 54 );
+
+        .k-task-complete {
+            background: $accent;
+        }
+    }
+    .k-task-single.k-state-selected {
+        @include appearance( active-button );
+        color: $secondary-contrast;
+        background-color: mix( $secondary, $grid-bg, 54 );
+
+        .k-task-complete {
+            background: $secondary;
+        }
+    }
+    .k-task-single .k-resize-handle {
+        width:  ($spacer-x / 2 );
+    }
+    .k-task-single:hover .k-resize-handle {
+        opacity: 0;
+    }
+
+}
diff --git a/packages/material/scss/grid/_layout.scss b/packages/material/scss/grid/_layout.scss
index 9b9599eeb9e..84155b62ee6 100644
--- a/packages/material/scss/grid/_layout.scss
+++ b/packages/material/scss/grid/_layout.scss
@@ -10,11 +10,11 @@ $grid-sorted-icon-spacing: 4px !default;
 $grid-header-menu-icon-spacing: 14px !default;
 $grid-group-indicator-border-radius: add-two( $font-size, $button-padding-y) !default;
 $grid-group-indicator-gap: 8px !default;
+$grid-header-font-size: 12px !default;
 
 @import "~@progress/kendo-theme-default/scss/grid/layout";
 
 @include exports ('grid/layout/material') {
-    $grid-header-font-size: 12px !default;
     $grouping-dropclue-height: add-two( 2 * $font-size, 2 * $padding-y) !default;
 
     $text-field-border-width: 2px;
@@ -34,14 +34,12 @@ $grid-group-indicator-gap: 8px !default;
     }
 
     .k-grid-header {
+        font-size: $grid-header-font-size;
+
         th {
             font-weight: 700;
         }
 
-        .k-header:not(.k-widget) {
-            font-size: $grid-header-font-size;
-        }
-
         .k-grid-filter {
             border-radius: 50%;
         }
@@ -107,6 +105,7 @@ $grid-group-indicator-gap: 8px !default;
         width: 2px;
     }
 
+    .k-edit-cell,
     .k-grid-edit-row > td {
 
         > .k-textbox,
@@ -118,6 +117,7 @@ $grid-group-indicator-gap: 8px !default;
             margin-right: -$text-field-padding;
         }
     }
+    .k-edit-cell,
     .k-grid-edit-row {
 
         .k-autocomplete,
diff --git a/tests/visual/gantt.html b/tests/visual/gantt.html
new file mode 100644
index 00000000000..0b65282dcb5
--- /dev/null
+++ b/tests/visual/gantt.html
@@ -0,0 +1,141 @@
+<!doctype html>
+<html lang="en" class="k-typography">
+<head>
+    <title>Gantt</title>
+    <meta charset="utf-8" />
+    <link rel="stylesheet" href="../../packages/default/dist/all.css" />
+    <link rel="stylesheet" href="assets/styles.css" />
+    <script src="assets/scripts.js"></script>
+
+
+    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/jquery.min.js"></script>
+    <script src="https://kendo.cdn.telerik.com/2018.2.620/js/kendo.all.min.js"></script>
+
+    <style>
+        .k-gantt-treelist {
+            width: 700px !important;
+        }
+        .k-gantt-timeline {
+            width: 700px !important;
+        }
+    </style>
+</head>
+<body>
+
+    <div id="test-area">
+
+        <div id="gantt"></div>
+
+        <script>
+            $(document).ready(function() {
+                var serviceRoot = "https://demos.telerik.com/kendo-ui/service";
+                var tasksDataSource = new kendo.data.GanttDataSource({
+                    transport: {
+                        read: {
+                            url: serviceRoot + "/GanttTasks",
+                            dataType: "jsonp"
+                        },
+                        update: {
+                            url: serviceRoot + "/GanttTasks/Update",
+                            dataType: "jsonp"
+                        },
+                        destroy: {
+                            url: serviceRoot + "/GanttTasks/Destroy",
+                            dataType: "jsonp"
+                        },
+                        create: {
+                            url: serviceRoot + "/GanttTasks/Create",
+                            dataType: "jsonp"
+                        },
+                        parameterMap: function(options, operation) {
+                            if (operation !== "read") {
+                                return { models: kendo.stringify(options.models || [options]) };
+                            }
+                        }
+                    },
+                    schema: {
+                        model: {
+                            id: "id",
+                            fields: {
+                                id: { from: "ID", type: "number" },
+                                orderId: { from: "OrderID", type: "number", validation: { required: true } },
+                                parentId: { from: "ParentID", type: "number", defaultValue: null, validation: { required: true } },
+                                start: { from: "Start", type: "date" },
+                                end: { from: "End", type: "date" },
+                                title: { from: "Title", defaultValue: "", type: "string" },
+                                percentComplete: { from: "PercentComplete", type: "number" },
+                                summary: { from: "Summary", type: "boolean" },
+                                expanded: { from: "Expanded", type: "boolean", defaultValue: true }
+                            }
+                        }
+                    }
+                });
+
+                var dependenciesDataSource = new kendo.data.GanttDependencyDataSource({
+                    transport: {
+                        read: {
+                            url: serviceRoot + "/GanttDependencies",
+                            dataType: "jsonp"
+                        },
+                        update: {
+                            url: serviceRoot + "/GanttDependencies/Update",
+                            dataType: "jsonp"
+                        },
+                        destroy: {
+                            url: serviceRoot + "/GanttDependencies/Destroy",
+                            dataType: "jsonp"
+                        },
+                        create: {
+                            url: serviceRoot + "/GanttDependencies/Create",
+                            dataType: "jsonp"
+                        },
+                        parameterMap: function(options, operation) {
+                            if (operation !== "read") {
+                                return { models: kendo.stringify(options.models || [options]) };
+                            }
+                        }
+                    },
+                    schema: {
+                        model: {
+                            id: "id",
+                            fields: {
+                                id: { from: "ID", type: "number" },
+                                predecessorId: { from: "PredecessorID", type: "number" },
+                                successorId: { from: "SuccessorID", type: "number" },
+                                type: { from: "Type", type: "number" }
+                            }
+                        }
+                    }
+                });
+
+                var gantt = $("#gantt").kendoGantt({
+                    dataSource: tasksDataSource,
+                    dependencies: dependenciesDataSource,
+                    views: [
+                        "day",
+                        { type: "week", selected: true },
+                        "month"
+                    ],
+                    columns: [
+                        { field: "id", title: "ID", width: 60 },
+                        { field: "title", title: "Title", editable: true, sortable: true },
+                        { field: "start", title: "Start Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true },
+                        { field: "end", title: "End Time", format: "{0:MM/dd/yyyy}", width: 100, editable: true, sortable: true }
+                    ],
+                    height: 700,
+
+                    showWorkHours: false,
+                    showWorkDays: false,
+
+                    snap: false
+                }).data("kendoGantt");
+
+                $(document).bind("kendo:skinChange", function() {
+                    gantt.refresh();
+                });
+            });
+        </script>
+    </div>
+
+</body>
+</html>