diff --git a/playground/index.tsx b/playground/index.tsx
index 194122d3..51736534 100644
--- a/playground/index.tsx
+++ b/playground/index.tsx
@@ -3,7 +3,7 @@ import ReactDOM from "react-dom/client";
 import {
     LegacyReportsIcon,
     LabelPairedHouseBlankMdRegularIcon,
-    LegacyChevronRight2pxIcon
+    LegacyChevronRight2pxIcon,
 } from "@deriv/quill-icons";
 import {
     MenuItem,
@@ -13,36 +13,65 @@ import {
     DerivLogo,
     Button,
     Wrapper,
+    PlatformSwitcher,
+    Text,
+    PlatformSwitcherItem,
 } from "../src/main";
+import { platformsConfig } from "./platformsConfig";
 
 const App = () => {
     const { isMobile } = useDevice();
     const [is_drawer_open, setDrawerOpen] = React.useState(false);
+
     return (
         <div>
             {!isMobile ? (
                 <Header>
-                    <Wrapper
-                        variant="left"
-                        style={{ gap: "15px", padding: "10px" }}
-                    >
-                        <DerivLogo variant="default" />
+                    <Wrapper variant="left">
+                        <PlatformSwitcher
+                            buttonProps={{
+                                icon: platformsConfig[0].buttonIcon,
+                                style: { padding: "0 16px" },
+                            }}
+                            bottomLink={{
+                                text: "Looking for CFDs? Go to Trader’s Hub",
+                            }}
+                        >
+                            {platformsConfig.map(
+                                ({ description, href, icon, active }) => (
+                                    <PlatformSwitcherItem
+                                        key={description}
+                                        icon={icon}
+                                        href={href}
+                                        description={description}
+                                        active={active}
+                                    />
+                                ),
+                            )}
+                        </PlatformSwitcher>
                         <MenuItem
-                            style={{ marginLeft: "15px", gap: "5px" }}
+                            style={{ gap: "8px", padding: "16px" }}
                             as="button"
                             leftComponent={
                                 <LabelPairedHouseBlankMdRegularIcon />
                             }
                         >
-                            Trader's Hub
+                            <Text size="md">Trader's Hub</Text>
                         </MenuItem>
 
                         <MenuItem
-                            style={{ marginLeft: "15px", gap: "5px" }}
+                            style={{ gap: "8px", padding: "16px" }}
+                            as="button"
+                            leftComponent={<LegacyReportsIcon iconSize="xs" />}
+                        >
+                            <Text size="md">Reports</Text>
+                        </MenuItem>
+                        <MenuItem
+                            style={{ gap: "8px", padding: "16px" }}
                             as="button"
                             leftComponent={<LegacyReportsIcon iconSize="xs" />}
                         >
-                            Reports
+                            <Text size="md">Cashier</Text>
                         </MenuItem>
                     </Wrapper>
                 </Header>
@@ -62,19 +91,29 @@ const App = () => {
                             <DerivLogo variant="default" />
                         </Drawer.Header>
                         <Drawer.Content>
-                            <div style={{display: "flex", flexDirection: "column"}}>
+                            <div
+                                style={{
+                                    display: "flex",
+                                    flexDirection: "column",
+                                }}
+                            >
                                 <MenuItem
-                                    style={{ gap: "5px", display: "flex", padding: "10px" }}
+                                    style={{
+                                        gap: "5px",
+                                        display: "flex",
+                                        padding: "10px",
+                                    }}
                                     active
                                     as="button"
                                     leftComponent={
                                         <LabelPairedHouseBlankMdRegularIcon />
                                     }
-                                    rightComponent={<LegacyChevronRight2pxIcon iconSize="xs" />}
+                                    rightComponent={
+                                        <LegacyChevronRight2pxIcon iconSize="xs" />
+                                    }
                                 >
                                     Trader's Hub
                                 </MenuItem>
-
                             </div>
                         </Drawer.Content>
                         <Drawer.Footer>This is a footer</Drawer.Footer>
diff --git a/playground/platformsConfig.tsx b/playground/platformsConfig.tsx
new file mode 100644
index 00000000..5e7565e1
--- /dev/null
+++ b/playground/platformsConfig.tsx
@@ -0,0 +1,113 @@
+import React, { ReactNode } from "react";
+import {
+    DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon,
+    DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon,
+    PartnersProductSmarttraderBrandLightLogoWordmarkIcon,
+    PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon,
+} from "@deriv/quill-icons/Logo";
+
+export type PlatformsConfig = {
+    href: string;
+    description: string;
+    icon: ReactNode;
+    buttonIcon: ReactNode;
+    active: boolean;
+    showInEU: boolean;
+};
+
+export const platformsConfig: PlatformsConfig[] = [
+    {
+        href: "https://app.deriv.com",
+        showInEU: true,
+        active: true,
+        description:
+            "A whole new trading experience on a powerful yet easy to use platform.",
+        icon: (
+            <DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
+                width={148}
+                height={32}
+            />
+        ),
+        buttonIcon: (
+            <DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
+                width={114.97}
+                height={25}
+            />
+        ),
+    },
+    {
+        href: "https://app.deriv.com/bot",
+        showInEU: false,
+        active: false,
+        description: "Automated trading at your fingertips. No coding needed.",
+        icon: (
+            <DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon
+                width={121}
+                height={32}
+            />
+        ),
+        buttonIcon: (
+            <DerivProductDerivBotBrandLightLogoWordmarkHorizontalIcon
+                width={91}
+                height={24}
+            />
+        ),
+    },
+    {
+        href: "https://smarttrader.deriv.com",
+        showInEU: false,
+        active: false,
+        description:
+            "Trade the world’s markets with our popular user-friendly platform.",
+        icon: (
+            <PartnersProductSmarttraderBrandLightLogoWordmarkIcon
+                width={153}
+                height={32}
+            />
+        ),
+        buttonIcon: (
+            <PartnersProductSmarttraderBrandLightLogoWordmarkIcon
+                width={115}
+                height={24}
+            />
+        ),
+    },
+    {
+        href: "https://bot.deriv.com",
+        showInEU: false,
+        active: false,
+        description:
+            "Our classic “drag-and-drop” tool for creating trading bots, featuring pop-up trading charts, for advanced users.",
+        icon: (
+            <PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon
+                width={133}
+                height={32}
+            />
+        ),
+        buttonIcon: (
+            <PartnersProductBinaryBotBrandLightLogoWordmarkHorizontalIcon
+                width={100}
+                height={24}
+            />
+        ),
+    },
+    {
+        href: "https://app.deriv.com",
+        showInEU: true,
+        active: false,
+        description:
+            "A whole new trading experience on a powerful yet easy to use platform.",
+        icon: (
+            <DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
+                width={148}
+                height={32}
+            />
+        ),
+        buttonIcon: (
+            <DerivProductDerivTraderBrandLightLogoWordmarkHorizontalIcon
+                width={111}
+                height={24}
+            />
+        ),
+    },
+];