diff --git a/app/new.tsx b/app/new.tsx
new file mode 100644
index 0000000..fb5c7f6
--- /dev/null
+++ b/app/new.tsx
@@ -0,0 +1,24 @@
+import Composer from "@/src/components/Composer";
+import { StyleSheet, View } from "react-native";
+
+const styles = StyleSheet.create({
+  container: {
+    alignItems: 'center',
+    justifyContent: 'center',
+    flex: 1,
+    backgroundColor: "#19191946"
+  },
+  wrapper: {
+    width: 500,
+    flex: 1,
+    justifyContent: 'center',
+  },
+})
+
+export default function NewPostPage() {
+  return <View style={styles.container}>
+    <View style={styles.wrapper}>
+      <Composer />
+    </View>
+  </View>
+}
\ No newline at end of file
diff --git a/src/components/Composer.tsx b/src/components/Composer.tsx
new file mode 100644
index 0000000..2b2d59f
--- /dev/null
+++ b/src/components/Composer.tsx
@@ -0,0 +1,74 @@
+import { StyleSheet, TextInput, View } from "react-native";
+import { Text } from "./primitive/Text";
+import { useContext, useEffect, useMemo, useState } from "react";
+import { AuthContext } from "../context/AuthContext";
+import { Profile, resolveProfile } from "../lib/profile";
+
+const styles = StyleSheet.create({
+  composerHeader: {
+    backgroundColor: "#434343",
+    borderTopRightRadius: 5,
+    borderTopLeftRadius: 5,
+    padding: 10,
+    paddingHorizontal: 15,
+    display: "flex",
+    flexDirection: "row",
+    alignItems: "center",
+    gap: 10,
+
+    borderBottomWidth: 1,
+    borderColor: "#313131",
+  },
+
+  composerBody: {
+    backgroundColor: "#434343",
+    padding: 10,
+    paddingHorizontal: 15,
+    gap: 10,
+
+    borderBottomWidth: 1,
+    borderColor: "#313131",
+  },
+  composerEditBox: {
+    color: "#fff",
+  },
+});
+
+function ComposerHeader() {
+  const authCtx = useContext(AuthContext);
+
+  const [profile, setProfile] = useState<Profile | undefined>();
+  useEffect(() => {
+    resolveProfile(authCtx.agent?.did!).then((profile) => setProfile(profile));
+  }, [authCtx]);
+
+  return (
+    <View style={styles.composerHeader}>
+      <Text>writing as {profile?.handle}</Text>
+    </View>
+  );
+}
+
+function ComposerBody() {
+  const [height, setHeight] = useState(0)
+
+  return (
+    <View style={styles.composerBody}>
+      <TextInput
+        style={[styles.composerEditBox, { height: Math.max(height, 200) }]}
+        onContentSizeChange={(event) => { setHeight(event.nativeEvent.contentSize.height) }}
+        editable
+        multiline
+      />
+    </View>
+  );
+}
+
+export default function Composer() {
+  return (
+    <View>
+      <ComposerHeader />
+      <ComposerBody />
+    </View>
+  );
+}