IgniteUI · zdrawku · Apr 11, 2024 · Aug 9, 2023 · Sep 29, 2023 · Oct 31, 2023
diff --git a/en/app-builder-overview.md b/en/app-builder-overview.md
@@ -6,9 +6,9 @@ _keywords: App builder, Indigo Design, Infragistics
 
 # App Builder - Overview 
 
-App Builder is a design to code solution, enabling design and development teams to quickly and easily design and build real web applications, using professionally-built components to generate production-ready, Angular code. Powered by [Ignite UI for Angular]({environment:infragisticsBaseUrl}/products/ignite-ui-angular), App Builder is the newest addition to [Indigo.Design]({environment:infragisticsBaseUrl}/products/indigo-design). 
+App Builder is a design to code solution, enabling design and development teams to quickly and easily design and build real web applications, using professionally-built components to generate production-ready code for Angular, Blazor, Web Components and React.
 
-Through the [App Builder]({environment:infragisticsBaseUrl}/products/indigo-design/app-builder) you are able to build pixel-perfect apps incredibly fast, saving huge amounts of design time and getting apps looking exactly like your design. That is a new generation design tool, where designers use the design system approach and a component library, everything designed is running live, dev ready, with high-quality app code. Speaking of production ready code, everything you design results in production ready Angular repository with all it's components, styles, build setup, etc. So, you do the design and check the instant real-time preview, we'll do the code. Since the App Builder is 100% web based, there is no need to download anything, not heavy IDE's, and no 3rd party dependencies. Everything is on the web, accessible by your whole team on any platform.  
+Through the [App Builder]({environment:appbuilderBaseUrl}/platform) you are able to build pixel-perfect apps incredibly fast, saving huge amounts of design time and getting apps looking exactly like your design. That is a new generation design tool, where designers use the design system approach and a component library, everything designed is running live, dev ready, with high-quality app code. Speaking of production ready code, everything you design results in production ready Angular repository with all it's components, styles, build setup, etc. So, you do the design and check the instant real-time preview, we'll do the code. Since the App Builder is 100% web based, there is no need to download anything, not heavy IDE's, and no 3rd party dependencies. Everything is on the web, accessible by your whole team on any platform.  
 
 Starting your app building experience is fast and easy with one of our pre-built app templates or use one of our preset layout options to build your app in no time. Just tweak our app design, swap a theme and your done! Use pre-configured themes and typography, or customize them to match your own app theme and corporate branding on a per-control, per-screen or per-app basis. Start you new app in the App Builder, build it faster than ever, iterate with new features and get the production-ready code! 
 

diff --git a/en/app-themes/app-themes.md b/en/app-themes/app-themes.md
@@ -13,13 +13,13 @@ An app theme is a collection of color palettes and attributes that create a sens
 <section class="video-container">
     <div>
         <div class="video-container__item">
-            <iframe src="https://www.youtube.com/embed/tuTELBXDKYA" frameborder="0" allowfullscreen></iframe>
+            <iframe src="https://www.youtube.com/embed/gcTyeFp_65c?si=w-3ycuuDZ4whrEZc&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
         </div>
         <p>Customize App Themes</p>
     </div>
 </section>
 
-The [App Builder]({environment:infragisticsBaseUrl}/products/indigo-design/app-builder) adopts a design systems approach to UI creation and you can download app themes and apply them at the app-level. With a single selection of a theme, the theme is globally applied to the whole application immediately. Having global theme avoids the need to create local styles that are difficult to maintain.  
+The [App Builder]({environment:appbuilderBaseUrl}) adopts a design systems approach to UI creation and you can download app themes and apply them at the app-level. With a single selection of a theme, the theme is globally applied to the whole application immediately. Having global theme avoids the need to create local styles that are difficult to maintain.  
 
 ## Switching App Builder themes 
 
@@ -58,5 +58,5 @@ Keep in mind that with the App Builder you can take advantage of Flex layouts, p
 * [Flex Layouts](../flex-layouts/flex-layouts.md)
 * [Ignite UI for Angular Theming]({environment:infragisticsBaseUrl}/products/ignite-ui-angular/angular/components/themes/index)
 * [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [Indigo.Design Components](https://www.infragistics.com/products/indigo-design/help/components/components-overview)
+* [App Builder Components]({environment:appbuilderBaseUrl}/components)
 
diff --git a/en/blazor-support.md b/en/blazor-support.md
@@ -83,5 +83,5 @@ For a list of all supported components see [Generate App](generate-app/generate-
 * [App Builder Components](indigo-design-app-builder-components.md)
 * [Flex Layouts](flex-layouts/flex-layouts.md)
 * [Running Desktop App](running-desktop-app.md)
-* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [Indigo.Design Components](https://www.infragistics.com/products/indigo-design/help/components/components-overview)
+* [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started)
+* [Components]({environment:appbuilderBaseUrl}/components)
diff --git a/en/design-to-code-story.md b/en/design-to-code-story.md
@@ -6,7 +6,7 @@ _keywords: App Builder, Web App Builder, Figma design, Sketch import
 
 # Design-to-Code App Builder story
 
-App Builder enables you to go from Design to Code in a single click. Import Figma, Sketch and Adobe XD files and create Apps with ease. Use the [Indigo.Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit) plugins directly inside Figma, Sketch and Adobe XD to deliver custom themes, import images assets, and ensure all components are mapped one-to-one with controls from the App Builder Toolbox.
+App Builder enables you to go from Design to Code in a single click. First, create your designs with the [Indigo.Design System](https://www.infragistics.com/products/appbuilder/ui-toolkit)  for Figma or Sketch. You can then use our Figma plugin to publish as apps in App Builder. For Sketch, you can import your Sketch files directly into app builder when creating a new app. Once imported, you will find your UI kit components are mapped to components available in the toolbox. This will allow you to extend your app with data and variables to create dynamic app experiences.
 
 <img class="box-shadow" src="./images/indigo-design-ui-kit.PNG" />
 <p style="width: 100%; text-align:center;">Indigo.Design UI Kit</p>
@@ -68,16 +68,6 @@ Now you can start using the plugin.
 <img class="box-shadow" src="./images/figma-plugin.PNG" />
 <p style="width: 100%; text-align:center;">Figma Plugin</p>
 
-##### Adobe XD Plugin
-
-<img class="box-shadow" src="./images/adobe-xd-plugin.PNG" />
-<p style="width: 100%; text-align:center;">Adobe XD Plugin Create App</p>
-
-##### Sketch Plugin
-
-<img class="box-shadow" src="./images/sketch-plugin-create-app.PNG" />
-<p style="width: 100%; text-align:center;">Sketch Plugin Create App</p>
-
 ## Download Assets
 
 You can download the Plugins, UI kits and sample apps from the [Download Assets page.](https://cloud.indigo.design/resources/figma).
@@ -86,17 +76,12 @@ Or through the direct links below:
 - [Figma UI Kit](https://www.figma.com/@infragistics)
 - [Plugin for Figma](https://www.figma.com/community/plugin/1170035114372031474) 
 - [Sample Apps](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_Figma.zip)
-- [Adobe XD UI Kit](https://assets.adobe.com/public/c1a672c5-49e6-4df1-4d32-1c37fa234f1e)
-- [Plugin for Adobe XD](https://exchange.adobe.com/creativecloud/plugindetails.html/app/cc/92c7dec5)
-- [Sample Apps](https://download.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps_XD.zip)
 - [Sketch UI Kit](https://dl.infragistics.com/products/Infragistics/Indigo.Design/ABECAC7231EE434C8CD3DC619BE6F75B/Infragistics_IndigoDesign_UI_Kit.zip)
-- [Plugin for Sketch](https://dl.infragistics.com/products/Infragistics/Indigo.Design/9EB45F5BB4B3442F8B4CECB3EB403063/Infragistics_IndigoDesign_Sketch_Plugin.zip)
 - [Sample apps](https://dl.infragistics.com/products/Infragistics/Indigo.Design/Samples/Infragistics_IndigoDesign_Sample_Apps.zip)
 
 ## Additional Resources
 
 <div class="divider--half"></div>
 
 * [Figma UI Kit](ui-kits/figma.md)
-* [Adobe XD UI kit](ui-kits/adobe-xd.md)
 * [Sketch UI kit](ui-kits/sketch.md)
diff --git a/en/docfx.json b/en/docfx.json
@@ -45,7 +45,7 @@
         "cleanupCacheHistory": true,
         "disableGitFeatures": true,
         "sitemap": {
-            "baseUrl": "https://www.infragistics.com/products/appbuilder/help/",
+            "baseUrl": "https://www.appbuilder.dev/help/",
             "changefreq": "weekly",
             "priority": 0.7
         }

diff --git a/en/environment.json b/en/environment.json
@@ -1,14 +1,17 @@
 {
     "development": {
         "infragisticsBaseUrl": "https://staging.infragistics.com",
+        "appbuilderBaseUrl": "https://staging.appbuilder.dev",
         "GTMContainerId": "GTM-WLXLBZD"
     },
     "staging": {
         "infragisticsBaseUrl": "https://staging.infragistics.com",
+        "appbuilderBaseUrl": "https://staging.appbuilder.dev",
         "GTMContainerId": "GTM-NCKNPN"
     },
     "production": {
         "infragisticsBaseUrl": "https://www.infragistics.com",
+        "appbuilderBaseUrl": "https://appbuilder.dev",
         "GTMContainerId": "GTM-T65CF7"
     }
 }
diff --git a/en/flex-layouts/flex-layouts.md b/en/flex-layouts/flex-layouts.md
@@ -21,7 +21,7 @@ You can now choose from different Flex layout properties to define alignment, de
 <section class="video-container">
     <div>
         <div class="video-container__item">
-            <iframe width="800" height="450" src="https://www.youtube.com/embed/MUq3MGm9YlU" frameborder="0" allowfullscreen></iframe>
+            <iframe width="800" height="450" src="https://www.youtube.com/embed/BRkaSYr7qHU?si=74eY9-rqm90A8kmh&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
         </div>
         <p> Create App Layouts</p>
     </div>
@@ -67,7 +67,7 @@ To summarize quickly, whatever you have learned about Flex layouts can be used h
 
 * [App Builder Components](../indigo-design-app-builder-components.md)
 * [Flexbox](https://developer.mozilla.org/en-US/docs/Learn/CSS/CSS_layout/Flexbox)
-* [A Guide to flexbox](<https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
+* [A Guide to flexbox](https://css-tricks.com/snippets/css/a-guide-to-flexbox/)
 * [Flexbox Froggy](https://flexboxfroggy.com/)
 * [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [Indigo.Design Styling Overview](https://www.infragistics.com/products/indigo-design/help/style/styling-overview)
+* [Indigo.Design Styling Overview](https://www.infragistics.com/products/indigo-design/help/style/styling-overview)
diff --git a/en/generate-app/generate-app-overview.md b/en/generate-app/generate-app-overview.md
@@ -111,4 +111,4 @@ Currently, the App Builder supports code generation for Angular and Blazor. Belo
 * [Run Application Locally](run-application-locally.md)
 * [Preview Application Code](../preview-code.md)
 * [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [Indigo.Design Components](https://www.infragistics.com/products/indigo-design/help/components/components-overview)
+* [App Builder Components]({environment:appbuilderBaseUrl}/components)
diff --git a/en/generate-app/run-application-locally.md b/en/generate-app/run-application-locally.md
@@ -33,4 +33,4 @@ The App Builder allows you to design your applications visually using profession
 * [Upload Application to Github](upload-application-to-github.md)
 * [Preview Application Code](../preview-code.md)
 * [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [Indigo.Design Components](https://www.infragistics.com/products/indigo-design/help/components/components-overview)
+* [appbuilderBaseUrl]({environment:appbuilderBaseUrl}/components)
diff --git a/en/generate-app/upload-application-to-github.md b/en/generate-app/upload-application-to-github.md
@@ -65,4 +65,4 @@ Improvements:
 * [Run Application Locally](run-application-locally.md)
 * [Preview Application Code](../preview-code.md)
 * [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [Indigo.Design Components](https://www.infragistics.com/products/indigo-design/help/components/components-overview)
+* [App Builder Components]({environment:appbuilderBaseUrl}/components)
diff --git a/en/getting-started.md b/en/getting-started.md
@@ -14,30 +14,26 @@ _keywords: App builder, Indigo Design, Infragistics
 <section class="video-container">
     <div>
         <div class="video-container__item">
-            <iframe src="https://www.youtube.com/embed/DK50La2GFJ0" frameborder="0" allowfullscreen></iframe>
+            <iframe src="https://www.youtube.com/embed/QnQV80hWfco?si=Kcg2ZTIBeENvgaga&list=UULF8cj8_eJROxAXsOjhbvduLw" frameborder="0" allowfullscreen></iframe>
         </div>
         <p>Get Started with App Builder</p>
     </div>
 </section>
 
 
 ## Launch App Builder
-You can login directly in your App Builder profile or by signing it with Indigo.Design. You will land in the home screen and from here you can access each of the three core Indigo.Design products - Prototypes and Usability Tests, as well as the newest one - App Builder which can be found under the Apps tab. 
+To access App Builder, navigate to [https://appbuilder.dev](https://appbuilder.dev) and sign in. Alternatively, you can launch App builder directly by visiting [https://my.appbuilder.dev](https://my.appbuilder.dev). You will need an active trial or paid subscription to create and edit apps.
 
-From the App Builder home screen, users can start a new app, preview or edit an existing one. Through the context menu, every existing app can also be renamed, duplicated or archived.  
+## Create new app
+There are thee ways in which you can create a new app from the "Create new application" dilaog:
 
-AB Sign-in
-<img src="./images/Standalone-AB.PNG" srcset="./images/[email protected] 2x" />
+1. **Sample apps** - the getting started apps will help you explore applications that have been created using the App Builder and also allow you to modify them in your own user space. They are also a good source for you to preview generated code for a larger application without having to create your own app from scratch. If you use the App Builder for first time, we recommend to use the sample app option as a starting point. This is the quickest way to onboard yourself with the awesome features of the tool and to start building your application.
+2. **App layouts** - start a new app from scratch, benefiting from a predefined layouts. You will also find the the option to create an app based on a blank template from here.
+4. **Import design** - if you have an existing design file, created using the Indigo.Design UI kit for Figma or Sketch, you can use this as a starting point for your apps. To do this, get our Indigo.Design system, which includes plugins to publish your design, UI kits, and sample design files.
 
-Indigo.Cloud Sign-in
-![Indigo-Design-home-screen](./images/Indigo-Design-home-screen.gif)
-<p style="text-align:center;">Indigo.Design home screen</p>
-
-What you'll see when you launch the [App Builder]({environment:infragisticsBaseUrl}/products/indigo-design/app-builder) for first time is a pop up window suggesting a quick onboarding tour. What you will see next is the create new project dialog. There are four ways to start a new app:
-1. <b>Create from existing design</b> - if you have an existing Sketch file, created using the Indigo.Design UI kit for Sketch, you can upload it at this point and continue your design in the App Builder, without the need to recreate everything from scratch. Note, that due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
-2. <b>Sample apps</b> - the getting started apps will help you explore applications that have been created using the App Builder and also allow you to modify them in your own user space. They are also a good source for you to preview generated code for a larger application without having to create your own app from scratch. If you use the App Builder for first time, we recommend to use the sample app option as a starting point. This is the quickest way to onboard yourself with the awesome features of the tool and to start building your application.
-3. <b>Default layouts</b> - start a new app from scratch, benefiting from a basic predefined layout.
-4. <b>Blank</b> - start a new app from scratch.
+<br>
+> Note: Due to the differences between the absolute layout in Sketch and the Flex layout in the App Builder, some additional adjustments may be needed after parsing your Sketch file.
+<br>
 
 <img src="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder.png" srcset="./images/getting-Started-new-project-dialog-Indigo-Design-App-Builder-@2x.png 2x" />
 <p style="text-align:center;">New project dialog</p>
@@ -101,14 +97,9 @@ In order to run the downloaded application, the following prerequisites need to
 </div>
 <div class="divider--half"></div>
 
-## Tutorial video
-Learn more about our low-code App Builder in our short overview video:
-
-> [!Video https://www.youtube.com/embed/WSQ38lLacH4]
-
 ## Report an issue or send feedback
 
-[This repository](https://github.com/IgniteUI/app-builder) is intended for issues and feature requests submission, as well as for general product discussions, questions and any feedback that you want to share. You can also <a href="mailto:[email protected]">send us an email</a>.
+[This repository](https://github.com/IgniteUI/app-builder) is intended for issues and feature requests submission, as well as for general product discussions, questions and any feedback that you want to share. You can also <a href="mailto:[email protected]">send us an email</a>.
 ## Additional Resources
 <div class="divider--half"></div>
 

diff --git a/en/how-to/responsive-fluid-layout.md b/en/how-to/responsive-fluid-layout.md
@@ -83,7 +83,7 @@ This will make the first column to take twice as much available space (horizonta
 ## And we're done!
 
 Here's the end result of our application in 3 different screen sizes.
-You can also check out the [live app here](https://appbuilder.indigo.design/app/ihyry6j7gpq5/preview)
+You can also check out the [live app here](https://my.appbuilder.dev/app/ihyry6j7gpq5/preview)
 
 ![final-result](../images/how-to/final-result.png)
 

diff --git a/en/indigo-design-app-builder-components.md b/en/indigo-design-app-builder-components.md
@@ -41,6 +41,6 @@ For more complex components, like an input field or say card component, you can
 <div class="divider--half"></div>
 
 * [App Themes](app-themes/app-themes.md)
-* [Indigo.Design Getting Started](https://www.infragistics.com/products/indigo-design/help/getting-started)
-* [Indigo.Design Components](https://www.infragistics.com/products/indigo-design/help/components/components-overview)
+* [Getting Started]({environment:appbuilderBaseUrl}/help/getting-started)
+* [Components]({environment:appbuilderBaseUrl}/components)