diff --git a/app/navigators/AppNavigator.tsx b/app/navigators/AppNavigator.tsx
index 365aee4d..bdb8c425 100644
--- a/app/navigators/AppNavigator.tsx
+++ b/app/navigators/AppNavigator.tsx
@@ -30,6 +30,7 @@ import { TabNavigator } from "./TabNavigator"
 export type AppStackParamList = {
   Home: undefined
   Tabs: undefined
+  HomeMessages: undefined
 }
 
 /**
diff --git a/app/navigators/TabNavigator.tsx b/app/navigators/TabNavigator.tsx
index 89c529f6..ff961105 100644
--- a/app/navigators/TabNavigator.tsx
+++ b/app/navigators/TabNavigator.tsx
@@ -4,7 +4,7 @@ import React from "react"
 import { TextStyle, ViewStyle } from "react-native"
 import { useSafeAreaInsets } from "react-native-safe-area-context"
 import { Icon } from "../components"
-import { BlankScreen } from "../screens"
+import { HomeMessagesScreen, BlankScreen } from "../screens"
 import { colors, spacing, typography } from "../theme"
 import { AppStackParamList, AppStackScreenProps } from "./AppNavigator"
 
@@ -29,7 +29,7 @@ export type DemoTabScreenProps<T extends keyof DemoTabParamList> = CompositeScre
 
 const Tab = createBottomTabNavigator<DemoTabParamList>()
 
-const inactiveIconColor = colors.textDim
+const inactiveIconColor = colors.palette.cyan950
 
 export function TabNavigator() {
   const { bottom } = useSafeAreaInsets()
@@ -44,15 +44,16 @@ export function TabNavigator() {
         tabBarInactiveTintColor: colors.text,
         tabBarLabelStyle: $tabBarLabel,
         tabBarItemStyle: $tabBarItem,
+        tabBarShowLabel: false,
       }}
     >
       <Tab.Screen
         name="Home"
-        component={BlankScreen}
+        component={HomeMessagesScreen}
         options={{
           tabBarLabel: "Home",
           tabBarIcon: ({ focused }) => (
-            <Icon icon="Home" color={focused ? colors.tint : inactiveIconColor} size={30} />
+            <Icon icon="Home" color={focused ? colors.tint : inactiveIconColor} size={24} />
           ),
         }}
       />
@@ -62,7 +63,7 @@ export function TabNavigator() {
         options={{
           tabBarLabel: "Feed",
           tabBarIcon: ({ focused }) => (
-            <Icon icon="Rss" color={focused ? colors.tint : inactiveIconColor} size={30} />
+            <Icon icon="Rss" color={focused ? colors.tint : inactiveIconColor} size={24} />
           ),
         }}
       />
@@ -73,7 +74,7 @@ export function TabNavigator() {
         options={{
           tabBarLabel: "Create",
           tabBarIcon: ({ focused }) => (
-            <Icon icon="PlusCircle" color={focused ? colors.tint : inactiveIconColor} size={30} />
+            <Icon icon="PlusCircle" color={focused ? colors.tint : inactiveIconColor} size={24} />
           ),
         }}
       />
@@ -83,7 +84,7 @@ export function TabNavigator() {
         options={{
           tabBarLabel: "Discover",
           tabBarIcon: ({ focused }) => (
-            <Icon icon="Search" color={focused ? colors.tint : inactiveIconColor} size={30} />
+            <Icon icon="Search" color={focused ? colors.tint : inactiveIconColor} size={24} />
           ),
         }}
       />
diff --git a/app/screens/HomeMessagesScreen.tsx b/app/screens/HomeMessagesScreen.tsx
new file mode 100644
index 00000000..7800d1ae
--- /dev/null
+++ b/app/screens/HomeMessagesScreen.tsx
@@ -0,0 +1,295 @@
+import React, { FC, useState } from "react"
+import { observer } from "mobx-react-lite"
+import { View, ViewStyle, ImageStyle, TextStyle } from "react-native"
+import { NativeStackScreenProps } from "@react-navigation/native-stack"
+import { AppStackScreenProps } from "app/navigators"
+import { AutoImage, Button, Screen, Text, TextField } from "app/components"
+import { spacing, colors } from "app/theme"
+import { ChevronDownIcon, PlusIcon, SearchIcon } from "lucide-react-native"
+import { FlashList } from "@shopify/flash-list"
+// import { useNavigation } from "@react-navigation/native"
+// import { useStores } from "app/models"
+
+interface HomeMessagesScreenProps
+  extends NativeStackScreenProps<AppStackScreenProps<"HomeMessages">> {}
+
+// #TODO: Replace with real data
+const DumpChannels = [
+  "https://ui-avatars.com/api/?name=a1&background=random&size=200",
+  "https://ui-avatars.com/api/?name=a2&background=random&size=200",
+  "https://ui-avatars.com/api/?name=a3&background=random&size=200",
+  "https://ui-avatars.com/api/?name=a4&background=random&size=200",
+  "https://ui-avatars.com/api/?name=a5&background=random&size=200",
+]
+
+const DumpMessages = [
+  {
+    picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp",
+    name: "Satoshi Nakamoto",
+    content: "#bitcoin",
+  },
+  {
+    picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp",
+    name: "Design Review Chat",
+    content: "Document",
+  },
+  {
+    picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp",
+    name: "R4IN80W",
+    content: "That is how you do it!",
+  },
+  {
+    picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp",
+    name: "480 Design",
+    content: "Check out this new claymorphism design!",
+  },
+  {
+    picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp",
+    name: "help! I'm in the hole",
+    content: "🎉",
+  },
+  {
+    picture: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp",
+    name: "Pleb",
+    content: "You: GM!",
+  },
+]
+
+export const HomeMessagesScreen: FC<HomeMessagesScreenProps> = observer(
+  function HomeMessagesScreen() {
+    const [toggleSearch, setToggleSearch] = useState(false)
+
+    // Pull in one of our MST stores
+    // const { someStore, anotherStore } = useStores()
+
+    // Pull in navigation via hook
+    // const navigation = useNavigation()
+
+    return (
+      <Screen contentContainerStyle={$root} preset="fixed" safeAreaEdges={["top"]}>
+        <View style={[$root, $container]}>
+          <View style={$sidebar}>
+            <View style={$pinList}>
+              <View style={$dms} />
+              <View>
+                <AutoImage
+                  source={{ uri: "https://void.cat/d/MsqUKXXC4SxDfmT2KiHovJ.webp" }}
+                  style={$channelImage}
+                />
+              </View>
+            </View>
+            <View style={$divider} />
+            <View>
+              <FlashList
+                data={DumpChannels}
+                renderItem={({ item }) => (
+                  <View style={$channelItem}>
+                    <AutoImage
+                      source={{
+                        uri: item,
+                      }}
+                      style={$channelImage}
+                    />
+                  </View>
+                )}
+                ListFooterComponent={() => (
+                  <View>
+                    <Button
+                      onPress={() => alert("Create a new channel")}
+                      LeftAccessory={() => <PlusIcon style={{ color: colors.text }} />}
+                      style={$channelButton}
+                    />
+                  </View>
+                )}
+                estimatedItemSize={50}
+              />
+            </View>
+          </View>
+          <View style={$main}>
+            <View style={$mainHeader}>
+              <Text text="Messages" preset="bold" size="lg" />
+              <Button
+                onPress={() => setToggleSearch((prev) => !prev)}
+                LeftAccessory={() => (
+                  <SearchIcon width={20} height={20} style={{ color: colors.palette.cyan800 }} />
+                )}
+                style={$searchButton}
+                pressedStyle={$searchButtonPressed}
+              />
+            </View>
+            {toggleSearch && (
+              <TextField
+                placeholder="Search..."
+                placeholderTextColor={colors.palette.cyan500}
+                inputWrapperStyle={$searchField}
+              />
+            )}
+            <View style={$filter}>
+              <Text text="Active Contacts" preset="default" />
+              <ChevronDownIcon style={{ color: colors.palette.cyan800 }} />
+            </View>
+            <View style={$messsages}>
+              <FlashList
+                data={DumpMessages}
+                renderItem={({ item }) => (
+                  <View style={$messageItem}>
+                    <AutoImage
+                      source={{ uri: "https://void.cat/d/KmypFh2fBdYCEvyJrPiN89.webp" }}
+                      style={$messageItemAvatar}
+                    />
+                    <View>
+                      <Text text={item.name} preset="bold" style={$messageItemName} />
+                      <Text
+                        text={item.content}
+                        size="xs"
+                        numberOfLines={1}
+                        style={$messageItemContent}
+                      />
+                    </View>
+                  </View>
+                )}
+                estimatedItemSize={50}
+              />
+            </View>
+          </View>
+        </View>
+      </Screen>
+    )
+  },
+)
+
+const $root: ViewStyle = {
+  flex: 1,
+}
+
+const $container: ViewStyle = {
+  flexDirection: "row",
+  flexWrap: "wrap",
+}
+
+const $sidebar: ViewStyle = {
+  width: 72,
+  height: "100%",
+  flexShrink: 0,
+  alignItems: "center",
+}
+
+const $main: ViewStyle = {
+  flex: 1,
+  flexDirection: "column",
+  gap: spacing.small,
+  width: "100%",
+  height: "100%",
+  paddingHorizontal: spacing.tiny,
+}
+
+const $pinList: ViewStyle = {
+  gap: spacing.small,
+}
+
+const $divider: ViewStyle = {
+  width: "50%",
+  height: 2,
+  backgroundColor: colors.palette.cyan500,
+  borderRadius: 2,
+  marginVertical: spacing.small,
+  alignSelf: "center",
+}
+
+const $dms: ViewStyle = {
+  backgroundColor: colors.palette.cyan400,
+  borderRadius: 100,
+  width: 50,
+  height: 50,
+}
+
+const $channelItem: ViewStyle = {
+  marginBottom: spacing.small,
+}
+
+const $channelImage: ImageStyle = {
+  backgroundColor: colors.palette.cyan100,
+  borderRadius: 100,
+  width: 50,
+  height: 50,
+}
+
+const $channelButton: ViewStyle = {
+  backgroundColor: colors.palette.cyan500,
+  borderWidth: 0,
+  borderRadius: 100,
+  width: 50,
+  height: 50,
+  minHeight: 50,
+}
+
+const $filter: ViewStyle = {
+  paddingHorizontal: spacing.small,
+  height: 40,
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+  borderWidth: 1,
+  borderColor: colors.palette.cyan900,
+  borderRadius: spacing.small / 2,
+  backgroundColor: colors.palette.overlay20,
+}
+
+const $mainHeader: ViewStyle = {
+  flexDirection: "row",
+  alignItems: "center",
+  justifyContent: "space-between",
+}
+
+const $searchButton: ViewStyle = {
+  padding: 0,
+  margin: 0,
+  backgroundColor: "transparent",
+  borderWidth: 0,
+  minHeight: 0,
+}
+
+const $searchButtonPressed: ViewStyle = {
+  backgroundColor: colors.palette.cyan900,
+}
+
+const $searchField: ViewStyle = {
+  borderWidth: 1,
+  borderColor: colors.palette.cyan900,
+  borderRadius: spacing.small / 2,
+  backgroundColor: colors.palette.overlay20,
+}
+
+const $messsages: ViewStyle = {
+  flex: 1,
+  paddingVertical: spacing.extraSmall,
+  paddingHorizontal: spacing.small,
+  borderWidth: 1,
+  borderColor: colors.palette.cyan500,
+  borderRadius: spacing.small / 2,
+  backgroundColor: colors.palette.overlay20,
+}
+
+const $messageItem: ViewStyle = {
+  flex: 1,
+  flexDirection: "row",
+  alignItems: "center",
+  paddingVertical: spacing.extraSmall,
+}
+
+const $messageItemAvatar: ImageStyle = {
+  width: 44,
+  height: 44,
+  borderRadius: 100,
+  marginRight: spacing.small,
+}
+
+const $messageItemName: TextStyle = {
+  lineHeight: 0,
+}
+
+const $messageItemContent: TextStyle = {
+  width: 200,
+  lineHeight: 0,
+  color: colors.palette.cyan700,
+}
diff --git a/app/screens/index.ts b/app/screens/index.ts
index 4984de59..e1380435 100644
--- a/app/screens/index.ts
+++ b/app/screens/index.ts
@@ -1,3 +1,4 @@
 export * from "./ErrorScreen/ErrorBoundary"
 export * from "./BlankScreen"
 export * from "./HomeScreen"
+export * from "./HomeMessagesScreen"
diff --git a/app/theme/colors.ts b/app/theme/colors.ts
index f11f4944..a09306bd 100644
--- a/app/theme/colors.ts
+++ b/app/theme/colors.ts
@@ -1,7 +1,7 @@
 // TODO: write documentation for colors and palette in own markdown file and add links from here
 
 const palette = {
-  almostBlack: "#141718",
+  almostBlack: "#030303",
 
   neutral100: "#FFFFFF",
   neutral200: "#F4F2F1",
@@ -32,10 +32,22 @@ const palette = {
   accent400: "#FBC878",
   accent500: "#FFBB50",
 
+  cyan50: "#ecfeff",
+  cyan100: "#cffafe",
+  cyan200: "#a5f3fc",
+  cyan300: "#67e8f9",
+  cyan400: "#22d3ee",
+  cyan500: "#06b6d4",
+  cyan600: "#0891b2",
+  cyan700: "#0e7490",
+  cyan800: "#155e75",
+  cyan900: "#164e63",
+  cyan950: "#083344",
+
   angry100: "#F2D6CD",
   angry500: "#C03403",
 
-  overlay20: "rgba(25, 16, 21, 0.2)",
+  overlay20: "rgba(69, 210, 255, 0.11)",
   overlay50: "rgba(25, 16, 21, 0.5)",
 } as const
 
diff --git a/ios/Podfile.lock b/ios/Podfile.lock
index 597ed0fc..d170ef8d 100644
--- a/ios/Podfile.lock
+++ b/ios/Podfile.lock
@@ -446,6 +446,8 @@ PODS:
     - React-Core
   - RNCAsyncStorage (1.17.11):
     - React-Core
+  - RNFlashList (1.4.3):
+    - React-Core
   - RNGestureHandler (2.9.0):
     - React-Core
   - RNReanimated (2.14.4):
@@ -557,6 +559,7 @@ DEPENDENCIES:
   - ReactCommon/turbomodule/core (from `../node_modules/react-native/ReactCommon`)
   - RNBootSplash (from `../node_modules/react-native-bootsplash`)
   - "RNCAsyncStorage (from `../node_modules/@react-native-async-storage/async-storage`)"
+  - "RNFlashList (from `../node_modules/@shopify/flash-list`)"
   - RNGestureHandler (from `../node_modules/react-native-gesture-handler`)
   - RNReanimated (from `../node_modules/react-native-reanimated`)
   - RNScreens (from `../node_modules/react-native-screens`)
@@ -674,6 +677,8 @@ EXTERNAL SOURCES:
     :path: "../node_modules/react-native-bootsplash"
   RNCAsyncStorage:
     :path: "../node_modules/@react-native-async-storage/async-storage"
+  RNFlashList:
+    :path: "../node_modules/@shopify/flash-list"
   RNGestureHandler:
     :path: "../node_modules/react-native-gesture-handler"
   RNReanimated:
@@ -745,6 +750,7 @@ SPEC CHECKSUMS:
   ReactCommon: dbfbe2f7f3c5ce4ce44f43f2fd0d5950d1eb67c5
   RNBootSplash: 364ec0f6a61d96bce40e8630d80d949c214a5749
   RNCAsyncStorage: 8616bd5a58af409453ea4e1b246521bb76578d60
+  RNFlashList: ade81b4e928ebd585dd492014d40fb8d0e848aab
   RNGestureHandler: 071d7a9ad81e8b83fe7663b303d132406a7d8f39
   RNReanimated: cc5e3aa479cb9170bcccf8204291a6950a3be128
   RNScreens: 218801c16a2782546d30bd2026bb625c0302d70f
@@ -755,4 +761,4 @@ SPEC CHECKSUMS:
 
 PODFILE CHECKSUM: 3318e632f7773b31a4fa096b74dfc3e49b55c542
 
-COCOAPODS: 1.12.1
+COCOAPODS: 1.11.3
diff --git a/package.json b/package.json
index 4f6ac5dc..7b6590a6 100644
--- a/package.json
+++ b/package.json
@@ -40,6 +40,7 @@
     "@react-navigation/bottom-tabs": "^6.3.2",
     "@react-navigation/native": "^6.0.2",
     "@react-navigation/native-stack": "^6.0.2",
+    "@shopify/flash-list": "^1.4.3",
     "apisauce": "2.1.5",
     "date-fns": "^2.29.2",
     "expo": "^48.0.15",
diff --git a/yarn.lock b/yarn.lock
index 10361837..b3be77ad 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -2241,6 +2241,14 @@
     component-type "^1.2.1"
     join-component "^1.1.0"
 
+"@shopify/flash-list@^1.4.3":
+  version "1.4.3"
+  resolved "https://registry.yarnpkg.com/@shopify/flash-list/-/flash-list-1.4.3.tgz#b7a4fe03d64f3c5ce9646859b49b9d95307f203d"
+  integrity sha512-jtIReAbwWzYBV0dQ6Io9wBX+pD0C4qQFMrb5/fkEvX8PYDgBl5KRYvpfr9WLLj8CV2Jsn1X0mYOsB+ysWrI/8g==
+  dependencies:
+    recyclerlistview "4.2.0"
+    tslib "2.4.0"
+
 "@sideway/address@^4.1.3":
   version "4.1.4"
   resolved "https://registry.yarnpkg.com/@sideway/address/-/address-4.1.4.tgz#03dccebc6ea47fdc226f7d3d1ad512955d4783f0"
@@ -7894,7 +7902,7 @@ locate-path@^6.0.0:
   dependencies:
     p-locate "^5.0.0"
 
-lodash.debounce@^4.0.8:
+lodash.debounce@4.0.8, lodash.debounce@^4.0.8:
   version "4.0.8"
   resolved "https://registry.yarnpkg.com/lodash.debounce/-/lodash.debounce-4.0.8.tgz#82d79bff30a67c4005ffd5e2515300ad9ca4d7af"
   integrity sha512-FT1yDzDYEoYWhnSGnpE/4Kj1fLZkDFyqRb7fNt6FdYOSxlUWAtp42Eh6Wb0rGIv/m9Bgo7x4GhQbm5Ys4SG5ow==
@@ -10043,7 +10051,7 @@ prompts@^2.0.1, prompts@^2.2.1, prompts@^2.3.2, prompts@^2.4.0:
     kleur "^3.0.3"
     sisteransi "^1.0.5"
 
-prop-types@*, prop-types@^15.7.2, prop-types@^15.8.1:
+prop-types@*, prop-types@15.8.1, prop-types@^15.7.2, prop-types@^15.8.1:
   version "15.8.1"
   resolved "https://registry.yarnpkg.com/prop-types/-/prop-types-15.8.1.tgz#67d87bf1a694f48435cf332c24af10214a3140b5"
   integrity sha512-oj87CgZICdulUohogVAR7AjlC0327U4el4L6eAvOqCeudMDVU0NThNaV+b9Df4dXgSP1gXMTnPdhfe/2qDH5cg==
@@ -10472,6 +10480,15 @@ recast@^0.20.4:
     source-map "~0.6.1"
     tslib "^2.0.1"
 
+recyclerlistview@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/recyclerlistview/-/recyclerlistview-4.2.0.tgz#a140149aaa470c9787a1426452651934240d69ef"
+  integrity sha512-uuBCi0c+ggqHKwrzPX4Z/mJOzsBbjZEAwGGmlwpD/sD7raXixdAbdJ6BTcAmuWG50Cg4ru9p12M94Njwhr/27A==
+  dependencies:
+    lodash.debounce "4.0.8"
+    prop-types "15.8.1"
+    ts-object-utils "0.0.5"
+
 regenerate-unicode-properties@^10.1.0:
   version "10.1.0"
   resolved "https://registry.yarnpkg.com/regenerate-unicode-properties/-/regenerate-unicode-properties-10.1.0.tgz#7c3192cab6dd24e21cb4461e5ddd7dd24fa8374c"
@@ -11896,6 +11913,11 @@ ts-jest@29:
     semver "7.x"
     yargs-parser "^21.0.1"
 
+ts-object-utils@0.0.5:
+  version "0.0.5"
+  resolved "https://registry.yarnpkg.com/ts-object-utils/-/ts-object-utils-0.0.5.tgz#95361cdecd7e52167cfc5e634c76345e90a26077"
+  integrity sha512-iV0GvHqOmilbIKJsfyfJY9/dNHCs969z3so90dQWsO1eMMozvTpnB1MEaUbb3FYtZTGjv5sIy/xmslEz0Rg2TA==
+
 tsconfig-paths@^3.14.1:
   version "3.14.2"
   resolved "https://registry.yarnpkg.com/tsconfig-paths/-/tsconfig-paths-3.14.2.tgz#6e32f1f79412decd261f92d633a9dc1cfa99f088"
@@ -11906,6 +11928,11 @@ tsconfig-paths@^3.14.1:
     minimist "^1.2.6"
     strip-bom "^3.0.0"
 
+tslib@2.4.0:
+  version "2.4.0"
+  resolved "https://registry.yarnpkg.com/tslib/-/tslib-2.4.0.tgz#7cecaa7f073ce680a05847aa77be941098f36dc3"
+  integrity sha512-d6xOpEDfsi2CZVlPQzGeux8XMwLT9hssAsaPYExaQMuYskwb+x1x7J371tWlbBdWHroy99KnVB6qIkUbs5X3UQ==
+
 tslib@^1.8.1:
   version "1.14.1"
   resolved "https://registry.yarnpkg.com/tslib/-/tslib-1.14.1.tgz#cf2d38bdc34a134bcaf1091c41f6619e2f672d00"