diff --git a/assets/images/avatar-default.svg b/assets/images/avatar-default.svg
new file mode 100644
index 0000000..790dfec
--- /dev/null
+++ b/assets/images/avatar-default.svg
@@ -0,0 +1,34 @@
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<!-- Created with Inkscape (http://www.inkscape.org/) -->
+
+<svg
+   width="50"
+   height="50"
+   viewBox="0 0 13.229167 13.229167"
+   version="1.1"
+   id="svg1"
+   xmlns="http://www.w3.org/2000/svg"
+   xmlns:svg="http://www.w3.org/2000/svg">
+  <defs
+     id="defs1" />
+  <g
+     id="layer1">
+    <circle
+       style="fill:#8ab5db;fill-opacity:1;stroke-width:0.900001;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
+       id="path1"
+       cx="6.6145825"
+       cy="6.6145825"
+       r="6.6145825" />
+    <ellipse
+       style="fill:#c0d1e9;fill-opacity:1;stroke-width:1.30209;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
+       id="path2"
+       cx="6.614583"
+       cy="6.614583"
+       rx="6.0854158"
+       ry="6.1400084" />
+    <path
+       style="fill:#628dc9;fill-opacity:1;stroke-width:0.900001;stroke-linecap:round;stroke-linejoin:round;paint-order:markers stroke fill"
+       d="m 2.6458331,10.847916 c 0,0 2.9104165,-0.529167 2.9104165,-2.38125 0,-1.1281474 -2.1166665,-1.3229166 -2.1166665,-2.1166665 0,-0.7699506 -0.4390914,-3.5296583 0.5291666,-4.4979163 0.7937499,-0.79375 3.5740132,-1.01832181 4.4979163,0 0.9239032,1.0183217 1.3300425,4.7928397 0.2645833,5.0270829 -0.6554108,0.1440933 -1.0583332,0.5934674 -1.0583332,1.5874999 0,1.852083 2.9104169,2.38125 2.9104169,2.38125 -3.5889527,2.829358 -5.7160315,1.273094 -7.9374999,0 z"
+       id="path3" />
+  </g>
+</svg>
diff --git a/src/components/FeedPost.tsx b/src/components/FeedPost.tsx
index 086c25c..1508ced 100644
--- a/src/components/FeedPost.tsx
+++ b/src/components/FeedPost.tsx
@@ -1,9 +1,69 @@
-import { View } from "react-native";
+import { Pressable, StyleSheet, View } from "react-native";
 import { Post } from "../lib/post";
 import { Text } from "./primitive/Text";
+import { Profile } from "../lib/profile";
+import { Image } from "expo-image";
+import { useState } from "react";
+import { useRouter } from "expo-router";
+
+const styles = StyleSheet.create({
+  postHeader: {
+      backgroundColor: '#434343',
+      borderTopRightRadius: 5,
+      borderTopLeftRadius: 5,
+      padding: 10,
+      paddingHorizontal: 15,
+      margin: 0,
+      display: 'flex',
+      flexDirection: 'row',
+      alignItems: 'center',
+      gap: 10
+  },
+  postHeaderHovered: {
+    backgroundColor: '#5a5a5a'
+  },
+
+  postBody: {
+      backgroundColor: '#434343',
+      padding: 10,
+      paddingHorizontal: 15,
+      margin: 0,
+      gap: 10,
+
+      borderTopWidth: 1,
+      borderBottomWidth: 1,
+      borderColor: '#313131'
+  }
+})
+
+function PostHeader({ profile }: { profile: Profile }) {
+  const [hovered, setHovered] = useState(false)
+  
+  const router = useRouter()
+  const onPress = () => {
+    // TODO: This should go to the post, not the author's page
+    router.navigate(`/blog/${profile.handle}`)
+  }
+
+  return <Pressable
+    style={[styles.postHeader, hovered ? styles.postHeaderHovered : []]}
+    onHoverIn={() => setHovered(true)}
+    onHoverOut={() => setHovered(false)}
+    onPress={onPress}>
+    <Image style={{ width: 25, height: 25 }} source={ require("@/assets/images/avatar-default.svg") } />
+    <Text style={{ fontSize: 16, fontWeight: 500 }}>{profile.handle}</Text>
+  </Pressable>
+}
+
+function PostBody({ post } : { post: Post }) {
+  return (post.text !== '') && <View style={[styles.postBody]}>
+    <Text>{post.text}</Text>
+  </View>
+}
 
 export default function FeedPost({ post }: { post: Post }) {
   return <View>
-    <Text>{post.text}</Text>
-  </View>;
+    <PostHeader profile={post.author} />
+    <PostBody post={post} />
+  </View>
 }