diff --git a/.github/workflows/ci.yml b/.github/workflows/ci.yml
index 2854467..49d93c8 100644
--- a/.github/workflows/ci.yml
+++ b/.github/workflows/ci.yml
@@ -139,7 +139,6 @@ jobs:
     strategy:
       fail-fast: false
       matrix:
-        project: [chromium]
         shardIndex: [1, 2]
         shardTotal: [2]
     steps:
@@ -167,7 +166,7 @@ jobs:
 
       - name: playwright test
         working-directory: app
-        run: yarn playwright test --project=${{ matrix.project }} --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
+        run: yarn playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
 
       - uses: actions/upload-artifact@0b7f8abb1508181956e8e162db84b466c27e18ce # v3.1.2
         if: always()
diff --git a/app/app/keychain/_layout.tsx b/app/app/keychain/_layout.tsx
index b79eeba..ad6f807 100644
--- a/app/app/keychain/_layout.tsx
+++ b/app/app/keychain/_layout.tsx
@@ -20,6 +20,7 @@ export default function TabsLayout(): JSX.Element {
         tabPress: () => haptic.selectionAsync(),
       }),
       options: {
+        tabBarTestID: `/keychain/${props.route}`,
         title: props.title,
         tabBarIcon: ({ color }) => <IconSet name={props.icon} size={24} color={color} />,
       },
diff --git a/app/app/keychain/settings/about/design.e2e.ts b/app/app/keychain/settings/about/design.e2e.ts
new file mode 100644
index 0000000..b8787d2
--- /dev/null
+++ b/app/app/keychain/settings/about/design.e2e.ts
@@ -0,0 +1,8 @@
+import { expect, test } from '@playwright/test';
+
+test('should go to Settings -> Design System ', async ({ page, baseURL }) => {
+  await page.goto('/');
+  await page.getByTestId('/keychain/settings').click();
+  await page.getByTestId('/keychain/settings/about/design').click();
+  await expect(page).toHaveURL(`${baseURL}/keychain/settings/about/design`);
+});
diff --git a/app/app/keychain/settings/about/design.tsx b/app/app/keychain/settings/about/design.tsx
index e4b8426..841ff3f 100644
--- a/app/app/keychain/settings/about/design.tsx
+++ b/app/app/keychain/settings/about/design.tsx
@@ -15,7 +15,7 @@ export default function DesignSystemPage(): JSX.Element {
     <>
       <Stack.Screen
         options={{
-          title: 'Design',
+          title: 'Design System',
           headerLargeTitle: true,
           headerStyle: tailwind('bg-stone-900'),
           headerLargeStyle: tailwind('bg-stone-900'),
@@ -24,7 +24,7 @@ export default function DesignSystemPage(): JSX.Element {
       />
       <SafeAreaView style={tailwind('flex-1 bg-stone-900')}>
         <ScrollView>
-          <Section title="KEYCHAIN DESIGN SYSTEM">
+          <Section title="LEVAIN KEYCHAIN DESIGN SYSTEM">
             <Text style={tailwind('text-base text-stone-200')}>
               A collection of open source rules, principles, and constraints that govern how we design and build Levain
               Keychain. It is a living document that will grow and evolve as we add more features and functionality to
diff --git a/app/app/keychain/settings/index.tsx b/app/app/keychain/settings/index.tsx
index 0392a70..0924e12 100644
--- a/app/app/keychain/settings/index.tsx
+++ b/app/app/keychain/settings/index.tsx
@@ -97,7 +97,7 @@ export default function SettingPage(): JSX.Element {
                 props: {
                   to: '/keychain/settings/about/design',
                   icon: 'codesquareo',
-                  title: 'Design',
+                  title: 'Design System',
                 },
               },
               {
@@ -211,14 +211,11 @@ function SettingRowLink(props: RowProps): JSX.Element {
         await haptic.impactAsync();
       }}
     >
-      <View style={tailwind('px-6 bg-stone-800 flex-row items-center justify-between')}>
+      <View style={tailwind('px-6 bg-stone-800 flex-row items-center')}>
         <View style={tailwind('py-3 flex-row items-center justify-between')}>
           <IconSet name={props.icon} size={20} style={tailwind('text-white')}></IconSet>
           <Text style={tailwind('text-white text-base ml-2')}>{props.title}</Text>
         </View>
-        <View>
-          <IconSet name="right" size={16} style={tailwind('text-stone-500')} />
-        </View>
       </View>
     </TouchableOpacity>
   );
@@ -235,6 +232,7 @@ function SettingRowSelect(props: RowProps): JSX.Element {
         router.push(props.to!);
         await haptic.selectionAsync();
       }}
+      testID={props.to}
     >
       <View style={tailwind('px-6 bg-stone-800 flex-row items-center justify-between')}>
         <View style={tailwind('py-3 flex-row items-center justify-between')}>
diff --git a/app/playwright.config.js b/app/playwright.config.js
index d2f1ef6..d8dbd09 100644
--- a/app/playwright.config.js
+++ b/app/playwright.config.js
@@ -1,4 +1,4 @@
-import { defineConfig, devices } from '@playwright/test';
+import { defineConfig } from '@playwright/test';
 
 export default defineConfig({
   testDir: 'app',
@@ -41,15 +41,7 @@ export default defineConfig({
     baseURL: 'http://localhost:8081',
     // Collect trace when retrying the failed test.
     trace: 'on',
-    // equivalent to cypress: macbook-16
-    viewport: { width: 1200, height: 1200 },
+    viewport: { width: 500, height: 900 },
     video: 'on',
   },
-
-  projects: [
-    {
-      name: 'chromium',
-      use: { ...devices['Desktop Chrome'] },
-    },
-  ],
 });