diff --git a/Observer/CheckoutLayoutModifier.php b/Observer/CheckoutLayoutModifier.php
new file mode 100644
index 0000000..d531ed2
--- /dev/null
+++ b/Observer/CheckoutLayoutModifier.php
@@ -0,0 +1,58 @@
+<?php
+/**
+ * Copyright © MageWorx. All rights reserved.
+ * See LICENSE.txt for license details.
+ */
+
+namespace MageWorx\DeliveryDateCheckout\Observer;
+
+use Magento\Framework\Event\Observer;
+use Magento\Framework\Event\ObserverInterface;
+
+/**
+ * Class CheckoutLayoutModifier
+ *
+ * Move delivery date elements on the MageWorx_Checkout page;
+ * Change templates;
+ */
+class CheckoutLayoutModifier implements ObserverInterface
+{
+    /**
+     * @inheritDoc
+     */
+    public function execute(Observer $observer)
+    {
+        /** @var \MageWorx\Checkout\Api\LayoutModifierAccess $subject */
+        $subject = $observer->getSubject();
+        /** @var array $jsLayout */
+        $jsLayout = &$subject->getJsLayout();
+
+        $nameInLayout = 'delivery_date';
+        // Copy element
+        $originalElement = $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
+        ['shippingAddress']['children']['shippingAdditional']['children'][$nameInLayout];
+
+        // Remove original element from layout
+        unset(
+            $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
+            ['shippingAddress']['children']['shippingAdditional']['children'][$nameInLayout]
+        );
+
+        $originalElement['config']['template'] = 'MageWorx_DeliveryDateCheckout/container';
+
+        // Remove DD comments
+        unset($originalElement['children']['comment_container']);
+
+        // Update Date component
+        $originalElement['children']['datetime_container']['children']['delivery_day']['config']['template'] =
+        'MageWorx_DeliveryDateCheckout/form/field';
+
+        // Update Time component
+        $originalElement['children']['datetime_container']['children']['delivery_time']['config']['template'] =
+            'MageWorx_DeliveryDateCheckout/form/field';
+
+        $jsLayout['components']['checkout']['children']['steps']['children']['shipping-step']['children']
+        ['shippingMethods']['children']['shipping_method_additional_data']['children'][$nameInLayout] =
+            $originalElement;
+    }
+}
diff --git a/composer.json b/composer.json
new file mode 100755
index 0000000..74b88cd
--- /dev/null
+++ b/composer.json
@@ -0,0 +1,21 @@
+{
+    "name": "mageworx/module-deliverydate-checkout-compatibility",
+    "description": "Delivery Date and MageWorx Checkout Compatibility Extension",
+    "require": {
+        "magento/module-ui" : ">=100.1.0 < 102",
+        "mageworx/module-checkout" : ">=1.0.0",
+        "mageworx/module-deliverydate" : ">=1.8.6"
+    },
+    "type": "magento2-module",
+    "version": "1.0.0",
+    "license": [
+        "OSL-3.0",
+        "AFL-3.0"
+    ],
+    "autoload": {
+        "files": [ "registration.php" ],
+        "psr-4": {
+            "MageWorx\\DeliveryDateCheckout\\": ""
+        }
+    }
+}
diff --git a/etc/frontend/events.xml b/etc/frontend/events.xml
new file mode 100644
index 0000000..3e124b8
--- /dev/null
+++ b/etc/frontend/events.xml
@@ -0,0 +1,14 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © MageWorx. All rights reserved.
+ * See LICENSE.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+        xsi:noNamespaceSchemaLocation="urn:magento:framework:Event/etc/events.xsd">
+    <event name="mageworx_checkout_js_layout_end_processing">
+        <observer name="mageworx_delivery_date_update_on_mageworx_checkout"
+                  instance="MageWorx\DeliveryDateCheckout\Observer\CheckoutLayoutModifier"/>
+    </event>
+</config>
diff --git a/etc/module.xml b/etc/module.xml
new file mode 100755
index 0000000..ccc5259
--- /dev/null
+++ b/etc/module.xml
@@ -0,0 +1,15 @@
+<?xml version="1.0"?>
+<!--
+/**
+ * Copyright © MageWorx. All rights reserved.
+ * See LICENSE.txt for license details.
+ */
+-->
+<config xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:Module/etc/module.xsd">
+    <module name="MageWorx_DeliveryDateCheckout" setup_version="1.0.0">
+        <sequence>
+            <module name="MageWorx_Checkout"/>
+            <module name="MageWorx_DeliveryDate"/>
+        </sequence>
+    </module>
+</config>
diff --git a/registration.php b/registration.php
new file mode 100755
index 0000000..6c8cb43
--- /dev/null
+++ b/registration.php
@@ -0,0 +1,11 @@
+<?php
+/**
+ * Copyright © MageWorx. All rights reserved.
+ * See LICENSE.txt for license details.
+ */
+
+\Magento\Framework\Component\ComponentRegistrar::register(
+    \Magento\Framework\Component\ComponentRegistrar::MODULE,
+    'MageWorx_DeliveryDateCheckout',
+    __DIR__
+);
diff --git a/view/frontend/requirejs-config.js b/view/frontend/requirejs-config.js
new file mode 100644
index 0000000..a59ce26
--- /dev/null
+++ b/view/frontend/requirejs-config.js
@@ -0,0 +1,13 @@
+/**
+ * Copyright © MageWorx. All rights reserved.
+ * See LICENSE.txt for license details.
+ */
+var config = {
+    config: {
+        mixins: {
+            'MageWorx_DeliveryDate/js/checkout/time_range': {
+                'MageWorx_DeliveryDateCheckout/js/mixin/time-range-mixin': true
+            }
+        }
+    }
+};
diff --git a/view/frontend/web/js/mixin/time-range-mixin.js b/view/frontend/web/js/mixin/time-range-mixin.js
new file mode 100644
index 0000000..f6bb35e
--- /dev/null
+++ b/view/frontend/web/js/mixin/time-range-mixin.js
@@ -0,0 +1,19 @@
+/*jshint browser:true jquery:true*/
+/*global alert*/
+define([
+    'mage/utils/wrapper',
+    'underscore'
+], function (wrapper, _) {
+    'use strict';
+
+    console.log('INITIALIZE TIME COMPONENT MIXIN');
+
+    return function (originalComponent) {
+
+        if (window.isMageWorxCheckout) {
+            window.checkoutConfig.mageworx.delivery_date.time.template = 'MageWorx_DeliveryDateCheckout/form/field';
+        }
+
+        return originalComponent;
+    };
+});
diff --git a/view/frontend/web/template/container.html b/view/frontend/web/template/container.html
new file mode 100644
index 0000000..e262bcd
--- /dev/null
+++ b/view/frontend/web/template/container.html
@@ -0,0 +1,11 @@
+<!--
+/**
+ * Copyright © MageWorx. All rights reserved.
+ * See LICENSE.txt for license details.
+ */
+-->
+<div data-bind="visible: isVisible" id="delivery-date-container">
+    <each args="data: elems, as: 'element'">
+        <render if="hasTemplate()"/>
+    </each>
+</div>
diff --git a/view/frontend/web/template/form/field.html b/view/frontend/web/template/form/field.html
new file mode 100644
index 0000000..8c620e4
--- /dev/null
+++ b/view/frontend/web/template/form/field.html
@@ -0,0 +1,41 @@
+<div class="form__field"
+     visible="visible"
+     css="$data.additionalClasses"
+     attr="'data-index': index">
+    <div class="input">
+        <label class="input__label"
+               if="$data.label"
+               attr="for: uid"
+               translate="label"
+               attr="'data-config-scope': $data.scopeLabel"
+               visible="$data.labelVisible"
+        ></label>
+
+        <render args="elementTmpl" ifnot="hasAddons()"/>
+
+        <div class="admin__control-addon" if="hasAddons()">
+            <render args="elementTmpl"/>
+
+            <label class="admin__addon-prefix" if="$data.addbefore" attr="for: uid">
+                <span text="addbefore"/>
+            </label>
+            <label class="admin__addon-suffix" if="$data.addafter" attr="for: uid">
+                <span text="addafter"/>
+            </label>
+        </div>
+
+        <render args="tooltipTpl" if="$data.tooltip"/>
+
+        <render args="fallbackResetTpl" if="$data.showFallbackReset && $data.isDifferedFromDefault"/>
+
+        <label class="admin__field-error" if="error" attr="for: uid" text="error"/>
+
+        <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
+            <span translate="notice"/>
+        </div>
+
+        <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>
+
+        <render args="$data.service.template" if="$data.hasService()"/>
+    </div>
+</div>