diff --git a/.github/CONTRIBUTING.md b/.github/CONTRIBUTING.md
index 95969e7c37..d70ee89002 100644
--- a/.github/CONTRIBUTING.md
+++ b/.github/CONTRIBUTING.md
@@ -192,7 +192,7 @@ Code view example:
 ```html
 <code-view style="height:700px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid" 
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid/" 
            alt="Angular data grid example">
 </code-view>
 ```
diff --git a/cspell.json b/cspell.json
index 54ae258270..b21f8d961b 100644
--- a/cspell.json
+++ b/cspell.json
@@ -30,6 +30,7 @@
     }
   ],
   "words": [
+    "Figma",
     "IgniteUI",
     "Ignite",
     "DocFX",
diff --git a/en/components/badge.md b/en/components/badge.md
index 7e4b829a52..67830a8743 100644
--- a/en/components/badge.md
+++ b/en/components/badge.md
@@ -162,6 +162,15 @@ Then, just specify the icon name and family as follows:
            iframe-src="{environment:demosBaseUrl}/data-display/badge-icon/" >
 </code-view>
 
+### Dot Badge
+
+The `igx-badge` component can also render as a minimal dot indicator for notifications by enabling its `dot` property. Dot badges do not support content, but they can be outlined and can use any of the available dot types (e.g., primary, success, info, etc.).
+
+<code-view style="height: 100px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/data-display/badge-dot-sample/" >
+</code-view>
+
 ### Badge in List
 
 Let's extend the previous sample and create a list with contacts, similar to those in chat clients. In addition to the contact name, we want to display an avatar and the current state of the contact (online, offline or away). To achieve this, we're using the [`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) and [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) components. For a container, [`igx-list`]({environment:angularApiUrl}/classes/igxlistcomponent.html) is used.
diff --git a/en/components/charts/chart-overview.md b/en/components/charts/chart-overview.md
index dce655feeb..015ad9cf46 100644
--- a/en/components/charts/chart-overview.md
+++ b/en/components/charts/chart-overview.md
@@ -342,7 +342,7 @@ If you are considering any other Angular Charts on the market, here are a few th
 <!-- Angular -->
 
 - Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular.
-- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Sketch designs. With Indigo.Design, everything you craft in Sketch from our Indigo Design System matches to our Ignite UI for Angular controls.
+- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls.
 
 <!-- end: Angular -->
 
diff --git a/en/components/date-range-picker.md b/en/components/date-range-picker.md
index b6ddef0e33..9ee038d480 100644
--- a/en/components/date-range-picker.md
+++ b/en/components/date-range-picker.md
@@ -122,7 +122,7 @@ The Angular Date Range Picker component also allows configuring two separate inp
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-start-end" >
+           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-start-end/" >
 </code-view>
 
 ### Popup modes
@@ -135,7 +135,7 @@ By default, when clicked, the [`IgxDateRangePickerComponent`]({environment:angul
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-mode" >
+           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-mode/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/en/components/general-changelog-dv.md b/en/components/general-changelog-dv.md
index 5f00edb52c..11c436f192 100644
--- a/en/components/general-changelog-dv.md
+++ b/en/components/general-changelog-dv.md
@@ -16,6 +16,10 @@ All notable changes for each version of Ignite UI for Angular are documented on
 
 - [Ignite UI for Angular CHANGELOG.md at Github](https://github.com/IgniteUI/igniteui-angular/blob/master)
 
+## **21.0.0 (January 2026)**
+
+- Angular 21 support.
+
 ## **20.2.1 (December 2025)**
 
 ### Bug Fixes
diff --git a/en/components/general/angular-grid-overview-guide.md b/en/components/general/angular-grid-overview-guide.md
index 6fd7c11aa8..c806a0dc71 100644
--- a/en/components/general/angular-grid-overview-guide.md
+++ b/en/components/general/angular-grid-overview-guide.md
@@ -266,7 +266,7 @@ The Ignite Angular UI toolset also includes [data analysis capabilities](data-an
 
 ## Tools for Code Generation and Design
 
-Ignite UI for Angular is part of the [Indigo.Design System](https://www.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design System") which lets you [generate native Angular code](https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio Plugin") from designs created in Sketch with the [Indigo.Design UI Kit](https://www.infragistics.com/products/indigo-design/help/creating-an-artboard.html "Indigo Design Creating an artboard"). You can generate a mobile-friendly or data-dense grid supporting various editing and filtering modes, but you can also use many of the popular grid features such as sorting, paging, summaries, and group by. Moreover, on every column you can specify various operations like moving, resizing, hiding, and pinning to achieve the most sophisticated data manipulations scenarios at design time and have a pixel-perfect user interface running in minutes.
+Ignite UI for Angular is part of the [Indigo.Design System](https://www.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design System") which lets you [generate native Angular code](https://www.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio Plugin") from designs created in Figma with the [Indigo.Design UI Kit](https://www.infragistics.com/products/indigo-design/help/creating-an-artboard.html "Indigo Design Creating an artboard"). You can generate a mobile-friendly or data-dense grid supporting various editing and filtering modes, but you can also use many of the popular grid features such as sorting, paging, summaries, and group by. Moreover, on every column you can specify various operations like moving, resizing, hiding, and pinning to achieve the most sophisticated data manipulations scenarios at design time and have a pixel-perfect user interface running in minutes.
 
 ## Performance Benchmarks
 
diff --git a/en/components/general/getting-started.md b/en/components/general/getting-started.md
index a7761089f1..10b0b923c1 100644
--- a/en/components/general/getting-started.md
+++ b/en/components/general/getting-started.md
@@ -6,7 +6,7 @@ _keywords: ignite ui for angular, getting started, angular components
 
 # Getting started with Ignite UI for Angular
 
-[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.
+[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Figma UI kits and supporting directives for Angular by Infragistics. It enables developers to build modern high-performance HTML5 & JavaScript apps for desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.
 
 Ignite UI for Angular is offered under a dual-license model, which allows for both commercial and permissive open-source use, depending on the components, modules, directives, and services being used. For more details, refer to the [Ignite UI Licensing](./ignite-ui-licensing.md) and [Open Source vs Premium](./open-source-vs-premium.md) topics.
 
diff --git a/en/components/general/how-to/signal-r-service-live-data.md b/en/components/general/how-to/signal-r-service-live-data.md
index 756616c998..6096ff40b5 100644
--- a/en/components/general/how-to/signal-r-service-live-data.md
+++ b/en/components/general/how-to/signal-r-service-live-data.md
@@ -45,7 +45,7 @@ The purpose of this demo is to showcase a financial screen board with a Real-tim
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager" alt="Angular Live-data Update Example with a service">
+           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager/" alt="Angular Live-data Update Example with a service">
 </code-view>
 
 ## SignalR Server Configuration
diff --git a/en/components/grid-lite/binding.md b/en/components/grid-lite/binding.md
index 8573d60288..8a64aa5088 100644
--- a/en/components/grid-lite/binding.md
+++ b/en/components/grid-lite/binding.md
@@ -47,7 +47,7 @@ the column collection is reset, and a new data source is bound to the grid.
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/data-binding-dynamic" alt="Angular Grid Lite Data Binding Example">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/data-binding-dynamic/" alt="Angular Grid Lite Data Binding Example">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/en/components/grid-lite/cell-template.md b/en/components/grid-lite/cell-template.md
index c9e3d6da0f..1032a79096 100644
--- a/en/components/grid-lite/cell-template.md
+++ b/en/components/grid-lite/cell-template.md
@@ -109,7 +109,7 @@ export interface GridLiteCellContext<
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-simple" alt="Angular Grid Lite Column Config Basic">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-simple/" alt="Angular Grid Lite Column Config Basic">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/en/components/grid-lite/column-configuration.md b/en/components/grid-lite/column-configuration.md
index 6c728c0356..a2f51698ab 100644
--- a/en/components/grid-lite/column-configuration.md
+++ b/en/components/grid-lite/column-configuration.md
@@ -105,7 +105,7 @@ In the sample below you can try out the different column properties and how they
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-dynamic" alt="Angular Grid Lite Column Config Dynamic">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-dynamic/" alt="Angular Grid Lite Column Config Dynamic">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/en/components/grid-lite/filtering.md b/en/components/grid-lite/filtering.md
index ffc5a51e0a..3344ee8537 100644
--- a/en/components/grid-lite/filtering.md
+++ b/en/components/grid-lite/filtering.md
@@ -36,7 +36,7 @@ The **`filter`** property can be either a simple boolean or a
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-simple" alt="Angular Grid Lite Filtering Config">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-simple/" alt="Angular Grid Lite Filtering Config">
 </code-view>
 
 ## Filter Model
@@ -145,7 +145,7 @@ grid.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>)
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-events" alt="Angular Grid Lite Filtering Config Events">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-events/" alt="Angular Grid Lite Filtering Config Events">
 </code-view>
 
 ## Remote filter operations
@@ -182,7 +182,7 @@ The following example mocks remote filter operation, reflecting the REST endpoin
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-pipeline" alt="Angular Grid Lite Filtering Config Remote">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-pipeline/" alt="Angular Grid Lite Filtering Config Remote">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/en/components/grid-lite/header-template.md b/en/components/grid-lite/header-template.md
index 255178c212..5a1f13a02c 100644
--- a/en/components/grid-lite/header-template.md
+++ b/en/components/grid-lite/header-template.md
@@ -40,7 +40,7 @@ import { html } from 'lit';
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-headers" alt="Angular Grid Lite Column Config Headers">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-headers/" alt="Angular Grid Lite Column Config Headers">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/en/components/grid-lite/overview.md b/en/components/grid-lite/overview.md
index 102015511a..0bd740ead5 100644
--- a/en/components/grid-lite/overview.md
+++ b/en/components/grid-lite/overview.md
@@ -21,12 +21,60 @@ Angular Grid Lite features:
 - Sorting
 - Row Virtualization
 - Accessibility
-- Themes And Styling
+- Themes and Styling
 - Column Data Types
 
+## Installation and Setup
+
+### Installation
+To install GridLite, go to the root folder of your project (where `package.json` is located) and run the following command using npm:
+
+```cmd
+npm install igniteui-grid-lite --save
+```
+
+Or using yarn:
+
+```cmd
+yarn add igniteui-grid-lite
+```
+
+### Using Grid Lite in your Angular code
+
+In the file where you want to use Grid Lite, import and register it before your component class is declared:
+
+```typescript
+import { IgcGridLite } from 'igniteui-grid-lite';
+
+IgcGridLite.register();
+```
+
+You also need to add `CUSTOM_ELEMENTS_SCHEMA` because we are working with web components for Grid Lite
+
+```typescript
+@Component({
+  selector: 'app-grid-lite',
+  templateUrl: './grid-lite.component.html',
+  styleUrls: ['./grid-lite.component.scss'],
+  imports: [CommonModule],
+  schemas: [CUSTOM_ELEMENTS_SCHEMA]
+})
+```
+
+Finally add the `<igc-grid-lite>` element to your markup:
+
+```html
+  <igc-grid-lite 
+    [columns]="columns" 
+    [data]="data">
+  </igc-grid-lite>
+```
+
+## Grid Lite in Action
+
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/overview" alt="Angular Grid Lite App Sample Main">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/overview/" alt="Angular Grid Lite App Sample Main">
 </code-view>
 
 Grid Lite controls are completely free, MIT licensed, as a part of our initiative to make Ignite UI more open, transparent, and accessible. However, if your project scales and grows in complexity and functionality, and you require an enterprise-grade application, we have an upgrade strategy for transitioning from the Grid Lite to the full-featured and advanced Data Grid.  
diff --git a/en/components/grid-lite/sorting.md b/en/components/grid-lite/sorting.md
index ab56b11573..8b5c16ffd5 100644
--- a/en/components/grid-lite/sorting.md
+++ b/en/components/grid-lite/sorting.md
@@ -41,7 +41,7 @@ The **`sort`** property can be either a simple boolean or a **`ColumnSortConfigu
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-simple" alt="Angular Grid Lite Sorting Config">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-simple/" alt="Angular Grid Lite Sorting Config">
 </code-view>
 
 ## Single and Multi-Sorting
@@ -82,7 +82,7 @@ The following sample shows the grid **`sortConfiguration`** combinations and how
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-grid-config" alt="Angular Grid Lite Sorting Config Grid">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-grid-config/" alt="Angular Grid Lite Sorting Config Grid">
 </code-view>
 
 ## Sort model
@@ -186,7 +186,7 @@ In the following sample, when you try to sort the **Name** and **Rating** column
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-events" alt="Angular Grid Lite Sorting Config Events">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-events/" alt="Angular Grid Lite Sorting Config Events">
 </code-view>
 
 ## Remote Sort Operations
@@ -222,7 +222,7 @@ The following example mocks remote sorting operation, reflecting the REST endpoi
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-pipeline" alt="Angular Grid Lite Sorting Config Pipeline">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-pipeline/" alt="Angular Grid Lite Sorting Config Pipeline">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/en/components/grid-lite/theming.md b/en/components/grid-lite/theming.md
index c7829ec994..f89093b018 100644
--- a/en/components/grid-lite/theming.md
+++ b/en/components/grid-lite/theming.md
@@ -37,7 +37,7 @@ In the sample below, you can preview all the default base themes.
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-config-themes" alt="Angular Grid Lite Styling Config Themes">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-config-themes/" alt="Angular Grid Lite Styling Config Themes">
 </code-view>
 
 -->
@@ -87,7 +87,7 @@ Here is an example showcasing the custom theming from above.
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-custom" alt="Angular Grid Lite Styling Custom Theme">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-custom/" alt="Angular Grid Lite Styling Custom Theme">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/en/components/grid/grid.md b/en/components/grid/grid.md
index 00e045b803..a1e495e0da 100644
--- a/en/components/grid/grid.md
+++ b/en/components/grid/grid.md
@@ -64,7 +64,7 @@ Boston Marathon 2021 – In this angular grid example, you can see how users can
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
            img-src="https://static.infragistics.com/marketing/Website/products/Ignite-UI-for-Angular/ignite-ui-angular-marathon-app"
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid" alt="Angular data grid example">
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid/" alt="Angular data grid example">
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/en/components/grid/master-detail.md b/en/components/grid/master-detail.md
index 05c0998c3b..2a7c7212fd 100644
--- a/en/components/grid/master-detail.md
+++ b/en/components/grid/master-detail.md
@@ -16,7 +16,7 @@ This mode is useful when you need to display master-detail style data in a hiera
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid-master-detail" alt="Angular Grid Master-Detail Example">
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid-master-detail/" alt="Angular Grid Master-Detail Example">
 </code-view>
 
 
diff --git a/en/components/grids_templates/cell-merging.md b/en/components/grids_templates/cell-merging.md
index 7adce427b8..4230811081 100644
--- a/en/components/grids_templates/cell-merging.md
+++ b/en/components/grids_templates/cell-merging.md
@@ -12,21 +12,21 @@ The Ignite UI for Angular @@igComponent provides a Cell Merging feature that com
 ## Angular Cell Merging Example
 
 @@if(igxName === 'IgxGrid'){
-<code-view style="height:755px"
+<code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge" alt="Angular Cell Merging Example">
+           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge/" alt="Angular Cell Merging Example">
 </code-view>
 }
 @@if(igxName === 'IgxHierarchicalGrid'){
-<code-view style="height:755px"
+<code-view style="height:475px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge" alt="Angular Cell Merging Example">
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge/" alt="Angular Cell Merging Example">
 </code-view>
 }
 @@if(igxName === 'IgxTreeGrid'){
 <code-view style="height:755px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge" alt="Angular Cell Merging Example">
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge/" alt="Angular Cell Merging Example">
 </code-view>
 }
 
@@ -172,10 +172,23 @@ protected customStrategy = new MyCustomStrategy();
 @@if(igxName === 'IgxGrid'){
 
 ### Demo
-
+<code-view style="height:600px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge-custom/" alt="Angular Cell Merging Example with Custom Condition">
+</code-view>
+}
+@@if(igxName === 'IgxHierarchicalGrid'){
+### Demo
+<code-view style="height:425px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge-custom" alt="Angular Cell Merging Example with Custom Condition">
+</code-view>
+}
+@@if(igxName === 'IgxTreeGrid'){
+### Demo
 <code-view style="height:755px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge-custom" alt="Angular Cell Merging Example with Custom Condition">
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge-custom" alt="Angular Cell Merging Example with Custom Condition">
 </code-view>
 }
 
diff --git a/en/components/grids_templates/column-pinning.md b/en/components/grids_templates/column-pinning.md
index 048ad80844..60187235a5 100644
--- a/en/components/grids_templates/column-pinning.md
+++ b/en/components/grids_templates/column-pinning.md
@@ -244,13 +244,14 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
 
 }
 
-Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo bellow for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added ot the toolbar, or simply drag a column to another pinned one.
+### Column Pinning on Both Sides
+Additionally, you can specify each column pinning location separately, allowing you to pin columns to both sides of the grid for greater convenience and easier optimization of data sets. Please refer to the demo below for further reference. In order to pin a column, please either select a column by clicking on a header and use the pin buttons added to the toolbar, or simply drag a column to another pinned one.
 
 @@if (igxName === 'IgxGrid') {
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-pinning-both-sides" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-toolbar-pinning-both-sides/" >
 </code-view>
 
 }
@@ -259,7 +260,7 @@ Additionally, you can specify each column pinning location separately, allowing
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-both-sides-pinning" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-both-sides-pinning/" >
 </code-view>
 
 }
@@ -268,7 +269,7 @@ Additionally, you can specify each column pinning location separately, allowing
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-both-sides-pinning" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-both-sides-pinning/" >
 </code-view>
 
 }
diff --git a/en/components/grids_templates/column-resizing.md b/en/components/grids_templates/column-resizing.md
index 2bddff318a..c2c80d188e 100644
--- a/en/components/grids_templates/column-resizing.md
+++ b/en/components/grids_templates/column-resizing.md
@@ -57,7 +57,7 @@ With deferred grid column resizing, the user will see a temporary resize indicat
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing" alt="Angular @@igComponent Column Resizing Example">
+           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing/" alt="Angular @@igComponent Column Resizing Example">
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/en/components/grids_templates/live-data.md b/en/components/grids_templates/live-data.md
index f3ab44abcc..865146d79e 100644
--- a/en/components/grids_templates/live-data.md
+++ b/en/components/grids_templates/live-data.md
@@ -32,7 +32,7 @@ Feed the same data into the [Line Chart](../charts/types/line-chart.md) to exper
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs?theme-switch=false" alt="Angular Live-data Update Example">
+           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs?theme-switch=false/" alt="Angular Live-data Update Example">
 </code-view>
 
 
@@ -82,7 +82,7 @@ As you can see the igxGrid component handles with ease the high-frequency update
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager" alt="Angular Live-data Update Example with a service">
+           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs-dock-manager/grid-finjs-dock-manager/" alt="Angular Live-data Update Example with a service">
 </code-view>
 
 ### Start the hub connection
@@ -163,7 +163,7 @@ Our community is active and always welcoming to new ideas.
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs" alt="Angular Live-data Update Example">
+           iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs/" alt="Angular Live-data Update Example">
 </code-view>
 
 
diff --git a/en/components/hierarchicalgrid/hierarchical-grid.md b/en/components/hierarchicalgrid/hierarchical-grid.md
index dd65ac0f3f..853c016cc5 100644
--- a/en/components/hierarchicalgrid/hierarchical-grid.md
+++ b/en/components/hierarchicalgrid/hierarchical-grid.md
@@ -15,7 +15,7 @@ In this angular grid example you can see how users can visualize hierarchical se
 
 <code-view style="height:520px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing" alt="Angular Hierarchical Data Grid Example">
+           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing/" alt="Angular Hierarchical Data Grid Example">
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/en/components/inputs/color-editor.md b/en/components/inputs/color-editor.md
index 2ad182dc9e..6dd4c67d94 100644
--- a/en/components/inputs/color-editor.md
+++ b/en/components/inputs/color-editor.md
@@ -13,7 +13,7 @@ The Ignite UI for Angular Color Editor is a lightweight color picker component.
 
 ## Angular Color Editor Example
 
-<code-view style="height: 320px" alt="Angular Color Editor Example"
+<code-view style="height: 340px" alt="Angular Color Editor Example"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
                     iframe-src="{environment:dvDemosBaseUrl}/inputs/color-editor/overview"
                                                  github-src="inputs/color-editor/overview">
diff --git a/en/components/navbar.md b/en/components/navbar.md
index 84573db565..97778a846c 100644
--- a/en/components/navbar.md
+++ b/en/components/navbar.md
@@ -376,7 +376,7 @@ You can find the full list of properties in the [navbar-theme]({environment:sass
 At the end your navbar should look like this:
 
 <div class="sample-container loading" style="height:120px">
-    <iframe id="navbar-tailwind-style-iframe" data-src='{environment:demosBaseUrl}/menus/navbar-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
+    <iframe id="navbar-tailwind-style-iframe" data-src='{environment:demosBaseUrl}/menus/navbar-tailwind-style/' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
 </div>
 
 ## API References
diff --git a/en/components/query-builder-model.md b/en/components/query-builder-model.md
index f07608c7ec..7a311b4257 100644
--- a/en/components/query-builder-model.md
+++ b/en/components/query-builder-model.md
@@ -16,7 +16,7 @@ This Angular Query Builder example demonstrates how the [`IgxQueryBuilderCompone
 <code-view style="height:700px"
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-request-sample" >
+           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-request-sample/" >
 </code-view>
 
 ## Query Builder Model
@@ -226,7 +226,7 @@ Now we can set the `expressionsTree` property of the `IgxQueryBuilderComponent`
 <code-view style="height:700px"
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-sql-sample" >
+           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-sql-sample/" >
 </code-view>
 
 ## API References
diff --git a/en/components/query-builder.md b/en/components/query-builder.md
index 70a16d0298..e4dcefc50a 100644
--- a/en/components/query-builder.md
+++ b/en/components/query-builder.md
@@ -268,7 +268,7 @@ We’ve created this Angular Query Builder example to show you the templating an
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-template-sample" alt="Angular Query Builder Templates Example">
+           iframe-src="{environment:demosBaseUrl}/interactions/query-builder-template-sample/" alt="Angular Query Builder Templates Example">
 </code-view>
 
 ## Styling
diff --git a/en/components/themes/misc/angular-material-theming.md b/en/components/themes/misc/angular-material-theming.md
index 0f00e744b2..c11628ba1e 100644
--- a/en/components/themes/misc/angular-material-theming.md
+++ b/en/components/themes/misc/angular-material-theming.md
@@ -15,7 +15,7 @@ The Ignite UI for Angular theming engine makes it easy to be used together with
 
 Angular Material is a UI component library for mobile and desktop Angular web applications. It includes several prebuilt themes and a great number of components that are based on the [`Material Design specification`](https://material.io/components).
 
-The Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular that enables developers to build modern high-performance apps. Our theming engine is easy to use and allows theming granularity on different levels from a single component, multiple components, or the entire suite. Furthermore, it can be used to style components from other theming libraries with very little effort.
+The Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Figma UI kits and supporting directives for Angular that enables developers to build modern high-performance apps. Our theming engine is easy to use and allows theming granularity on different levels from a single component, multiple components, or the entire suite. Furthermore, it can be used to style components from other theming libraries with very little effort.
 
 The following article demonstrates how to use both Ignite UI and Angular Material components in one application and how to style them to look similar.
 
diff --git a/en/components/themes/misc/bootstrap-theming.md b/en/components/themes/misc/bootstrap-theming.md
index 183d79496a..69b0c1bce8 100644
--- a/en/components/themes/misc/bootstrap-theming.md
+++ b/en/components/themes/misc/bootstrap-theming.md
@@ -13,7 +13,7 @@ The Ignite UI for Angular theming engine provides an opportunity to be used in c
 
 ## Overview
 
-The Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular that enables developers to build modern high-performance apps. Our theming engine is easy to use and allows theming granularity on different levels from a single component, multiple components, or the entire suite. Therefore, some users want to take advantage of it not only with Ignite UI components but also with other libraries. In this article, we will look through the usage of Ignite UI together with Ng Bootstrap components.
+The Ignite UI for Angular is a complete set of Material-based UI Widgets, Components & Figma UI kits and supporting directives for Angular that enables developers to build modern high-performance apps. Our theming engine is easy to use and allows theming granularity on different levels from a single component, multiple components, or the entire suite. Therefore, some users want to take advantage of it not only with Ignite UI components but also with other libraries. In this article, we will look through the usage of Ignite UI together with Ng Bootstrap components.
 
 ## Demo
 
diff --git a/en/components/themes/misc/tailwind-classes.md b/en/components/themes/misc/tailwind-classes.md
index 12ca8c8424..a822b07ffc 100644
--- a/en/components/themes/misc/tailwind-classes.md
+++ b/en/components/themes/misc/tailwind-classes.md
@@ -113,7 +113,7 @@ In the sample below, you’ll see a 404 page built entirely with Tailwind utilit
 
 <code-view style="height: 610px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/theming/tailwind-sample" alt="Tailwind Sample">
+           iframe-src="{environment:demosBaseUrl}/theming/tailwind-sample/" alt="Tailwind Sample">
 </code-view>
 
 >[!NOTE]
diff --git a/en/components/themes/roundness.md b/en/components/themes/roundness.md
index 89712aeaef..7cf480e9b5 100644
--- a/en/components/themes/roundness.md
+++ b/en/components/themes/roundness.md
@@ -50,7 +50,7 @@ You can see the difference between the minimum and maximum border-radius values
 
 <code-view style="height: 210px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/theming/roundness" >
+           iframe-src="{environment:demosBaseUrl}/theming/roundness/" >
 </code-view>
 
 ## Additional Resources
diff --git a/en/components/themes/sass/animations.md b/en/components/themes/sass/animations.md
index 189a186554..2daa45e6b7 100644
--- a/en/components/themes/sass/animations.md
+++ b/en/components/themes/sass/animations.md
@@ -71,7 +71,7 @@ The [animation]({environment:sassApiUrl}/animations#mixin-animation) mixin serve
 We include a list of pre-baked timing functions to use with our keyframes mixins. Read the [documentation]({environment:sassApiUrl}/animations) to find the full list of timing functions.
 
 <div class="sample-container loading" style="height: 270px">
-    <iframe id="animations-sample-2-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-2" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="animations-sample-2-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-2/" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
 <button data-localize="codesandbox" disabled class="codesandbox-btn" data-iframe-id="animations-sample-2-iframe" data-demos-base-url="{environment:demosBaseUrl}">View on codesandbox</button>
@@ -86,7 +86,7 @@ Apart from Sass keyframes and animations mixin, we also include pre-defined Angu
 <div class="divider--half"></div>
 
 <div class="sample-container loading" style="height: 470px">
-    <iframe id="animations-sample-1-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-1" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="animations-sample-1-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-1/" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <p style="margin: 0; padding-top: 0.5rem">Like this sample? Get access to our complete Angular toolkit and start building your own apps in minutes. <a class="no-external-icon mchNoDecorate trackCTA" target="_blank" href="https://www.infragistics.com/products/ignite-ui-angular/download" data-xd-ga-action="Download" data-xd-ga-label="Ignite UI for Angular">Download it for free.</a></p>
 <div>
diff --git a/en/components/tile-manager.md b/en/components/tile-manager.md
index 9a1e10131b..0e99a5bb67 100644
--- a/en/components/tile-manager.md
+++ b/en/components/tile-manager.md
@@ -15,7 +15,7 @@ The following Ignite UI for Angular Tile Manager Example shows the component in
 
 <code-view style="height:752px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/layouts/tile-manager-sample" alt="Angular Tile Manager Example">
+           iframe-src="{environment:demosBaseUrl}/layouts/tile-manager-sample/" alt="Angular Tile Manager Example">
 </code-view>
 <div class="divider--half"></div>
 
diff --git a/en/components/toast.md b/en/components/toast.md
index 0f131d1160..998db305f9 100644
--- a/en/components/toast.md
+++ b/en/components/toast.md
@@ -149,7 +149,7 @@ Use [`displayTime`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#d
 If the sample is configured properly, the toast auto hides faster.
 
 <div class="sample-container loading">
-    <iframe id="toast-sample-4-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-4" class="lazyload"></iframe>
+    <iframe id="toast-sample-4-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-4/" class="lazyload"></iframe>
 </div>
 
 ### Positioning
@@ -282,7 +282,7 @@ You can find the full list of properties in the [IgxToast Theme]({environment:sa
 At the end your toast should look like this:
 
 <div class="sample-container loading" style="height:200px">
-    <iframe id="toast-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/notifications/toast-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
+    <iframe id="toast-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/notifications/toast-tailwind-style/' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
 </div>
 
 <div class="divider--half"></div>
diff --git a/en/components/tooltip.md b/en/components/tooltip.md
index 83d21dc783..7a9bae7b55 100644
--- a/en/components/tooltip.md
+++ b/en/components/tooltip.md
@@ -526,7 +526,7 @@ You can find the full list of properties in the [IgxTooltip Theme]({environment:
 At the end your tooltip should look like this:
 
 <div class="sample-container loading" style="height:100px">
-    <iframe id="tooltip-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/interactions/tooltip-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
+    <iframe id="tooltip-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/interactions/tooltip-tailwind-style/' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
 </div>
 
 <div class="divider--half"></div>
diff --git a/en/components/treegrid/groupby.md b/en/components/treegrid/groupby.md
index e77b47a58a..3a160fc561 100644
--- a/en/components/treegrid/groupby.md
+++ b/en/components/treegrid/groupby.md
@@ -51,7 +51,7 @@ The component's inputs are the following:
 
 <code-view style="height:850px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs" alt="Angular Tree Grid Group By Example">
+           iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs/" alt="Angular Tree Grid Group By Example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -167,6 +167,12 @@ private reloadData() {
 }
 ```
 
+## Known Limitations
+
+|Limitation|Description|
+|--- |--- |
+|Grouping is not updated with batch editing | When using Tree Grid Group By with batch editing enabled (`batchEditing=true`), the grouping is not automatically updated when editing column values that are used for grouping. The grouping will only be updated after committing the transaction. |
+
 ### API References
 
 <div class="divider--half"></div>
diff --git a/en/components/treegrid/tree-grid.md b/en/components/treegrid/tree-grid.md
index cd41bdb336..4408879cf3 100644
--- a/en/components/treegrid/tree-grid.md
+++ b/en/components/treegrid/tree-grid.md
@@ -15,7 +15,7 @@ In this example, you can see how users can display hierarchical data. We have in
 
 <code-view style="height:850px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-childdatakey" alt="Angular tree grid example">
+           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-childdatakey/" alt="Angular tree grid example">
 </code-view>
 
 <div class="divider--half"></div>
@@ -263,7 +263,7 @@ And here is the final result:
 
 <code-view style="height:450px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-primaryforeignkey" >
+           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-primaryforeignkey/" >
 <div class="divider--half"></div>
 
 ## Persistence and Integration
diff --git a/en/images/dockmanager-edge-docking.jpg b/en/images/dockmanager-edge-docking.jpg
new file mode 100644
index 0000000000..86210db8e2
Binary files /dev/null and b/en/images/dockmanager-edge-docking.jpg differ
diff --git a/jp/components/badge.md b/jp/components/badge.md
index a4e1536202..54fa592566 100644
--- a/jp/components/badge.md
+++ b/jp/components/badge.md
@@ -164,6 +164,15 @@ export class BadgeIconComponent implements OnInit {
            iframe-src="{environment:demosBaseUrl}/data-display/badge-icon/" >
 </code-view>
 
+### ドット バッジ
+
+`igx-badge` コンポーネントは、`dot` プロパティを有効にすることで、通知用の最小限のドット インジケーターとして表示することもできます。ドット バッジはコンテンツをサポートしませんが、アウトライン表示が可能で、利用可能なすべてのドット タイプ (例: primary、success、info など) を使用できます。
+
+<code-view style="height: 100px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/data-display/badge-dot-sample/" >
+</code-view>
+
 ### リストのバッジ
 
 チャット クライアントのような連絡先リストを作成します。連絡先の名前を表示し、アバターおよび連絡先の現在状態 (オンライン、オフライン、退席中) を表示します。これを達成するには、[`igx-badge`]({environment:angularApiUrl}/classes/igxbadgecomponent.html) および [`igx-avatar`]({environment:angularApiUrl}/classes/igxavatarcomponent.html) コンポーネントを使用します。コンテナーの場合、[`igx-list`]({environment:angularApiUrl}/classes/igxlistcomponent.html) が使用されます。
diff --git a/jp/components/charts/chart-overview.md b/jp/components/charts/chart-overview.md
index 769b8227d0..cea3708009 100644
--- a/jp/components/charts/chart-overview.md
+++ b/jp/components/charts/chart-overview.md
@@ -345,7 +345,7 @@ alt="Angular チャート マーカー、ツールチップ、およびテンプ
 <!-- Angular -->
 
 - Ignite UI for Angular は、Angular 開発者向けの Angular 上に構築されており、サードパーティの依存関係はありません。Angular 用に 100% 最適化されています。
-- Sketch デザインからピクセル パーフェクトな Angular コントロールを生成する、UX デザイナー、ビジュアル デザイナー、開発者向けのコード プラットフォームに、世界初で唯一のエンドツーエンドの包括的なデザインを提供します。Indigo.Design を使用すると、Indigo Design System から Sketch で作成するすべてのものが Ignite UI for Angular コントロールと一致します。
+- Figma デザインからピクセル パーフェクトな Angular コントロールを生成する、UX デザイナー、ビジュアル デザイナー、開発者向けのコード プラットフォームに、世界初で唯一のエンドツーエンドの包括的なデザインを提供します。Indigo.Design を使用すると、Indigo Design System から Figma で作成するすべてのものが Ignite UI for Angular コントロールと一致します。
 
 <!-- end: Angular -->
 
diff --git a/jp/components/date-range-picker.md b/jp/components/date-range-picker.md
index 3500ea9f1f..c2bf325226 100644
--- a/jp/components/date-range-picker.md
+++ b/jp/components/date-range-picker.md
@@ -136,7 +136,7 @@ Angular Date Range Picker コンポーネントは、開始日と終了日の 2
 
 <code-view style="height:700px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-mode" >
+           iframe-src="{environment:demosBaseUrl}/scheduling/daterangepicker-mode/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/jp/components/general-changelog-dv.md b/jp/components/general-changelog-dv.md
index aba103352d..f89296613a 100644
--- a/jp/components/general-changelog-dv.md
+++ b/jp/components/general-changelog-dv.md
@@ -17,6 +17,24 @@ Ignite UI for Angular の各バージョンのすべての重要な変更は、
 
 - [Ignite UI for Angular 変更ログ (GitHub)](https://github.com/IgniteUI/igniteui-angular/blob/master)
 
+## **20.2.1 (December 2025)**
+
+### バグ修正
+
+| バグ番号 | コントロール | 説明      |
+|------------|---------|-------------|
+|33808|IgxDataChart|TimeAxisInterval の IntervalType Ticks に設定されたスケールが表示されない。|
+|34255|IgxDataChart|0.00001 スケールの目盛りが重なって表示される。|
+|38510|IgxDataChart|Stacked シリーズの AssigningCategoryStyle イベント サポート。|
+
+### 機能拡張
+
+#### チャート
+
+- TimeXAxisLabelFormat に LabelFormatOverride イベントが追加され、TimeXAxis のすべての時間形式レベルでイベントを使用して書式設定をオーバーライドできるようになりました。
+
+- プロパティの有効な値を見つけやすくするために、より多くの項目を考慮するようにスキーマ生成を調整しました。
+
 ## **20.2.0 (November 2025)**
 
 ### igniteui-angular-charts (チャート)
diff --git a/jp/components/general/angular-grid-overview-guide.md b/jp/components/general/angular-grid-overview-guide.md
index 99494deb80..058026a6be 100644
--- a/jp/components/general/angular-grid-overview-guide.md
+++ b/jp/components/general/angular-grid-overview-guide.md
@@ -267,7 +267,7 @@ Ignite Angular UI ツールセットには[データ分析機能](data-analysis.
 
 ### コード生成とデザインのためのツール
 
-Ignite UI for Angular は [Indigo.Design システム](https://jp.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design システム") の一部で、[Indigo.Design UI Kit](https://jp.infragistics.com/products/indigo-design/help/creating-an-artboard.html "はじめてのアートボード作成") を使用して Sketch で作成したデザインから[ネイティブな Angular コード](https://jp.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio プラグイン")を生成できます。さまざまな編集およびフィルタリングモードをサポートするモバイル対応またはデータ密度の高いグリッドを生成できます。また、ソート、ページング、集計、グループ化などの一般的なグリッド機能の多くを使用することもできます。さらに、各列で移動、サイズ変更、非表示、ピン固定などのさまざまな操作を指定して、デザイン時に高度なデータ操作シナリオを実現し、数分で実行できる完璧なピクセルのユーザー インターフェイスを実現できます。
+Ignite UI for Angular は [Indigo.Design システム](https://jp.infragistics.com/products/indigo-design/help/video-tutorials.html "Indigo Design システム") の一部で、[Indigo.Design UI Kit](https://jp.infragistics.com/products/indigo-design/help/creating-an-artboard.html "はじめてのアートボード作成") を使用して Figma で作成したデザインから[ネイティブな Angular コード](https://jp.infragistics.com/products/indigo-design/help/codegen/vscode-plugin.html "Visual Studio プラグイン")を生成できます。さまざまな編集およびフィルタリングモードをサポートするモバイル対応またはデータ密度の高いグリッドを生成できます。また、ソート、ページング、集計、グループ化などの一般的なグリッド機能の多くを使用することもできます。さらに、各列で移動、サイズ変更、非表示、ピン固定などのさまざまな操作を指定して、デザイン時に高度なデータ操作シナリオを実現し、数分で実行できる完璧なピクセルのユーザー インターフェイスを実現できます。
 
 ### パフォーマンスのベンチマーク
 
diff --git a/jp/components/general/getting-started.md b/jp/components/general/getting-started.md
index 527385c9b1..09be096a22 100644
--- a/jp/components/general/getting-started.md
+++ b/jp/components/general/getting-started.md
@@ -7,9 +7,9 @@ _language: ja
 
 # Ignite UI を使用した作業の開始
 
-[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) は、マテリアルベース UI ウィジェット、コンポーネント & Sketch UI キットでインフラジスティックス Angular のディレクティブをサポートします。デスクトップ ブラウザー向けアプリ、高パフォーマンスな HTML5 や JavaScript アプリ、Google の Angular フレームワークを対象にしたプログレッシブ ウェブアプリ (PWA) を作成できます。
+[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) は、マテリアルベース UI ウィジェット、コンポーネント & Figma UI キットでインフラジスティックス Angular のディレクティブをサポートします。デスクトップ ブラウザー向けアプリ、高パフォーマンスな HTML5 や JavaScript アプリ、Google の Angular フレームワークを対象にしたプログレッシブ ウェブアプリ (PWA) を作成できます。
 
-Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープンソース ライセンスが適用されます。詳細については、[Ignite UI のライセンス](./ignite-ui-licensing.md)と[オープン ソースとプレミアム](./open-source-vs-premium.md)のトピックを参照してください。
+Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープン ソース ライセンスが適用されます。詳細については、[Ignite UI のライセンス](./ignite-ui-licensing.md)と[オープン ソースとプレミアム](./open-source-vs-premium.md)のトピックを参照してください。
 
 ## 前提条件
 
@@ -68,7 +68,7 @@ ng add igniteui-angular
 
 プロジェクトに追加したい Ignite UI コンポーネントとして、以下が考えられます。
 
-- Grid Lite - オープンソース
+- Grid Lite - オープン ソース
 
 [Grid Lite コンポーネント](../grid-lite/overview.md)は、MIT ライセンスで利用できる最小限の機能セットを提供し、軽量で高速なデータ表示を必要とする幅広いプロジェクトに適しています。これは、エンタープライズ グリッドの複雑さを避けつつ、高速で軽量なデータ表示を必要とする開発者向けに設計されています。商用版 `IgxGrid` と似た API を持つため、アップグレードも容易です。
 
diff --git a/jp/components/general/ignite-ui-licensing.md b/jp/components/general/ignite-ui-licensing.md
index 322de69cd1..a56d92bf1a 100644
--- a/jp/components/general/ignite-ui-licensing.md
+++ b/jp/components/general/ignite-ui-licensing.md
@@ -7,9 +7,9 @@ _language: ja
 
 # ライセンス FAQ とインストール
 
-Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープンソース ライセンスが適用されます。
+Ignite UI for Angular はデュアルライセンス モデルで提供され、使用するコンポーネント、モジュール、ディレクティブ、サービスに応じて商用ライセンスまたはオープン ソース ライセンスが適用されます。
 
-どのライセンスがパッケージのどの部分に適用されるかを理解することが重要です。どのコンポーネントにどのライセンスが適用されるかは、[オープンソースとプレミアム](./open-source-vs-premium.md) トピックに詳しく記載されています。
+どのライセンスがパッケージのどの部分に適用されるかを理解することが重要です。どのコンポーネントにどのライセンスが適用されるかは、[オープン ソースとプレミアム](./open-source-vs-premium.md) トピックに詳しく記載されています。
 
 ## 使用許諾契約
 
diff --git a/jp/components/general/open-source-vs-premium.md b/jp/components/general/open-source-vs-premium.md
index 2a1ce1eca3..463c26ddaf 100644
--- a/jp/components/general/open-source-vs-premium.md
+++ b/jp/components/general/open-source-vs-premium.md
@@ -1,20 +1,20 @@
 ---
-title: オープンソース vs プレミアム | Ignite UI for Angular | インフラジスティックス
+title: オープン ソース vs プレミアム | Ignite UI for Angular | インフラジスティックス
 _description: Ignite UI for Angular は、高速で機能が豊富なネイティブ Angular UI コンポーネントと、マテリアル デザインに基づく UI コントロールからなる完全なライブラリです。
 _keywords: ignite ui for angular, はじめに, angular コンポーネント
 _language: ja
 ---
  
-# Ignite UI for Angular におけるオープンソース版とプレミアム版
+# Ignite UI for Angular におけるオープン ソース版とプレミアム版
 
-{ProductName} では、モダンなデータドリブン アプリケーションを構築するために、オープンソース コンポーネントとプレミアム コンポーネントという 2 つのパスを提供しています。この二本立てのアプローチにより、開発者はプロジェクトのあらゆる段階で最適な選択が可能になります。
+{ProductName} では、モダンなデータドリブン アプリケーションを構築するために、オープン ソース コンポーネントとプレミアム コンポーネントという 2 つのパスを提供しています。この二本立てのアプローチにより、開発者はプロジェクトのあらゆる段階で最適な選択が可能になります。
 
-## オープンソース コンポーネント
+## オープン ソース コンポーネント
 
 MIT ライセンスのもとで利用できる 40 以上の UI コンポーネントを提供しています。グリッド ライト、アコーディオン、アバター、バッジ、バナー、ボタン、カレンダー、カルーセル、チェックボックス、チップ、コンボボックス、日付ピッカー、ドロップダウン、入力、リスト ビュー、スナックバーなどが含まれます。([全コンポーネントの比較表](#全コンポーネントの比較表))
 
-すべてのオープンソース コンポーネントは、トピックのヘッダーに次のようにマークされています:
-![alt text](/jp/images/open-source-text.png)
+すべてのオープン ソース コンポーネントは、トピックのヘッダーに次のようにマークされています:
+![alt text](../../images/open-source-text.png)
 
 これらは、エンタープライズ向けの高度な機能までは必要としない、軽量なアプリケーションに最適です。プロダクション環境で自由に利用できるほか、カスタマイズやフォーク、GitHub を通じたコントリビュートも可能です。商用ライセンスは不要です。
 
@@ -33,7 +33,7 @@ Ignite UI のプレミアム コンポーネントは、高度なエンタープ
 - [スプレッドシート](../spreadsheet-overview.md)
 - ゲージ - [ブレットグラフ](../bullet-graph.md)、[リニアゲージ](../linear-gauge.md)および[ラジアルゲージ](../radial-gauge.md)
 
-すべてのプレミアム コンポーネントは、トピックのヘッダーに次のようにマークされます。![alt text](/jp/images/premium-text.png)
+すべてのプレミアム コンポーネントは、トピックのヘッダーに次のようにマークされます。![alt text](../../images/premium-text.png)
 
 すべてのプレミアム コンポーネントはローカル環境で評価できるほか、ウォーターマーク付きでプロダクション環境でもテスト可能です。ただし、顧客向けの本番デプロイや、高度なグリッドやチャートをはじめとする各種プレミアム コントロールのフル機能を利用するには、商用ライセンスが必要です。
 
@@ -43,7 +43,7 @@ Ignite UI のプレミアム コンポーネントは、高度なエンタープ
 
 ## 全コンポーネントの比較表
 
-| コンポーネント                          | オープンソース | プレミアム |
+| コンポーネント                          | オープン ソース | プレミアム |
 |-----------------------------------|-------------|---------|
 | Accordion                         | ✅          | ✅      |
 | Action Strip                      | ✅          | ✅      |
diff --git a/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md b/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md
index c8e10c5921..823d0348d3 100644
--- a/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md
+++ b/jp/components/general/wpf-to-angular-guide/create-first-angular-app.md
@@ -13,7 +13,7 @@ WPF から Angular へ移行する際の Angular アプリケーションの作
 
 ### 前提条件
 
-Angular アプリケーションの作成を開始するには、Node.js と npm パッケージ マネージャーをインストールする必要があります。Node.js は、ブラウザーの外部で JavaScript コードを実行する JavaScript ランタイム環境です。Node.js を取得するには、[nodejs.org](https://nodejs.org) にアクセスします。NPM は、.NET 用の NuGet パッケージマネージャーに似たパッケージ マネージャーです。デフォルトで Node.js とともにインストールされます。IDE も必要です。Angular アプリケーションの開発に最適な環境の 1 つは、Visual Studio Code です。無料のオープンソースであり、すべてのプラットフォームで実行できます。[code.visualstudio.com](https://code.visualstudio.com/) から取得できます。
+Angular アプリケーションの作成を開始するには、Node.js と npm パッケージ マネージャーをインストールする必要があります。Node.js は、ブラウザーの外部で JavaScript コードを実行する JavaScript ランタイム環境です。Node.js を取得するには、[nodejs.org](https://nodejs.org) にアクセスします。NPM は、.NET 用の NuGet パッケージマネージャーに似たパッケージ マネージャーです。デフォルトで Node.js とともにインストールされます。IDE も必要です。Angular アプリケーションの開発に最適な環境の 1 つは、Visual Studio Code です。無料のオープン ソースであり、すべてのプラットフォームで実行できます。[code.visualstudio.com](https://code.visualstudio.com/) から取得できます。
 
 ### 新しいプロジェクトの作成
 
diff --git a/jp/components/grid-lite/binding.md b/jp/components/grid-lite/binding.md
index 41f9d1e132..243b723496 100644
--- a/jp/components/grid-lite/binding.md
+++ b/jp/components/grid-lite/binding.md
@@ -1,6 +1,6 @@
 ---
 title: Angular Grid Lite データ バインディング | Ignite UI for Angular | MIT ライセンス
-_description: Angular Grid Lite のデータ バインディング。オープンソースの Angular Grid Lite を使用してアプリを作成できます。軽量でありながら、必要な機能がすべて揃っています。今すぐお試しください。
+_description: Angular Grid Lite のデータ バインディング。オープン ソースの Angular Grid Lite を使用してアプリを作成できます。軽量でありながら、必要な機能がすべて揃っています。今すぐお試しください。
 _keywords: データ バインディング, インフラジスティックス
 _license: MIT
 mentionedTypes: [{ComponentApiMembers}]
@@ -46,7 +46,7 @@ grid.data = [];
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/data-binding-dynamic" alt="Angular Grid Lite データ バインディングの例">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/data-binding-dynamic/" alt="Angular Grid Lite データ バインディングの例">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/jp/components/grid-lite/cell-template.md b/jp/components/grid-lite/cell-template.md
index a69a572890..45a82da3d6 100644
--- a/jp/components/grid-lite/cell-template.md
+++ b/jp/components/grid-lite/cell-template.md
@@ -1,6 +1,6 @@
 ---
 title: Angular Grid Lite セル テンプレート | Ignite UI for Angular | MIT ライセンス
-_description: カスタム Grid Lite セル レンダラーを構成およびカスタマイズします。オープンソースの Angular Grid Lite を使用してアプリを作成できます。今すぐお試しください。
+_description: カスタム Grid Lite セル レンダラーを構成およびカスタマイズします。オープン ソースの Angular Grid Lite を使用してアプリを作成できます。今すぐお試しください。
 _keywords: セル テンプレート, インフラジスティックス
 _license: MIT
 mentionedTypes: [{ComponentApiMembers}]
@@ -106,7 +106,7 @@ export interface GridLiteCellContext<
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-simple" alt="Angular Grid Lite 列の基本構成">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-simple/" alt="Angular Grid Lite 列の基本構成">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/jp/components/grid-lite/column-configuration.md b/jp/components/grid-lite/column-configuration.md
index 9738c36efa..ddedff195a 100644
--- a/jp/components/grid-lite/column-configuration.md
+++ b/jp/components/grid-lite/column-configuration.md
@@ -1,6 +1,6 @@
 ---
 title: Angular Grid Lite 列の構成 | Ignite UI for Angular | MIT ライセンス
-_description: Grid Lite 列の構成と列のプロパティ。オープンソースの Angular Grid Lite をお試しください。軽量でありながら、必要な機能がすべて搭載されています。
+_description: Grid Lite 列の構成と列のプロパティ。オープン ソースの Angular Grid Lite をお試しください。軽量でありながら、必要な機能がすべて搭載されています。
 _keywords: 列の構成, インフラジスティックス
 _license: MIT
 mentionedTypes: [{ComponentApiMembers}]
@@ -104,7 +104,7 @@ Grid Lite コンポーネントの各列は、列定義で **`resizable`** プ
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-dynamic" alt="Angular Grid Lite 列のダイナミック構成">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-dynamic/" alt="Angular Grid Lite 列のダイナミック構成">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/jp/components/grid-lite/filtering.md b/jp/components/grid-lite/filtering.md
index ad1ff6da5d..02d733d07c 100644
--- a/jp/components/grid-lite/filtering.md
+++ b/jp/components/grid-lite/filtering.md
@@ -1,6 +1,6 @@
 ---
 title: Angular Grid Lite フィルタリング | Ignite UI for Angular | MIT ライセンス
-_description: Angular Grid Lite のフィルター操作、フィルターのカスタマイズ、およびリモート フィルタリング。オープンソースの Angular Grid Lite を使用してアプリを作成できます。今すぐお試しください。
+_description: Angular Grid Lite のフィルター操作、フィルターのカスタマイズ、およびリモート フィルタリング。オープン ソースの Angular Grid Lite を使用してアプリを作成できます。今すぐお試しください。
 _keywords: フィルタリング, {Platform}, {ComponentKeywords}, {ProductName}, インフラジスティックス
 _license: MIT
 mentionedTypes: [{ComponentApiMembers}]
@@ -36,7 +36,7 @@ Grid Lite は、データ ソースでのフィルター操作をサポートし
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-simple" alt="Angular Grid Lite フィルタリング構成">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-simple/" alt="Angular Grid Lite フィルタリング構成">
 </code-view>
 
 ## フィルター モデル
@@ -144,7 +144,7 @@ grid.addEventListener('filtered', (event: CustomEvent<GridLiteFilteredEvent<T>>)
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-events" alt="Angular Grid Lite フィルタリング構成イベント">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-events/" alt="Angular Grid Lite フィルタリング構成イベント">
 </code-view>
 
 ## リモート フィルター操作
@@ -180,7 +180,7 @@ grid.dataPipelineConfiguration = { filter: (params: DataPipelineParams<T>) => T[
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-pipeline" alt="Angular Grid Lite フィルタリング リモート構成">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/filtering-pipeline/" alt="Angular Grid Lite フィルタリング リモート構成">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/jp/components/grid-lite/header-template.md b/jp/components/grid-lite/header-template.md
index c5ec9ddd24..bdaa0a9530 100644
--- a/jp/components/grid-lite/header-template.md
+++ b/jp/components/grid-lite/header-template.md
@@ -1,6 +1,6 @@
 ---
 title: Angular Grid Lite ヘッダー テンプレート | Ignite UI for Angular | MIT ライセンス
-_description: カスタム Grid Lite 列ヘッダー レンダラーを構成およびカスタマイズします。オープンソースの Angular Grid Lite を使用してアプリケーションを構築できます。今すぐお試しください。
+_description: カスタム Grid Lite 列ヘッダー レンダラーを構成およびカスタマイズします。オープン ソースの Angular Grid Lite を使用してアプリケーションを構築できます。今すぐお試しください。
 _keywords: ヘッダー テンプレート, {Platform}, {ComponentKeywords}, {ProductName}, インフラジスティックス
 _license: MIT
 mentionedTypes: [{ComponentApiMembers}]
@@ -41,7 +41,7 @@ import { html } from 'lit';
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-headers" alt="Angular Grid Lite 列構成ヘッダー">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/column-config-headers/" alt="Angular Grid Lite 列構成ヘッダー">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/jp/components/grid-lite/overview.md b/jp/components/grid-lite/overview.md
index 293260d19f..4bbb375fc5 100644
--- a/jp/components/grid-lite/overview.md
+++ b/jp/components/grid-lite/overview.md
@@ -1,6 +1,6 @@
 ---
 title: Angular Grid Lite の概要 | Ignite UI for Angular | MIT ライセンス
-_description: オープンソースの Grid Lite を使用してアプリを作成できます。軽量でありながら、フィルタリング、非表示、ソート など、必要な機能がすべて搭載されています。今すぐお試しください。
+_description: オープン ソースの Grid Lite を使用してアプリを作成できます。軽量でありながら、フィルタリング、非表示、ソート など、必要な機能がすべて搭載されています。今すぐお試しください。
 _keywords: 概要, {Platform}, {ComponentKeywords}, {ProductName}, インフラジスティックス
 _license: MIT
 mentionedTypes: [{ComponentApiMembers}]
@@ -8,9 +8,9 @@ namespace: Infragistics.Controls
 _language: ja
 ---
 
-# あらゆるプロジェクトに対応するオープンソース JavaScript Grid
+# あらゆるプロジェクトに対応するオープン ソース JavaScript Grid
 
-Ignite UI for Angular Grid Lite コンポーネントは、インフラジスティックスの新しいオープンソース UI コンポーネント セットの一部であり、今後も継続的にサポートおよびメンテナンスされます。これはオープンソースの JavaScript データ グリッドで、Web コンポーネントとして構築されているため、Web フレームワークの有無に関係なく依存関係なしで使用できます。現在、Angular、React、Blazor、Web Components 向けに 50 以上の OSS コントロールが MIT ライセンスのもとで利用可能です。
+Ignite UI for Angular Grid Lite コンポーネントは、インフラジスティックスの新しいオープン ソース UI コンポーネント セットの一部であり、今後も継続的にサポートおよびメンテナンスされます。これはオープン ソースの JavaScript データ グリッドで、Web コンポーネントとして構築されているため、Web フレームワークの有無に関係なく依存関係なしで使用できます。現在、Angular、React、Blazor、Web Components 向けに 50 以上の OSS コントロールが MIT ライセンスのもとで利用可能です。
 
 Angular Grid Lite は、必要最小限のオーバーヘッドで本質的なデータ表示機能を提供し、ユーザーが期待するパフォーマンスを実現します。これは、エンタープライズ グリッドの複雑さを避けつつ、高速で軽量なデータ表示を必要とする開発者向けに設計されています。
 
@@ -27,7 +27,7 @@ Angular Grid Lite の機能:
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/overview" alt="Angular Grid Lite メイン アプリ サンプル">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/overview/" alt="Angular Grid Lite メイン アプリ サンプル">
 </code-view>
 
 Grid Lite コントロールは完全に無料で、MIT ライセンスの下で提供されており、Ignite UI をよりオープンで透明性が高く、アクセスしやすいものにするための取り組みの一環です。しかし、プロジェクトが拡大し、複雑さや機能が増し、エンタープライズ グレードのアプリケーションが必要になった場合には、Grid Lite からフル機能で高度な Data Grid へ移行するためのアップグレード戦略をご用意しています。  
diff --git a/jp/components/grid-lite/sorting.md b/jp/components/grid-lite/sorting.md
index 9cb5b6bfef..563379fbb9 100644
--- a/jp/components/grid-lite/sorting.md
+++ b/jp/components/grid-lite/sorting.md
@@ -42,7 +42,7 @@ Grid Lite はデータ ソースに対してソート操作をサポートしま
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-simple" alt="Angular Grid Lite ソート構成">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-simple/" alt="Angular Grid Lite ソート構成">
 </code-view>
 
 ## 単一および複数列ソート
@@ -83,7 +83,7 @@ grid.sortConfiguration = { multiple: false, triState: true };
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-grid-config" alt="Angular Grid Lite Sorting Config Grid">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-grid-config/" alt="Angular Grid Lite Sorting Config Grid">
 </code-view>
 
 ## ソート モデル
@@ -184,7 +184,7 @@ grid.addEventListener('sorted', (event: CustomEvent<SortExpression<T>>) => { ...
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-events" alt="Angular Grid Lite ソート構成イベント">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-events/" alt="Angular Grid Lite ソート構成イベント">
 </code-view>
 
 ## リモート ソート操作
@@ -220,7 +220,7 @@ grid.dataPipelineConfiguration = { sort: (params: DataPipelineParams<T>) => T[]
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-pipeline" alt="Angular Grid Lite ソート構成パイプライン">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/sorting-pipeline/" alt="Angular Grid Lite ソート構成パイプライン">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/jp/components/grid-lite/theming.md b/jp/components/grid-lite/theming.md
index b90592d474..1fa6919567 100644
--- a/jp/components/grid-lite/theming.md
+++ b/jp/components/grid-lite/theming.md
@@ -1,6 +1,6 @@
 ---
 title: Angular Grid Lite テーマ設定 | Ignite UI for Angular | MIT ライセンス
-_description: Ignite UI for Angular で Grid Lite のスタイル設定は、容易かつ迅速に行えます。デモと例をお試しください。オープンソース コンポーネントをお試しになり、次のアプリを構築してください。
+_description: Ignite UI for Angular で Grid Lite のスタイル設定は、容易かつ迅速に行えます。デモと例をお試しください。オープン ソース コンポーネントをお試しになり、次のアプリを構築してください。
 _keywords: スタイル設定, テーマ設定, {Platform}, {ComponentKeywords}, {ProductName}, インフラジスティックス
 _license: MIT
 mentionedTypes: [{ComponentApiMembers}]
@@ -38,7 +38,7 @@ In the sample below, you can preview all the default base themes.
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-config-themes" alt="Angular Grid Lite Styling Config Themes">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-config-themes/" alt="Angular Grid Lite Styling Config Themes">
 </code-view>
 
 -->
@@ -88,7 +88,7 @@ $my-light-palette: palette(
 
 <code-view style="height:510px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-custom" alt="Angular Grid Lite スタイル設定のカスタム テーマ">
+           iframe-src="{environment:demosBaseUrl}/grid-lite/styling-custom/" alt="Angular Grid Lite スタイル設定のカスタム テーマ">
 </code-view>
 
 <!-- TODO ## API References
diff --git a/jp/components/grid/grid.md b/jp/components/grid/grid.md
index 5c2f783e32..5634389ed7 100644
--- a/jp/components/grid/grid.md
+++ b/jp/components/grid/grid.md
@@ -64,7 +64,7 @@ Boston Marathon 2021 – この Angular グリッドの例では、ユーザー
 <code-view style="height:700px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
            img-src="https://static.infragistics.com/marketing/Website/products/Ignite-UI-for-Angular/ignite-ui-angular-marathon-app"
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid" alt="Angular データ グリッドの例">
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid/" alt="Angular データ グリッドの例">
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/jp/components/grid/master-detail.md b/jp/components/grid/master-detail.md
index 67b00cad48..dcf88f5ab0 100644
--- a/jp/components/grid/master-detail.md
+++ b/jp/components/grid/master-detail.md
@@ -17,7 +17,7 @@ _language: ja
 
 <code-view style="height:600px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid-master-detail" alt="Angular Grid Master-Detail の例">
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid-master-detail/" alt="Angular Grid Master-Detail の例">
 </code-view>
 
 ## 構成
diff --git a/jp/components/grids_templates/cell-merging.md b/jp/components/grids_templates/cell-merging.md
index 6d0731ece6..83ebdfd6d0 100644
--- a/jp/components/grids_templates/cell-merging.md
+++ b/jp/components/grids_templates/cell-merging.md
@@ -13,21 +13,21 @@ Ignite UI for Angular の @@igComponent には、同じ値を持つ隣接セル
 ## Angular セル結合の例
 
 @@if(igxName === 'IgxGrid'){
-<code-view style="height:755px"
+<code-view style="height:600px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge" alt="Angular セル結合の例">
+           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge/" alt="Angular セル結合の例">
 </code-view>
 }
 @@if(igxName === 'IgxHierarchicalGrid'){
-<code-view style="height:755px"
+<code-view style="height:475px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge" alt="Angular セル結合の例">
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge/" alt="Angular セル結合の例">
 </code-view>
 }
 @@if(igxName === 'IgxTreeGrid'){
 <code-view style="height:755px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge" alt="Angular セル結合の例">
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge/" alt="Angular セル結合の例">
 </code-view>
 }
 
@@ -167,9 +167,25 @@ protected customStrategy = new MyCustomStrategy();
 @@if(igxName === 'IgxGrid'){
 ### デモ
 
+<code-view style="height:600px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge-custom/" alt="カスタム条件付き Angular セル結合の例">
+</code-view>
+}
+
+@@if(igxName === 'IgxHierarchicalGrid'){
+### デモ
+<code-view style="height:425px"
+           data-demos-base-url="{environment:demosBaseUrl}"
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-cell-merge-custom" alt="カスタム条件付き Angular セル結合の例">
+</code-view>
+}
+
+@@if(igxName === 'IgxTreeGrid'){
+### デモ
 <code-view style="height:755px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/grid/grid-cellMerge-custom" alt="カスタム条件付き Angular セル結合の例">
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-cell-merge-custom" alt="カスタム条件付き Angular セル結合の例">
 </code-view>
 }
 
diff --git a/jp/components/grids_templates/column-pinning.md b/jp/components/grids_templates/column-pinning.md
index fb15dd895f..c403daba92 100644
--- a/jp/components/grids_templates/column-pinning.md
+++ b/jp/components/grids_templates/column-pinning.md
@@ -241,6 +241,8 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
 
 }
 
+### 両側の列ピン固定
+
 各列のピン固定位置を個別に指定できるため、グリッドの両側に列をピン固定して利便性を高め、データ セットの最適化を容易にすることができます。詳細については、以下のデモを参照してください。列をピン固定するには、ヘッダーをクリックして列を選択し、ツールバーに追加されたピン固定ボタンを使用するか、列を別のピン固定された列にドラッグします。
 
 @@if (igxName === 'IgxGrid') {
diff --git a/jp/components/navbar.md b/jp/components/navbar.md
index 9fcce771c6..ee2a7a36a1 100644
--- a/jp/components/navbar.md
+++ b/jp/components/navbar.md
@@ -377,7 +377,7 @@ $custom-navbar-theme: navbar-theme(
 最終的に、navbar は次のようになります:
 
 <div class="sample-container loading" style="height:120px">
-    <iframe id="navbar-tailwind-style-iframe" data-src='{environment:demosBaseUrl}/menus/navbar-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
+    <iframe id="navbar-tailwind-style-iframe" data-src='{environment:demosBaseUrl}/menus/navbar-tailwind-style/' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
 </div>
 
 ## API リファレンス
diff --git a/jp/components/themes/misc/angular-material-theming.md b/jp/components/themes/misc/angular-material-theming.md
index c78da9e446..b1dbb6f00f 100644
--- a/jp/components/themes/misc/angular-material-theming.md
+++ b/jp/components/themes/misc/angular-material-theming.md
@@ -17,7 +17,7 @@ Ignite UI for Angular テーマ エンジンを使用すると、[`Angular Mater
 
 Angular Material は、モバイルおよびデスクトップの Angular Web アプリケーション用の UI コンポーネント ライブラリです。これには、いくつかの事前に作成されたテーマと、[`マテリアル デザイン仕様`](https://material.io/components)に基づく多数のコンポーネントが含まれています。
 
-Ignite UI for Angular は、マテリアル ベースの UI ウィジェット、コンポーネント、および Sketch UI キットの完全なセットで、Angular のディレクティブをサポートします。テーマ エンジンは使いやすく、単一のコンポーネント、複数のコンポーネント、またはスイート全体からさまざまなレベルでテーマを設定できます。さらに、他のテーマ ライブラリのコンポーネントをほとんど手間をかけずにスタイル設定するために使用できます。
+Ignite UI for Angular は、マテリアル ベースの UI ウィジェット、コンポーネント、および Figma UI キットの完全なセットで、Angular のディレクティブをサポートします。テーマ エンジンは使いやすく、単一のコンポーネント、複数のコンポーネント、またはスイート全体からさまざまなレベルでテーマを設定できます。さらに、他のテーマ ライブラリのコンポーネントをほとんど手間をかけずにスタイル設定するために使用できます。
 
 次の記事では、1 つのアプリケーションで Ignite UI コンポーネントと Angular Material コンポーネントの両方を使用する方法と、それらを同じように表示する方法を示します。
 
diff --git a/jp/components/themes/misc/bootstrap-theming.md b/jp/components/themes/misc/bootstrap-theming.md
index 60f06955d3..a1e60abfd9 100644
--- a/jp/components/themes/misc/bootstrap-theming.md
+++ b/jp/components/themes/misc/bootstrap-theming.md
@@ -15,7 +15,7 @@ Ignite UI for Angular テーマ エンジンは、Bootstrap のマークアッ
 
 ## 概要
 
-Ignite UI for Angular は、マテリアル ベースの UI ウィジェット、コンポーネント、および Sketch UI キットの完全なセットで、Angular のディレクティブをサポートします。テーマ エンジンは使いやすく、単一のコンポーネント、複数のコンポーネント、またはスイート全体からさまざまなレベルでテーマを設定できます。そのため、一部のユーザーが Ignite UI コンポーネントだけでなく他のライブラリでも利用できます。このトピックでは、Ignite UI と Ng Bootstrap コンポーネントの使用方法について説明します。
+Ignite UI for Angular は、マテリアル ベースの UI ウィジェット、コンポーネント、および Figma UI キットの完全なセットで、Angular のディレクティブをサポートします。テーマ エンジンは使いやすく、単一のコンポーネント、複数のコンポーネント、またはスイート全体からさまざまなレベルでテーマを設定できます。そのため、一部のユーザーが Ignite UI コンポーネントだけでなく他のライブラリでも利用できます。このトピックでは、Ignite UI と Ng Bootstrap コンポーネントの使用方法について説明します。
 
 ## デモ
 
diff --git a/jp/components/themes/misc/tailwind-classes.md b/jp/components/themes/misc/tailwind-classes.md
index 49a5fc697f..df916328d7 100644
--- a/jp/components/themes/misc/tailwind-classes.md
+++ b/jp/components/themes/misc/tailwind-classes.md
@@ -114,7 +114,7 @@ Tailwind が提供するすべてのシャドウ関連のユーティリティ 
 
 <code-view style="height: 610px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/theming/tailwind-sample" alt="Tailwind サンプル">
+           iframe-src="{environment:demosBaseUrl}/theming/tailwind-sample/" alt="Tailwind サンプル">
 </code-view>
 
 >[!NOTE]
diff --git a/jp/components/themes/roundness.md b/jp/components/themes/roundness.md
index 39d91174d4..0eb3c4830e 100644
--- a/jp/components/themes/roundness.md
+++ b/jp/components/themes/roundness.md
@@ -51,7 +51,7 @@ igx-chip {
 
 <code-view style="height: 210px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/theming/roundness" >
+           iframe-src="{environment:demosBaseUrl}/theming/roundness/" >
 </code-view>
 
 ## その他のリソース
diff --git a/jp/components/themes/sass/animations.md b/jp/components/themes/sass/animations.md
index 35584ab27f..9a93c01131 100644
--- a/jp/components/themes/sass/animations.md
+++ b/jp/components/themes/sass/animations.md
@@ -72,7 +72,7 @@ Ignite UI for Angular [keyframes]({environment:sassApiUrl}/animations#mixin-keyf
 キーフレーム ミックスインで使用するタイミング関数のリストが含まれています。タイミング関数の全てのリストの詳細は、[ドキュメント]({environment:sassApiUrl}/animations)をご覧ください。
 
 <div class="sample-container loading" style="height: 270px">
-    <iframe id="animations-sample-2-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-2" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="animations-sample-2-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-2/" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <div>
 <button data-localize="codesandbox" disabled class="codesandbox-btn" data-iframe-id="animations-sample-2-iframe" data-demos-base-url="{environment:demosBaseUrl}">codesandbox で表示</button>
@@ -87,7 +87,7 @@ Sass キーフレームとアニメーション ミックスインの他に、
 <div class="divider--half"></div>
 
 <div class="sample-container loading" style="height: 470px">
-    <iframe id="animations-sample-1-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-1" onload="onSampleIframeContentLoaded(this);"></iframe>
+    <iframe id="animations-sample-1-iframe" frameborder="0" seamless="" width="100%" height="100%" src="{environment:demosBaseUrl}/theming/animations-sample-1/" onload="onSampleIframeContentLoaded(this);"></iframe>
 </div>
 <p style="margin: 0; padding-top: 0.5rem">このサンプルが気に入りましたか? 完全な Angular ツールキットにアクセスして、すばやく独自のアプリの作成を開始します。<a class="no-external-icon mchNoDecorate trackCTA" target="_blank" href="https://jp.infragistics.com/products/ignite-ui-angular/download" data-xd-ga-action="Download" data-xd-ga-label="Ignite UI for Angular">無料でダウンロードできます。</a></p>
 <div>
diff --git a/jp/components/tile-manager.md b/jp/components/tile-manager.md
index 0ba0662007..a00381f1e5 100644
--- a/jp/components/tile-manager.md
+++ b/jp/components/tile-manager.md
@@ -15,7 +15,7 @@ Tile Manager コンポーネントを使用すると、コンテンツを個々
 
 <code-view style="height:752px"
            data-demos-base-url="{environment:demosBaseUrl}"
-           iframe-src="{environment:demosBaseUrl}/layouts/tile-manager-sample" alt="Angular Tile Manager の例">
+           iframe-src="{environment:demosBaseUrl}/layouts/tile-manager-sample/" alt="Angular Tile Manager の例">
 </code-view>
 <div class="divider--half"></div>
 
diff --git a/jp/components/toast.md b/jp/components/toast.md
index 64a3b61a6b..2dee1825fa 100644
--- a/jp/components/toast.md
+++ b/jp/components/toast.md
@@ -150,7 +150,7 @@ public showMessage() {
 サンプルが正しく構成された場合、Toast が自動ですばやく非表示になります。
 
 <div class="sample-container loading">
-    <iframe id="toast-sample-4-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-4" class="lazyload"></iframe>
+    <iframe id="toast-sample-4-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-4/" class="lazyload"></iframe>
 </div>
 
 ### 配置
@@ -283,7 +283,7 @@ $custom-toast-theme: toast-theme(
 最終的に、toast は次のようになります:
 
 <div class="sample-container loading" style="height:200px">
-    <iframe id="toast-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/notifications/toast-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
+    <iframe id="toast-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/notifications/toast-tailwind-style/' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
 </div>
 
 <div class="divider--half"></div>
diff --git a/jp/components/toc.yml b/jp/components/toc.yml
index 8265df3f2c..59d2c2f6f5 100644
--- a/jp/components/toc.yml
+++ b/jp/components/toc.yml
@@ -5,7 +5,7 @@
 - name: Angular - 完全ガイド
   href: general/angular-grid-overview-guide.md
   new: false
-- name: オープンソース vs プレミアム
+- name: オープン ソース vs プレミアム
   href: general/open-source-vs-premium.md
   new: true
 - name: ライセンス
diff --git a/jp/components/tooltip.md b/jp/components/tooltip.md
index 02ee9e4d3f..1bcaffa0be 100644
--- a/jp/components/tooltip.md
+++ b/jp/components/tooltip.md
@@ -526,7 +526,7 @@ $dark-tooltip: tooltip-theme(
 最終的に、tooltip は次のようになります:
 
 <div class="sample-container loading" style="height:100px">
-    <iframe id="tooltip-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/interactions/tooltip-tailwind-style' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
+    <iframe id="tooltip-tailwind-styling-iframe" data-src='{environment:demosBaseUrl}/interactions/tooltip-tailwind-style/' width="100%" height="100%" seamless frameBorder="0" class="lazyload"></iframe>
 </div>
 
 <div class="divider--half"></div>
diff --git a/jp/components/treegrid/groupby.md b/jp/components/treegrid/groupby.md
index 90b001fc19..fc3652b41d 100644
--- a/jp/components/treegrid/groupby.md
+++ b/jp/components/treegrid/groupby.md
@@ -166,6 +166,12 @@ private reloadData() {
 }
 ```
 
+## 既知の制限
+
+|制限|説明|
+|--- |--- |
+|バッチ編集でグループ化が更新されない | バッチ編集を有効にした (`batchEditing=true`) Tree Grid グループ化を使用する場合、グループ化に使用される列の値を編集してもグループ化は自動的に更新されません。グループ化は、トランザクションをコミットした後にのみ更新されます。|
+
 ### API リファレンス
 
 <div class="divider--half"></div>
diff --git a/jp/components/treegrid/tree-grid.md b/jp/components/treegrid/tree-grid.md
index 9f716eb65d..ab678e682e 100644
--- a/jp/components/treegrid/tree-grid.md
+++ b/jp/components/treegrid/tree-grid.md
@@ -16,7 +16,7 @@ Ignite UI for Angular Tree Grid は、階層データまたはフラットな自
 
 <code-view style="height:850px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-childdatakey" alt="Angular ツリー グリッドの例">
+           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-childdatakey/" alt="Angular ツリー グリッドの例">
 </code-view>
 
 <div class="divider--half"></div>
@@ -264,7 +264,7 @@ export class MyComponent implements OnInit {
 
 <code-view style="height:450px"
            data-demos-base-url="{environment:lobDemosBaseUrl}"
-           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-primaryforeignkey" >
+           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-primaryforeignkey/" >
 <div class="divider--half"></div>
 
 ## パーシステンスとインテグレーション
diff --git a/kr/components/charts/chart-overview.md b/kr/components/charts/chart-overview.md
index a843a09a33..55afa16e9c 100644
--- a/kr/components/charts/chart-overview.md
+++ b/kr/components/charts/chart-overview.md
@@ -330,6 +330,6 @@ If you are considering any other Angular Charts on the market, here are a few th
 <!-- Angular -->
 
 - Ignite UI for Angular is built on Angular for the Angular developer, with zero 3rd party dependencies. We are 100% optimized for Angular.
-- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Sketch designs. With Indigo.Design, everything you craft in Sketch from our Indigo Design System matches to our Ignite UI for Angular controls.
+- We offer the world’s first, and only, end-to-end comprehensive design to code platform for UX Designers, Visual Designers, and Developers that will generate pixel-perfect Angular controls from Figma designs. With Indigo.Design, everything you craft in Figma from our Indigo Design System matches to our Ignite UI for Angular controls.
 
 <!-- end: Angular -->
diff --git a/kr/components/excel_library_using_tables.md b/kr/components/excel_library_using_tables.md
index 185fb44896..df064be343 100644
--- a/kr/components/excel_library_using_tables.md
+++ b/kr/components/excel_library_using_tables.md
@@ -13,7 +13,7 @@ The Infragistics Excel Engine's [`WorksheetTable`]({environment:dvApiBaseUrl}/pr
 
 <code-view style="height: 500px"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
-           iframe-src="{environment:dvDemosBaseUrl}/excel/excel-library-working-with-tables"  >
+           iframe-src="{environment:dvDemosBaseUrl}/excel/excel-library-working-with-tables/"  >
 </code-view>
 
 -->
diff --git a/kr/components/exporter-excel.md b/kr/components/exporter-excel.md
index 3aa0ae9359..5099d7cf4e 100644
--- a/kr/components/exporter-excel.md
+++ b/kr/components/exporter-excel.md
@@ -18,7 +18,7 @@ Ignite UI for Angular의 Excel 내보내기 서비스는 원시 데이터(배열
 
 <code-view style="height: 100px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/services/export-excel" >
+           iframe-src="{environment:demosBaseUrl}/services/export-excel/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -115,7 +115,7 @@ public exportButtonHandler() {
 
 <code-view style="height: 300px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/services/export-excel-sample-1" >
+           iframe-src="{environment:demosBaseUrl}/services/export-excel-sample-1/" >
 </code-view>
 
 
diff --git a/kr/components/general/getting-started.md b/kr/components/general/getting-started.md
index d98df7b159..2e86b26a56 100644
--- a/kr/components/general/getting-started.md
+++ b/kr/components/general/getting-started.md
@@ -7,7 +7,7 @@ _language: kr
 
 ## Getting started with Ignite UI for Angular
 
-[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Sketch UI kits and supporting directives for Angular by Infragistics. Ignite UI for Angular is designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.
+[`Ignite UI for Angular`](https://github.com/IgniteUI/igniteui-angular) is a complete set of Material-based UI Widgets, Components & Figma UI kits and supporting directives for Angular by Infragistics. Ignite UI for Angular is designed to enable developers to build the most modern, high-performance HTML5 & JavaScript apps for modern desktop browsers, mobile experiences and progressive web apps (PWA’s) targeting Google's Angular framework.
 
 Before you can run Ignite UI for Angular, there are 2 steps to get everything on your machine set up to run any Angular app, including Ignite UI for Angular, and to build Ignite UI for Angular apps.
 
diff --git a/kr/components/grid/grid.md b/kr/components/grid/grid.md
index 3d3a15d36d..6f70d2dcf6 100644
--- a/kr/components/grid/grid.md
+++ b/kr/components/grid/grid.md
@@ -14,7 +14,7 @@ _language: kr
 
 <code-view style="height:700px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/grid/grid" >
+           iframe-src="{environment:lobDemosBaseUrl}/grid/grid/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -413,7 +413,7 @@ Achieving a state persistence framework is easier than ever by using the new bui
 
 <code-view style="height:915px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs" >
+           iframe-src="{environment:lobDemosBaseUrl}/grid-finjs/" >
 </code-view>
 
 
diff --git a/kr/components/grids_templates/column-hiding.md b/kr/components/grids_templates/column-hiding.md
index e1f592b0c3..9f0bd30980 100644
--- a/kr/components/grids_templates/column-hiding.md
+++ b/kr/components/grids_templates/column-hiding.md
@@ -30,7 +30,7 @@ The Material UI Grid has a built-in column hiding UI, which can be used through
 
 <code-view style="height:600px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-toolbar-sample" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-toolbar-sample/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -39,7 +39,7 @@ The Material UI Grid has a built-in column hiding UI, which can be used through
 
 <code-view style="height:600px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding-toolbar" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding-toolbar/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -48,7 +48,7 @@ The Material UI Grid has a built-in column hiding UI, which can be used through
 
 <code-view style="height:570px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-hiding" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-hiding/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -402,7 +402,7 @@ export class AppModule {}
 
 <code-view style="height:600px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-sample" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-column-hiding-sample/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -411,7 +411,7 @@ export class AppModule {}
 
 <code-view style="height:600px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-hiding/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/grids_templates/column-moving.md b/kr/components/grids_templates/column-moving.md
index b84004539e..35a059b04b 100644
--- a/kr/components/grids_templates/column-moving.md
+++ b/kr/components/grids_templates/column-moving.md
@@ -48,7 +48,7 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin
 
 <code-view style="height:650px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-moving-sample" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-moving-sample/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -57,7 +57,7 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin
 
 <code-view style="height:650px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-moving" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-moving/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -66,7 +66,7 @@ The @@igComponent component in Ignite UI for Angular provides the **Column Movin
 
 <code-view style="height:660px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-moving" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-moving/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/grids_templates/column-pinning.md b/kr/components/grids_templates/column-pinning.md
index dd32ab9f68..9c9f672467 100644
--- a/kr/components/grids_templates/column-pinning.md
+++ b/kr/components/grids_templates/column-pinning.md
@@ -29,7 +29,7 @@ A column or multiple columns can be pinned to the left-hand side of the Angular
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-sample-toolbar-pinning" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-sample-toolbar-pinning/" >
 </code-view>
 
 }
@@ -37,7 +37,7 @@ A column or multiple columns can be pinned to the left-hand side of the Angular
 
 <code-view style="height:630px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-pinning" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-toolbar-pinning/" >
 </code-view>
 
 }
@@ -45,7 +45,7 @@ A column or multiple columns can be pinned to the left-hand side of the Angular
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-pinning" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-toolbar-pinning/" >
 </code-view>
 
 }
@@ -230,7 +230,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-sample-right-pinning" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-sample-right-pinning/" >
 </code-view>
 
 }
@@ -239,7 +239,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sample-right-pinning" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-sample-right-pinning/" >
 </code-view>
 
 }
@@ -248,7 +248,7 @@ public pinningConfig: IPinningConfig = { columns: ColumnPinningPosition.End };
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-sample-right-pinning" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-sample-right-pinning/" >
 </code-view>
 
 }
@@ -352,7 +352,7 @@ public toggleColumn(col: IgxColumnComponent) {
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-sample-pinning" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-sample-pinning/" >
 </code-view>
 
 }
@@ -360,7 +360,7 @@ public toggleColumn(col: IgxColumnComponent) {
 
 <code-view style="height:630px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-pinning" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-column-pinning/" >
 </code-view>
 
 }
@@ -368,7 +368,7 @@ public toggleColumn(col: IgxColumnComponent) {
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-pinning" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-pinning/" >
 </code-view>
 
 }
@@ -495,7 +495,7 @@ This way, due to Angular's [ViewEncapsulation](https://angular.io/api/core/Compo
 <code-view style="height:506px" 
            no-theming
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-pinning-styling" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-pinning-styling/" >
 </code-view>
 
 }
diff --git a/kr/components/grids_templates/column-resizing.md b/kr/components/grids_templates/column-resizing.md
index a1d59d44c7..564026699c 100644
--- a/kr/components/grids_templates/column-resizing.md
+++ b/kr/components/grids_templates/column-resizing.md
@@ -52,7 +52,7 @@ _language: kr
 
 <code-view style="height:510px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing" >
+           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/grids_templates/excel-style-filtering.md b/kr/components/grids_templates/excel-style-filtering.md
index 64adfd9be0..9186812428 100644
--- a/kr/components/grids_templates/excel-style-filtering.md
+++ b/kr/components/grids_templates/excel-style-filtering.md
@@ -33,7 +33,7 @@ Ignite UI for Angular의 @@igComponent 컴포넌트는 Excel과 유사한 필터
 
 <code-view style="height:950px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-1" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-1/" >
 </code-view>
 
 }
@@ -41,7 +41,7 @@ Ignite UI for Angular의 @@igComponent 컴포넌트는 Excel과 유사한 필터
 
 <code-view style="height:950px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-1" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-1/" >
 </code-view>
 
 }
@@ -49,7 +49,7 @@ Ignite UI for Angular의 @@igComponent 컴포넌트는 Excel과 유사한 필터
 
 <code-view style="height:950px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-1/" >
 </code-view>
 
 }
@@ -193,7 +193,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
 
 <code-view style="height:900px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-2" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-2/" >
 </code-view>
 
 }
@@ -201,7 +201,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
 
 <code-view style="height:900px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-2" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-2/" >
 </code-view>
 
 }
@@ -209,7 +209,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
 
 <code-view style="height:900px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-2/" >
 </code-view>
 
 }
@@ -324,7 +324,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
 
 <code-view style="height:900px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-3" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-excel-style-filtering-sample-3/" >
 </code-view>
 
 }
@@ -332,7 +332,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
 
 <code-view style="height:900px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-3" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-excel-style-filtering-sample-3/" >
 </code-view>
 
 }
@@ -340,7 +340,7 @@ Excel 스타일 필터링을 켜려면 2개의 입력을 설정해야 합니다.
 
 <code-view style="height:900px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-excel-style-filtering-sample-3/" >
 </code-view>
 
 }
diff --git a/kr/components/grids_templates/row-drag.md b/kr/components/grids_templates/row-drag.md
index bd7f1b2336..9d018e80f1 100644
--- a/kr/components/grids_templates/row-drag.md
+++ b/kr/components/grids_templates/row-drag.md
@@ -33,7 +33,7 @@ Ignite UI for Angular @@igComponent에서 **RowDrag**는 루트 `@@igSelector` 
 
 <code-view style="height:550px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-to-grid" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-to-grid/" >
 </code-view>
 
 }
@@ -42,7 +42,7 @@ Ignite UI for Angular @@igComponent에서 **RowDrag**는 루트 `@@igSelector` 
 
 <code-view style="height:560px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -52,7 +52,7 @@ Ignite UI for Angular @@igComponent에서 **RowDrag**는 루트 `@@igSelector` 
 
 <code-view style="height:560px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-drag" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-drag/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -269,7 +269,7 @@ enum DragIcon {
 
 <code-view style="height:550px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-to-grid" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-row-drag-to-grid/" >
 </code-view>
 
 
@@ -277,7 +277,7 @@ The following sample demonstrates how to configure row reordering in the grid. H
 
 <code-view style="height:830px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-row-reorder" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-row-reorder/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -287,7 +287,7 @@ The following sample demonstrates how to configure row reordering in the grid. H
 
 <code-view style="height:560px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-drag/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -296,7 +296,7 @@ The following sample demonstrates how to configure row reordering in the tree gr
 
 <code-view style="height:560px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-reordering" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-row-reordering/" >
 </code-view>
 
 <div class="divider--half"></div> 
@@ -306,7 +306,7 @@ The following sample demonstrates how to configure row reordering in the tree gr
 
 <code-view style="height:560px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-drag" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-drag/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -316,7 +316,7 @@ Notice that we also have row selection enabled and we preserve the selection whe
 
 <code-view style="height:560px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-row-reorder" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-row-reorder/" >
 </code-view>
 
 <div class="divider--half"></div> 
diff --git a/kr/components/grids_templates/row-editing.md b/kr/components/grids_templates/row-editing.md
index 21ed49c3f5..a358f4b711 100644
--- a/kr/components/grids_templates/row-editing.md
+++ b/kr/components/grids_templates/row-editing.md
@@ -36,7 +36,7 @@ _language: kr
 
 <code-view style="height:550px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-row-editing" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-row-editing/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -45,7 +45,7 @@ _language: kr
 
 <code-view style="height:590px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-row-edit" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-row-edit/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -54,7 +54,7 @@ _language: kr
    
 <code-view style="height:510px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-editing" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-row-editing/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/grids_templates/selection.md b/kr/components/grids_templates/selection.md
index 8c4a21cc4c..ab32d02cb2 100644
--- a/kr/components/grids_templates/selection.md
+++ b/kr/components/grids_templates/selection.md
@@ -44,7 +44,7 @@ _language: kr
 
 <code-view style="height:700px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-multi-cell-selection" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-multi-cell-selection/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -53,7 +53,7 @@ _language: kr
 
 <code-view style="height:700px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-cell-selection" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/tree-grid-multi-cell-selection/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -188,7 +188,7 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크
 
 <code-view style="height:700px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-selection" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-selection/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -197,7 +197,7 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크
 
 <code-view style="height:700px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-selection" >
+           iframe-src="{environment:demosBaseUrl}/tree-grid/treegrid-selection/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -206,7 +206,7 @@ Ignite UI for Angular에서 행 선택은 해당 행의 모든 열 앞에 체크
 
 <code-view style="height:710px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-selection" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-selection/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -221,7 +221,7 @@ Change the selection to see summaries of the currently selected range.
 
 <code-view style="height: 560px;" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/grid/grid-selection-custom-summaries" >
+           iframe-src="{environment:demosBaseUrl}/grid/grid-selection-custom-summaries/" >
 </code-view>
 
 }
diff --git a/kr/components/hierarchicalgrid/hierarchical-grid.md b/kr/components/hierarchicalgrid/hierarchical-grid.md
index b0d20dd37a..8bdc06fbf4 100644
--- a/kr/components/hierarchicalgrid/hierarchical-grid.md
+++ b/kr/components/hierarchicalgrid/hierarchical-grid.md
@@ -12,7 +12,7 @@ _language: kr
 
 <code-view style="height:520px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing" >
+           iframe-src="{environment:lobDemosBaseUrl}/hierarchical-grid/hierarchical-grid-resizing/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/hierarchicalgrid/load-on-demand.md b/kr/components/hierarchicalgrid/load-on-demand.md
index f33567ac0c..4198182791 100644
--- a/kr/components/hierarchicalgrid/load-on-demand.md
+++ b/kr/components/hierarchicalgrid/load-on-demand.md
@@ -18,7 +18,7 @@ Ignite UI for Angular [`IgxHierarchicalGrid`]({environment:angularApiUrl}/classe
 
 <code-view style="height:620px" 
            data-demos-base-url="{environment:demosBaseUrl}" 
-           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-lod" >
+           iframe-src="{environment:demosBaseUrl}/hierarchical-grid/hierarchical-grid-lod/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/pie-chart.md b/kr/components/pie-chart.md
index 89baf32333..89e5506176 100644
--- a/kr/components/pie-chart.md
+++ b/kr/components/pie-chart.md
@@ -145,7 +145,7 @@ var data = [
 
 <code-view style="height: 350px"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
-           iframe-src="{environment:dvDemosBaseUrl}/charts/pie-chart-explosion"  >
+           iframe-src="{environment:dvDemosBaseUrl}/charts/pie-chart-explosion/"  >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/spreadsheet_chart_adapter.md b/kr/components/spreadsheet_chart_adapter.md
index 9e2cdccfb9..ff6a86ab81 100644
--- a/kr/components/spreadsheet_chart_adapter.md
+++ b/kr/components/spreadsheet_chart_adapter.md
@@ -13,7 +13,7 @@ The Angular Spreadsheet component allows displaying charts in your [`IgxSpreadsh
 
 <code-view style="height: 500px"
            data-demos-base-url="{environment:dvDemosBaseUrl}"
-           iframe-src="{environment:dvDemosBaseUrl}/excel/spreadsheet-adapter"  >
+           iframe-src="{environment:dvDemosBaseUrl}/excel/spreadsheet-adapter/"  >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/toast.md b/kr/components/toast.md
index 1b96b692ee..e1c206e295 100644
--- a/kr/components/toast.md
+++ b/kr/components/toast.md
@@ -51,7 +51,7 @@ In order to display the toast component, use its [`open()`]({environment:angular
 If the sample is configured properly, a toast appears displaying a notification when the button is clicked.
 
 <div class="sample-container loading" style="height: 300px">
-    <iframe id="toast-sample-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-2" class="lazyload"></iframe>
+    <iframe id="toast-sample-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-2/" class="lazyload"></iframe>
 </div>
 
 #### Hide/Auto Hide
@@ -68,7 +68,7 @@ Once opened, the toast disappears after a period specified by the [`displayTime`
 If the sample is configured properly, the toast appears when the 'SHOW' button is clicked. The auto hide feature is disabled and the toast disappears on 'HIDE' button click.
 
 <div class="sample-container loading" style="height: 300px">
-    <iframe id="toast-sample-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-3" class="lazyload"></iframe>
+    <iframe id="toast-sample-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-3/" class="lazyload"></iframe>
 </div>
 
 #### Display Time
@@ -84,7 +84,7 @@ Use [`displayTime`]({environment:angularApiUrl}/classes/igxtoastcomponent.html#d
 If the sample is configured properly, the toast auto hides faster.
 
 <div class="sample-container loading" style="height: 300px">
-    <iframe id="toast-sample-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-4" class="lazyload"></iframe>
+    <iframe id="toast-sample-iframe" frameborder="0" seamless width="100%" height="100%" data-src="{environment:demosBaseUrl}/notifications/toast-sample-4/" class="lazyload"></iframe>
 </div>
 
 #### Positioning
diff --git a/kr/components/treegrid/aggregations.md b/kr/components/treegrid/aggregations.md
index c0439cb71c..af56abbafa 100644
--- a/kr/components/treegrid/aggregations.md
+++ b/kr/components/treegrid/aggregations.md
@@ -13,7 +13,7 @@ _language: kr
 
 <code-view style="height:850px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs" >
+           iframe-src="{environment:lobDemosBaseUrl}/treegrid-finjs/" >
 </code-view>
 
 <div class="divider--half"></div>
diff --git a/kr/components/treegrid/tree-grid.md b/kr/components/treegrid/tree-grid.md
index c8b67ca8a7..5da95e419f 100644
--- a/kr/components/treegrid/tree-grid.md
+++ b/kr/components/treegrid/tree-grid.md
@@ -14,7 +14,7 @@ _language: kr
 
 <code-view style="height:850px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-childdatakey" >
+           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-childdatakey/" >
 </code-view>
 
 <div class="divider--half"></div>
@@ -220,7 +220,7 @@ export class MyComponent implements OnInit {
 
 <code-view style="height:450px" 
            data-demos-base-url="{environment:lobDemosBaseUrl}" 
-           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-primaryforeignkey" >
+           iframe-src="{environment:lobDemosBaseUrl}/tree-grid/treegrid-primaryforeignkey/" >
 </code-view>
 
 <div class="divider--half"></div>