diff --git a/packages/documentation/docs/design-kit/design-kit.md b/packages/documentation/docs/design-kit/design-kit.md
index 8b8afea3bc..ed93a97c2a 100644
--- a/packages/documentation/docs/design-kit/design-kit.md
+++ b/packages/documentation/docs/design-kit/design-kit.md
@@ -17,6 +17,7 @@ The Siemens brand library contains Siemens specific brand elements and is only a
› [Get more information here](https://siemens-ix.code.siemens.io/ix-brand-theme/)
+We leverage the power of Figma tokens to provide you with a seamless and customizable experience when working with our themes. For detailed instructions on how to modify theme variables and select themes using the Figma Siemens Brand library, please visit the [Theme Switching](../guidelines/theme-switching.md) page. Discover the ease and flexibility of designing in Figma with Siemens Industrial Experience.
## Figma classic theme library (Open Source)
Will be available soon.
diff --git a/packages/documentation/docs/guidelines/_theme-switching_code.md b/packages/documentation/docs/guidelines/_theme-switching_code.md
new file mode 100644
index 0000000000..7af341d271
--- /dev/null
+++ b/packages/documentation/docs/guidelines/_theme-switching_code.md
@@ -0,0 +1,15 @@
+import { ApiTableSinceTag } from '@site/src/components/ApiTableTag';
+import PlaygroundV2 from '@site/src/components/PlaygroundV2';
+
+# Theme switching
+
+## Working with themes during runtime
+
+
+
+
+
diff --git a/packages/documentation/docs/guidelines/_theme-switching_styleguide.md b/packages/documentation/docs/guidelines/_theme-switching_styleguide.md
new file mode 100644
index 0000000000..0056bec631
--- /dev/null
+++ b/packages/documentation/docs/guidelines/_theme-switching_styleguide.md
@@ -0,0 +1,33 @@
+# Changing Theme Variables
+
+
+
+Follow these steps to modify the colors and other values of a theme within the Figma Siemens Brand library:
+
+1. Import the "iX Foundation Brand" file into your Figma workspace.
+2. In the top-right corner of the Figma interface, you'll find a button labeled "Open settings" with a settings icon. Click on it to open the variables dialog.
+3. Within the variables dialog, navigate to the desired collection, such as the "iX Colors" collection located at the top-left corner.
+4. From there, you can easily change the values of the variables to adjust the appearance of the theme.
+
+The different themes are organized into columns, allowing you to switch between them effortlessly.
+
+# Selecting a Theme for Designing
+
+When working with the Figma Siemens Brand library, you can apply a theme to either an entire page or an individual element, such as a frame or component:
+
+
+## Applying a Theme to a whole Page
+
+Ensure that no elements are selected on the page. If any elements are selected, press the "Esc" key to deselect them.
+1. In the right panel, you'll find a button with a hexagon symbol on the right side of the "Page" section. Click on it to open the theme selection dropdown.
+2. From the dropdown, you can select the desired theme colors to apply them to the entire page.
+
+## Applying a Theme to an Element
+
+Select the specific element, such as a frame or component, to which you want to apply a theme.
+1. In the right panel, you'll find a button with a hexagon symbol on the right side of the "Layer" section. Click on it to open the theme selection dropdown.
+2. From the dropdown, you can choose the desired theme colors to apply them to the selected element.
+
+Remember, when you apply a theme to an individual element, it will override the page-level theme.
+
+For more information see the official [Figma documentation](https://help.figma.com/hc/en-us/articles/15339657135383-Guide-to-variables-in-Figma).
\ No newline at end of file
diff --git a/packages/documentation/docs/guidelines/theme-switching.md b/packages/documentation/docs/guidelines/theme-switching.md
index 67458d273f..fa79f6f780 100644
--- a/packages/documentation/docs/guidelines/theme-switching.md
+++ b/packages/documentation/docs/guidelines/theme-switching.md
@@ -1,18 +1,12 @@
---
sidebar_position: 2
---
-import { ApiTableSinceTag } from '@site/src/components/ApiTableTag';
-import PlaygroundV2 from '@site/src/components/PlaygroundV2';
-# Theme switching
+import DocsTabs from '@site/src/components/DocsTabs';
-## Working with themes during runtime
+import DocsUx from './\_theme-switching_styleguide.md';
+import DocsCode from './\_theme-switching_code.md';
-
+# Theme Switching
-
-
+