diff --git a/app/app/ExternalLinkProvider.tsx b/app/app/ExternalLinkProvider.tsx
index a3720ff..38c58e6 100644
--- a/app/app/ExternalLinkProvider.tsx
+++ b/app/app/ExternalLinkProvider.tsx
@@ -42,30 +42,30 @@ export function ExternalLinkProvider(props: PropsWithChildren): JSX.Element {
         <BottomSheetModal
           ref={modalRef}
           index={0}
-          snapPoints={['30%']}
+          snapPoints={['33%', '50%']}
           backdropComponent={(backdropProps) => (
             <BottomSheetBackdrop
               {...backdropProps}
               disappearsOnIndex={-1}
               appearsOnIndex={0}
-              opacity={0.75}
-              style={tailwind('bg-stone-900 top-0 bottom-0 left-0 right-0 absolute')}
+              opacity={0.9}
+              style={tailwind('bg-zinc-900 top-0 bottom-0 left-0 right-0 absolute')}
               pressBehavior="close"
             />
           )}
-          handleIndicatorStyle={tailwind('bg-stone-100')}
-          backgroundStyle={tailwind('bg-stone-800')}
+          handleIndicatorStyle={tailwind('bg-zinc-200')}
+          backgroundStyle={tailwind('bg-zinc-900')}
         >
-          <View style={tailwind('bg-stone-800 p-4')}>
+          <View style={tailwind('bg-zinc-900 p-4')}>
             <View style={tailwind('flex-row items-stretch')}>
-              <View style={tailwind('rounded bg-stone-700 p-2')}>
-                <IconSet name="link" size={16} style={tailwind('text-stone-100')} />
+              <View style={tailwind('rounded bg-zinc-800 p-2')}>
+                <IconSet name="link" size={20} style={tailwind('text-zinc-200')} />
               </View>
-              <View style={tailwind('rounded bg-stone-700 flex-grow px-2 ml-2 flex-row items-center')}>
-                <Text style={tailwind('text-white text-base')}>{url}</Text>
+              <View style={tailwind('rounded bg-zinc-800 flex-grow px-3 ml-2 flex-row items-center')}>
+                <Text style={tailwind('text-base text-zinc-200')}>{url}</Text>
               </View>
             </View>
-            <Text style={tailwind('text-white py-2 text-base')}>
+            <Text style={tailwind('text-base text-zinc-200 py-2')}>
               You're about to navigate to an external website. Please proceed with caution and avoid sharing sensitive
               information.
             </Text>
@@ -77,8 +77,8 @@ export function ExternalLinkProvider(props: PropsWithChildren): JSX.Element {
                   close();
                 }}
               >
-                <View style={tailwind('rounded bg-stone-200 px-4 py-2')}>
-                  <Text style={tailwind('text-stone-800 font-bold text-base')}>Continue</Text>
+                <View style={tailwind('rounded bg-zinc-200 px-4 py-2')}>
+                  <Text style={tailwind('text-zinc-800 font-bold text-base')}>Continue</Text>
                 </View>
               </TouchableOpacity>
             </View>
diff --git a/app/app/_layout.tsx b/app/app/_layout.tsx
index b3067f1..54ec0c2 100644
--- a/app/app/_layout.tsx
+++ b/app/app/_layout.tsx
@@ -27,7 +27,7 @@ function WebContainer(): JSX.Element {
   const tailwind = useTailwind();
   if (Platform.OS === 'web') {
     return (
-      <View style={tailwind('flex-1 justify-center items-center bg-stone-800')}>
+      <View style={tailwind('flex-1 justify-center items-center bg-zinc-800')}>
         <View style={tailwind('w-[390px] h-[800px]')}>
           <AppContainer />
         </View>
@@ -59,8 +59,13 @@ function AppContainer(): JSX.Element | null {
         <HapticFeedbackProvider>
           <ExternalLinkProvider>
             <Stack>
-              <Stack.Screen name="keychain" options={{ headerShown: false }} />
-              <Stack.Screen name="signing" options={{ presentation: 'modal' }} />
+              <Stack.Screen name="tabs" options={{ headerShown: false }} />
+              <Stack.Screen name="sign" options={{ presentation: 'modal' }} />
+              <Stack.Screen name="about/design" options={{ presentation: 'modal' }} />
+              <Stack.Screen name="about/licenses" options={{ presentation: 'modal' }} />
+              <Stack.Screen name="api/settings" options={{ presentation: 'modal' }} />
+              <Stack.Screen name="keys/settings" options={{ presentation: 'modal' }} />
+              <Stack.Screen name="scan/settings" options={{ presentation: 'modal' }} />
             </Stack>
           </ExternalLinkProvider>
         </HapticFeedbackProvider>
diff --git a/app/app/about/design.e2e.ts b/app/app/about/design.e2e.ts
new file mode 100644
index 0000000..d1effe0
--- /dev/null
+++ b/app/app/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('/tabs/settings').click();
+  await page.getByTestId('/about/design').click();
+  await expect(page).toHaveURL(`${baseURL}/about/design`);
+});
diff --git a/app/app/keychain/settings/about/design.tsx b/app/app/about/design.tsx
similarity index 65%
rename from app/app/keychain/settings/about/design.tsx
rename to app/app/about/design.tsx
index 841ff3f..3fd46c7 100644
--- a/app/app/keychain/settings/about/design.tsx
+++ b/app/app/about/design.tsx
@@ -1,38 +1,46 @@
-import { Stack } from 'expo-router';
+import { Stack, useRouter } from 'expo-router';
 import { ComponentProps, ReactNode } from 'react';
 import { SafeAreaView, ScrollView, Switch, Text, TouchableOpacity, View, ViewStyle } from 'react-native';
 import { StyleProp } from 'react-native/Libraries/StyleSheet/StyleSheet';
 import { useTailwind } from 'tailwind-rn';
 
-import { useHaptic } from '../../../HapticFeedback';
-import { IconSet } from '../../../IconSet';
+import { useHaptic } from '../HapticFeedback';
+import { IconSet } from '../IconSet';
 
 export default function DesignSystemPage(): JSX.Element {
   const tailwind = useTailwind();
   const haptic = useHaptic();
+  const router = useRouter();
 
   return (
     <>
       <Stack.Screen
         options={{
           title: 'Design System',
-          headerLargeTitle: true,
-          headerStyle: tailwind('bg-stone-900'),
-          headerLargeStyle: tailwind('bg-stone-900'),
-          headerLargeTitleStyle: tailwind('text-4xl font-bold text-white'),
+          headerStyle: tailwind('bg-zinc-900'),
+          headerRight: () => (
+            <TouchableOpacity
+              onPress={async () => {
+                await haptic.selectionAsync();
+                router.back();
+              }}
+            >
+              <IconSet name="close" size={24} style={tailwind('text-zinc-100')} />
+            </TouchableOpacity>
+          ),
         }}
       />
-      <SafeAreaView style={tailwind('flex-1 bg-stone-900')}>
+      <SafeAreaView style={tailwind('flex-1 bg-zinc-900')}>
         <ScrollView>
           <Section title="LEVAIN KEYCHAIN DESIGN SYSTEM">
-            <Text style={tailwind('text-base text-stone-200')}>
+            <Text style={tailwind('text-base text-zinc-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
               Keychain. As a design system, it provides a common language and vocabulary to build cohesive, accessible,
               responsive, and efficient experiences.
             </Text>
 
-            <Text style={tailwind('text-base text-stone-200 mt-2')}>
+            <Text style={tailwind('text-base text-zinc-200 mt-2')}>
               Utilizing a utility-first approach, we build complex components from a constrained set of primitive
               utilities.
             </Text>
@@ -40,59 +48,59 @@ export default function DesignSystemPage(): JSX.Element {
 
           <Section title="COLOR PALETTE">
             <View style={tailwind('flex-row items-center')}>
-              <View style={tailwind('rounded-full w-10 h-10 bg-stone-200')} />
-              <Text style={tailwind('text-lg font-bold text-stone-200 mx-6')}>Primary</Text>
-              <Code>stone-200</Code>
+              <View style={tailwind('rounded-full w-10 h-10 bg-zinc-200')} />
+              <Text style={tailwind('text-lg font-bold text-zinc-200 mx-6')}>Primary</Text>
+              <Code>zinc-200</Code>
             </View>
 
             <View style={tailwind('flex-row items-center mt-4')}>
               <View style={tailwind('rounded-full w-10 h-10 bg-teal-500')} />
-              <Text style={tailwind('text-lg font-bold text-stone-200 mx-6')}>Accent</Text>
+              <Text style={tailwind('text-lg font-bold text-zinc-200 mx-6')}>Accent</Text>
               <Code>teal-500</Code>
             </View>
 
             <View style={tailwind('flex-row items-center mt-4')}>
-              <View style={tailwind('rounded-full w-10 h-10 bg-stone-900')} />
-              <Text style={tailwind('text-lg font-bold text-stone-200 mx-6')}>Background</Text>
-              <Code>stone-900</Code>
+              <View style={tailwind('rounded-full w-10 h-10 bg-zinc-900')} />
+              <Text style={tailwind('text-lg font-bold text-zinc-200 mx-6')}>Background</Text>
+              <Code>zinc-900</Code>
             </View>
           </Section>
 
           <Section title="TYPOGRAPHY">
             <View>
-              <Text style={tailwind('text-2xl font-bold text-stone-200')}>Heading 1</Text>
-              <Code>text-2xl font-bold text-stone-200</Code>
+              <Text style={tailwind('text-2xl font-bold text-zinc-200')}>Heading 1</Text>
+              <Code>text-2xl font-bold text-zinc-200</Code>
             </View>
             <View style={tailwind('mt-2')}>
-              <Text style={tailwind('text-lg font-bold text-stone-200')}>Heading 2</Text>
-              <Code>text-lg font-bold text-stone-200</Code>
+              <Text style={tailwind('text-lg font-bold text-zinc-200')}>Heading 2</Text>
+              <Code>text-lg font-bold text-zinc-200</Code>
             </View>
             <View style={tailwind('mt-2')}>
-              <Text style={tailwind('text-base text-stone-200')}>Body</Text>
-              <Code>text-base text-stone-200</Code>
+              <Text style={tailwind('text-base text-zinc-200')}>Body</Text>
+              <Code>text-base text-zinc-200</Code>
             </View>
             <View style={tailwind('mt-2')}>
-              <Text style={tailwind('text-sm text-stone-200')}>Caption</Text>
-              <Code>text-sm text-stone-200</Code>
+              <Text style={tailwind('text-sm text-zinc-200')}>Caption</Text>
+              <Code>text-sm text-zinc-200</Code>
             </View>
           </Section>
 
           <Section title="ICONS">
             <View style={tailwind('flex-row items-center')}>
-              <Text style={tailwind('text-lg font-bold text-stone-200 mr-2 w-6')}>24</Text>
-              <IconSet name="key" size={24} style={tailwind('text-stone-100 mr-2')} />
-              <IconSet name="API" size={24} style={tailwind('text-stone-100 mr-2')} />
-              <IconSet name="scan1" size={24} style={tailwind('text-stone-100 mr-2')} />
-              <IconSet name="setting" size={24} style={tailwind('text-stone-100 mr-2')} />
+              <Text style={tailwind('text-lg font-bold text-zinc-200 mr-2 w-6')}>24</Text>
+              <IconSet name="key" size={24} style={tailwind('text-zinc-100 mr-2')} />
+              <IconSet name="API" size={24} style={tailwind('text-zinc-100 mr-2')} />
+              <IconSet name="scan1" size={24} style={tailwind('text-zinc-100 mr-2')} />
+              <IconSet name="setting" size={24} style={tailwind('text-zinc-100 mr-2')} />
             </View>
 
             <View style={tailwind('flex-row items-center mt-2')}>
-              <Text style={tailwind('text-lg font-bold text-stone-200 mr-2 w-6')}>16</Text>
-              <IconSet name="link" size={16} style={tailwind('text-stone-100 mr-2')} />
-              <IconSet name="up" size={16} style={tailwind('text-stone-100 mr-2')} />
-              <IconSet name="down" size={16} style={tailwind('text-stone-100 mr-2')} />
-              <IconSet name="left" size={16} style={tailwind('text-stone-100 mr-2')} />
-              <IconSet name="right" size={16} style={tailwind('text-stone-100 mr-2')} />
+              <Text style={tailwind('text-lg font-bold text-zinc-200 mr-2 w-6')}>16</Text>
+              <IconSet name="link" size={16} style={tailwind('text-zinc-100 mr-2')} />
+              <IconSet name="up" size={16} style={tailwind('text-zinc-100 mr-2')} />
+              <IconSet name="down" size={16} style={tailwind('text-zinc-100 mr-2')} />
+              <IconSet name="left" size={16} style={tailwind('text-zinc-100 mr-2')} />
+              <IconSet name="right" size={16} style={tailwind('text-zinc-100 mr-2')} />
             </View>
           </Section>
 
@@ -103,8 +111,8 @@ export default function DesignSystemPage(): JSX.Element {
                   await haptic.selectionAsync();
                 }}
               >
-                <View style={tailwind('rounded bg-stone-200 px-4 py-2')}>
-                  <Text style={tailwind('text-stone-800 font-bold text-base')}>Primary</Text>
+                <View style={tailwind('rounded bg-zinc-200 px-4 py-2')}>
+                  <Text style={tailwind('text-zinc-800 font-bold text-base')}>Primary</Text>
                 </View>
               </TouchableOpacity>
             </View>
@@ -115,8 +123,8 @@ export default function DesignSystemPage(): JSX.Element {
                   await haptic.selectionAsync();
                 }}
               >
-                <View style={tailwind('rounded bg-stone-200 px-3 py-1.5')}>
-                  <Text style={tailwind('text-stone-700 text-sm font-medium')}>Secondary</Text>
+                <View style={tailwind('rounded bg-zinc-200 px-3 py-1.5')}>
+                  <Text style={tailwind('text-zinc-700 text-sm font-medium')}>Secondary</Text>
                 </View>
               </TouchableOpacity>
             </View>
@@ -124,7 +132,7 @@ export default function DesignSystemPage(): JSX.Element {
           <Section title="TOGGLE">
             <View style={tailwind('flex-row items-center')}>
               <Switch
-                thumbColor={tailwind('text-stone-200').color as any}
+                thumbColor={tailwind('text-zinc-200').color as any}
                 trackColor={{
                   false: tailwind('text-teal-500').color as any,
                   true: tailwind('text-teal-500').color as any,
@@ -137,12 +145,12 @@ export default function DesignSystemPage(): JSX.Element {
 
               <Switch
                 style={tailwind('ml-4')}
-                thumbColor={tailwind('text-stone-200').color as any}
+                thumbColor={tailwind('text-zinc-200').color as any}
                 trackColor={{
                   false: tailwind('text-teal-500').color as any,
                   true: tailwind('text-teal-500').color as any,
                 }}
-                ios_backgroundColor={tailwind('text-stone-800').color as any}
+                ios_backgroundColor={tailwind('text-zinc-800').color as any}
                 onValueChange={async (value: boolean) => {
                   await haptic.setEnabled(value);
                 }}
@@ -150,7 +158,7 @@ export default function DesignSystemPage(): JSX.Element {
               />
             </View>
           </Section>
-          <Section title="LIST VIEW" innerStyle={tailwind('p-4 bg-stone-950')}>
+          <Section title="LIST VIEW" innerStyle={tailwind('p-4 bg-zinc-700')}>
             {(() => {
               function ListViewItem(props: {
                 title: string;
@@ -163,13 +171,13 @@ export default function DesignSystemPage(): JSX.Element {
                       await haptic.selectionAsync();
                     }}
                   >
-                    <View style={tailwind('px-6 bg-stone-800 flex-row items-center justify-between')}>
+                    <View style={tailwind('px-6 bg-zinc-800 flex-row items-center justify-between')}>
                       <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')} />
+                        <IconSet name="right" size={16} style={tailwind('text-zinc-500')} />
                       </View>
                     </View>
                   </TouchableOpacity>
@@ -179,11 +187,11 @@ export default function DesignSystemPage(): JSX.Element {
               return (
                 <View style={tailwind('')}>
                   <ListViewItem title="Item 1" subtitle="" icon="filetext1" />
-                  <View style={tailwind('pl-12 bg-stone-800')}>
-                    <View style={tailwind('bg-stone-900 opacity-40 w-full h-px')} />
+                  <View style={tailwind('pl-12 bg-zinc-800')}>
+                    <View style={tailwind('bg-zinc-900 opacity-40 w-full h-px')} />
                   </View>
                   <ListViewItem title="Item 2" subtitle="" icon="infocirlceo" />
-                  <Text style={tailwind('pt-8 pb-2 px-6 text-white bg-stone-900')}>SECTION</Text>
+                  <Text style={tailwind('pt-8 pb-2 px-6 text-white bg-zinc-900')}>SECTION</Text>
                   <ListViewItem title="Item 3" subtitle="" icon="retweet" />
                 </View>
               );
@@ -200,9 +208,9 @@ function Section(props: { title: string; children?: ReactNode; innerStyle?: Styl
 
   return (
     <View style={tailwind('px-4 py-2')}>
-      <View style={tailwind('bg-stone-800 rounded')}>
-        <View style={tailwind('py-3 px-4 border-b border-stone-700')}>
-          <Text style={tailwind('text-xs text-stone-200')}>{props.title}</Text>
+      <View style={tailwind('bg-zinc-800 rounded')}>
+        <View style={tailwind('py-3 px-4 border-b border-zinc-700')}>
+          <Text style={tailwind('text-xs text-zinc-200')}>{props.title}</Text>
         </View>
         <View style={props.innerStyle ?? tailwind('p-4')}>{props.children}</View>
       </View>
@@ -215,7 +223,7 @@ function Code(props: { children: string }): JSX.Element {
 
   return (
     <View>
-      <Text style={tailwind('text-sm text-stone-100')}>{props.children}</Text>
+      <Text style={tailwind('text-sm text-zinc-100')}>{props.children}</Text>
     </View>
   );
 }
diff --git a/app/app/about/licenses.tsx b/app/app/about/licenses.tsx
new file mode 100644
index 0000000..1aa7f9c
--- /dev/null
+++ b/app/app/about/licenses.tsx
@@ -0,0 +1,36 @@
+import { Stack, useRouter } from 'expo-router';
+import { Text, TouchableOpacity, View } from 'react-native';
+import { useTailwind } from 'tailwind-rn';
+
+import { useHaptic } from '../HapticFeedback';
+import { IconSet } from '../IconSet';
+
+export default function LicensesPage(): JSX.Element {
+  const tailwind = useTailwind();
+  const haptic = useHaptic();
+  const router = useRouter();
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Licenses',
+          headerStyle: tailwind('bg-zinc-900'),
+          headerRight: () => (
+            <TouchableOpacity
+              onPress={async () => {
+                await haptic.selectionAsync();
+                router.back();
+              }}
+            >
+              <IconSet name="close" size={24} style={tailwind('text-zinc-100')} />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}>
+        <Text style={tailwind('text-center text-xl text-white')}>Licenses</Text>
+      </View>
+    </>
+  );
+}
diff --git a/app/app/api/settings.tsx b/app/app/api/settings.tsx
new file mode 100644
index 0000000..d5f2b9b
--- /dev/null
+++ b/app/app/api/settings.tsx
@@ -0,0 +1,35 @@
+import { Stack, useRouter } from 'expo-router';
+import { TouchableOpacity, View } from 'react-native';
+import { useTailwind } from 'tailwind-rn';
+
+import { useHaptic } from '../HapticFeedback';
+import { IconSet } from '../IconSet';
+
+export default function ApiSettingsPage(): JSX.Element {
+  const tailwind = useTailwind();
+  const haptic = useHaptic();
+  const router = useRouter();
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          presentation: 'modal',
+          title: 'API Settings',
+          headerStyle: tailwind('bg-zinc-900'),
+          headerRight: () => (
+            <TouchableOpacity
+              onPress={async () => {
+                await haptic.selectionAsync();
+                router.back();
+              }}
+            >
+              <IconSet name="close" size={24} style={tailwind('text-zinc-100')} />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}></View>
+    </>
+  );
+}
diff --git a/app/app/index.e2e.ts b/app/app/index.e2e.ts
index 9c40f4c..86d1815 100644
--- a/app/app/index.e2e.ts
+++ b/app/app/index.e2e.ts
@@ -3,7 +3,6 @@ import { expect, test } from '@playwright/test';
 test.describe('Index', async () => {
   test('should go to /', async ({ page, baseURL }) => {
     await page.goto('/');
-    await expect(page).toHaveURL(`${baseURL}/keychain/keys`);
-    await expect(page.getByTestId('KeysPage.Keys')).toContainText('Keys');
+    await expect(page).toHaveURL(`${baseURL}/tabs`);
   });
 });
diff --git a/app/app/index.tsx b/app/app/index.tsx
index 3853b6f..52974bd 100644
--- a/app/app/index.tsx
+++ b/app/app/index.tsx
@@ -1,5 +1,5 @@
 import { Redirect } from 'expo-router';
 
 export default function App(): JSX.Element {
-  return <Redirect href={'/keychain'} />;
+  return <Redirect href={'/tabs'} />;
 }
diff --git a/app/app/keychain/index.tsx b/app/app/keychain/index.tsx
deleted file mode 100644
index 6818959..0000000
--- a/app/app/keychain/index.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Redirect } from 'expo-router';
-
-export default function Keychain(): JSX.Element {
-  return <Redirect href={'/keys'} />;
-}
diff --git a/app/app/keychain/keys/_layout.tsx b/app/app/keychain/keys/_layout.tsx
deleted file mode 100644
index ed09309..0000000
--- a/app/app/keychain/keys/_layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Stack } from 'expo-router';
-
-export default function Layout(): JSX.Element {
-  return <Stack screenOptions={{ headerShown: false }} />;
-}
diff --git a/app/app/keychain/scan/_layout.tsx b/app/app/keychain/scan/_layout.tsx
deleted file mode 100644
index ed09309..0000000
--- a/app/app/keychain/scan/_layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Stack } from 'expo-router';
-
-export default function Layout(): JSX.Element {
-  return <Stack screenOptions={{ headerShown: false }} />;
-}
diff --git a/app/app/keychain/settings/_layout.tsx b/app/app/keychain/settings/_layout.tsx
deleted file mode 100644
index 0eab574..0000000
--- a/app/app/keychain/settings/_layout.tsx
+++ /dev/null
@@ -1,16 +0,0 @@
-import { Stack } from 'expo-router';
-import { useTailwind } from 'tailwind-rn';
-
-export default function SettingLayout(): JSX.Element {
-  const tailwind = useTailwind();
-
-  return (
-    <Stack
-      screenOptions={{
-        headerTintColor: tailwind('text-white').color as string,
-        headerStyle: tailwind('bg-stone-900'),
-        headerTitleStyle: tailwind('text-white'),
-      }}
-    />
-  );
-}
diff --git a/app/app/keychain/settings/about/design.e2e.ts b/app/app/keychain/settings/about/design.e2e.ts
deleted file mode 100644
index b8787d2..0000000
--- a/app/app/keychain/settings/about/design.e2e.ts
+++ /dev/null
@@ -1,8 +0,0 @@
-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/licenses.tsx b/app/app/keychain/settings/about/licenses.tsx
deleted file mode 100644
index 6fdaacf..0000000
--- a/app/app/keychain/settings/about/licenses.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Stack } from 'expo-router';
-import { Text, View } from 'react-native';
-import { useTailwind } from 'tailwind-rn';
-
-export default function LicensesPage(): JSX.Element {
-  const tailwind = useTailwind();
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: 'Licenses',
-          headerLargeTitle: true,
-        }}
-      />
-      <View style={tailwind('flex-1 items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')} testID="KeysPage.Keys">
-          Settings - licenses.tsx
-        </Text>
-      </View>
-    </>
-  );
-}
diff --git a/app/app/keychain/settings/app/api.tsx b/app/app/keychain/settings/app/api.tsx
deleted file mode 100644
index 66da403..0000000
--- a/app/app/keychain/settings/app/api.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Stack } from 'expo-router';
-import { Text, View } from 'react-native';
-import { useTailwind } from 'tailwind-rn';
-
-export default function ApiSigningPage(): JSX.Element {
-  const tailwind = useTailwind();
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: 'API Signing',
-          headerLargeTitle: true,
-        }}
-      />
-      <View style={tailwind('flex-1 items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')} testID="KeysPage.Keys">
-          Settings - api.tsx
-        </Text>
-      </View>
-    </>
-  );
-}
diff --git a/app/app/keychain/settings/app/keys.tsx b/app/app/keychain/settings/app/keys.tsx
deleted file mode 100644
index 57f85fa..0000000
--- a/app/app/keychain/settings/app/keys.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Stack } from 'expo-router';
-import { Text, View } from 'react-native';
-import { useTailwind } from 'tailwind-rn';
-
-export default function KeyStoragePage(): JSX.Element {
-  const tailwind = useTailwind();
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: 'Key Settings',
-          headerLargeTitle: true,
-        }}
-      />
-      <View style={tailwind('flex-1 items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')} testID="KeysPage.Keys">
-          Settings - keys.tsx
-        </Text>
-      </View>
-    </>
-  );
-}
diff --git a/app/app/keychain/settings/app/scan.tsx b/app/app/keychain/settings/app/scan.tsx
deleted file mode 100644
index 8215f65..0000000
--- a/app/app/keychain/settings/app/scan.tsx
+++ /dev/null
@@ -1,23 +0,0 @@
-import { Stack } from 'expo-router';
-import { Text, View } from 'react-native';
-import { useTailwind } from 'tailwind-rn';
-
-export default function ScanSigningPage(): JSX.Element {
-  const tailwind = useTailwind();
-
-  return (
-    <>
-      <Stack.Screen
-        options={{
-          title: 'Scan Signing',
-          headerLargeTitle: true,
-        }}
-      />
-      <View style={tailwind('flex-1 items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')} testID="KeysPage.Keys">
-          Settings - scan.tsx
-        </Text>
-      </View>
-    </>
-  );
-}
diff --git a/app/app/keys/settings.tsx b/app/app/keys/settings.tsx
new file mode 100644
index 0000000..ef98695
--- /dev/null
+++ b/app/app/keys/settings.tsx
@@ -0,0 +1,34 @@
+import { Stack, useRouter } from 'expo-router';
+import { TouchableOpacity, View } from 'react-native';
+import { useTailwind } from 'tailwind-rn';
+
+import { useHaptic } from '../HapticFeedback';
+import { IconSet } from '../IconSet';
+
+export default function KeySettingsPage(): JSX.Element {
+  const tailwind = useTailwind();
+  const haptic = useHaptic();
+  const router = useRouter();
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Keys Settings',
+          headerStyle: tailwind('bg-zinc-900'),
+          headerRight: () => (
+            <TouchableOpacity
+              onPress={async () => {
+                await haptic.selectionAsync();
+                router.back();
+              }}
+            >
+              <IconSet name="close" size={24} style={tailwind('text-zinc-100')} />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}></View>
+    </>
+  );
+}
diff --git a/app/app/scan/settings.tsx b/app/app/scan/settings.tsx
new file mode 100644
index 0000000..1519cca
--- /dev/null
+++ b/app/app/scan/settings.tsx
@@ -0,0 +1,34 @@
+import { Stack, useRouter } from 'expo-router';
+import { TouchableOpacity, View } from 'react-native';
+import { useTailwind } from 'tailwind-rn';
+
+import { useHaptic } from '../HapticFeedback';
+import { IconSet } from '../IconSet';
+
+export default function ScanSettingsPage(): JSX.Element {
+  const tailwind = useTailwind();
+  const haptic = useHaptic();
+  const router = useRouter();
+
+  return (
+    <>
+      <Stack.Screen
+        options={{
+          title: 'Scan Settings',
+          headerStyle: tailwind('bg-zinc-900'),
+          headerRight: () => (
+            <TouchableOpacity
+              onPress={async () => {
+                await haptic.selectionAsync();
+                router.back();
+              }}
+            >
+              <IconSet name="close" size={24} style={tailwind('text-zinc-100')} />
+            </TouchableOpacity>
+          ),
+        }}
+      />
+      <View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}></View>
+    </>
+  );
+}
diff --git a/app/app/keychain/api/_layout.tsx b/app/app/sign/_layout.tsx
similarity index 100%
rename from app/app/keychain/api/_layout.tsx
rename to app/app/sign/_layout.tsx
diff --git a/app/app/sign/index.tsx b/app/app/sign/index.tsx
new file mode 100644
index 0000000..00ebe72
--- /dev/null
+++ b/app/app/sign/index.tsx
@@ -0,0 +1,14 @@
+import { Text, View } from 'react-native';
+import { useTailwind } from 'tailwind-rn';
+
+export default function SignPage(): JSX.Element {
+  const tailwind = useTailwind();
+
+  return (
+    <>
+      <View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}>
+        <Text style={tailwind('text-center text-xl text-white')}>Sign</Text>
+      </View>
+    </>
+  );
+}
diff --git a/app/app/signing/_layout.tsx b/app/app/signing/_layout.tsx
deleted file mode 100644
index ed09309..0000000
--- a/app/app/signing/_layout.tsx
+++ /dev/null
@@ -1,5 +0,0 @@
-import { Stack } from 'expo-router';
-
-export default function Layout(): JSX.Element {
-  return <Stack screenOptions={{ headerShown: false }} />;
-}
diff --git a/app/app/signing/index.tsx b/app/app/signing/index.tsx
deleted file mode 100644
index 2317c9d..0000000
--- a/app/app/signing/index.tsx
+++ /dev/null
@@ -1,21 +0,0 @@
-import { Link } from 'expo-router';
-import { Text, View } from 'react-native';
-import { useTailwind } from 'tailwind-rn';
-
-export default function ApprovalPage(): JSX.Element {
-  const tailwind = useTailwind();
-
-  return (
-    <>
-      <View style={tailwind('flex-1 items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')}>KeyChain — Approval</Text>
-
-        <Link href="/_sitemap" style={tailwind('my-2')} testID="">
-          <View style={tailwind('rounded bg-white px-4 py-1')}>
-            <Text style={tailwind('text-xl')}>Sitemap</Text>
-          </View>
-        </Link>
-      </View>
-    </>
-  );
-}
diff --git a/app/app/keychain/_layout.tsx b/app/app/tabs/_layout.tsx
similarity index 71%
rename from app/app/keychain/_layout.tsx
rename to app/app/tabs/_layout.tsx
index ad6f807..f14015f 100644
--- a/app/app/keychain/_layout.tsx
+++ b/app/app/tabs/_layout.tsx
@@ -20,7 +20,7 @@ export default function TabsLayout(): JSX.Element {
         tabPress: () => haptic.selectionAsync(),
       }),
       options: {
-        tabBarTestID: `/keychain/${props.route}`,
+        tabBarTestID: `/tabs/${props.route}`,
         title: props.title,
         tabBarIcon: ({ color }) => <IconSet name={props.icon} size={24} color={color} />,
       },
@@ -29,20 +29,21 @@ export default function TabsLayout(): JSX.Element {
 
   return (
     <Tabs
-      initialRouteName="keys"
       screenOptions={{
-        headerShown: false,
+        headerShown: true,
         tabBarShowLabel: false,
         tabBarInactiveTintColor: '#fff',
         tabBarActiveTintColor: '#fff',
-        tabBarStyle: tailwind('bg-stone-900 border-t border-stone-800'),
+        tabBarStyle: tailwind('bg-zinc-900 border-t border-zinc-800'),
+        headerTintColor: tailwind('text-white').color as string,
+        headerStyle: tailwind('bg-zinc-900'),
+        headerTitleStyle: tailwind('text-white'),
       }}
     >
-      <Tabs.Screen name="index" redirect={true} />
-      <Tabs.Screen {...tabScreenProps({ route: 'keys', title: 'KEYS', icon: 'key' })} />
+      <Tabs.Screen {...tabScreenProps({ route: 'index', title: 'Keys', icon: 'key' })} />
       <Tabs.Screen {...tabScreenProps({ route: 'api', title: 'API', icon: 'API' })} />
-      <Tabs.Screen {...tabScreenProps({ route: 'scan', title: 'SCAN', icon: 'scan1' })} />
-      <Tabs.Screen {...tabScreenProps({ route: 'settings', title: 'SETTING', icon: 'setting' })} />
+      <Tabs.Screen {...tabScreenProps({ route: 'scan', title: 'Scan', icon: 'scan1' })} />
+      <Tabs.Screen {...tabScreenProps({ route: 'settings', title: 'Settings', icon: 'setting' })} />
     </Tabs>
   );
 }
diff --git a/app/app/keychain/api/index.tsx b/app/app/tabs/api.tsx
similarity index 91%
rename from app/app/keychain/api/index.tsx
rename to app/app/tabs/api.tsx
index 0f9fce9..55e8c0e 100644
--- a/app/app/keychain/api/index.tsx
+++ b/app/app/tabs/api.tsx
@@ -8,8 +8,8 @@ export default function ApiPage(): JSX.Element {
   return (
     <>
       <Stack.Screen options={{ title: 'API' }} />
-      <View style={tailwind('flex-1 items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')}>KeyChain — API</Text>
+      <View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}>
+        <Text style={tailwind('text-center text-xl text-white')}>API</Text>
       </View>
     </>
   );
diff --git a/app/app/keychain/keys/index.tsx b/app/app/tabs/index.tsx
similarity index 65%
rename from app/app/keychain/keys/index.tsx
rename to app/app/tabs/index.tsx
index a2deb40..0f5904e 100644
--- a/app/app/keychain/keys/index.tsx
+++ b/app/app/tabs/index.tsx
@@ -1,4 +1,3 @@
-import { Stack } from 'expo-router';
 import { Text, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
@@ -6,11 +5,8 @@ export default function KeysPage(): JSX.Element {
   const tailwind = useTailwind();
   return (
     <>
-      <Stack.Screen options={{ title: 'Keys' }} />
-      <View style={tailwind('flex-1 flex-col items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')} testID="KeysPage.Keys">
-          KeyChain — Keys
-        </Text>
+      <View style={tailwind('flex-1 flex-col items-center justify-center bg-zinc-900')}>
+        <Text style={tailwind('text-center text-xl text-white')}>Keys</Text>
       </View>
     </>
   );
diff --git a/app/app/keychain/scan/index.tsx b/app/app/tabs/scan.tsx
similarity index 72%
rename from app/app/keychain/scan/index.tsx
rename to app/app/tabs/scan.tsx
index 49242bf..5a67368 100644
--- a/app/app/keychain/scan/index.tsx
+++ b/app/app/tabs/scan.tsx
@@ -1,4 +1,3 @@
-import { Stack } from 'expo-router';
 import { Text, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
@@ -7,9 +6,8 @@ export default function ScanPage(): JSX.Element {
 
   return (
     <>
-      <Stack.Screen options={{ title: 'Scan' }} />
-      <View style={tailwind('flex-1 items-center justify-center bg-stone-900')}>
-        <Text style={tailwind('text-center text-xl text-white')}>KeyChain — Scan</Text>
+      <View style={tailwind('flex-1 items-center justify-center bg-zinc-900')}>
+        <Text style={tailwind('text-center text-xl text-white')}>Scan</Text>
       </View>
     </>
   );
diff --git a/app/app/keychain/settings/index.tsx b/app/app/tabs/settings.tsx
similarity index 83%
rename from app/app/keychain/settings/index.tsx
rename to app/app/tabs/settings.tsx
index 0924e12..03e699a 100644
--- a/app/app/keychain/settings/index.tsx
+++ b/app/app/tabs/settings.tsx
@@ -3,18 +3,22 @@ import { Stack, useRouter } from 'expo-router';
 import { Platform, SectionList, Switch, Text, TouchableOpacity, View } from 'react-native';
 import { useTailwind } from 'tailwind-rn';
 
-import { useExternalLink } from '../../ExternalLinkProvider';
-import { useHaptic } from '../../HapticFeedback';
-import { IconSet } from '../../IconSet';
+import { useExternalLink } from '../ExternalLinkProvider';
+import { useHaptic } from '../HapticFeedback';
+import { IconSet } from '../IconSet';
 
 export default function SettingPage(): JSX.Element {
   const tailwind = useTailwind();
 
   return (
     <>
-      <Stack.Screen options={{ title: 'Settings' }} />
+      <Stack.Screen
+        options={{
+          title: 'Settings',
+        }}
+      />
       <SectionList
-        style={tailwind('bg-stone-900')}
+        style={tailwind('bg-zinc-900')}
         sections={[
           {
             title: 'KEYCHAIN',
@@ -22,7 +26,7 @@ export default function SettingPage(): JSX.Element {
               {
                 type: 'select',
                 props: {
-                  to: '/keychain/settings/app/keys',
+                  to: '/keys/settings',
                   icon: 'key',
                   title: 'Key Settings',
                 },
@@ -30,17 +34,17 @@ export default function SettingPage(): JSX.Element {
               {
                 type: 'select',
                 props: {
-                  to: '/keychain/settings/app/api',
+                  to: '/api/settings',
                   icon: 'API',
-                  title: 'API Signing',
+                  title: 'API Settings',
                 },
               },
               {
                 type: 'select',
                 props: {
-                  to: '/keychain/settings/app/scan',
+                  to: '/scan/settings',
                   icon: 'scan1',
-                  title: 'Scan Signing',
+                  title: 'Scan Settings',
                 },
               },
             ],
@@ -87,7 +91,7 @@ export default function SettingPage(): JSX.Element {
               {
                 type: 'select',
                 props: {
-                  to: '/keychain/settings/about/licenses',
+                  to: '/about/licenses',
                   icon: 'book',
                   title: 'Licenses',
                 },
@@ -95,7 +99,7 @@ export default function SettingPage(): JSX.Element {
               {
                 type: 'select',
                 props: {
-                  to: '/keychain/settings/about/design',
+                  to: '/about/design',
                   icon: 'codesquareo',
                   title: 'Design System',
                 },
@@ -111,7 +115,7 @@ export default function SettingPage(): JSX.Element {
           },
         ]}
         renderSectionHeader={({ section }) => (
-          <Text style={tailwind('pt-8 pb-2 px-6 text-white bg-stone-900')}>{section.title}</Text>
+          <Text style={tailwind('pt-8 pb-2 px-6 text-white bg-zinc-900')}>{section.title}</Text>
         )}
         renderItem={({ item }) => {
           switch (item.type) {
@@ -129,8 +133,8 @@ export default function SettingPage(): JSX.Element {
         }}
         keyExtractor={(item) => item.type + item.props.title}
         ItemSeparatorComponent={() => (
-          <View style={tailwind('pl-12 bg-stone-800')}>
-            <View style={tailwind('bg-stone-900 opacity-40 w-full h-px')} />
+          <View style={tailwind('pl-12 bg-zinc-800')}>
+            <View style={tailwind('bg-zinc-900 opacity-40 w-full h-px')} />
           </View>
         )}
       />
@@ -160,7 +164,7 @@ function SettingRowVersion(props: RowProps): JSX.Element {
   })();
 
   return (
-    <View style={tailwind('px-6 bg-stone-800 flex-row items-center justify-between')}>
+    <View style={tailwind('px-6 bg-zinc-800 flex-row items-center justify-between')}>
       <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')}>
@@ -177,14 +181,14 @@ function SettingRowHaptic(props: RowProps): JSX.Element {
   const haptic = useHaptic();
 
   return (
-    <View style={tailwind('px-6 bg-stone-800 flex-row items-center justify-between')}>
+    <View style={tailwind('px-6 bg-zinc-800 flex-row items-center justify-between')}>
       <View style={tailwind('flex-row py-3 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>
         <Switch
-          thumbColor={tailwind('text-stone-200').color as any}
+          thumbColor={tailwind('text-zinc-200').color as any}
           trackColor={{
             false: tailwind('text-teal-500').color as any,
             true: tailwind('text-teal-500').color as any,
@@ -211,7 +215,7 @@ function SettingRowLink(props: RowProps): JSX.Element {
         await haptic.impactAsync();
       }}
     >
-      <View style={tailwind('px-6 bg-stone-800 flex-row items-center')}>
+      <View style={tailwind('px-6 bg-zinc-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>
@@ -234,13 +238,13 @@ function SettingRowSelect(props: RowProps): JSX.Element {
       }}
       testID={props.to}
     >
-      <View style={tailwind('px-6 bg-stone-800 flex-row items-center justify-between')}>
+      <View style={tailwind('px-6 bg-zinc-800 flex-row items-center justify-between')}>
         <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')} />
+          <IconSet name="right" size={16} style={tailwind('text-zinc-500')} />
         </View>
       </View>
     </TouchableOpacity>