diff --git a/.gitignore b/.gitignore
index bfacec0e9..b345f606b 100644
--- a/.gitignore
+++ b/.gitignore
@@ -37,3 +37,8 @@ next-env.d.ts
 /.nuxt/
 /.output/
 
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/package.json b/package.json
index e6ceec410..1dac48b97 100644
--- a/package.json
+++ b/package.json
@@ -49,6 +49,7 @@
     "@biomejs/biome": "^2.2.2",
     "@commitlint/cli": "^19.8.1",
     "@commitlint/config-conventional": "^19.8.1",
+    "@playwright/test": "^1.55.0",
     "@testing-library/dom": "^10.4.1",
     "@testing-library/jest-dom": "^6.8.0",
     "@testing-library/react": "^16.3.0",
diff --git a/packages/widget-playground/src/components/Card/ExpandableCard.tsx b/packages/widget-playground/src/components/Card/ExpandableCard.tsx
index b149046e0..f21714ae0 100644
--- a/packages/widget-playground/src/components/Card/ExpandableCard.tsx
+++ b/packages/widget-playground/src/components/Card/ExpandableCard.tsx
@@ -14,6 +14,7 @@ interface ExpandableCardProps {
   title: ReactNode
   value: ReactNode
   alwaysShowTitleValue?: boolean
+  dataTestId?: string
 }
 
 export const ExpandableCard: FC<PropsWithChildren<ExpandableCardProps>> = ({
@@ -22,6 +23,7 @@ export const ExpandableCard: FC<PropsWithChildren<ExpandableCardProps>> = ({
   value,
   children,
   alwaysShowTitleValue,
+  dataTestId,
 }) => {
   const { expanded, toggleExpanded } = useExpandableCard()
   const buttonId = useId()
@@ -36,6 +38,7 @@ export const ExpandableCard: FC<PropsWithChildren<ExpandableCardProps>> = ({
         onClick={toggleExpanded}
         disableRipple
         sx={{ p: 1 }}
+        data-testid={dataTestId}
       >
         <CardTitleContainer sx={{ minHeight: 24 }}>
           {icon}
diff --git a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx
index 48709cc0b..97d5f87ac 100644
--- a/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/CodeControl/CodeControl.tsx
@@ -46,8 +46,18 @@ export const CodeControl = () => {
           indicatorColor="primary"
           onChange={(_, value) => setCodeControlTab(value)}
         >
-          <Tab label={'Config'} value="config" disableRipple />
-          <Tab label={'Examples'} value="examples" disableRipple />
+          <Tab
+            label={'Config'}
+            value="config"
+            disableRipple
+            data-testid="config-tab"
+          />
+          <Tab
+            label={'Examples'}
+            value="examples"
+            disableRipple
+            data-testid="examples-tab"
+          />
         </Tabs>
       </Box>
       <TabContext value={codeControlTab}>
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx
index d59309855..af2e2a21a 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/AppearanceControl.tsx
@@ -148,6 +148,7 @@ export const AppearanceControl = () => {
           {colorSchemeMode}
         </BadgableCardValue>
       }
+      dataTestId="appearance-section"
     >
       <Box sx={{ display: 'flex', flexDirection: 'column', gap: 1 }}>
         {restricted ? (
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ButtonRaduisControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ButtonRaduisControl.tsx
index c88f0f0ee..e1787b800 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ButtonRaduisControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ButtonRaduisControl.tsx
@@ -64,10 +64,14 @@ export const ButtonRadiusControl = () => {
     <ExpandableCard
       title={'Button Radius'}
       value={
-        <CardValue sx={{ textTransform: 'capitalize' }}>
+        <CardValue
+          sx={{ textTransform: 'capitalize' }}
+          data-testid="button-radius-value"
+        >
           {borderRadiusSecondary}
         </CardValue>
       }
+      dataTestId="button-radius-section"
     >
       <TabButtonsContainer sx={{ mt: 0.5 }}>
         {clickableValues.map((value) => {
@@ -76,6 +80,7 @@ export const ButtonRadiusControl = () => {
               key={value.toString()}
               selected={borderRadiusSecondary === value && focused !== 'input'}
               onClick={() => handleButtonClick(value)}
+              data-testid="button-radius-value"
               onFocus={handleFocusButton}
               disableRipple
             >
@@ -93,6 +98,7 @@ export const ButtonRadiusControl = () => {
           onBlur={handleBlurInput}
           inputProps={{ pattern: '[0-9]' }}
           onFocus={handleFocusInput}
+          data-testid="button-radius-custom-input"
           placeholder={focused === 'input' ? '' : 'Custom'}
           value={customValue}
         />
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/CardRadiusControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/CardRadiusControl.tsx
index 7f6495478..4b9ce0cee 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/CardRadiusControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/CardRadiusControl.tsx
@@ -66,6 +66,7 @@ export const CardRadiusControl = () => {
           {borderRadius}
         </CardValue>
       }
+      dataTestId="card-radius-section"
     >
       <TabButtonsContainer sx={{ mt: 0.5 }}>
         {clickableValues.map((value) => {
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx
index 9228d1200..a9ee2a433 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ColorControls.tsx
@@ -35,7 +35,11 @@ export const ColorControl = () => {
   const { themeMode } = useThemeMode()
   const editableColors = getEditableColors(themeMode)
   return (
-    <ExpandableCard title={'Colors'} value={<Swatches />}>
+    <ExpandableCard
+      title={'Colors'}
+      value={<Swatches />}
+      dataTestId="color-section"
+    >
       {Object.entries(editableColors).map(([colorName, colorConfigPath]) => (
         <ColorSelector
           key={colorConfigPath}
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx
index 1b14f7f1e..a1f5ea8fb 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/FontsControl/FontsControl.tsx
@@ -88,6 +88,7 @@ export const FontsControl = () => {
           )}
         </>
       }
+      dataTestId="fonts-section"
       value={selectedFont?.family}
     >
       {selectedFont && (
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx
index 214249866..0774bfc1c 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/LayoutControls/LayoutControl.tsx
@@ -176,6 +176,7 @@ export const LayoutControl = () => {
             ?.name || ''}
         </CardValue>
       }
+      dataTestId="layout-section"
     >
       <ControlRowContainer
         sx={selectedLayoutId !== 'default' ? { paddingBottom: 0 } : undefined}
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx
index e686ae8fa..523112f03 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/PlaygroundSettingsControl/PlaygroundSettingsControl.tsx
@@ -12,6 +12,7 @@ export const PlaygroundSettingsControl = () => {
       title={'Playground settings'}
       value={<SettingsIcon />}
       alwaysShowTitleValue
+      dataTestId="playground-settings-section"
     >
       <PlaygroundControlsContainer>
         <ViewportColorSelector />
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/SkeletonControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/SkeletonControl.tsx
index 529f92d7f..cece44cb9 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/SkeletonControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/SkeletonControl.tsx
@@ -40,6 +40,7 @@ export const SkeletonControl = () => {
           {isSkeletonShown ? 'shown' : 'hidden'}
         </CardValue>
       }
+      dataTestId="skeleton-section"
     >
       <CardRowContainer sx={{ paddingBottom: 0 }}>
         Show skeleton
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx
index 40068f5c4..48cbf52a8 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/SubvariantControl.tsx
@@ -45,6 +45,7 @@ export const SubvariantControl = () => {
       value={
         <CardValue sx={{ textTransform: 'capitalize' }}>{subvariant}</CardValue>
       }
+      dataTestId="subvariant-section"
     >
       <Tabs
         value={subvariant}
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx
index 4efb61d5d..814d2ded3 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/ThemeControl.tsx
@@ -38,6 +38,7 @@ export const ThemeControl = () => {
           {selectedThemeItem?.name ? selectedThemeItem?.name : 'default'}
         </CardValue>
       }
+      dataTestId="theme-section"
     >
       <Select
         value={selectedThemeId}
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx
index b67c7cb82..8682de2be 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/VariantControl.tsx
@@ -40,6 +40,7 @@ export const VariantControl = () => {
       value={
         <CardValue sx={{ textTransform: 'capitalize' }}>{variant}</CardValue>
       }
+      dataTestId="variant-section"
     >
       <Tabs
         value={variant}
diff --git a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx
index b0a35ca61..215f3c34c 100644
--- a/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DesignControls/WalletManagementControl.tsx
@@ -51,7 +51,7 @@ export const WalletManagementControl = () => {
   }
 
   return (
-    <Card>
+    <Card data-testid="wallet-management-section">
       <CardRowContainer>
         <CardTitleContainer>
           <CardValue>Manage wallet externally</CardValue>
diff --git a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx
index a1f347403..315e6e584 100644
--- a/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx
+++ b/packages/widget-playground/src/components/DrawerControls/DrawerControls.tsx
@@ -58,12 +58,16 @@ export const DrawerControls = () => {
         open={isDrawerOpen}
         drawerWidth={drawerWidth}
       >
-        <DrawerContentContainer drawerWidth={drawerWidth}>
+        <DrawerContentContainer
+          drawerWidth={drawerWidth}
+          data-testid="sidebar-container"
+        >
           <HeaderRow>
             <Header>LI.FI Widget</Header>
             <Box>
               <Tooltip
                 title="Reset config"
+                data-testid="reset-config-icon"
                 slotProps={{
                   popper: { style: { zIndex: tooltipPopperZIndex } },
                 }}
@@ -75,6 +79,7 @@ export const DrawerControls = () => {
               </Tooltip>
               <Tooltip
                 title="Close tools"
+                data-testid="close-tools-icon"
                 slotProps={{
                   popper: { style: { zIndex: tooltipPopperZIndex } },
                 }}
@@ -97,6 +102,7 @@ export const DrawerControls = () => {
                 icon={<DesignServicesIcon />}
                 iconPosition="start"
                 label={'Design'}
+                data-testid="design-tab"
                 value="design"
                 disableRipple
               />
@@ -104,6 +110,7 @@ export const DrawerControls = () => {
                 icon={<IntegrationInstructionsIcon />}
                 iconPosition="start"
                 label={'Code'}
+                data-testid="code-tab"
                 value="code"
                 disableRipple
               />
diff --git a/playwright.config.ts b/playwright.config.ts
new file mode 100644
index 000000000..4aefbb252
--- /dev/null
+++ b/playwright.config.ts
@@ -0,0 +1,84 @@
+import { defineConfig, devices } from '@playwright/test'
+
+/**
+ * Read environment variables from file.
+ * https://github.com/motdotla/dotenv
+ */
+// import dotenv from 'dotenv';
+// import path from 'path';
+// dotenv.config({ path: path.resolve(__dirname, '.env') });
+
+/**
+ * See https://playwright.dev/docs/test-configuration.
+ */
+export default defineConfig({
+  timeout: 60 * 1000, // Reduced from 120s to 60s
+  expect: {
+    timeout: 30 * 1000, // Reduced from 60s to 30s
+  },
+  testDir: './tests',
+  /* Run tests in files in parallel */
+  fullyParallel: true,
+  /* Fail the build on CI if you accidentally left test.only in the source code. */
+  forbidOnly: !!process.env.CI,
+  /* Retry on CI only */
+  retries: process.env.CI ? 2 : 0,
+  /* Opt out of parallel tests on CI. */
+  workers: process.env.CI ? 1 : undefined,
+  /* Reporter to use. See https://playwright.dev/docs/test-reporters */
+  reporter: 'html',
+  /* Shared settings for all the projects below. See https://playwright.dev/docs/api/class-testoptions. */
+  use: {
+    /* Base URL to use in actions like `await page.goto('/')`. */
+    // baseURL: 'http://localhost:3000',
+
+    /* Collect trace when retrying the failed test. See https://playwright.dev/docs/trace-viewer */
+    trace: 'on-first-retry',
+    screenshot: 'only-on-failure',
+  },
+
+  /* Configure projects for major browsers */
+  projects: [
+    {
+      name: 'chromium',
+      use: { ...devices['Desktop Chrome'] },
+    },
+
+    // {
+    //   name: 'firefox',
+    //   use: { ...devices['Desktop Firefox'] },
+    // },
+
+    // {
+    //   name: 'webkit',
+    //   use: { ...devices['Desktop Safari'] },
+    // },
+
+    /* Test against mobile viewports. */
+    // {
+    //   name: 'Mobile Chrome',
+    //   use: { ...devices['Pixel 5'] },
+    // },
+    // {
+    //   name: 'Mobile Safari',
+    //   use: { ...devices['iPhone 12'] },
+    // },
+
+    /* Test against branded browsers. */
+    // {
+    //   name: 'Microsoft Edge',
+    //   use: { ...devices['Desktop Edge'], channel: 'msedge' },
+    // },
+    // {
+    //   name: 'Google Chrome',
+    //   use: { ...devices['Desktop Chrome'], channel: 'chrome' },
+    // },
+  ],
+
+  /* Run your local dev server before starting the tests */
+  webServer: {
+    command: 'pnpm dev',
+    url: 'http://localhost:3000',
+    reuseExistingServer: !process.env.CI,
+  },
+})
diff --git a/tests/sideBar.spec.ts b/tests/sideBar.spec.ts
new file mode 100644
index 000000000..3a98a9c92
--- /dev/null
+++ b/tests/sideBar.spec.ts
@@ -0,0 +1,9 @@
+import { expect, test } from '@playwright/test'
+
+test.describe('Check sections inside sidebar', () => {
+  test('Check sections inside sidebar', async ({ page }) => {
+    await page.goto('http://localhost:3000')
+    const sidebar = page.getByTestId('sidebar-container')
+    await expect(sidebar).toContainText('LI.FI Widget')
+  })
+})