diff --git a/app/(tabs)/expenses/_layout.tsx b/app/(tabs)/expenses/_layout.tsx
new file mode 100644
index 0000000..10bd763
--- /dev/null
+++ b/app/(tabs)/expenses/_layout.tsx
@@ -0,0 +1,31 @@
+import { TopTabs } from "@bacons/expo-router-top-tabs";
+import { useColorScheme } from "react-native";
+import Colors from "../../../constants/Colors";
+
+export default function ExpensesTabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <TopTabs
+      options={{swipeEnabled: false}}
+      screenOptions={{
+        tabBarPressColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise,
+        tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise},
+      }}>
+      <TopTabs.Header>
+      </TopTabs.Header>
+      <TopTabs.Screen
+        name="index"
+        options={{
+          title: 'Settle'
+        }}
+      />
+      <TopTabs.Screen
+        name="balance"
+        options={{
+          title: 'Balance'
+        }}
+      />
+    </TopTabs>
+  );
+}
\ No newline at end of file
diff --git a/app/(tabs)/expenses/balance.tsx b/app/(tabs)/expenses/balance.tsx
new file mode 100644
index 0000000..96f3a02
--- /dev/null
+++ b/app/(tabs)/expenses/balance.tsx
@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '../../../components/EditScreenInfo';
+import { Text, View } from '../../../components/Themed';
+
+export default function BalanceScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Balance</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <EditScreenInfo path="app/(tabs)/expenses/balance.tsx" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 48,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});
diff --git a/app/(tabs)/expenses/index.tsx b/app/(tabs)/expenses/index.tsx
new file mode 100644
index 0000000..4e3daad
--- /dev/null
+++ b/app/(tabs)/expenses/index.tsx
@@ -0,0 +1,32 @@
+import { StyleSheet } from 'react-native';
+
+import EditScreenInfo from '../../../components/EditScreenInfo';
+import { Text, View } from '../../../components/Themed';
+
+export default function SettleScreen() {
+  return (
+    <View style={styles.container}>
+      <Text style={styles.title}>Settle</Text>
+      <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
+      <EditScreenInfo path="app/(tabs)/expenses/index.tsx" />
+    </View>
+  );
+}
+
+const styles = StyleSheet.create({
+  container: {
+    marginTop: 48,
+    flex: 1,
+    alignItems: 'center',
+    justifyContent: 'center',
+  },
+  title: {
+    fontSize: 20,
+    fontWeight: 'bold',
+  },
+  separator: {
+    marginVertical: 30,
+    height: 1,
+    width: '80%',
+  },
+});
diff --git a/app/(tabs)/index/_layout.tsx b/app/(tabs)/index/_layout.tsx
new file mode 100644
index 0000000..7623a81
--- /dev/null
+++ b/app/(tabs)/index/_layout.tsx
@@ -0,0 +1,31 @@
+import { TopTabs } from "@bacons/expo-router-top-tabs";
+import { useColorScheme } from "react-native";
+import Colors from "../../../constants/Colors";
+
+export default function ListTabLayout() {
+  const colorScheme = useColorScheme();
+
+  return (
+    <TopTabs
+      options={{swipeEnabled: false}}
+      screenOptions={{
+        tabBarPressColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise,
+        tabBarIndicatorStyle: {backgroundColor: Colors[colorScheme ?? 'light'].topNavBarIndicatorColorTurquoise},
+      }}>
+      <TopTabs.Header>
+      </TopTabs.Header>
+      <TopTabs.Screen
+        name="index"
+        options={{
+          title: 'To Be Bought'
+        }}
+      />
+      <TopTabs.Screen
+        name="bought"
+        options={{
+          title: 'Bought'
+        }}
+      />
+    </TopTabs>
+  );
+}
\ No newline at end of file
diff --git a/app/(tabs)/expenses.tsx b/app/(tabs)/index/bought.tsx
similarity index 61%
rename from app/(tabs)/expenses.tsx
rename to app/(tabs)/index/bought.tsx
index 641c786..b6edd83 100644
--- a/app/(tabs)/expenses.tsx
+++ b/app/(tabs)/index/bought.tsx
@@ -1,20 +1,21 @@
 import { StyleSheet } from 'react-native';
 
-import EditScreenInfo from '../../components/EditScreenInfo';
-import { Text, View } from '../../components/Themed';
+import EditScreenInfo from '../../../components/EditScreenInfo';
+import { Text, View } from '../../../components/Themed';
 
-export default function ExpensesScreen() {
+export default function BoughtScreen() {
   return (
     <View style={styles.container}>
-      <Text style={styles.title}>Expenses</Text>
+      <Text style={styles.title}>Bought</Text>
       <View style={styles.separator} lightColor="#eee" darkColor="rgba(255,255,255,0.1)" />
-      <EditScreenInfo path="app/(tabs)/expenses.tsx" />
+      <EditScreenInfo path="app/(tabs)/index/bought.tsx" />
     </View>
   );
 }
 
 const styles = StyleSheet.create({
   container: {
+    marginTop: 48,
     flex: 1,
     alignItems: 'center',
     justifyContent: 'center',
diff --git a/app/(tabs)/index.tsx b/app/(tabs)/index/index.tsx
similarity index 95%
rename from app/(tabs)/index.tsx
rename to app/(tabs)/index/index.tsx
index b958fb6..3a8a57c 100644
--- a/app/(tabs)/index.tsx
+++ b/app/(tabs)/index/index.tsx
@@ -1,5 +1,5 @@
 import { StyleSheet } from 'react-native';
-import { Text, View, } from '../../components/Themed';
+import { Text, View, } from '../../../components/Themed';
 import { Component } from 'react';
 import { FlatList } from 'react-native-gesture-handler';
 import { FontAwesome5 } from '@expo/vector-icons';
@@ -86,10 +86,11 @@ function swipeHandler(dir: 'left' | 'right') {
   }
 }
 
-export default class ListScreen extends Component {
+export default class ToBeBoughtScreen extends Component {
   render() {
     return (
       <FlatList
+        style={{marginTop: 48}}
         data={DATA}
         renderItem={renderItem}
       />
diff --git a/constants/Colors.ts b/constants/Colors.ts
index 093e6b0..98a81de 100644
--- a/constants/Colors.ts
+++ b/constants/Colors.ts
@@ -2,6 +2,7 @@ const tintColorLight = '#000';
 const tintColorDark = '#fff';
 const tintColorTurquoise = 'rgba(92, 188, 169, 0.27)';
 const accentColorTurquoise = 'rgba(92, 188, 169)';
+const topNavBarIndicatorColorTurquoise = '#5CBCA9';
 
 export default {
   light: {
@@ -12,6 +13,7 @@ export default {
     tabIconSelected: tintColorLight,
     tabIconSelectedBackground: tintColorTurquoise,
     accentColor: accentColorTurquoise,
+    topNavBarIndicatorColorTurquoise: topNavBarIndicatorColorTurquoise,
   },
   dark: {
     text: '#fff',
@@ -20,5 +22,6 @@ export default {
     tabIconDefault: '#ccc',
     tabIconSelected: tintColorLight,
     tabIconSelectedBackground: tintColorTurquoise,
+    topNavBarIndicatorColorTurquoise: topNavBarIndicatorColorTurquoise,
   },
 };
diff --git a/package-lock.json b/package-lock.json
index b1d2050..257a138 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -8,6 +8,7 @@
       "name": "coshare",
       "version": "1.0.0",
       "dependencies": {
+        "@bacons/expo-router-top-tabs": "^0.1.0",
         "@expo/vector-icons": "^13.0.0",
         "@react-navigation/native": "^6.0.2",
         "buffer": "^6.0.3",
@@ -25,6 +26,7 @@
         "react-native": "0.72.6",
         "react-native-gesture-handler": "~2.12.0",
         "react-native-get-random-values": "^1.9.0",
+        "react-native-reanimated": "~3.3.0",
         "react-native-safe-area-context": "4.6.3",
         "react-native-screens": "~3.22.0",
         "react-native-web": "~0.19.6",
@@ -1398,6 +1400,20 @@
         "@babel/core": "^7.0.0-0"
       }
     },
+    "node_modules/@babel/plugin-transform-object-assign": {
+      "version": "7.22.5",
+      "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-assign/-/plugin-transform-object-assign-7.22.5.tgz",
+      "integrity": "sha512-iDhx9ARkXq4vhZ2CYOSnQXkmxkDgosLi3J8Z17mKz7LyzthtkdVchLD7WZ3aXeCuvJDOW3+1I5TpJmwIbF9MKQ==",
+      "dependencies": {
+        "@babel/helper-plugin-utils": "^7.22.5"
+      },
+      "engines": {
+        "node": ">=6.9.0"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0"
+      }
+    },
     "node_modules/@babel/plugin-transform-object-rest-spread": {
       "version": "7.22.15",
       "resolved": "https://registry.npmjs.org/@babel/plugin-transform-object-rest-spread/-/plugin-transform-object-rest-spread-7.22.15.tgz",
@@ -2026,6 +2042,22 @@
         "node": ">=6.9.0"
       }
     },
+    "node_modules/@bacons/expo-router-top-tabs": {
+      "version": "0.1.0",
+      "resolved": "https://registry.npmjs.org/@bacons/expo-router-top-tabs/-/expo-router-top-tabs-0.1.0.tgz",
+      "integrity": "sha512-ZuxVUxbmNgUkoy9K6JPovFfFP5jc/c0O8SWpsfhEIU5vOL4rI7HVeOcksg1fZqh9T3Kf1jova3JM1HBvxxPv9w==",
+      "dependencies": {
+        "@react-navigation/material-top-tabs": "6.3.0",
+        "react-native-collapsible-tab-view": "2.0.2",
+        "react-native-pager-view": "6.0.1",
+        "react-native-tab-view": "^3.3.0"
+      },
+      "peerDependencies": {
+        "expo-router": "~0.0.33",
+        "react-native": "*",
+        "react-native-reanimated": "~2.9.1"
+      }
+    },
     "node_modules/@bacons/react-views": {
       "version": "1.1.3",
       "resolved": "https://registry.npmjs.org/@bacons/react-views/-/react-views-1.1.3.tgz",
@@ -6353,6 +6385,22 @@
         "react-native-safe-area-context": ">= 3.0.0"
       }
     },
+    "node_modules/@react-navigation/material-top-tabs": {
+      "version": "6.3.0",
+      "resolved": "https://registry.npmjs.org/@react-navigation/material-top-tabs/-/material-top-tabs-6.3.0.tgz",
+      "integrity": "sha512-nv9c3WbmzuwYZqDkinP375aTYzQIXkCzAmpHRsVH3AjpF2Qc62oKDjWuSMFdRn3VPe3LAH/0P6yUzQSX/800yQ==",
+      "dependencies": {
+        "color": "^4.2.3",
+        "warn-once": "^0.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/native": "^6.0.0",
+        "react": "*",
+        "react-native": "*",
+        "react-native-pager-view": ">= 4.0.0",
+        "react-native-tab-view": ">= 3.0.0"
+      }
+    },
     "node_modules/@react-navigation/native": {
       "version": "6.1.9",
       "resolved": "https://registry.npmjs.org/@react-navigation/native/-/native-6.1.9.tgz",
@@ -15758,6 +15806,22 @@
         "react": "18.2.0"
       }
     },
+    "node_modules/react-native-collapsible-tab-view": {
+      "version": "2.0.2",
+      "resolved": "https://registry.npmjs.org/react-native-collapsible-tab-view/-/react-native-collapsible-tab-view-2.0.2.tgz",
+      "integrity": "sha512-83fme3FnMFIMIbhE6J7Iqmt2HG5q7A8d49X38VrSRegC1UG4sIAVjS3MSSVMgCip+WscqBc0aiJFQInTUzkUEw==",
+      "deprecated": "Deprecated in favor of v4",
+      "dependencies": {
+        "use-debounce": "^5.1.0"
+      },
+      "peerDependencies": {
+        "@react-navigation/material-top-tabs": "^5",
+        "@react-navigation/native": "^5",
+        "react": "*",
+        "react-native": "*",
+        "react-native-tab-view": "*"
+      }
+    },
     "node_modules/react-native-gesture-handler": {
       "version": "2.12.1",
       "resolved": "https://registry.npmjs.org/react-native-gesture-handler/-/react-native-gesture-handler-2.12.1.tgz",
@@ -15785,6 +15849,36 @@
         "react-native": ">=0.56"
       }
     },
+    "node_modules/react-native-pager-view": {
+      "version": "6.2.2",
+      "resolved": "https://registry.npmjs.org/react-native-pager-view/-/react-native-pager-view-6.2.2.tgz",
+      "integrity": "sha512-MLkJB7iP6v0Hd4/B4/R/gLCSE+YBtjxG/vHZYBDU+fI3U7HBYgKAg4o6ad8HxbKVcWWyRDNeeVRGISw1MUjlHw==",
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*"
+      }
+    },
+    "node_modules/react-native-reanimated": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/react-native-reanimated/-/react-native-reanimated-3.3.0.tgz",
+      "integrity": "sha512-LzfpPZ1qXBGy5BcUHqw3pBC0qSd22qXS3t8hWSbozXNrBkzMhhOrcILE/nEg/PHpNNp1xvGOW8NwpAMF006roQ==",
+      "dependencies": {
+        "@babel/plugin-transform-object-assign": "^7.16.7",
+        "@babel/preset-typescript": "^7.16.7",
+        "convert-source-map": "^2.0.0",
+        "invariant": "^2.2.4"
+      },
+      "peerDependencies": {
+        "@babel/core": "^7.0.0-0",
+        "@babel/plugin-proposal-nullish-coalescing-operator": "^7.0.0-0",
+        "@babel/plugin-proposal-optional-chaining": "^7.0.0-0",
+        "@babel/plugin-transform-arrow-functions": "^7.0.0-0",
+        "@babel/plugin-transform-shorthand-properties": "^7.0.0-0",
+        "@babel/plugin-transform-template-literals": "^7.0.0-0",
+        "react": "*",
+        "react-native": "*"
+      }
+    },
     "node_modules/react-native-safe-area-context": {
       "version": "4.6.3",
       "resolved": "https://registry.npmjs.org/react-native-safe-area-context/-/react-native-safe-area-context-4.6.3.tgz",
@@ -15807,6 +15901,19 @@
         "react-native": "*"
       }
     },
+    "node_modules/react-native-tab-view": {
+      "version": "3.5.2",
+      "resolved": "https://registry.npmjs.org/react-native-tab-view/-/react-native-tab-view-3.5.2.tgz",
+      "integrity": "sha512-nE5WqjbeEPsWQx4mtz81QGVvgHRhujTNIIZiMCx3Bj6CBFDafbk7XZp9ocmtzXUQaZ4bhtVS43R4FIiR4LboJw==",
+      "dependencies": {
+        "use-latest-callback": "^0.1.5"
+      },
+      "peerDependencies": {
+        "react": "*",
+        "react-native": "*",
+        "react-native-pager-view": "*"
+      }
+    },
     "node_modules/react-native-web": {
       "version": "0.19.9",
       "resolved": "https://registry.npmjs.org/react-native-web/-/react-native-web-0.19.9.tgz",
@@ -17416,6 +17523,17 @@
         "url": "https://github.com/sponsors/ljharb"
       }
     },
+    "node_modules/use-debounce": {
+      "version": "5.2.1",
+      "resolved": "https://registry.npmjs.org/use-debounce/-/use-debounce-5.2.1.tgz",
+      "integrity": "sha512-BQG5uEypYHd/ASF6imzYR8tJHh5qGn28oZG/5iVAbljV6MUrfyT4jzxA8co+L+WLCT1U8VBwzzvlb3CHmUDpEA==",
+      "engines": {
+        "node": ">= 10.0.0"
+      },
+      "peerDependencies": {
+        "react": ">=16.8.0"
+      }
+    },
     "node_modules/use-latest-callback": {
       "version": "0.1.7",
       "resolved": "https://registry.npmjs.org/use-latest-callback/-/use-latest-callback-0.1.7.tgz",
diff --git a/package.json b/package.json
index 619a9bd..9e1bcc5 100644
--- a/package.json
+++ b/package.json
@@ -13,6 +13,7 @@
     "preset": "jest-expo"
   },
   "dependencies": {
+    "@bacons/expo-router-top-tabs": "^0.1.0",
     "@expo/vector-icons": "^13.0.0",
     "@react-navigation/native": "^6.0.2",
     "buffer": "^6.0.3",
@@ -30,6 +31,7 @@
     "react-native": "0.72.6",
     "react-native-gesture-handler": "~2.12.0",
     "react-native-get-random-values": "^1.9.0",
+    "react-native-reanimated": "~3.3.0",
     "react-native-safe-area-context": "4.6.3",
     "react-native-screens": "~3.22.0",
     "react-native-web": "~0.19.6",
@@ -46,7 +48,12 @@
     "typescript": "^5.1.3"
   },
   "overrides": {
-    "react-refresh": "~0.14.0"
+    "react-refresh": "~0.14.0",
+    "@bacons/expo-router-top-tabs": {
+      "expo-router": "^2.0.0",
+      "react-native-reanimated": "^3.0.0",
+      "react-native-pager-view": "6.2.2"
+    }
   },
   "resolutions": {
     "react-refresh": "~0.14.0"