diff --git a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs
index 5b3bd7791a..bace14b124 100644
--- a/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs
+++ b/framework/src/Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo/Views/Components/Themes/Shared/TagHelpers/AbpComponentDemoSectionTagHelper.cs
@@ -4,6 +4,7 @@ using System.Threading.Tasks;
 using Microsoft.AspNetCore.Razor.TagHelpers;
 using Microsoft.Extensions.FileProviders;
 using Volo.Abp.AspNetCore.Mvc.UI.Bootstrap.TagHelpers;
+using Volo.Abp.Guids;
 using Volo.Abp.VirtualFileSystem;
 
 namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.Shared.TagHelpers
@@ -17,10 +18,14 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.S
         public string Title { get; set; }
 
         private readonly IVirtualFileProvider _virtualFileProvider;
+        private readonly IGuidGenerator _guidGenerator;
 
-        public AbpComponentDemoSectionTagHelper(IVirtualFileProvider virtualFileProvider)
+        public AbpComponentDemoSectionTagHelper(
+            IVirtualFileProvider virtualFileProvider, 
+            IGuidGenerator guidGenerator)
         {
             _virtualFileProvider = virtualFileProvider;
+            _guidGenerator = guidGenerator;
         }
 
         public override async Task ProcessAsync(TagHelperContext context, TagHelperOutput output)
@@ -29,34 +34,69 @@ namespace Volo.Abp.AspNetCore.Mvc.UI.Theme.Shared.Demo.Views.Components.Themes.S
 
             var content = await output.GetChildContentAsync();
 
-            output.PreContent.AppendHtml("<div class=\"abp-component-demo-section\">");
-            output.PreContent.AppendHtml($"<h2>{Title}</h2>");
-            output.PreContent.AppendHtml("<div class=\"abp-component-demo-section-body\">");
+            var previewId = _guidGenerator.Create();
+            var codeBlockId = _guidGenerator.Create();
+
+            var codeBlockTabId = _guidGenerator.Create();
+            var tagHelperCodeBlockId = _guidGenerator.Create();
+            var bootstrapCodeBlockId = _guidGenerator.Create();
+            
+            output.PreContent.AppendHtml("<div class=\"card\">");
+            output.PreContent.AppendHtml("<div class=\"card-header\">");
+            output.PreContent.AppendHtml("<div class=\"row\">");
+            output.PreContent.AppendHtml($"<div class=\"col\"><h4 class=\"card-title my-1\">{Title}</h4></div>");
+            output.PreContent.AppendHtml("<div class=\"col-auto\">");
+            output.PreContent.AppendHtml("<nav>");
+            output.PreContent.AppendHtml("<div class=\"nav nav-tabs nav-pills\" role=\"tablist\">");
+            output.PreContent.AppendHtml($"<a class=\"nav-item nav-link active\" id=\"nav-preview-tab-{previewId}\" data-toggle=\"tab\" href=\"#nav-preview-{previewId}\" role=\"tab\" aria-controls=\"nav-preview-{previewId}\" aria-selected=\"true\">Preview</a>");
+            output.PreContent.AppendHtml($"<a class=\"nav-item nav-link\" id=\"nav-code-tab-{codeBlockId}\" data-toggle=\"tab\" href=\"#nav-code-{codeBlockId}\" role=\"tab\" aria-controls=\"nav-code-{codeBlockId}\" aria-selected=\"false\">Code</a>");
+            output.PreContent.AppendHtml("</div>");
+            output.PreContent.AppendHtml("</nav>");
+            output.PreContent.AppendHtml("</div>"); // col-auto
+            output.PreContent.AppendHtml("</div>"); // row
+            output.PreContent.AppendHtml("</div>"); // card-header
+            output.PreContent.AppendHtml("<div class=\"card-body\">");
+            output.PreContent.AppendHtml($"<div class=\"tab-content\" id=\"nav-preview-tabContent-{previewId}\">");
+            output.PreContent.AppendHtml($"<div class=\"tab-pane fade show active\" id=\"nav-preview-{previewId}\" role=\"tabpanel\" aria-labelledby=\"nav-preview-tab-{previewId}\">");
+            
             /* component rendering here */
-            output.PostContent.AppendHtml("</div>"); //abp-component-demo-section-body
-            AppendRawSource(output);
-            AppendBootstrapSource(output, content);
-            output.PostContent.AppendHtml("</div>"); //abp-component-demo-section
-        }
 
-        private static void AppendBootstrapSource(TagHelperOutput output, TagHelperContent content)
-        {
-            output.PostContent.AppendHtml("<div class=\"abp-component-demo-section-bs-source\">");
-            output.PostContent.AppendHtml("<h3>Bootstrap</h3>");
+            output.PostContent.AppendHtml("</div>"); // tab-pane
+            output.PostContent.AppendHtml($"<div class=\"tab-pane fade\" id=\"nav-code-{codeBlockId}\" role=\"tabpanel\" aria-labelledby=\"nav-code-tab-{codeBlockId}\">");
+            
+            /* CodeBlock tabs */
+            
+            output.PostContent.AppendHtml($"<ul class=\"nav nav-tabs mb-3\" id=\"code-block-tab-{codeBlockTabId}\" role=\"tablist\">");
+            output.PostContent.AppendHtml("<li class=\"nav-item\">");
+            output.PostContent.AppendHtml($"<a class=\"nav-link active\" id=\"tag-helper-tab-{tagHelperCodeBlockId}\" data-toggle=\"pill\" href=\"#tag-helper-{tagHelperCodeBlockId}\" role=\"tab\" aria-controls=\"tag-helper-{tagHelperCodeBlockId}\" aria-selected=\"true\">Abp Tag Helper</a>");
+            output.PostContent.AppendHtml("</li>");
+            output.PostContent.AppendHtml("<li class=\"nav-item\">");
+            output.PostContent.AppendHtml($"<a class=\"nav-link\" id=\"bootstrap-tab-{bootstrapCodeBlockId}\" data-toggle=\"pill\" href=\"#bootstrap-{bootstrapCodeBlockId}\" role=\"tab\" aria-controls=\"bootstrap-{tagHelperCodeBlockId}\" aria-selected=\"true\">Bootstrap Render</a>");
+            output.PostContent.AppendHtml("</li>");
+            output.PostContent.AppendHtml("</ul>");
+            output.PostContent.AppendHtml($"<div class=\"tab-content\" id=\"code-block-tabContent-{codeBlockTabId}\">");
+            
+            output.PostContent.AppendHtml($"<div class=\"tab-pane fade show active\" id=\"tag-helper-{tagHelperCodeBlockId}\" role=\"tabpanel\" aria-labelledby=\"tag-helper-tab-{tagHelperCodeBlockId}\">");
             output.PostContent.AppendHtml("<pre>");
-            output.PostContent.Append(content.GetContent());
+            output.PostContent.AppendHtml("<code>");
+            output.PostContent.Append(GetRawDemoSource());
+            output.PostContent.AppendHtml("</code>");
             output.PostContent.AppendHtml("</pre>");
             output.PostContent.AppendHtml("</div>");
-        }
-
-        private void AppendRawSource(TagHelperOutput output)
-        {
-            output.PostContent.AppendHtml("<div class=\"abp-component-demo-section-raw-source\">");
-            output.PostContent.AppendHtml("<h3>ABP Tag Helpers</h3>");
+            
+            output.PostContent.AppendHtml($"<div class=\"tab-pane fade\" id=\"bootstrap-{bootstrapCodeBlockId}\" role=\"tabpanel\" aria-labelledby=\"bootstrap-tab-{bootstrapCodeBlockId}\">");
             output.PostContent.AppendHtml("<pre>");
-            output.PostContent.Append(GetRawDemoSource());
+            output.PostContent.AppendHtml("<code>");
+            output.PostContent.Append(content.GetContent());
+            output.PostContent.AppendHtml("</code>");
             output.PostContent.AppendHtml("</pre>");
             output.PostContent.AppendHtml("</div>");
+            
+            output.PostContent.AppendHtml("</div>"); // tab-content
+            output.PostContent.AppendHtml("</div>"); // tab-pane
+            output.PostContent.AppendHtml("</div>"); // tab-content
+            output.PostContent.AppendHtml("</div>"); // card-body
+            output.PostContent.AppendHtml("</div>"); // card
         }
 
         private string GetRawDemoSource()
diff --git a/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/libs/abp/luxon/abp.luxon.js b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/libs/abp/luxon/abp.luxon.js
new file mode 100644
index 0000000000..b04de7cadf
--- /dev/null
+++ b/framework/test/Volo.Abp.AspNetCore.Mvc.UI.Theme.Basic.Demo/wwwroot/libs/abp/luxon/abp.luxon.js
@@ -0,0 +1,46 @@
+var abp = abp || {};
+(function () {
+
+    if (!luxon) {
+        throw "abp/luxon library requires the luxon library included to the page!";
+    }
+
+    /* TIMING *************************************************/
+
+    abp.timing = abp.timing || {};
+
+    var setObjectValue = function (obj, property, value) {
+        if (typeof property === "string") {
+            property = property.split('.');
+        }
+
+        if (property.length > 1) {
+            var p = property.shift();
+            setObjectValue(obj[p], property, value);
+        } else {
+            obj[property[0]] = value;
+        }
+    }
+
+    var getObjectValue = function (obj, property) {
+        return property.split('.').reduce((a, v) => a[v], obj)
+    }
+
+    abp.timing.convertFieldsToIsoDate = function (form, fields) {
+        for (var field of fields) {
+            var dateTime = luxon.DateTime
+                .fromFormat(
+                    getObjectValue(form, field),
+                    abp.localization.currentCulture.dateTimeFormat.shortDatePattern,
+                    {locale: abp.localization.currentCulture.cultureName}
+                );
+
+            if (!dateTime.invalid) {
+                setObjectValue(form, field, dateTime.toFormat("yyyy-MM-dd HH:mm:ss"))
+            }
+        }
+
+        return form;
+    }
+
+})(jQuery);