diff --git a/.github/workflows/android_build.yml b/.github/workflows/android_build.yml
index 4a0554ec..7dd94d0e 100644
--- a/.github/workflows/android_build.yml
+++ b/.github/workflows/android_build.yml
@@ -19,6 +19,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: ${{ github.ref }}
+          lfs: true
 
       - name: Set up Node.js
         if: ${{ !inputs.skip_build }}
@@ -39,7 +40,9 @@ jobs:
 
       - name: Build dependencies
         if: ${{ !inputs.skip_build }}
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Setup EAS
         if: ${{ !inputs.skip_build }}
diff --git a/.github/workflows/ios_build.yml b/.github/workflows/ios_build.yml
index ac3a5708..778d9698 100644
--- a/.github/workflows/ios_build.yml
+++ b/.github/workflows/ios_build.yml
@@ -19,6 +19,7 @@ jobs:
       - uses: actions/checkout@v2
         with:
           ref: ${{ github.ref }}
+          lfs: true
 
       - name: Set up Node.js
         if: ${{ !inputs.skip_build }}
@@ -48,7 +49,9 @@ jobs:
 
       - name: Build dependencies
         if: ${{ !inputs.skip_build }}
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Setup EAS
         if: ${{ !inputs.skip_build }}
diff --git a/.github/workflows/release.yml b/.github/workflows/release.yml
index 11d52fd1..e419b060 100644
--- a/.github/workflows/release.yml
+++ b/.github/workflows/release.yml
@@ -40,7 +40,9 @@ jobs:
         run: npx lerna version $NEW_VERSION_NUMBER --yes --no-git-tag-version --no-push
 
       - name: Build packages
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Commit and push updated files
         uses: EndBug/add-and-commit@v7
diff --git a/.github/workflows/run_sherlo_async.yml b/.github/workflows/run_sherlo_async.yml
index f5f5e978..b7c9ff84 100644
--- a/.github/workflows/run_sherlo_async.yml
+++ b/.github/workflows/run_sherlo_async.yml
@@ -43,13 +43,16 @@ jobs:
         run: yarn
 
       - name: Build dependencies
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Run Sherlo Action in async mode
         id: sherlo_action # This ID is used to reference the output
         uses: ./.
         with:
           projectRoot: examples/expo-example
+          config: ../../configs/async.storybook.json
           async: true
         env:
           SHERLO_TOKEN: ${{ secrets.SHERLO_TOKEN_ASYNC }}
@@ -82,7 +85,9 @@ jobs:
         run: yarn
 
       - name: Build dependencies
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Download Android Artifact
         uses: actions/download-artifact@v2
@@ -94,6 +99,7 @@ jobs:
         uses: ./.
         with:
           projectRoot: examples/expo-example
+          config: ../../configs/async.storybook.json
           android: builds/preview/android.apk
           asyncBuildIndex: ${{ needs.run_sherlo_async.outputs.buildIndex }}
         env:
@@ -127,7 +133,9 @@ jobs:
         run: yarn
 
       - name: Build dependencies
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Download iOS Artifact
         uses: actions/download-artifact@v2
@@ -139,6 +147,7 @@ jobs:
         uses: ./.
         with:
           projectRoot: examples/expo-example
+          config: ../../configs/async.storybook.json
           ios: builds/preview/ios.tar.gz
           asyncBuildIndex: ${{ needs.run_sherlo_async.outputs.buildIndex }}
         env:
diff --git a/.github/workflows/run_sherlo_eas_hooks.yml b/.github/workflows/run_sherlo_eas_hooks.yml
index 13d6ae02..67b582f7 100644
--- a/.github/workflows/run_sherlo_eas_hooks.yml
+++ b/.github/workflows/run_sherlo_eas_hooks.yml
@@ -2,8 +2,8 @@ name: Run Sherlo with EAS hooks
 
 on:
   pull_request:
-    branches: [ dev ]
-    types: [ labeled ]
+    branches: [dev]
+    types: [labeled]
   workflow_call:
   workflow_dispatch:
 
@@ -21,7 +21,9 @@ jobs:
         run: yarn
 
       - name: Build dependencies
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Setup EAS
         uses: expo/expo-github-action@v8
@@ -35,6 +37,7 @@ jobs:
         uses: ./.
         with:
           projectRoot: examples/expo-example
+          config: ../../configs/eas.preview.json
           async: true
         env:
           SHERLO_TOKEN: ${{ secrets.SHERLO_TOKEN_EAS }}
diff --git a/.github/workflows/run_sherlo_sync.yml b/.github/workflows/run_sherlo_sync.yml
index 8464369f..b41b6107 100644
--- a/.github/workflows/run_sherlo_sync.yml
+++ b/.github/workflows/run_sherlo_sync.yml
@@ -18,6 +18,11 @@ on:
         required: false
         default: false
         type: boolean
+      test_all_nodes:
+        description: 'Test all Node versions'
+        required: false
+        default: false
+        type: boolean
 
 jobs:
   ## Android
@@ -49,6 +54,9 @@ jobs:
     name: Run Sherlo in sync mode
     runs-on: ubuntu-latest
     needs: [android_preview_build, ios_preview_build]
+    strategy:
+      matrix:
+        node-version: ${{ fromJson(github.event.inputs.test_all_nodes && '["18.18.0"]' || '["22.3.0", "21.7.3", "20.14.0", "19.9.0", "18.20.3", "17.9.1", "16.20.2", "15.14.0", "14.21.3", "13.14.0", "12.22.12", "11.15.0", "10.24.1"]') }}
     steps:
       - uses: actions/checkout@v2
         with:
@@ -57,13 +65,15 @@ jobs:
       - name: Set up Node.js
         uses: actions/setup-node@v2
         with:
-          node-version: '18.18.0'
+          node-version: ${{ matrix.node-version }}
 
       - name: Install dependencies
         run: yarn
 
       - name: Build dependencies
-        run: yarn build
+        run: yarn switch-env:dev
+        env:
+          PACKAGE_TOKEN: ${{ secrets.PACKAGE_TOKEN }}
 
       - name: Download Android Artifact
         uses: actions/download-artifact@v2
@@ -77,11 +87,16 @@ jobs:
           name: ios
           path: examples/expo-example/builds/preview
 
+      - name: Echo Directory Path
+        run: |
+          echo "Directory Path: examples/expo-example/builds/preview"
+          ls -la examples/expo-example/builds/preview
+
       - name: Run Sherlo Action
         uses: ./.
         with:
           ios: examples/expo-example/builds/preview/ios.tar.gz
           android: examples/expo-example/builds/preview/android.apk
-          config: examples/expo-example/sherlo.config.json
+          config: configs/sync.preview.json
         env:
           SHERLO_TOKEN: ${{ secrets.SHERLO_TOKEN_SYNC }}
diff --git a/configs/async.storybook.json b/configs/async.storybook.json
new file mode 100644
index 00000000..464616ed
--- /dev/null
+++ b/configs/async.storybook.json
@@ -0,0 +1,89 @@
+{
+  "android": "builds/storybook/android.apk",
+  "ios": "builds/storybook/ios.tar.gz",
+  "include": ["components/screens/"],
+  "devices": [
+    {
+      "id": "pixel.tablet",
+      "osVersion": "13",
+      "osLanguage": "fr_FR",
+      "osTheme": "dark"
+    },
+    {
+      "id": "ipad.9.gen",
+      "osVersion": "15"
+    },
+    {
+      "id": "ipad.9.gen",
+      "osVersion": "16"
+    },
+    {
+      "id": "ipad.9.gen",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.10.gen",
+      "osVersion": "16"
+    },
+    {
+      "id": "ipad.10.gen",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.air.5.gen",
+      "osVersion": "15"
+    },
+    {
+      "id": "ipad.air.5.gen",
+      "osVersion": "16"
+    },
+    {
+      "id": "ipad.air.5.gen",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.air.11.m2",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.air.13.m2",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.mini.6.gen",
+      "osVersion": "15"
+    },
+    {
+      "id": "ipad.mini.6.gen",
+      "osVersion": "16"
+    },
+    {
+      "id": "ipad.mini.6.gen",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.pro.11.4.gen",
+      "osVersion": "16"
+    },
+    {
+      "id": "ipad.pro.11.4.gen",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.pro.11.m4",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.pro.12.9.6.gen",
+      "osVersion": "16"
+    },
+    {
+      "id": "ipad.pro.12.9.6.gen",
+      "osVersion": "17"
+    },
+    {
+      "id": "ipad.pro.13.m4",
+      "osVersion": "17"
+    }
+  ]
+}
diff --git a/configs/demo.preview.json b/configs/demo.preview.json
new file mode 100644
index 00000000..32719e04
--- /dev/null
+++ b/configs/demo.preview.json
@@ -0,0 +1,43 @@
+{
+  "android": "builds/preview/android.apk",
+  "ios": "builds/preview/ios.tar.gz",
+  "include": ["components/screens/"],
+  "devices": [
+    {
+      "id": "pixel.4a",
+      "osVersion": "13",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "pixel.7.pro",
+      "osVersion": "13",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "pixel.tablet",
+      "osVersion": "13",
+      "osLanguage": "fr_FR",
+      "osTheme": "dark"
+    },
+    {
+      "id": "iphone.13.mini",
+      "osVersion": "15",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "iphone.15.pro",
+      "osVersion": "17",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "ipad.pro.13.m4",
+      "osVersion": "17",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    }
+  ]
+}
diff --git a/configs/eas.preview.json b/configs/eas.preview.json
new file mode 100644
index 00000000..d7e67908
--- /dev/null
+++ b/configs/eas.preview.json
@@ -0,0 +1,85 @@
+{
+  "android": "builds/preview/android.apk",
+  "ios": "builds/preview/ios.tar.gz",
+  "include": ["components/screens/"],
+  "devices": [
+    {
+      "id": "pixel.6a",
+      "osVersion": "13",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "pixel.6",
+      "osVersion": "13",
+      "osLanguage": "de_DE",
+      "osTheme": "light"
+    },
+    {
+      "id": "pixel.6.pro",
+      "osVersion": "13",
+      "osLanguage": "fr_FR",
+      "osTheme": "dark"
+    },
+    {
+      "id": "pixel.7",
+      "osVersion": "13",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "pixel.7.pro",
+      "osVersion": "13",
+      "osLanguage": "de_DE",
+      "osTheme": "light"
+    },
+    {
+      "id": "iphone.13.mini",
+      "osVersion": "15"
+    },
+    {
+      "id": "iphone.13.mini",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.13.mini",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.13.pro.max",
+      "osVersion": "15"
+    },
+    {
+      "id": "iphone.13.pro.max",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.13.pro.max",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.13.pro",
+      "osVersion": "15"
+    },
+    {
+      "id": "iphone.13.pro",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.13.pro",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.13",
+      "osVersion": "15"
+    },
+    {
+      "id": "iphone.13",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.13",
+      "osVersion": "17"
+    }
+  ]
+}
diff --git a/configs/sync.preview.json b/configs/sync.preview.json
new file mode 100644
index 00000000..1a674ee3
--- /dev/null
+++ b/configs/sync.preview.json
@@ -0,0 +1,91 @@
+{
+  "android": "builds/preview/android.apk",
+  "ios": "builds/preview/ios.tar.gz",
+  "include": ["components/screens/"],
+  "devices": [
+    {
+      "id": "pixel.4a",
+      "osVersion": "13",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "pixel.4",
+      "osVersion": "13",
+      "osLanguage": "de_DE",
+      "osTheme": "light"
+    },
+    {
+      "id": "pixel.4.xl",
+      "osVersion": "13",
+      "osLanguage": "fr_FR",
+      "osTheme": "dark"
+    },
+    {
+      "id": "pixel.5",
+      "osVersion": "13",
+      "osLanguage": "pl_PL",
+      "osTheme": "dark"
+    },
+    {
+      "id": "iphone.14.plus",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.14.plus",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.14.pro.max",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.14.pro.max",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.14.pro",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.14.pro",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.14",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.14",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.15.plus",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.15.pro.max",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.15.pro",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.15",
+      "osVersion": "17"
+    },
+    {
+      "id": "iphone.se.3.gen",
+      "osVersion": "15"
+    },
+    {
+      "id": "iphone.se.3.gen",
+      "osVersion": "16"
+    },
+    {
+      "id": "iphone.se.3.gen",
+      "osVersion": "17"
+    }
+  ]
+}
diff --git a/examples/expo-example/App.tsx b/examples/expo-example/App.tsx
index 443eb349..cd68df74 100644
--- a/examples/expo-example/App.tsx
+++ b/examples/expo-example/App.tsx
@@ -59,6 +59,8 @@ export default function App() {
   if (process.env.EXPO_PUBLIC_STORYBOOK_ONLY === 'true') {
     const Storybook = require('./.storybook').default;
     EntryPoint = Storybook;
+  } else if (process.env.PROD_BUILD === 'true') {
+    EntryPoint = App;
   } else {
     const Storybook = require('./.storybook').default;
     EntryPoint = withStorybook(App, Storybook);
diff --git a/examples/expo-example/builds/preview/android.apk b/examples/expo-example/builds/preview/android.apk
new file mode 100644
index 00000000..b03e2a4d
--- /dev/null
+++ b/examples/expo-example/builds/preview/android.apk
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:3d5f440bd5667326a2d4bd08442ea90815ab64b64a51bdf696c53a994cc7ecda
+size 68209006
diff --git a/examples/expo-example/builds/preview/ios.tar.gz b/examples/expo-example/builds/preview/ios.tar.gz
new file mode 100644
index 00000000..8694faa7
--- /dev/null
+++ b/examples/expo-example/builds/preview/ios.tar.gz
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c699be100c150bf365ca2f0895b739f7465a8ac77dd8466acc1db4a680d0cce4
+size 13461530
diff --git a/examples/expo-example/builds/storybook/android.apk b/examples/expo-example/builds/storybook/android.apk
new file mode 100644
index 00000000..0f023e1a
--- /dev/null
+++ b/examples/expo-example/builds/storybook/android.apk
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:c06e089e1fbda3036c860221477631dc0b23ac9a9266174f12b159774e92c8ea
+size 68197489
diff --git a/examples/expo-example/builds/storybook/ios.tar.gz b/examples/expo-example/builds/storybook/ios.tar.gz
new file mode 100644
index 00000000..33dbc82e
--- /dev/null
+++ b/examples/expo-example/builds/storybook/ios.tar.gz
@@ -0,0 +1,3 @@
+version https://git-lfs.github.com/spec/v1
+oid sha256:35d0c29a7e18e55c37bec47c3bbc6ffbde2f353b8bf6c37f2f52b6687a73ea5f
+size 13446222
diff --git a/examples/expo-example/package.json b/examples/expo-example/package.json
index b815d34f..46c4f7d0 100644
--- a/examples/expo-example/package.json
+++ b/examples/expo-example/package.json
@@ -18,7 +18,10 @@
     "ios:start:dev": "tar -xzvf builds/development/ios.tar.gz -C builds/ && xcrun simctl install booted builds/sherloexpoexample.app && expo start --ios --dev-client",
     "ios:start:go": "expo start --ios --go",
     "sherlo": "sherlo",
-    "sherlo:storybookOnly": "sherlo --config sherlo.storybookOnly.json",
+    "sherlo:async": "sherlo --config ../../configs/demo.storybook.json",
+    "sherlo:demo": "sherlo --config ../../configs/demo.preview.json",
+    "sherlo:eas": "sherlo --config ../../configs/eas.preview.json",
+    "sherlo:sync": "sherlo --config ../../configs/sync.preview.json",
     "storybook:web": "storybook dev -p 6006 -c .storybook-web",
     "storybook:native:generate": "sb-rn-get-stories --config-path .storybook"
   },
diff --git a/examples/expo-example/sherlo.config.json b/examples/expo-example/sherlo.config.json
index fd9c7d3c..d59c9c76 100644
--- a/examples/expo-example/sherlo.config.json
+++ b/examples/expo-example/sherlo.config.json
@@ -1,30 +1,44 @@
 {
-  "apps": {
-    "android": {
-      "path": "builds/preview/android.apk",
-      "packageName": "com.sherlo.example"
-    },
-    "ios": {
-      "path": "./builds/preview/ios.tar.gz",
-      "bundleIdentifier": "com.sherlo.example"
-    }
-  },
+  "token": "twQUoTOqxJa5zSNQQz4z1ZrCGJAPlnEnucyN_GCY6",
+  "android": "builds/preview/android.apk",
+  "ios": "builds/preview/ios.tar.gz",
+  "include": ["components/screens/"],
   "devices": [
     {
-      "id": "iphone.15.pro",
-      "osVersion": "17"
+      "id": "pixel.4a",
+      "osVersion": "13",
+      "osLanguage": "en_US",
+      "osTheme": "light"
     },
     {
-      "id": "iphone.se.3",
-      "osVersion": "16"
+      "id": "pixel.7.pro",
+      "osVersion": "13",
+      "osLanguage": "en_US",
+      "osTheme": "light"
     },
     {
-      "id": "pixel.7",
-      "osVersion": "13"
+      "id": "pixel.tablet",
+      "osVersion": "13",
+      "osLanguage": "fr_FR",
+      "osTheme": "dark"
     },
     {
-      "id": "pixel.7.pro",
-      "osVersion": "13"
+      "id": "iphone.13.mini",
+      "osVersion": "15",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "iphone.15.pro",
+      "osVersion": "17",
+      "osLanguage": "en_US",
+      "osTheme": "light"
+    },
+    {
+      "id": "ipad.pro.13.m4",
+      "osVersion": "17",
+      "osLanguage": "en_US",
+      "osTheme": "light"
     }
   ]
 }
diff --git a/examples/expo-example/sherlo.storybookOnly.json b/examples/expo-example/sherlo.storybookOnly.json
deleted file mode 100644
index 47b93f7e..00000000
--- a/examples/expo-example/sherlo.storybookOnly.json
+++ /dev/null
@@ -1,30 +0,0 @@
-{
-  "apps": {
-    "android": {
-      "path": "builds/storybook/android.apk",
-      "packageName": "com.sherlo.example"
-    },
-    "ios": {
-      "path": "./builds/storybook/ios.tar.gz",
-      "bundleIdentifier": "com.sherlo.example"
-    }
-  },
-  "devices": [
-    {
-      "id": "iphone.15.pro",
-      "osVersion": "17"
-    },
-    {
-      "id": "iphone.se.3",
-      "osVersion": "16"
-    },
-    {
-      "id": "pixel.7",
-      "osVersion": "13"
-    },
-    {
-      "id": "pixel.7.pro",
-      "osVersion": "13"
-    }
-  ]
-}
diff --git a/examples/expo-example/src/components/base/Icon/Icon.tsx b/examples/expo-example/src/components/base/Icon/Icon.tsx
index 55358ff9..91b387fc 100644
--- a/examples/expo-example/src/components/base/Icon/Icon.tsx
+++ b/examples/expo-example/src/components/base/Icon/Icon.tsx
@@ -9,6 +9,7 @@ import PlusBoxIcon from './Icons/PlusBoxIcon';
 import SplotchIcon from './Icons/SplotchIcon';
 import PlusIcon from './Icons/PlusIcon';
 import MinusIcon from './Icons/MinusIcon';
+import { dimensions } from 'theme/dimensions';
 
 export interface IconProps {
   name:
@@ -31,13 +32,13 @@ const Icon = ({ name, size, isActive }: IconProps) => {
 
   switch (size) {
     case 'small':
-      sizePx = 16;
+      sizePx = dimensions.iconsSizeSmall;
       break;
     case 'medium':
-      sizePx = 22;
+      sizePx = dimensions.iconsSizeMedium;
       break;
     case 'big':
-      sizePx = 27;
+      sizePx = dimensions.iconsSizeBig;
       break;
   }
 
diff --git a/examples/expo-example/src/components/base/Switch/Switch.tsx b/examples/expo-example/src/components/base/Switch/Switch.tsx
index 86207f02..bfafd123 100644
--- a/examples/expo-example/src/components/base/Switch/Switch.tsx
+++ b/examples/expo-example/src/components/base/Switch/Switch.tsx
@@ -2,6 +2,7 @@ import React, { useState } from 'react';
 import { StyleSheet, View } from 'react-native';
 import { Switch as SwitchComponent } from 'react-native-switch';
 import { colors } from '../../../theme/colors';
+import { dimensions } from 'theme/dimensions';
 
 export interface SwitchProps {
   state: boolean;
@@ -11,10 +12,10 @@ export interface SwitchProps {
 const Switch = ({ state, setState }: SwitchProps) => {
   const styles = StyleSheet.create({
     container: {
-      width: 45,
-      height: 29.7,
+      width: dimensions.switchWidth,
+      height: dimensions.switchHeight,
       borderRadius: 50,
-      borderWidth: 1.2,
+      borderWidth: dimensions.switchBorderWidth,
       borderColor: state ? colors.activeLow : colors.grayLow,
     },
   });
@@ -25,8 +26,8 @@ const Switch = ({ state, setState }: SwitchProps) => {
         value={state}
         onValueChange={setState}
         disabled={false}
-        circleSize={20.25}
-        barHeight={27}
+        circleSize={dimensions.switchCircleSize}
+        barHeight={dimensions.switchBarHaight}
         circleBorderWidth={0}
         backgroundActive={'transparent'}
         backgroundInactive={'transparent'}
diff --git a/examples/expo-example/src/components/base/Text/Text.tsx b/examples/expo-example/src/components/base/Text/Text.tsx
index ea1ddfa4..6095250c 100644
--- a/examples/expo-example/src/components/base/Text/Text.tsx
+++ b/examples/expo-example/src/components/base/Text/Text.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import { Text as TextComponent, StyleSheet } from 'react-native';
 import { colors } from '../../../theme/colors';
+import { dimensions } from 'theme/dimensions';
 
 interface TextProps {
   variant:
@@ -55,61 +56,62 @@ export default Text;
 const styles = StyleSheet.create({
   headline: {
     fontFamily: 'Urbanist_600SemiBold',
-    fontSize: 20.25,
+    fontSize: dimensions.fontSize4,
     letterSpacing: 0,
     color: colors.textHighlight,
   },
   headlineInactive: {
     fontFamily: 'Urbanist_600SemiBold',
-    fontSize: 20.25,
+    fontSize: dimensions.fontSize4,
     letterSpacing: 0,
     color: colors.textSubtle,
   },
   subtitle: {
     fontFamily: 'Urbanist_500Medium',
-    fontSize: 16.2,
+    fontSize: dimensions.fontSize2,
     letterSpacing: 0,
     color: colors.textSubtle,
   },
   tutorialHeadline: {
     fontFamily: 'Urbanist_700Bold',
-    fontSize: 24.3,
+    fontSize: dimensions.fontSize6,
     letterSpacing: 0,
     color: colors.textHighlight,
   },
   tutorialSubtitle: {
     fontFamily: 'Urbanist_400Regular',
-    fontSize: 21.6,
+    fontSize: dimensions.fontSize5,
     letterSpacing: 0,
     color: colors.textHighlight,
+    textAlign: 'center',
   },
   tutorialButton: {
     fontFamily: 'Urbanist_700Bold',
-    fontSize: 17.5,
+    fontSize: dimensions.fontSize3,
     letterSpacing: 0,
     color: colors.textHighlight,
   },
   usernameText: {
     fontFamily: 'Urbanist_600SemiBold',
-    fontSize: 24.3,
+    fontSize: dimensions.fontSize6,
     letterSpacing: 0,
     color: colors.textHighlight,
   },
   displayBox: {
     fontFamily: 'Urbanist_500Medium',
-    fontSize: 13.5,
+    fontSize: dimensions.fontSize1,
     letterSpacing: 0,
     color: colors.textDisplayBox,
   },
   displayBoxValue: {
     fontFamily: 'Urbanist_700Bold',
-    fontSize: 16.2,
+    fontSize: dimensions.fontSize2,
     letterSpacing: 0,
     color: colors.textHighlight,
   },
   time: {
     fontFamily: 'Urbanist_500Medium',
-    fontSize: 16.2,
+    fontSize: dimensions.fontSize2,
     letterSpacing: 0,
     color: colors.textHighlight,
   },
diff --git a/examples/expo-example/src/components/base/TutorialIcon/TutorialIcon.stories.tsx b/examples/expo-example/src/components/base/TutorialIcon/TutorialIcon.stories.tsx
new file mode 100644
index 00000000..84ddccd8
--- /dev/null
+++ b/examples/expo-example/src/components/base/TutorialIcon/TutorialIcon.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta } from '@storybook/react';
+import TutorialIcon from './TutorialIcon';
+import StoryDecorator from '../../../decorators/StoryDecorator';
+
+export default {
+  component: TutorialIcon,
+  decorators: [StoryDecorator],
+} as Meta<typeof TutorialIcon>;
+
+type Story = {
+  args: {
+    appState: string;
+  };
+};
+
+export const TutorialStage1: Story = {
+  args: {
+    appState: 'tutorial1',
+  },
+};
+
+export const TutorialStage2: Story = {
+  args: {
+    appState: 'tutorial2',
+  },
+};
diff --git a/examples/expo-example/src/components/base/TutorialIcon/TutorialIcon.tsx b/examples/expo-example/src/components/base/TutorialIcon/TutorialIcon.tsx
new file mode 100644
index 00000000..94cb4eec
--- /dev/null
+++ b/examples/expo-example/src/components/base/TutorialIcon/TutorialIcon.tsx
@@ -0,0 +1,32 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import Connect from '../Icon/Icons/Connect';
+import SaveEnergy from '../Icon/Icons/SaveEnergy';
+import { shadows } from '../../../theme/shadows';
+
+interface TutorialIconProps {
+  appState: string;
+}
+
+const TutorialIcon = ({ appState }: TutorialIconProps) => {
+  return (
+    <View style={[styles.iconContainer, shadows.black]}>
+      {appState === 'tutorial1' ? <Connect /> : <SaveEnergy />}
+    </View>
+  );
+};
+
+export default TutorialIcon;
+
+const styles = StyleSheet.create({
+  iconContainer: {
+    // flex: 0.6,
+    alignSelf: 'center',
+    alignItems: 'center',
+    justifyContent: 'space-around',
+    width: 206.525,
+    height: 206.525,
+    borderRadius: 67.492,
+    backgroundColor: '#16171A',
+  },
+});
diff --git a/examples/expo-example/src/components/base/TutorialIcon/index.ts b/examples/expo-example/src/components/base/TutorialIcon/index.ts
new file mode 100644
index 00000000..e69de29b
diff --git a/examples/expo-example/src/components/partials/ButtonPlusMinus/ButtonPlusMinus.stories.tsx b/examples/expo-example/src/components/partials/ButtonPlusMinus/ButtonPlusMinus.stories.tsx
new file mode 100644
index 00000000..853014c7
--- /dev/null
+++ b/examples/expo-example/src/components/partials/ButtonPlusMinus/ButtonPlusMinus.stories.tsx
@@ -0,0 +1,16 @@
+import type { Meta } from "@storybook/react";
+import ButtonPlusMinus from "./ButtonPlusMinus";
+import StoryDecorator from "../../../decorators/StoryDecorator";
+
+export default {
+  component: ButtonPlusMinus,
+  parameters: {
+    sherlo: {
+      figmaUrl:
+        "https://www.figma.com/file/MQKuH5Z7IrlnltVk4ox3oB/Sherlo-Expo-Example?type=design&node-id=1503-29771&mode=design&t=EYCV0O9ZvPUybxCL-4",
+    },
+  },
+  decorators: [StoryDecorator],
+} as Meta<typeof ButtonPlusMinus>;
+
+export const Basic = {};
diff --git a/examples/expo-example/src/components/partials/ButtonPlusMinus/ButtonPlusMinus.tsx b/examples/expo-example/src/components/partials/ButtonPlusMinus/ButtonPlusMinus.tsx
new file mode 100644
index 00000000..1956e9a6
--- /dev/null
+++ b/examples/expo-example/src/components/partials/ButtonPlusMinus/ButtonPlusMinus.tsx
@@ -0,0 +1,51 @@
+import React from "react";
+
+import { colors } from "../../../theme/colors";
+import { shadows } from "../../../theme/shadows";
+
+import { LinearGradient } from "expo-linear-gradient";
+import { StyleSheet, TouchableOpacity, View } from "react-native";
+import Icon from "../../base/Icon/Icon";
+
+const ButtonPlusMinus = () => {
+  return (
+    <View style={shadows.white}>
+      <View style={shadows.black}>
+        <View style={styles.container}>
+          <TouchableOpacity style={{ flex: 1 }}>
+            <LinearGradient
+              colors={colors.buttonPlusMinusGradient}
+              start={{ x: 1, y: 0 }}
+              end={{ x: 0, y: 0 }}
+              style={styles.button}
+            >
+              <Icon name="minus" size="medium" />
+            </LinearGradient>
+          </TouchableOpacity>
+          <TouchableOpacity style={styles.button}>
+            <Icon name="plus" size="medium" />
+          </TouchableOpacity>
+        </View>
+      </View>
+    </View>
+  );
+};
+
+export default ButtonPlusMinus;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: "row",
+    justifyContent: "center",
+    overflow: "hidden",
+    borderRadius: 67.492,
+    backgroundColor: colors.buttonPlusMinusBackground,
+  },
+  button: {
+    flex: 1,
+    padding: 14,
+    justifyContent: "center",
+    alignItems: "center",
+    backgroundColor: colors.background,
+  },
+});
diff --git a/examples/expo-example/src/components/partials/ButtonPlusMinus/index.ts b/examples/expo-example/src/components/partials/ButtonPlusMinus/index.ts
new file mode 100644
index 00000000..f6e1b419
--- /dev/null
+++ b/examples/expo-example/src/components/partials/ButtonPlusMinus/index.ts
@@ -0,0 +1,2 @@
+export { default } from "./ButtonPlusMinus";
+
diff --git a/examples/expo-example/src/components/partials/CardItem/CardItem.tsx b/examples/expo-example/src/components/partials/CardItem/CardItem.tsx
index 72453d1a..7d2a2513 100644
--- a/examples/expo-example/src/components/partials/CardItem/CardItem.tsx
+++ b/examples/expo-example/src/components/partials/CardItem/CardItem.tsx
@@ -66,9 +66,12 @@ const styles = StyleSheet.create({
     bottom: 0,
   },
   image: {
-    position: 'absolute',
-    right: 0,
-    bottom: 0,
+    // flex: 1,
+    // position: 'absolute',
+    // right: 0,
+    // bottom: 0,
+    width: '100%',
+    height: '100%',
     resizeMode: 'cover',
     borderRadius: 18.218,
   },
diff --git a/examples/expo-example/src/components/partials/InfoDisplay/InfoDisplay.stories.tsx b/examples/expo-example/src/components/partials/InfoDisplay/InfoDisplay.stories.tsx
new file mode 100644
index 00000000..0517a355
--- /dev/null
+++ b/examples/expo-example/src/components/partials/InfoDisplay/InfoDisplay.stories.tsx
@@ -0,0 +1,24 @@
+import type { Meta } from '@storybook/react';
+import InfoDisplay from './InfoDisplay';
+
+export default {
+  component: InfoDisplay,
+} as Meta<typeof InfoDisplay>;
+
+type Story = {
+  args: {
+    variant: string;
+  };
+};
+
+export const Heating: Story = {
+  args: {
+    variant: 'Heating',
+  },
+};
+
+export const AirPurifier: Story = {
+  args: {
+    variant: 'Air Purifier',
+  },
+};
diff --git a/examples/expo-example/src/components/partials/InfoDisplay/InfoDisplay.tsx b/examples/expo-example/src/components/partials/InfoDisplay/InfoDisplay.tsx
new file mode 100644
index 00000000..32656843
--- /dev/null
+++ b/examples/expo-example/src/components/partials/InfoDisplay/InfoDisplay.tsx
@@ -0,0 +1,45 @@
+import React from 'react';
+import InfoDisplayBox from './components/InfoDisplayBox';
+import { View, StyleSheet } from 'react-native';
+import { dimensions } from '../../../theme/dimensions';
+import { breakIntoLines } from '../../../utils/breakIntoLines';
+
+interface infoDisplayProps {
+  variant: 'Heating' | 'Air Purifier';
+  airHumidity?: number;
+  actualTemperature?: number;
+  pm?: number;
+  dust?: number;
+}
+
+const InfoDisplay = ({ variant, airHumidity, actualTemperature, pm, dust }: infoDisplayProps) => {
+  return variant === 'Heating' ? (
+    <View style={[styles.container]}>
+      <InfoDisplayBox
+        variant="info"
+        name={dimensions.size === 'M' ? breakIntoLines('Air humidity') : 'Air humidity'}
+        value={`${airHumidity}%`}
+      />
+      <InfoDisplayBox variant="info" name="Actual temperature" value={`${actualTemperature}°C`} />
+      <InfoDisplayBox variant="switch" />
+    </View>
+  ) : (
+    <View style={styles.container}>
+      <InfoDisplayBox variant="info" name="PM 2.5" value={`${pm} μg/m3`} />
+      <InfoDisplayBox variant="info" name="Dust" value={`${dust} μg/m3`} />
+    </View>
+  );
+};
+
+export default InfoDisplay;
+
+const styles = StyleSheet.create({
+  container: {
+    // ustawić to na ekranie nie w komponencie
+    flex: 0.4,
+    flexDirection: 'row',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    columnGap: dimensions.infoDisplayGap,
+  },
+});
diff --git a/examples/expo-example/src/components/partials/InfoDisplay/components/InfoDisplayBox.tsx b/examples/expo-example/src/components/partials/InfoDisplay/components/InfoDisplayBox.tsx
new file mode 100644
index 00000000..e56c0690
--- /dev/null
+++ b/examples/expo-example/src/components/partials/InfoDisplay/components/InfoDisplayBox.tsx
@@ -0,0 +1,61 @@
+import React, { useDeferredValue } from "react";
+import { View, StyleSheet } from "react-native";
+import  Text  from "../../../base/Text/Text";
+import  Switch  from "../../../base/Switch/Switch";
+import { colors } from "../../../../theme/colors";
+import { dimensions } from "../../../../theme/dimensions";
+import { shadows } from "../../../../theme/shadows";
+// import { breakIntoLines } from "../utils/breakIntoLines"
+
+type InfoDisplayBoxProps =
+  | {
+      name: string;
+      variant: "info";
+      value: string;
+    }
+  | { variant: "switch" };
+
+const InfoDisplayBox = (props: InfoDisplayBoxProps) => {
+  return (
+    <View
+      style={[
+        styles.container,
+        shadows.black,
+        props.variant === "switch" ? styles.switch : styles.text,
+      ]}
+    >
+      {props.variant === "switch" ? (
+        <>
+          <Text variant="displayBox">Auto</Text>
+          <Switch />
+        </>
+      ) : (
+        <>
+          <Text variant="displayBox">{props.name}</Text>
+          <Text variant="headline">{props.value}</Text>
+        </>
+      )}
+    </View>
+  );
+};
+
+export default InfoDisplayBox
+
+const styles = StyleSheet.create({
+  container: {
+    height: "100%",
+    padding: dimensions.infoDisplayBoxPadding,
+    backgroundColor: colors.infoDisplayBoxBackground,
+
+    borderRadius: 16.198,
+    borderWidth: 0.675,
+    borderColor: colors.infoDisplayBoxBorder,
+  },
+  switch: {
+    flex: 0.66,
+    justifyContent: "space-between",
+  },
+  text: {
+    flex: 1,
+  },
+});
diff --git a/examples/expo-example/src/components/partials/InfoDisplay/components/index.ts b/examples/expo-example/src/components/partials/InfoDisplay/components/index.ts
new file mode 100644
index 00000000..a1382d08
--- /dev/null
+++ b/examples/expo-example/src/components/partials/InfoDisplay/components/index.ts
@@ -0,0 +1 @@
+export { default } from "./InfoDisplayBox";
diff --git a/examples/expo-example/src/components/partials/InfoDisplay/index.ts b/examples/expo-example/src/components/partials/InfoDisplay/index.ts
new file mode 100644
index 00000000..39693b9d
--- /dev/null
+++ b/examples/expo-example/src/components/partials/InfoDisplay/index.ts
@@ -0,0 +1 @@
+export { default } from "./InfoDisplay";
diff --git a/examples/expo-example/src/components/partials/SettingsButton/SettingsButton.stories.tsx b/examples/expo-example/src/components/partials/SettingsButton/SettingsButton.stories.tsx
new file mode 100644
index 00000000..a7b548a4
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsButton/SettingsButton.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import SettingsButton from './SettingsButton';
+
+export default {
+  component: SettingsButton,
+} as Meta<typeof SettingsButton>;
+
+type Story = {
+  args?: Record<string, any>;
+};
+
+export const Basic: Story = {};
diff --git a/examples/expo-example/src/components/partials/SettingsButton/SettingsButton.tsx b/examples/expo-example/src/components/partials/SettingsButton/SettingsButton.tsx
new file mode 100644
index 00000000..be320a3a
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsButton/SettingsButton.tsx
@@ -0,0 +1,36 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import { dimensions } from '../../../theme/dimensions';
+import { colors } from '../../../theme/colors';
+import { shadows } from '../../../theme/shadows';
+import IconButton from '../../base/IconButton/IconButton';
+
+const SettingsButton = () => {
+  return (
+    <View style={[styles.container, shadows.black]}>
+      <IconButton name="sliders" size="big" />
+    </View>
+  );
+};
+
+export default SettingsButton;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'flex-start',
+    alignItems: 'center',
+    width: dimensions.settingsButtonWidth,
+    height: dimensions.settingsButtonHeight,
+    backgroundColor: colors.settingsButtonBackground,
+
+    borderRadius: 67.492,
+    borderWidth: 0.675,
+    borderColor: colors.settingsButtonBorder,
+
+    position: 'absolute',
+    right: -(dimensions.controllScreenMargin + dimensions.settingsButtonWidth / 4),
+
+    paddingLeft: dimensions.settingsButtonPadding,
+  },
+});
diff --git a/examples/expo-example/src/components/partials/SettingsButton/index.ts b/examples/expo-example/src/components/partials/SettingsButton/index.ts
new file mode 100644
index 00000000..648f66ae
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsButton/index.ts
@@ -0,0 +1 @@
+export { default } from "./SettingsButton";
diff --git a/examples/expo-example/src/components/partials/SettingsTime/SettingsTime.stories.tsx b/examples/expo-example/src/components/partials/SettingsTime/SettingsTime.stories.tsx
new file mode 100644
index 00000000..65faa546
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsTime/SettingsTime.stories.tsx
@@ -0,0 +1,12 @@
+import type { Meta } from '@storybook/react';
+import SettingsTime from './SettingsTime';
+
+export default {
+  component: SettingsTime,
+} as Meta<typeof SettingsTime>;
+
+type Story = {
+  args?: Record<string, any>;
+};
+
+export const Basic: Story = {};
diff --git a/examples/expo-example/src/components/partials/SettingsTime/SettingsTime.tsx b/examples/expo-example/src/components/partials/SettingsTime/SettingsTime.tsx
new file mode 100644
index 00000000..6cb606de
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsTime/SettingsTime.tsx
@@ -0,0 +1,34 @@
+import React from 'react';
+import { View, StyleSheet } from 'react-native';
+import TimeBox from './components/TimeBox';
+import { colors } from '../../../theme/colors';
+
+const SettingsTime = () => {
+  return (
+    <View style={styles.container}>
+      <TimeBox variant="from" />
+      <View
+        style={{
+          borderRightWidth: 0.675,
+          borderColor: colors.settingsTimeBorder,
+        }}
+      />
+      <TimeBox variant="to" />
+    </View>
+  );
+};
+
+export default SettingsTime;
+
+const styles = StyleSheet.create({
+  container: {
+    flexDirection: 'row',
+    justifyContent: 'center',
+
+    borderRadius: 5.4,
+    borderWidth: 0.675,
+    borderColor: colors.settingsTimeBorder,
+
+    overflow: 'hidden',
+  },
+});
diff --git a/examples/expo-example/src/components/partials/SettingsTime/components/TimeBox.tsx b/examples/expo-example/src/components/partials/SettingsTime/components/TimeBox.tsx
new file mode 100644
index 00000000..a2b05155
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsTime/components/TimeBox.tsx
@@ -0,0 +1,63 @@
+import React, { useState } from "react";
+import { View, StyleSheet } from "react-native";
+import  Text  from "../../../base/Text/Text";
+import { dimensions } from "../../../../theme/dimensions";
+import IconButton from "../../../base/IconButton/IconButton";
+import DateTimePickerModal from "react-native-modal-datetime-picker";
+
+interface TimeBoxProps {
+  variant: "from" | "to";
+}
+
+ const TimeBox = ({ variant }: TimeBoxProps) => {
+  const [isDatePickerVisible, setDatePickerVisibility] = useState(false);
+  const [selectedHour, setSelectedHour] = useState(new Date());
+
+  const handleConfirm = (date: Date) => {
+    setSelectedHour(date);
+    setDatePickerVisibility(false);
+  };
+
+  const showDatePicker = () => {
+    setDatePickerVisibility(true);
+  };
+
+  const hideDatePicker = () => {
+    setDatePickerVisibility(false);
+  };
+
+  const formattedTime = selectedHour.toLocaleTimeString([], {
+    hour: "2-digit",
+    minute: "2-digit",
+  });
+
+  return (
+    <View style={[styles.container]}>
+      <Text variant="time">{`${
+        variant === "from" ? "from" : "To"
+      }: ${formattedTime}`}</Text>
+
+      <IconButton name="arrowDown" size="small" onPress={showDatePicker} />
+
+      <DateTimePickerModal
+        isVisible={isDatePickerVisible}
+        mode="time"
+        onConfirm={handleConfirm}
+        onCancel={hideDatePicker}
+      />
+    </View>
+  );
+};
+
+export default TimeBox
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    flexDirection: "row",
+    justifyContent: "center",
+    alignItems: "center",
+    columnGap: dimensions.timeBoxGap,
+    padding: dimensions.timeBoxPadding,
+  },
+});
diff --git a/examples/expo-example/src/components/partials/SettingsTime/components/index.ts b/examples/expo-example/src/components/partials/SettingsTime/components/index.ts
new file mode 100644
index 00000000..5febbae7
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsTime/components/index.ts
@@ -0,0 +1 @@
+export { default } from "./TimeBox";
diff --git a/examples/expo-example/src/components/partials/SettingsTime/index.ts b/examples/expo-example/src/components/partials/SettingsTime/index.ts
new file mode 100644
index 00000000..568e991f
--- /dev/null
+++ b/examples/expo-example/src/components/partials/SettingsTime/index.ts
@@ -0,0 +1 @@
+export { default } from "./SettingsTime";
diff --git a/examples/expo-example/src/components/partials/TabComponent/TabComponent.tsx b/examples/expo-example/src/components/partials/TabComponent/TabComponent.tsx
index f4a81aa5..4002e01a 100644
--- a/examples/expo-example/src/components/partials/TabComponent/TabComponent.tsx
+++ b/examples/expo-example/src/components/partials/TabComponent/TabComponent.tsx
@@ -22,7 +22,7 @@ const TabComponent: React.FC<TabComponentProps> = ({ activePage, setActivePage }
   return (
     <>
       <TabBar goToPage={goToPage} activePage={activePage} />
-      <Tabs pagerRef={pagerRef} handlePageChange={handlePageChange} />
+      <Tabs pagerRef={pagerRef} handlePageChange={handlePageChange} initialPage={activePage} />
     </>
   );
 };
diff --git a/examples/expo-example/src/components/partials/TabComponent/Tabs/Tabs.tsx b/examples/expo-example/src/components/partials/TabComponent/Tabs/Tabs.tsx
index 962c2fad..7bf9392e 100644
--- a/examples/expo-example/src/components/partials/TabComponent/Tabs/Tabs.tsx
+++ b/examples/expo-example/src/components/partials/TabComponent/Tabs/Tabs.tsx
@@ -21,12 +21,8 @@ const Tabs = ({ pagerRef, handlePageChange, initialPage }: TabsProps) => {
       onPageSelected={handlePageChange}
       pageMargin={40}
     >
-      <View key="devices">
-        <DevicesList DATA={DEVICES_DATA} />
-      </View>
-      <View key="rooms">
-        <RoomsList DATA={ROOMS_DATA} />
-      </View>
+      <DevicesList key="devices" DATA={DEVICES_DATA} />
+      <RoomsList key="rooms" DATA={ROOMS_DATA} />
     </PagerView>
   );
 };
diff --git a/examples/expo-example/src/components/partials/TabDevice/TabDevice.stories.tsx b/examples/expo-example/src/components/partials/TabDevice/TabDevice.stories.tsx
new file mode 100644
index 00000000..9a10f9d2
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TabDevice/TabDevice.stories.tsx
@@ -0,0 +1,13 @@
+import type { Meta } from '@storybook/react';
+import { TabDevice } from './TabDevice';
+
+export default {
+  component: TabDevice,
+  args: [],
+} as Meta<typeof TabDevice>;
+
+export const Basic = {
+  args: {
+    deviceName: 'Heating',
+  },
+};
diff --git a/examples/expo-example/src/components/partials/TabDevice/TabDevice.tsx b/examples/expo-example/src/components/partials/TabDevice/TabDevice.tsx
new file mode 100644
index 00000000..cff928eb
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TabDevice/TabDevice.tsx
@@ -0,0 +1,47 @@
+import React, { useRef, useState } from 'react';
+import PagerView from 'react-native-pager-view';
+import { TabBarDevice } from './components/TabBarDevice';
+import { TabsDevice } from './components/TabsDevice';
+import { ROOMS_AIR_PURIFIER_DATA, ROOMS_HEATING_DATA } from '../../../fixtures/devicesRooms';
+
+interface TabDeviceProps {
+  deviceName: string;
+}
+
+export const TabDevice = ({ deviceName }: TabDeviceProps) => {
+  const [activePage, setActivePage] = useState<number>(0);
+  const pagerRef = useRef<PagerView>(null);
+
+  const goToPage = (page: number) => {
+    pagerRef.current?.setPage(page);
+  };
+
+  const handlePageChange = (event: any) => {
+    setActivePage(event.nativeEvent.position);
+  };
+  let DATA;
+  switch (deviceName) {
+    case 'Heating':
+      DATA = ROOMS_HEATING_DATA;
+      break;
+
+    case 'Air Purifier':
+      DATA = ROOMS_AIR_PURIFIER_DATA;
+      break;
+
+    default:
+      throw new Error(`invalid device name: ${deviceName}`);
+  }
+
+  return (
+    <>
+      <TabBarDevice goToPage={goToPage} activePage={activePage} DATA={DATA} />
+      <TabsDevice
+        deviceName={deviceName}
+        pagerRef={pagerRef}
+        handlePageChange={handlePageChange}
+        DATA={DATA}
+      />
+    </>
+  );
+};
diff --git a/examples/expo-example/src/components/partials/TabDevice/components/TabBarDevice.stories.tsx b/examples/expo-example/src/components/partials/TabDevice/components/TabBarDevice.stories.tsx
new file mode 100644
index 00000000..8b010fe5
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TabDevice/components/TabBarDevice.stories.tsx
@@ -0,0 +1,8 @@
+import type { Meta } from "@storybook/react";
+import { TabBarDevice } from "./TabBarDevice";
+
+export default {
+  component: TabBarDevice,
+} as Meta<typeof TabBarDevice>;
+
+export const Basic = {};
diff --git a/examples/expo-example/src/components/partials/TabDevice/components/TabBarDevice.tsx b/examples/expo-example/src/components/partials/TabDevice/components/TabBarDevice.tsx
new file mode 100644
index 00000000..7822aed4
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TabDevice/components/TabBarDevice.tsx
@@ -0,0 +1,48 @@
+import React from "react";
+import { FlatList, StyleSheet, TouchableOpacity, View } from "react-native";
+import Text from "../../../base/Text/Text";
+import { dimensions } from "../../../../theme/dimensions";
+import { RoomsAirPurifierItemProps, RoomsHeatingItemProps } from "../types";
+
+interface HeaderControllProps {
+  goToPage: (page: number) => void;
+  activePage: number;
+  DATA: (RoomsHeatingItemProps | RoomsAirPurifierItemProps)[];
+}
+
+export const TabBarDevice = ({
+  goToPage,
+  activePage,
+  DATA,
+}: HeaderControllProps) => {
+  return (
+    <FlatList
+      data={DATA}
+      renderItem={({ item }) => (
+        <TouchableOpacity
+          onPress={() => {
+            goToPage(item.id);
+          }}
+        >
+          {item.id === activePage ? (
+            <Text variant="headline">{item.roomName}</Text>
+          ) : (
+            <Text variant="headlineInactive">{item.roomName}</Text>
+          )}
+        </TouchableOpacity>
+      )}
+      horizontal={true}
+      showsHorizontalScrollIndicator={false}
+      onEndReachedThreshold={0.1}
+      onStartReachedThreshold={0.25}
+      ItemSeparatorComponent={() => <View style={{ width: 34 }} />}
+      style={styles.container}
+    />
+  );
+};
+const styles = StyleSheet.create({
+  container: {
+    flexGrow: 0,
+    marginVertical: dimensions.tabsGap,
+  },
+});
diff --git a/examples/expo-example/src/components/partials/TabDevice/components/TabsDevice.stories.tsx b/examples/expo-example/src/components/partials/TabDevice/components/TabsDevice.stories.tsx
new file mode 100644
index 00000000..48191339
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TabDevice/components/TabsDevice.stories.tsx
@@ -0,0 +1,8 @@
+import type { Meta } from "@storybook/react";
+import { TabsDevice } from "./TabsDevice";
+
+export default {
+  component: TabsDevice,
+} as Meta<typeof TabsDevice>;
+
+export const Basic = {};
diff --git a/examples/expo-example/src/components/partials/TabDevice/components/TabsDevice.tsx b/examples/expo-example/src/components/partials/TabDevice/components/TabsDevice.tsx
new file mode 100644
index 00000000..bcff8564
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TabDevice/components/TabsDevice.tsx
@@ -0,0 +1,73 @@
+import React from 'react';
+import SettingsButton from '../../SettingsButton/SettingsButton';
+import InfoDisplay from '../../InfoDisplay/InfoDisplay';
+import SettingsTime from '../../SettingsTime/SettingsTime';
+import { StyleSheet, View } from 'react-native';
+import { RoomsAirPurifierItemProps, RoomsHeatingItemProps } from '../types';
+import PagerView from 'react-native-pager-view';
+import ButtonPlusMinus from '../../ButtonPlusMinus/ButtonPlusMinus';
+
+interface TabsDeviceProps {
+  deviceName: 'Heating' | 'Air Purifier';
+  pagerRef: React.RefObject<PagerView>;
+  handlePageChange: (event: any) => void;
+  DATA: RoomsHeatingItemProps[] | RoomsAirPurifierItemProps[];
+}
+
+export const TabsDevice = ({ deviceName, pagerRef, handlePageChange, DATA }: TabsDeviceProps) => {
+  return (
+    <PagerView
+      style={styles.pagerView}
+      initialPage={0}
+      ref={pagerRef}
+      onPageSelected={handlePageChange}
+      pageMargin={40}
+    >
+      {DATA.map((item) => (
+        <View style={styles.infoContainer}>
+          <View style={styles.mockmiddlecomponent} />
+          <SettingsButton />
+          <View style={styles.statsContainer}>
+            {deviceName === 'Heating' && (
+              <>
+                <ButtonPlusMinus />
+                <InfoDisplay
+                  variant={deviceName}
+                  airHumidity={(item as RoomsHeatingItemProps).airHumidity}
+                  actualTemperature={(item as RoomsHeatingItemProps).actualTemperature}
+                />
+              </>
+            )}
+            {deviceName === 'Air Purifier' && (
+              <>
+                <InfoDisplay
+                  variant={deviceName}
+                  pm={(item as RoomsAirPurifierItemProps).pm}
+                  dust={(item as RoomsAirPurifierItemProps).dust}
+                />
+                <SettingsTime />
+              </>
+            )}
+          </View>
+        </View>
+      ))}
+    </PagerView>
+  );
+};
+
+const styles = StyleSheet.create({
+  pagerView: {
+    flex: 1,
+  },
+  infoContainer: {
+    flex: 1,
+  },
+  statsContainer: {
+    flex: 1,
+    justifyContent: 'space-evenly',
+  },
+  mockmiddlecomponent: {
+    height: 400,
+    backgroundColor: 'lightblue',
+  },
+});
diff --git a/examples/expo-example/src/components/partials/TabDevice/types.ts b/examples/expo-example/src/components/partials/TabDevice/types.ts
new file mode 100644
index 00000000..3638d41c
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TabDevice/types.ts
@@ -0,0 +1,22 @@
+export interface RoomsHeatingItemProps {
+  id: number;
+  roomName: string;
+  airHumidity: number;
+  actualTemperature: number;
+  setTemperature: number;
+}
+
+export interface RoomsHeatingProps {
+  DATA: RoomsHeatingItemProps[];
+}
+export interface RoomsAirPurifierItemProps {
+  id: number;
+  roomName: string;
+  airQuality: number;
+  pm: number;
+  dust: number;
+}
+
+export interface RoomsAirPurifierProps {
+  DATA: RoomsAirPurifierItemProps[];
+}
diff --git a/examples/expo-example/src/components/partials/TutorialControll/TutorialControl.stories.tsx b/examples/expo-example/src/components/partials/TutorialControll/TutorialControl.stories.tsx
new file mode 100644
index 00000000..22529ca2
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TutorialControll/TutorialControl.stories.tsx
@@ -0,0 +1,26 @@
+import type { Meta } from '@storybook/react';
+import TutorialControl from './TutorialControl';
+import StoryDecorator from '../../../decorators/StoryDecorator';
+
+export default {
+  component: TutorialControl,
+  decorators: [StoryDecorator],
+} as Meta<typeof TutorialControl>;
+
+type Story = {
+  args: {
+    appState: string;
+  };
+};
+
+export const TutorialStage1: Story = {
+  args: {
+    appState: 'tutorial1',
+  },
+};
+
+export const TutorialStage2: Story = {
+  args: {
+    appState: 'tutorial2',
+  },
+};
diff --git a/examples/expo-example/src/components/partials/TutorialControll/TutorialControl.tsx b/examples/expo-example/src/components/partials/TutorialControll/TutorialControl.tsx
new file mode 100644
index 00000000..8eea0114
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TutorialControll/TutorialControl.tsx
@@ -0,0 +1,53 @@
+import React from 'react';
+import { View, StyleSheet, TouchableOpacity } from 'react-native';
+import Text from '../../base/Text/Text';
+import { Dot } from '../../base/Icon/Icons/Dot';
+import { colors } from '../../../theme/colors';
+
+interface TutorialControlProps {
+  appState: string;
+  setAppState: (value: string) => void;
+}
+
+const TutorialControl = ({ appState, setAppState }: TutorialControlProps) => {
+  return (
+    <View style={styles.container}>
+      <View style={styles.dotContainer}>
+        <Dot fill={appState === 'tutorial1' ? true : false} />
+
+        <Dot fill={appState === 'tutorial2' ? true : false} />
+        <Dot fill={false} />
+      </View>
+      <TouchableOpacity
+        style={styles.button}
+        onPress={() => setAppState(appState === 'tutorial1' ? 'tutorial2' : 'main')}
+      >
+        <Text variant="tutorialButton">Skip</Text>
+      </TouchableOpacity>
+    </View>
+  );
+};
+
+export default TutorialControl;
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 0.2,
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    width: 149.115,
+  },
+  dotContainer: {
+    width: '100%',
+    flexDirection: 'row',
+    justifyContent: 'space-evenly',
+  },
+  button: {
+    width: '100%',
+    padding: 17.042,
+    alignItems: 'center',
+    borderRadius: 17.219,
+    borderWidth: 1.722,
+    borderColor: colors.tutorialBtnBorder,
+  },
+});
diff --git a/examples/expo-example/src/components/partials/TutorialControll/index.ts b/examples/expo-example/src/components/partials/TutorialControll/index.ts
new file mode 100644
index 00000000..ae005bd2
--- /dev/null
+++ b/examples/expo-example/src/components/partials/TutorialControll/index.ts
@@ -0,0 +1 @@
+export { default } from "./TutorialControl";
diff --git a/examples/expo-example/src/components/screens/ControllScreen/ControlScreen.tsx b/examples/expo-example/src/components/screens/ControllScreen/ControlScreen.tsx
new file mode 100644
index 00000000..dc7fd6fd
--- /dev/null
+++ b/examples/expo-example/src/components/screens/ControllScreen/ControlScreen.tsx
@@ -0,0 +1,33 @@
+import React from 'react';
+import { SafeAreaView, StyleSheet } from 'react-native';
+import Footer from '../../partials/Footer/Footer';
+
+import Header from '../../partials/Header/Header';
+import { TabDevice } from '../../partials/TabDevice/TabDevice';
+
+interface ControllScreenProps {
+  deviceName: 'Heating' | 'Air Purifier';
+  setAppState: (value: string) => void;
+}
+export const ControlScreen = ({ deviceName, setAppState }: ControllScreenProps) => {
+  return (
+    <>
+      <SafeAreaView style={styles.margin}>
+        <Header
+          avatarSource={require('../../../../assets/Images/AvatarImage.png')}
+          title={deviceName}
+          onBackPress={() => console.log('Pressed')}
+        />
+        <TabDevice deviceName={deviceName} />
+      </SafeAreaView>
+      <Footer />
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  margin: {
+    flex: 1,
+    marginHorizontal: 25,
+  },
+});
diff --git a/examples/expo-example/src/components/screens/ControllScreen/ControllScreen.stories.tsx b/examples/expo-example/src/components/screens/ControllScreen/ControllScreen.stories.tsx
new file mode 100644
index 00000000..4685b5a7
--- /dev/null
+++ b/examples/expo-example/src/components/screens/ControllScreen/ControllScreen.stories.tsx
@@ -0,0 +1,34 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { ControlScreen } from './ControlScreen';
+
+const meta: Meta<typeof ControlScreen> = {
+  component: ControlScreen,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Heating: Story = {
+  args: {
+    deviceName: 'Heating',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/MQKuH5Z7IrlnltVk4ox3oB/Sherlo-Expo-Example?node-id=2142-2511&t=rfVuFPWQR8pDMNJ3-4',
+    },
+  },
+};
+
+export const AirPurifier: Story = {
+  args: {
+    deviceName: 'Air Purifier',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/MQKuH5Z7IrlnltVk4ox3oB/Sherlo-Expo-Example?node-id=2142-2514&t=rfVuFPWQR8pDMNJ3-4',
+    },
+  },
+};
diff --git a/examples/expo-example/src/components/screens/MainScreen/MainScreen.stories.tsx b/examples/expo-example/src/components/screens/MainScreen/MainScreen.stories.tsx
index 19aa0224..216596fd 100644
--- a/examples/expo-example/src/components/screens/MainScreen/MainScreen.stories.tsx
+++ b/examples/expo-example/src/components/screens/MainScreen/MainScreen.stories.tsx
@@ -9,4 +9,26 @@ export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Devices: Story = {
+  args: {
+    initialActivePage: 0,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/MQKuH5Z7IrlnltVk4ox3oB/Sherlo-Expo-Example?node-id=2142-2518&t=rfVuFPWQR8pDMNJ3-4',
+    },
+  },
+};
+
+export const Rooms: Story = {
+  args: {
+    initialActivePage: 1,
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/MQKuH5Z7IrlnltVk4ox3oB/Sherlo-Expo-Example?node-id=2142-2517&t=rfVuFPWQR8pDMNJ3-4',
+    },
+  },
+};
diff --git a/examples/expo-example/src/components/screens/MainScreen/MainScreen.tsx b/examples/expo-example/src/components/screens/MainScreen/MainScreen.tsx
index dd4ac1c2..23225e58 100644
--- a/examples/expo-example/src/components/screens/MainScreen/MainScreen.tsx
+++ b/examples/expo-example/src/components/screens/MainScreen/MainScreen.tsx
@@ -7,8 +7,14 @@ import Header from '../../partials/Header/Header';
 import TabComponent from '../../partials/TabComponent/TabComponent';
 import { RadialBackground } from 'components/screens/MainScreen/RadialBackground';
 
-export const MainScreen = () => {
-  const [activePage, setActivePage] = useState(0);
+type MainScreenProps = {
+  initialActivePage?: number;
+};
+
+export const MainScreen = ({ initialActivePage = 0 }: MainScreenProps) => {
+  const [activePage, setActivePage] = useState(initialActivePage);
+
+  console.log('MainScreen', activePage);
 
   return (
     <>
diff --git a/examples/expo-example/src/components/screens/TutorialScreen/TutorialScreen.stories.tsx b/examples/expo-example/src/components/screens/TutorialScreen/TutorialScreen.stories.tsx
new file mode 100644
index 00000000..aab9dac8
--- /dev/null
+++ b/examples/expo-example/src/components/screens/TutorialScreen/TutorialScreen.stories.tsx
@@ -0,0 +1,34 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import { TutorialScreen } from './TutorialScreen';
+
+const meta: Meta<typeof TutorialScreen> = {
+  component: TutorialScreen,
+};
+
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Connect: Story = {
+  args: {
+    variant: 'connect',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/MQKuH5Z7IrlnltVk4ox3oB/Sherlo-Expo-Example?node-id=2142-2516&t=rfVuFPWQR8pDMNJ3-4',
+    },
+  },
+};
+
+export const SaveEnergy: Story = {
+  args: {
+    variant: 'saveEnergy',
+  },
+  parameters: {
+    design: {
+      type: 'figma',
+      url: 'https://www.figma.com/design/MQKuH5Z7IrlnltVk4ox3oB/Sherlo-Expo-Example?node-id=2142-2515&t=rfVuFPWQR8pDMNJ3-4',
+    },
+  },
+};
diff --git a/examples/expo-example/src/components/screens/TutorialScreen/TutorialScreen.tsx b/examples/expo-example/src/components/screens/TutorialScreen/TutorialScreen.tsx
new file mode 100644
index 00000000..c818d888
--- /dev/null
+++ b/examples/expo-example/src/components/screens/TutorialScreen/TutorialScreen.tsx
@@ -0,0 +1,44 @@
+import React from 'react';
+import { View, StyleSheet, SafeAreaView } from 'react-native';
+import Text from 'components/base/Text';
+import TutorialIcon from 'components/base/TutorialIcon/TutorialIcon';
+import TutorialControl from 'components/partials/TutorialControll/TutorialControl';
+
+interface TutorialScreenProps {
+  variant: 'connect' | 'saveEnergy';
+  setAppState: (value: string) => void;
+}
+
+export const TutorialScreen = ({ variant, setAppState }: TutorialScreenProps) => {
+  return (
+    <>
+      <SafeAreaView style={styles.container}>
+        <TutorialIcon appState={variant} />
+        <View style={styles.textContainer}>
+          <Text variant="tutorialHeadline">
+            {variant === 'connect' ? 'Connect' : 'Save Energy'}
+          </Text>
+          <Text variant="tutorialSubtitle">
+            {variant === 'connect'
+              ? 'Connect and manage \n all of your smart home devices \n in just few simple steps'
+              : 'Track energy consumption \n every day, get complete stats,\n save money'}
+          </Text>
+        </View>
+        <TutorialControl appState={variant} setAppState={setAppState} />
+      </SafeAreaView>
+    </>
+  );
+};
+
+const styles = StyleSheet.create({
+  container: {
+    flex: 1,
+    justifyContent: 'center',
+    alignItems: 'center',
+  },
+  textContainer: {
+    flex: 0.4,
+    alignItems: 'center',
+    justifyContent: 'space-evenly',
+  },
+});
diff --git a/examples/expo-example/src/theme/dimensions.ts b/examples/expo-example/src/theme/dimensions.ts
index 7cf1f08c..2470c495 100644
--- a/examples/expo-example/src/theme/dimensions.ts
+++ b/examples/expo-example/src/theme/dimensions.ts
@@ -9,8 +9,27 @@ if (width <= 800) {
 } else {
   breakpoint = 'L';
 }
+
+// 13.5 16.2 17.5 20.25 21.6 24.3
 export const dimensions = {
   breakpoint,
+  fontSize1: { M: 13.5, L: 27.0 }[breakpoint],
+  fontSize2: { M: 16.2, L: 32.4 }[breakpoint],
+  fontSize3: { M: 17.5, L: 35.0 }[breakpoint],
+  fontSize4: { M: 20.25, L: 40.5 }[breakpoint],
+  fontSize5: { M: 21.6, L: 43.2 }[breakpoint],
+  fontSize6: { M: 24.3, L: 48.6 }[breakpoint],
+
+  iconsSizeSmall: { M: 16, L: 32 }[breakpoint],
+  iconsSizeMedium: { M: 22, L: 44 }[breakpoint],
+  iconsSizeBig: { M: 27, L: 54 }[breakpoint],
+
+  switchWidth: { M: 45, L: 90 }[breakpoint],
+  switchHeight: { M: 30, L: 60 }[breakpoint],
+  switchBorderWidth: { M: 1.2, L: 2.4 }[breakpoint],
+  switchCircleSize: { M: 20.25, L: 40.5 }[breakpoint],
+  switchBarHaight: { M: 27, L: 54 }[breakpoint],
+
   footerHeight: { M: 113, L: 180 }[breakpoint],
   infoDisplayGap: { M: 17, L: 60 }[breakpoint],
   infoDisplayBoxPadding: { M: 14, L: 24 }[breakpoint],
diff --git a/package.json b/package.json
index cb75bb19..19e05e9c 100644
--- a/package.json
+++ b/package.json
@@ -55,7 +55,7 @@
     "react-docgen-typescript": "2.2.2"
   },
   "engines": {
-    "node": ">=18.18.0",
+    "node": ">=10.24.1",
     "yarn": ">=1.22.22"
   },
   "packageManager": "yarn@1.22.22"
diff --git a/packages/cli/src/commands/main/helpers/utils/parseConfigFile.ts b/packages/cli/src/commands/main/helpers/utils/parseConfigFile.ts
index 62154a2d..7b973d2e 100644
--- a/packages/cli/src/commands/main/helpers/utils/parseConfigFile.ts
+++ b/packages/cli/src/commands/main/helpers/utils/parseConfigFile.ts
@@ -21,9 +21,9 @@ function parseConfigFile(path: string): InvalidatedConfig {
     }
 
     /* 1 */
-    // const { exclude, include } = config;
-    // if (include && !Array.isArray(include)) config.include = [include];
-    // if (exclude && !Array.isArray(exclude)) config.exclude = [exclude];
+    const { exclude, include } = config;
+    if (include && !Array.isArray(include)) config.include = [include];
+    if (exclude && !Array.isArray(exclude)) config.exclude = [exclude];
 
     return config;
   } catch (error) {
diff --git a/packages/cli/src/commands/main/modes/asyncInitMode.ts b/packages/cli/src/commands/main/modes/asyncInitMode.ts
index 8a9e9bb6..a2aefcad 100644
--- a/packages/cli/src/commands/main/modes/asyncInitMode.ts
+++ b/packages/cli/src/commands/main/modes/asyncInitMode.ts
@@ -5,7 +5,7 @@ import path from 'path';
 import { docsLink } from '../constants';
 import { getErrorMessage, getTokenParts } from '../utils';
 import { Config } from '../types';
-import { getAppBuildUrl, getBuildRunConfig } from './utils';
+import { getAppBuildUrl, getBuildRunConfig, handleClientError } from './utils';
 
 async function asyncInitMode(
   {
@@ -36,9 +36,7 @@ async function asyncInitMode(
       asyncUpload: true,
       buildRunConfig: getBuildRunConfig({ config }),
     })
-    .catch((error) => {
-      throw new Error(getErrorMessage({ type: 'unexpected', message: error.message }));
-    });
+    .catch(handleClientError);
 
   const buildIndex = build.index;
   const url = getAppBuildUrl({ buildIndex, projectIndex, teamId });
diff --git a/packages/cli/src/commands/main/modes/asyncUploadMode.ts b/packages/cli/src/commands/main/modes/asyncUploadMode.ts
index b864a667..888a299c 100644
--- a/packages/cli/src/commands/main/modes/asyncUploadMode.ts
+++ b/packages/cli/src/commands/main/modes/asyncUploadMode.ts
@@ -1,7 +1,7 @@
 import { Platform } from '@sherlo/api-types';
 import SDKApiClient from '@sherlo/sdk-client';
-import { getErrorMessage, getTokenParts } from '../utils';
-import { getAppBuildUrl, getBuildUploadUrls, uploadMobileBuilds } from './utils';
+import { getTokenParts } from '../utils';
+import { getAppBuildUrl, getBuildUploadUrls, uploadMobileBuilds, handleClientError } from './utils';
 
 async function asyncUploadMode({
   token,
@@ -39,9 +39,7 @@ async function asyncUploadMode({
       androidS3Key: buildUploadUrls.android?.s3Key,
       iosS3Key: buildUploadUrls.ios?.s3Key,
     })
-    .catch((error) => {
-      throw new Error(getErrorMessage({ type: 'unexpected', message: error.message }));
-    });
+    .catch(handleClientError);
 
   return { buildIndex, url };
 }
diff --git a/packages/cli/src/commands/main/modes/syncMode.ts b/packages/cli/src/commands/main/modes/syncMode.ts
index 4f9783bc..b83ef880 100644
--- a/packages/cli/src/commands/main/modes/syncMode.ts
+++ b/packages/cli/src/commands/main/modes/syncMode.ts
@@ -2,13 +2,14 @@ import { Build } from '@sherlo/api-types';
 import SDKApiClient from '@sherlo/sdk-client';
 import { docsLink } from '../constants';
 import { Config } from '../types';
-import { getConfigErrorMessage, getErrorMessage, getTokenParts } from '../utils';
+import { getConfigErrorMessage, getTokenParts } from '../utils';
 import {
   getAppBuildUrl,
   getBuildRunConfig,
   getBuildUploadUrls,
   getPlatformsToTest,
   uploadMobileBuilds,
+  handleClientError,
 } from './utils';
 
 async function syncMode({
@@ -67,9 +68,7 @@ async function syncMode({
         buildPresignedUploadUrls: buildUploadUrls,
       }),
     })
-    .catch((error) => {
-      throw new Error(getErrorMessage({ type: 'unexpected', message: error.message }));
-    });
+    .catch(handleClientError);
 
   const buildIndex = build.index;
   const url = getAppBuildUrl({ buildIndex, projectIndex, teamId });
diff --git a/packages/cli/src/commands/main/modes/utils/getBuildRunConfig.ts b/packages/cli/src/commands/main/modes/utils/getBuildRunConfig.ts
index e963bfa5..91cee999 100644
--- a/packages/cli/src/commands/main/modes/utils/getBuildRunConfig.ts
+++ b/packages/cli/src/commands/main/modes/utils/getBuildRunConfig.ts
@@ -9,14 +9,14 @@ function getBuildRunConfig({
   buildPresignedUploadUrls?: GetBuildUploadUrlsReturn['buildPresignedUploadUrls'];
   config: Config<'withBuildPaths'> | Config<'withoutBuildPaths'>;
 }): BuildRunConfig {
-  const { devices } = config;
+  const { devices, include, exclude } = config;
 
   const androidDevices = getPlatformDevices(devices, 'android');
   const iosDevices = getPlatformDevices(devices, 'ios');
 
   return {
-    // include,
-    // exclude,
+    include,
+    exclude,
     android:
       androidDevices.length > 0
         ? {
diff --git a/packages/cli/src/commands/main/modes/utils/getBuildUploadUrls.ts b/packages/cli/src/commands/main/modes/utils/getBuildUploadUrls.ts
index 35f736bf..a3b7db3f 100644
--- a/packages/cli/src/commands/main/modes/utils/getBuildUploadUrls.ts
+++ b/packages/cli/src/commands/main/modes/utils/getBuildUploadUrls.ts
@@ -1,7 +1,6 @@
 import SDKApiClient from '@sherlo/sdk-client/dist/sdkClient';
 import { GetBuildUploadUrlsRequest, GetBuildUploadUrlsReturn } from '@sherlo/api-types';
-import { getErrorMessage } from '../../utils';
-import { docsLink } from '../../constants';
+import handleClientError from './handleClientError';
 
 async function getBuildUploadUrls(
   client: ReturnType<typeof SDKApiClient>,
@@ -9,19 +8,7 @@ async function getBuildUploadUrls(
 ): Promise<GetBuildUploadUrlsReturn['buildPresignedUploadUrls']> {
   const { buildPresignedUploadUrls } = await client
     .getBuildUploadUrls(getBuildUploadUrlsRequest)
-    .catch((error) => {
-      if (error.networkError.statusCode === 401) {
-        throw new Error(
-          getErrorMessage({
-            type: 'auth',
-            message: 'token is invalid',
-            learnMoreLink: docsLink.configToken,
-          })
-        );
-      }
-
-      throw new Error(getErrorMessage({ type: 'unexpected', message: error.message }));
-    });
+    .catch(handleClientError);
 
   return buildPresignedUploadUrls;
 }
diff --git a/packages/cli/src/commands/main/modes/utils/handleClientError.ts b/packages/cli/src/commands/main/modes/utils/handleClientError.ts
new file mode 100644
index 00000000..4fc51203
--- /dev/null
+++ b/packages/cli/src/commands/main/modes/utils/handleClientError.ts
@@ -0,0 +1,18 @@
+import { getErrorMessage } from '../../utils';
+import { docsLink } from '../../constants';
+
+function handleClientError(error: any) {
+  if (error.networkError.statusCode === 401) {
+    throw new Error(
+      getErrorMessage({
+        type: 'auth',
+        message: 'token is invalid',
+        learnMoreLink: docsLink.configToken,
+      })
+    );
+  }
+
+  throw new Error(getErrorMessage({ type: 'unexpected', message: error.message }));
+}
+
+export default handleClientError;
diff --git a/packages/cli/src/commands/main/modes/utils/index.ts b/packages/cli/src/commands/main/modes/utils/index.ts
index 656c589f..86b708cc 100644
--- a/packages/cli/src/commands/main/modes/utils/index.ts
+++ b/packages/cli/src/commands/main/modes/utils/index.ts
@@ -2,4 +2,5 @@ export { default as getAppBuildUrl } from './getAppBuildUrl';
 export { default as getBuildRunConfig } from './getBuildRunConfig';
 export { default as getBuildUploadUrls } from './getBuildUploadUrls';
 export { default as getPlatformsToTest } from './getPlatformsToTest';
+export { default as handleClientError } from './handleClientError';
 export { default as uploadMobileBuilds } from './uploadMobileBuilds';
diff --git a/packages/cli/src/commands/main/types.ts b/packages/cli/src/commands/main/types.ts
index 3d2a1857..5f7ca09b 100644
--- a/packages/cli/src/commands/main/types.ts
+++ b/packages/cli/src/commands/main/types.ts
@@ -12,6 +12,8 @@ export type Config<CM extends ConfigMode = 'withBuildPaths'> = CM extends 'withB
 
 type BaseConfig = {
   token: string;
+  include?: string[];
+  exclude?: string[];
   devices: {
     id: DeviceID;
     osVersion: string;
diff --git a/packages/react-native-storybook/package.json b/packages/react-native-storybook/package.json
index 7d93cec0..767cfb9f 100644
--- a/packages/react-native-storybook/package.json
+++ b/packages/react-native-storybook/package.json
@@ -48,21 +48,19 @@
     "base-64": "0.1.0",
     "jsencrypt": "^3.3.2",
     "node-forge": "^1.3.1",
-    "picomatch-browser": "2.2.6",
     "utf8": "3.0.0"
   },
   "devDependencies": {
     "@types/base-64": "1.0.0",
     "@types/node-forge": "^1.3.2",
-    "@types/picomatch-browser": "npm:@types/picomatch@2.2.6",
     "@types/utf8": "3.0.1",
     "typescript": "^5.3.3"
   },
   "peerDependencies": {
-    "@storybook/core-events": ">=7.6.15",
-    "@storybook/react-native": ">=7.6.15",
+    "@storybook/core-events": ">=7.6.11",
+    "@storybook/react-native": ">=7.6.11",
     "react": "*",
-    "react-native": ">=0.57.0"
+    "react-native": ">=0.60.0"
   },
   "optionalDependencies": {
     "expo-constants": "*",
diff --git a/packages/react-native-storybook/src/hoc/withSherlo/hooks/useOriginalMode.ts b/packages/react-native-storybook/src/hoc/withSherlo/hooks/useOriginalMode.ts
index d0582b80..f69d8e36 100644
--- a/packages/react-native-storybook/src/hoc/withSherlo/hooks/useOriginalMode.ts
+++ b/packages/react-native-storybook/src/hoc/withSherlo/hooks/useOriginalMode.ts
@@ -14,7 +14,6 @@ function useOriginalMode(
       const snpashots = prepareSnapshots({
         view,
         splitByMode: false,
-        dontFilter: true,
       });
 
       setSnapshots(snpashots);
diff --git a/packages/react-native-storybook/src/hoc/withSherlo/hooks/useTestingMode.ts b/packages/react-native-storybook/src/hoc/withSherlo/hooks/useTestingMode.ts
index d0432a13..934aca90 100644
--- a/packages/react-native-storybook/src/hoc/withSherlo/hooks/useTestingMode.ts
+++ b/packages/react-native-storybook/src/hoc/withSherlo/hooks/useTestingMode.ts
@@ -4,6 +4,7 @@ import { Snapshot } from '../../../types';
 import { prepareSnapshots } from '../utils';
 import { start } from '@storybook/react-native';
 import { SherloMode } from '../withSherlo';
+import { AckStartProtocolItem } from '../../../runnerBridge/types';
 
 function useTestingMode(
   view: ReturnType<typeof start>,
@@ -21,58 +22,50 @@ function useTestingMode(
       checkForTestingStories();
     }, 500);
 
-    const checkForTestingStories = () => {
+    const checkForTestingStories = async () => {
       if (mode === 'testing' && Object.keys(view._idToPrepared).length > 0) {
         clearInterval(inter);
         setStoriesSet(true);
 
-        bridge.getConfig().then(async (config) => {
-          const { exclude, include } = config;
-
-          bridge.log('config parsing succeeded', {
-            exclude,
-            include,
-          });
-
-          const snapshots = prepareSnapshots({
-            view,
-            include,
-            exclude,
-            splitByMode: true,
-          });
+        const snapshots = prepareSnapshots({
+          view,
+          splitByMode: true,
+        });
 
-          bridge.log('snapshots prepared', {
-            snapshotsCount: snapshots.length,
-          });
+        bridge.log('snapshots prepared', {
+          snapshotsCount: snapshots.length,
+        });
 
-          let initialSelectionIndex: number | undefined;
-          let state;
+        let initialSelectionIndex: number | undefined;
+        let filteredSnapshots: Snapshot[] | undefined;
+        let state;
 
-          try {
-            state = await bridge.getState();
-            initialSelectionIndex = state.snapshotIndex;
+        try {
+          state = await bridge.getState();
+          initialSelectionIndex = state.snapshotIndex;
+          filteredSnapshots = state.filteredSnapshots;
 
-            bridge.log('existing state', {
-              state,
-            });
-          } catch (error) {
-            // no state found
-          }
+          bridge.log('existing state', {
+            state,
+          });
+        } catch (error) {
+          // no state found
+        }
 
-          if (initialSelectionIndex === undefined) {
-            await bridge.create();
+        if (initialSelectionIndex === undefined || filteredSnapshots === undefined) {
+          await bridge.create();
 
-            const startResponse = await bridge.send({
-              action: 'START',
-              snapshots,
-            });
+          const startResponse = (await bridge.send({
+            action: 'START',
+            snapshots,
+          })) as AckStartProtocolItem;
 
-            initialSelectionIndex = startResponse.nextSnapshotIndex;
-          }
+          initialSelectionIndex = startResponse.nextSnapshotIndex;
+          filteredSnapshots = startResponse.filteredSnapshots;
+        }
 
-          setTestedIndex(initialSelectionIndex);
-          setSnapshots(snapshots);
-        });
+        setTestedIndex(initialSelectionIndex);
+        setSnapshots(filteredSnapshots);
       }
     };
     // eslint-disable-next-line react-hooks/exhaustive-deps
diff --git a/packages/react-native-storybook/src/hoc/withSherlo/utils/prepareSnapshots.ts b/packages/react-native-storybook/src/hoc/withSherlo/utils/prepareSnapshots.ts
index 10af2721..7dd7b35f 100644
--- a/packages/react-native-storybook/src/hoc/withSherlo/utils/prepareSnapshots.ts
+++ b/packages/react-native-storybook/src/hoc/withSherlo/utils/prepareSnapshots.ts
@@ -1,23 +1,13 @@
-import picomatch from 'picomatch-browser';
-import { Platform } from 'react-native';
 import { constants } from '../../../data';
 import { Snapshot, StorybookView } from '../../../types';
 import { SnapshotMode } from '../../../data/constants';
 interface prepareSnapshotsInput {
   view: StorybookView;
   dontFilter?: boolean;
-  exclude?: string | string[];
-  include?: string | string[];
   splitByMode?: boolean;
 }
 
-const prepareSnapshots = ({
-  view,
-  dontFilter,
-  exclude,
-  include,
-  splitByMode,
-}: prepareSnapshotsInput): Snapshot[] => {
+const prepareSnapshots = ({ view, splitByMode }: prepareSnapshotsInput): Snapshot[] => {
   let snapshots: Snapshot[] = [];
 
   Object.values(view._idToPrepared).forEach((rawStory) => {
@@ -58,31 +48,6 @@ const prepareSnapshots = ({
     });
   });
 
-  if (!dontFilter) {
-    snapshots = snapshots.filter(({ parameters }) => {
-      // const picomatchOptions = { contains: true, nocase: true };
-      // const isMatchConfigInclude = picomatch.isMatch(displayName, include ?? '*', picomatchOptions);
-      // const isMatchConfigExclude = exclude
-      //   ? picomatch.isMatch(displayName, exclude, picomatchOptions)
-      //   : false;
-
-      // if (!isMatchConfigInclude || isMatchConfigExclude) {
-      //   return false;
-      // }
-
-      if (parameters.sherlo) {
-        const { sherlo } = parameters;
-
-        const isNotExcluded = !sherlo.exclude;
-        const isMatchPlatformOS = !sherlo.platform || sherlo.platform === Platform.OS;
-
-        return isNotExcluded && isMatchPlatformOS;
-      }
-
-      return true;
-    });
-  }
-
   return snapshots.reverse();
 };
 
diff --git a/packages/react-native-storybook/src/runnerBridge/actions/send.ts b/packages/react-native-storybook/src/runnerBridge/actions/send.ts
index 076189bd..5066097b 100644
--- a/packages/react-native-storybook/src/runnerBridge/actions/send.ts
+++ b/packages/react-native-storybook/src/runnerBridge/actions/send.ts
@@ -50,7 +50,11 @@ const send =
             switch (protocolItem.action) {
               case 'START':
                 hasAck = responseItem.action === 'ACK_START';
-                await resolveForTestMode(1000, { action: 'ACK_START', nextSnapshotIndex: 0 });
+                await resolveForTestMode(1000, {
+                  action: 'ACK_START',
+                  nextSnapshotIndex: 0,
+                  filteredSnapshots: protocolItem.snapshots,
+                });
                 break;
               case 'REQUEST_SNAPSHOT':
                 hasAck = responseItem.action === 'ACK_REQUEST_SNAPSHOT';
diff --git a/packages/react-native-storybook/src/runnerBridge/types.ts b/packages/react-native-storybook/src/runnerBridge/types.ts
index 31043b7d..8309263c 100644
--- a/packages/react-native-storybook/src/runnerBridge/types.ts
+++ b/packages/react-native-storybook/src/runnerBridge/types.ts
@@ -1,6 +1,7 @@
 import { Snapshot } from '../types';
 
 export type RunnerState = {
+  filteredSnapshots: Snapshot[];
   snapshotIndex: number;
   updateTimestamp: number;
   retry?: boolean;
@@ -31,12 +32,15 @@ export type AppProtocolItem =
       hasError?: boolean;
     };
 
-export type RunnerProtocolItem =
-  | {
-      action: 'ACK_START';
-      nextSnapshotIndex: number;
-    }
-  | {
-      action: 'ACK_REQUEST_SNAPSHOT';
-      nextSnapshotIndex: number;
-    };
+export type AckStartProtocolItem = {
+  action: 'ACK_START';
+  filteredSnapshots: Snapshot[];
+  nextSnapshotIndex: number;
+};
+
+export type AckRequestSnapshotProtocolItem = {
+  action: 'ACK_REQUEST_SNAPSHOT';
+  nextSnapshotIndex: number;
+};
+
+export type RunnerProtocolItem = AckStartProtocolItem | AckRequestSnapshotProtocolItem;
diff --git a/yarn.lock b/yarn.lock
index 3d9ec762..d7475644 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -5721,11 +5721,6 @@
   resolved "https://registry.yarnpkg.com/@types/parse-json/-/parse-json-4.0.2.tgz#5950e50960793055845e956c427fc2b0d70c5239"
   integrity sha512-dISoDXWWQwUquiKsyZ4Ng+HX2KsPL7LyHKHQwgGFEA3IaKac4Obd+h2a/a6waisAoepJlBcx9paWqjA8/HVjCw==
 
-"@types/picomatch-browser@npm:@types/picomatch@2.2.6":
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/@types/picomatch/-/picomatch-2.2.6.tgz#9f9f460d50e7f2f63f08fa8751aafe6bfd554eba"
-  integrity sha512-24Y8b5ENcUDAtmcvVOIzdCwQVuXDjGTSQJl6Y0RTkct4ivJZursOSRL1SVv14Tvtql1arS68LUpspbw3HD74DA==
-
 "@types/pretty-hrtime@^1.0.0":
   version "1.0.3"
   resolved "https://registry.yarnpkg.com/@types/pretty-hrtime/-/pretty-hrtime-1.0.3.tgz#ee1bd8c9f7a01b3445786aad0ef23aba5f511a44"
@@ -15852,11 +15847,6 @@ picocolors@^1.0.0:
   resolved "https://registry.yarnpkg.com/picocolors/-/picocolors-1.0.0.tgz#cb5bdc74ff3f51892236eaf79d68bc44564ab81c"
   integrity sha512-1fygroTLlHu66zi26VoTDv8yRgm0Fccecssto+MhsZ0D/DGW2sm8E8AjW7NU5VVTRt5GxbeZ5qBuJr+HyLYkjQ==
 
-picomatch-browser@2.2.6:
-  version "2.2.6"
-  resolved "https://registry.yarnpkg.com/picomatch-browser/-/picomatch-browser-2.2.6.tgz#e0626204575eb49f019f2f2feac24fc3b53e7a8a"
-  integrity sha512-0ypsOQt9D4e3hziV8O4elD9uN0z/jtUEfxVRtNaAAtXIyUx9m/SzlO020i8YNL2aL/E6blOvvHQcin6HZlFy/w==
-
 picomatch@^2.0.4, picomatch@^2.2.1, picomatch@^2.2.3, picomatch@^2.3.0, picomatch@^2.3.1:
   version "2.3.1"
   resolved "https://registry.yarnpkg.com/picomatch/-/picomatch-2.3.1.tgz#3ba3833733646d9d3e4995946c1365a67fb07a42"